So I tried to experiment with CSS pseudo class before and after. I tried to use those pseudo to create header element.This is to reduce using div to hold left and right images. This is code for HTML
<header id="mastHead">
<h1>Branding</h1>
</header>
So I have 3 images to create traditional header element which is 20px width for left and right side with 100px height and for the middle, 1px width and 100px height which will repeat horizontal. And here my CSS
#mastHead {
background:url(images/headMiddle.jpg) repeat-x top left;
width:1000px;
height:100px;
overflow:hidden;
}
#mastHead:before {
content:"";
display:block;
background:url(images/headLeft.jpg) no-repeat top left;
width:20px;
height:100px;
float:left;
}
#mastHead:after {
content:"";
display:block;
background:url(images/headRight.jpg) no-repeat top left;
width:20px;
height:100px;
float:right;
}
#mastHead h1 a {
display:block;
width:200px;
height:41px;
background:url(images/logo.png) no-repeat;
}
So the problem is if I remove h1 element, it will align perfectly but if I put these element, it will push the ::after pseudo-class down and it will take leftover space according to it height.How can I make this h1 element to take just middle space without affecting the ::after space?
I made a fiddle with your example: http://jsfiddle.net/3Dcw3/ (only set width to 500 to fit in a fiddle and set background to visualize them)
And here is a fixed version: http://jsfiddle.net/3Dcw3/1/
The points are:
Add position:relative; to the header.
Use absolute positioning instead of floating.
Add paddings so the blocks would position over them.
Related
I have boxes floated inside a div sort of like the SO Chat except i am making a box for my own website where users can make their own chat room, these boxes on the page represent chatrooms and i want to make a perfect width for them so they will fit exactly on the page without any excess space in the margins. the main div they are positioned in is 965px with a padding of 15px on the left and right side of it making a 935px width i reduced the width from 965px to 935px to keep a total width of 965px.
To get an idea of my scenario check out A Fiddle
As you can see there is some space left at the end right side of the div and i dont want that, i want the chat boxes to fit pixel perfectly the full width and remember to take into account that borders count as widths too. If someone could help me that would be great!
CSS Styles
body {
width:1000px;
}
#Body {
width:935px;
padding:15px;
height:500px;
background-color:#F1F1F1;
margin:0 auto;
}
.ChatRoom {
float:left;
width:223px;
height:200px;
border:1px solid #666;
cursor:pointer;
margin-right:8.75px;
background-color:#FFF;
}
.ChatTitle {
width:100%;
height:30px;
line-height:30px;
font-size:13px;
font-weight:bold;
text-align:center;
background-color:#C6D6D9;
border-bottom:2px solid #9C0;
}
You can accomplish this using box-sizing:border-box. What it does is includes the padding and border sizes from the width, as opposed to its normal behaviour of adding to it (which makes the <div> overflow to the next line). I've added a div.Inner here which will have the border and white background while the .ChatRoom is used to provide space using padding.
jsFiddle
HTML
<div class="ChatRoom">
<div class="Inner">
<div class="ChatTitle">My Chat Room</div>
</div>
</div>
CSS
.ChatRoom {
float:left;
width:25%;
height:200px;
padding:8px;
box-sizing:border-box;
}
.ChatRoom .Inner {
border:1px solid #666;
box-sizing:border-box;
background-color:#FFF;
cursor:pointer;
height:100%;
}
Without border-box
Turns out it's pretty easy without border-box too, utilising margin on .Inner.
jsFiddle
.ChatRoom {
float:left;
width:25%;
height:200px;
}
.ChatRoom .Inner {
border:1px solid #666;
margin:8px;
background-color:#FFF;
cursor:pointer;
height:100%;
}
http://jsfiddle.net/DyTT8/1/
The last div needs to have the margin reset if not it will add to the 15px of padding. I did this by giving it class="last and making the .ChatRoom div 225px; This will give you the proper spacing.
You could also put the divs in an unordered list and target the last div with li:last-child and remove the margin that way.
<div id="container">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="clear"></div>
</div>
#container{
width:200px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
}
#top{
width:200px;
height:20px;
border:medium ridge #FFF;
}
#left{
float:left;
width:50px;
height:20px;
border:medium ridge #FFF;
}
#right{
float:right;
width:40px;
height:20px;
border:medium ridge #FFF;
}
#clear{
clear:both;
}
Why the #right and #top are not right aligned?
Its because the top element is actually overflowing the bounds of the container, while the floated element right is being restricted to it. The top element is overflowing the container because the border is not included in the width. So top is actually occupying 204px.
Problem Illustrated via Example: http://jsfiddle.net/KhJ6e/2/
To fix, adjust top to account for the 2px border on each side. (subtract 4 from width of container) or specify width as auto depending on your intentions.
#top{
width:196px;
height:20px;
border:medium ridge #FFF;
}
Example: http://jsfiddle.net/KhJ6e/1/
The top is wider than it's parent container
#top{
width:auto;
}
The problem is how the width is calculated for the box model. All elements on the screen have 4 components (inner to outer): content, padding, border, margin. By default, the width includes only the content. By adding the borders, top becomes larger than 200 pixels. Using the developer tools in chrome, it was rendering as 206px.
There are two possible solutions, one is fudge the widths, or two modify the box model. The first will work, but it is difficult to maintain. Any small change can mess up the alignment.
A better solution is to use box-sizing: border-box. By adding that CSS style, the width attribute will include content, padding, and border. So, originally padding and border wrap around the outside, but with border-box, the encroach on the inside.
Original: http://jsfiddle.net/deafcheese/Gv5BZ/
Corrected (using
boz-sizing: border-box): http://jsfiddle.net/deafcheese/Gv5BZ/1/
box-sizing reference: http://css-tricks.com/box-sizing/
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.
I'm trying to centre align an image using a div and a CSS class (the tag is wrapped in a div class="center" tag). What I'm using at the moment is working in Dreamweaver (when I go to design view) but not when I load the page up in Safari. Here is my code:
.center {
display:inline;
text-align:center;
-webkit-inline;
-webkit-center;
background-color:transparent;
}
Sorry for asking such a simple question, I'm completely new to HTML, my experience is in Objective-C.
text-align: center caused the content to be centered (within the container), and not the container itself being centered.
Since you use display: inline, the size of the container will be the same as its content, and the centering will not have the effect you're after.
Either, you use the margin: 0 auto to center the container (towards its parent container), OR you change display: inline to display: block.
Give text-align:center; to it's .center parent DIV. Write like this:
HTML
<div class="parent">
<div class="center"></div>
</div>
CSS
.parent{
text-align:center;
}
.center {
display:inline;
background-color:transparent;
}
You can use margin : 0 auto , to a vertical align , but if you want a vertical-horizontal align , you need a code like this:
.center{
width:200px;
height:200px;
margin-left:-100px;
margin-top:-200px;
position:absolute;
top :50%;
left:50%;
}
margin: 0 auto. Is what you're looking for. You'll need a width also.
div.center { margin:0 auto; width: 20%;background:orange;}
Is there a better way to align something in the bottom right of a cell?
I have a div which only contains a background image, 10px by 10px. I am using the following styles to put it in the bottom right corner. (The cell I have it in is 40px high.)
Doing it this way causes me to lose the 30px above the div. (I'm also using it as something to click, so I can click anywhere on the right instead of only the bottom corner of the cell.)
.time_note { float:right; width:20%; min-height:40px; display:block;
margin-right:-5px; }
.time_note { background:url('/images/sheet/note_marker.png') no-repeat;
background-position:bottom; }
If this could also be done NOT using margins, that would be great.
Example Image:
You should make your wrapping class position:relative; and then whatever you have inside you can position absolutely position:absolute; bottom:0; right:0;
For example
HTML:
<div class="wrapper">
<div class="arrow"></div>
</div>
CSS:
.wrapper
{
width:100px;
height:100px;
position:relative;
}
.arrow
{
width:10px;
height:10px;
position:absolute;
right:0px;
bottom:0px;
}
You could position: absolute, and bottom: 0; right:0; to place it on the bottom right of the parent element (which needs position: relative;). Of course, this has the danger of overlapping some other info in that element.
try:
background-position:bottom right;
I believe what you are looking for is this, you just need to modify it to be on the right
Sticky footer