I am coding a page with a banner at the top which should contain a series of buttons. The following code works in all but the buttons are taking a new line when they should appear side by side. I know that div automatically takes a new line and that I should use span, but when I do it doesn't stretch the banner to fit the button like it does with a div. I have tried using several variations of float but to no avail.
<style type="text/css" media=screen>
body{
margin: 0px;
padding: 0px;
color: #000;
font-family: helvetica, times;
font-size: 14px;
}
#wrapper{
position: absolute;
height: 100%;
width: 100%;
text-align:center;
}
#banner{
background: url('images/banner_background.png');
position: relative;
margin: 0;
width: 100%;
color: #FFFFFF;
z-index: 3;
}
#banner #button {
padding:10px;
margin:auto;
position: relative;
background: url('images/button.png');
height: 100%;
z-index: 4;
width:100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="banner">
<div id="button">
dfsdfsfdsdfs
</div>
<div id="button">
sddfdfdsf
</div>
</div>
</div>
To have the padding still work on an inline element like a span, you would have to set it to display: inline-block - it will still be in the text flow, unlike block elements, but accept width/height, padding and margin the same way an image does. Images are inline-blocks by default.
CSS:
#banner .button {
display: inline-block;
padding:10px;
margin:auto;
position: relative;
background: url('images/button.png');
height: 100%;
z-index: 4;
width:100px;
}
HTML:
<span class="button">
sddfdfdsf
</span>
<span class="button">
sddfdfdsf
</span>
Important: IDs are unique to a single element. If you have multiple buttons, use classes. I adjusted that as well.
Make your <div>-s inline-block - DEMO
Also ID-s should be unique.
And if you need buttons, then you have to use the <button> tag - it just makes more semantic sense. And it can be styled anything you want - DEMO
You should use display: inline for a div rather than using a span.
div set the display to be block by default, while span to be inline. You can't set padding or margin values to span because it is designed to be used in a lighter way (e.g., underline or italic for some words). So it's better to use div if you can do so and set attributes like display: inline to meet with the special needs.
Related
So I currently have the following HTML/CSS:
<style type="text/css">
body {
background: #eeeeee;
}
.table {
display: table;
margin: 0px auto;
max-width: 400px;
position: relative;
}
.row {
display: table-row;
max-width: 400px;
}
.td1,
.td2 {
display: table-cell;
border: 2px #aaaaaa solid;
padding: 15px;
background: #ffffff;
font-size: 18px;
color: #333333;
}
.td2 {
border-top: none;
color: #777777;
position: absolute;
max-width: 400px;
right: 0px;
left: 0px;
}
.under_div {
position: relative;
}
</style>
<body>
<div class="table">
<div class="row">
<div class="td1">Some random text that changes and can change the height of this div/td</div>
</div>
<div class="row">
<div class="td2">Some random text that changes and can change the height of this div/td</div>
</div>
<div class="row">
<div class="under_div">
<p>Some random text that remains the same always
</div>
</div>
</div>
</body>
My problem is that the second td (td2) needs to be position: absolute. There is a reason why it is so, so therefore it just can't be a regular div, as that would make this much easier :)
So, as you can see the next in the under_div is occupying the same space as the td2div. What I would like is for that to right under the td2div. In principle I could just try to position it so that it fits right under. But as stated in text of the divs the text changes, and therefore the height will be random for both the td1 and td2 divs.
So is there a way where I can stack the under_div div just under the td2 div where it of course follows along according to whatever size the two other divs have, and not just stick around in one position ?
I have tried just making another table-div after the first one. But that doesn't seem to do anything either...
I think you need to rethink your design a little as I don't think it's possible to do this with an absolutely positioned element. You can accomplish what I believe you want using float and clear. An example jsfiddle is here.
I'm trying to float three elements, no problem there. However in the two outside boxes I need to position an element vertically in the center, so I thought I would wrap them both in another div, float the wrapping divs and then absolute position the elements inside them and set the wrapping elements to position: relative; so it wouldn't mess with the layout and the three elements would stay floated correctly.
However it doesn't seem to have happened that way, the middle element still seems to get shoved all the way to the left.
My CSS:
.line_wrap {
float: left;
position: relative;
width: 366px;
min-width: 366px;
max-width: 366px;
}
.line_wrap .line {
position: absolute;
top: 25px;
left: 0;
width: 366px;
min-width: 366px;
max-width: 366px;
border-top: 1px solid #d9dce6;
}
.title {
float: left;
}
.title h2 {
font-weight: 300;
font-size: 37px;
color: #425080;
}
My HTML:
<div class="fee_header">
<div class="line_wrap">
<div class="line"></div>
</div>
<div class="title">
<h2>Standard Fees</h2>
</div>
<div class="line_wrap">
<div class="line"></div>
</div>
<div class="contentClear"></div>
</div>
Fiddle: http://jsfiddle.net/MN88R/
I'm trying to position the two elements on the sides so that the border of them ends up in the vertical center of the text in the middle.
If I understand what you are trying to achieve correctly, then I think you may be just approaching it from the wrong angle and perhaps should try something other than using the 3 floating boxes.
If your goal is to have the title center to it's parent container, and the border then run across the vertical center of the heading text, I would try something more like this:
CSS
.title {
height:20px;
overflow:visible;
border-bottom:1px solid #d9dce6;
margin-bottom:20px;
}
.title h2 {
font-weight: 300;
font-size: 37px;
color: #425080;
text-align:center;
}
HTML
<div class="fee_header">
<div class="title">
<h2>Standard Fees</h2>
</div>
</div>
Here is a link to a new fiddle:
http://jsfiddle.net/2KDQ4/1/
Just make sure that the font-size of your heading and the container div height are in the proportions that meet your needs. And the bottom-margin on title is set with what ever spacing you need.
I have a very simple structure:
<div class="parent">
<h1>Element taking space</h1>
<div class="stretch">
Not much content, but needs to be stretched to the end.
</div>
</div>
The parent div has a set height, and I want div.stretch to stretch all the way to that height, regardless of how little content it has. Using height: 100% does the trick, until you add some other element which pushes the content down.
I guess that specifying height: 100% means that the element should have the exact same absolute/computed height as the parent element, and not the remainder of the height after all the other elements have been computed.
Setting overflow: hidden obviously hides the overflowing content, but that's not an option for me.
Is there any way I can achieve that in pure CSS?
Demo of my problem
In the time since this question was asked and answered, a better way to achieve this has come into existence: flex-box.
Just set the parent's display to "flex" and flex-direction to "column", and set the "stretchy" child's height to "inherit". The child will inherit a height of however many pixels are left over to fill up its parent.
In the following example, lines marked /* important */ are part of the actual solution; the rest of the CSS is just to make it visually easier to understand.
.parent {
display: flex; /* important */
flex-direction: column; /* important */
height: 150px;
border: 6px solid green;
}
h1 {
background: blue;
margin: 0px;
height: 90px
}
.stretch {
background: red;
height: inherit; /* important */
}
<div class="parent">
<h1>Element taking space</h1>
<div class="stretch">
Not much content, but needs to be stretched to the end.
</div>
</div>
You could float the h1 element. It would work no matter what height it is, and the content of the stretch element will be pushed below it. But I'm not entirely sure if this is what you are looking for.
EDIT: I'm not certain what kind of browser support you're looking for, but you could also set the display to table on .parent and then have .stretch inherit the height. Then you can nest the column divs inside of .stretch and float them.
Updated: http://jsbin.com/oluyin/2/edit
HTML
<div class="parent">
<h1>Element taking space</h1>
<div class="stretch">
<div class="col">Not much content, but needs to be stretched to the end.</div>
<div class="col">Not much content, but needs to be stretched to the end.</div>
</div>
</div>
CSS
.parent {
display: table;
}
.stretch {
height: inherit;
}
.col {
float: left;
width: 50%;
}
If you know the height of your H1 you can do this to fill out the child:
.parent {
background-color: #eee;
border: 1px solid black;
width: 300px;
height: 600px;
position:relative;
}
h1 { Height: 100px; }
.stretch
{
background-color:#dddddd;
position: absolute;
left: 0;
width: 100%;
top: 100px;
bottom: 0;
}
Example: http://jsbin.com/apocuh/1/edit
If you don't know the height of H1, I'm afraid you will probably need to use JavaScript or thgaskell's method.
Take a look at this post for more information, and an example with JS: CSS: height- fill out rest of div?
Maybe using display:table properties fits your needs ?
Edit: This answer actually looks like thgaskell's one, but instead of using floats I use table-row and table-cell display, and it seems to achieve what you are looking for.
Here is the jsfiddle : http://jsbin.com/ebojok/17/edit
.parent {
background-color: #eee;
border: 1px solid black;
width: 600px;
height: 600px;
display:table;
}
h1{
display:table-row;
width:100%;
}
.stretch{
vertical-align:top;
display:table-cell;
height:100%;
background-color: #ddd;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="parent">
<h1>Element taking space</h1>
<div class="stretch">Not much content, but needs to be stretched to the end.</div>
</div>
</body>
</html>
CSS
.parent {
background-color: #eee;
border: 1px solid black;
width: 300px;
height: 600px;
position:relative;
}
.stretch {
background-color: #ddd;
height: 100%;
position: absolute;
top: 0;
}
http://jsbin.com/amesox/1/edit
This will cover your h1 element as the .stretched goes over it. You could get around this by using z-index: 1; on your h1 element, but I'd advise against it if you want text in your .stretched element.
You need position:relative; on your parent div to give position: absolute something to 'hook on' to. absolute positioned elements, ignore other elements and are placed on top of them unless their z-index is higher or they are its children.
I have a series of images (about a 100 or so) that have been resized so that they fit in a background box that is 130x130. The images are either 130 wide or 130 high. How do I style the image so that they appear in the middle of the 130px box.
This is the effect I want to achieve: http://i.imgur.com/LY1Ag.png
Here's another method that has two main differences: avoids the use of background images (the use of which is semantically weird as Nightfirecat mentioned) and puts the images within an unordered list. The latter isn't necessary but is arguably follows CSS best practices.
I haven't tested extensively but on recent Firefox, Chrome and IE for PC. I had to add a hack for IE7 based on this page's suggestions. That's the reason for the empty <span> for each list item.
CSS:
<style type="text/css">
#boxes {
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
}
#boxes li {
float: left;
border: 1px solid #333;
margin: 30px;
}
#boxes li div {
position: relative;
width: 130px;
height: 130px;
text-align: center;
display: block
}
#boxes li div img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto
}
</style>
<!--[if IE 7]>
<style type="text/css">
#boxes li div * {
vertical-align: middle;
}
#boxes li div img {
position: relative;
}
#boxes li div span {
display: inline-block;
height: 100%;
}
</style>
<![endif]-->
HTML:
<ul id="boxes">
<li><div><span></span><img src="wide1.jpg"></div></li>
<li><div><span></span><img src="wide2.jpg"></div></li>
<li><div><span></span><img src="wide3.jpg"></div></li>
<li><div><span></span><img src="tall1.jpg"></div></li>
<li><div><span></span><img src="wide4.jpg"></div></li>
<li><div><span></span><img src="tall2.jpg"></div></li>
</ul>
Done quickly, so it's entirely possible that there are some bugs.
If you use them as backgrounds for a div, you're all set:
CSS:
div.box-images div {
float: left; /* has them left-align */
height: 130px;
width: 130px;
margin: 12px; /* gives them gutters in between */
background-position: 50% 50%; /* ensures they're centered */
background-repeat: no-repeat;
border: 2px solid #ccc;
}
HTML:
<div class='box-images'>
<div style='background-image: url(images/sample1.png);'></div>
<div style='background-image: url(images/sample2.png);'></div>
[etc.]
<br style='clear: both;' />
</div>
I personally wouldn't use background images.
I would, if possible, apply a class to each box that holds these image. the box would have set height and width as you mentioned.
Then, with jQuery or javascript, add a class depending on the images height or width. so if the width is 130px, add the class of top and bottom padding. If the image is 130 high, add the left and right padding class.
Hope this makes sense and helps you. Let me know if you need me to elaborate.
Although I only tested in fx, chrome and IE9 but you can use vertical-align: middle + line-height: 130px on the image like this:
css:
div.box {
width: 130px;
height: 130px;
text-align: center;
line-height: 130px;
}
div.box img {
vertical-align:middle;
}
html
<div class="box">
<img src="image1.jpg">
</div>
<div class="box">
<img src="image2.jpg">
</div>
I'm getting a little bit of a push though, when the image is the same height as the box. Anyone else know why? You can see it here: http://jsfiddle.net/9bu5Z/1/
I cannot get my site to be centered for the life of me with CSS. I have tried all the usual methods suggested around the web including:
body {
text-align: center;
}
#container {
width: 770px;
margin: 0 auto;
text-align: left;
}
Then using
<div id="container>
<!-- Centered Content Goes here-->
</div>
But it just wont go to the center. It stays at the left side of the page.
An example of the CSS for the element that I want to be centered is this:
#topHeader
{
background:url(images/top_header.jpg);
position:absolute;
width: 695px;
height: 242px;
top: 0px;
left: 0px;
}
So, my HTML would look like this:
<div id="container>
<div id="topHeader></div>
<!-- All other elements go here as well-->
</div>
But as I mentioned before, the element stays put.
Thanks!
Eric
Try with this
dead centre
The primary issue is the absolute positioning of your #topHeader element. Because you have it absolutely positioned with top: 0px; left: 0px;, that's exactly where it's going to be positioned - at the top left of the page.
Start off by removing the absolute positioning from the #topHeader element.
Try adding this to the top of your css file:
// Wipes out any preexisting padding and margin.
html, body {
padding: 0;
margin: 0;
}
Then add a position: relative; directive to the class you want centered. Actually, try adding it to the html, body one so that all your classes use relative position. It might be that you have position: absolute; set which then combines with the left: 0px; to force your header contain to ignore the margin: 0 auto; and stay on the left of the page.
You're placing the header absolutely so it's being offset from the containing block (i.e. body), not the parent element. What you want is Relative positioning.
absolute
The box's position (and possibly size) is specified with the 'top',
'right', 'bottom', and 'left'
properties. These properties specify
offsets with respect to the box's
containing block. Absolutely
positioned boxes are taken out of the
normal flow. This means they have no
impact on the layout of later
siblings. Also, though absolutely
positioned boxes have margins, they do
not collapse with any other margins.
- 9.3.1 Choosing a positioning scheme: 'position' property
Absolute:
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
#container {
color:blue;
border:1px solid blue;
width: 770px;
margin: 0 auto;
text-align: left;
}
#topHeader
{
color:red;
border:1px solid red;
position:absolute;
width: 695px;
height: 242px;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
outside
<div id="container">
inside
<div id="topHeader">deep inside</div>
<!-- All other elements go here as well-->
</div>
</body>
</html>
Relative:
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
#container {
color:blue;
border:1px solid blue;
width: 770px;
margin: 0 auto;
text-align: left;
}
#topHeader
{
color:red;
border:1px solid red;
position:relative;
width: 695px;
height: 242px;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
outside
<div id="container">
inside
<div id="topHeader">deep inside</div>
<!-- All other elements go here as well-->
</div>
</body>
</html>
One thing to check when trying out all of these methods of centering is to make sure that your doctype is correct for the method that is being used.
Hope this helps for you.
As far as I know it simply doesn't work. text-align centers text or inline content, not block elements.
Edit: On the other hand The Disintegrator's link makes sense. Unfortunately, only for fixed-sized blocks.