Struggling with this all night and I can't figure out what is going on. For some reason the image I'd like to use as my header will not a.) center, or b.) align with the top of the page.
Did you seriously just post that? I've already provided the proper solution. The no padding/margin on the body is important, and you've left it out. If you have nothing to contribute, don't do it at all.
So I don't make that same mistake again, can one of you explain why I needed to set the margin: auto, and padding: 0 in my body tag? What does "auto" do in CSS?
So I don't make that same mistake again, can one of you explain why I needed to set the margin: auto, and padding: 0 in my body tag? What does "auto" do in CSS?
you need to understand the box modal really.
(this is how I look at it) think of a product like a TV TV is the content padding is the stuff between the TV and the box Border is the box it comes in and margin is the space that box sites from the edge of the room (if that makes sense)
so you set your margin to have a set size, if you want it to be a certain size e.g. in the centre you use auto, (no matter what size).
So I don't make that same mistake again, can one of you explain why I needed to set the margin: auto, and padding: 0 in my body tag? What does "auto" do in CSS?
Just to clarify, do you have margin:auto in your body tag? What I suggested was:
It should be...
margin:0; padding:0;
...in your body.
What this is doing is resetting automatic browser settings. There are numerous articles about "CSS Resets", do a google search and I'm sure you'll find some answers there. Change the padding to 5px and you'll see what the browser was trying to do originally.
The...
margin:auto;
...should be the one in your header div to center it.
If you still require to have top and/or bottom margins, here are some examples:
margin: 20px auto; /* This will have a top-margin of 20px, bottom-margin of 20px, and will be centered */ margin: 10px auto 5px auto; /* This will have a top-margin of 10px, bottom-margin of 5px, and will be centered */ margin: top right bottom left; /* This is the order in which you can shorthand-declare margin/padding */
Struggling with this all night and I can't figure out what is going on. For some reason the image I'd like to use as my header will not a.) center, or b.) align with the top of the page.
Link: http://www.kluesenerwedding.com/stonescapes/index.html
CSS
margin:0;
padding:0;
to your body.
And here is your new header styling:
div#header {
background: url(top_head.jpg) no-repeat left top;
height:150px;
width:768px;
margin:0 auto;
}
/* CSS Document */
body {
background: url(top_head_bg.jpg) repeat-x left top;
background-color: #E8E4D6;
}
div#page-wrap {
width: 800px;
margin: 0 auto;
}
div#header {
background: url(top_head.jpg) no-repeat left top;
height:150px;
width:768px;
margin:0 auto;
}
/* this is your css code
div#header {
background: url(top_head.jpg);
background-repeat: no-repeat;
margin-top: 0px;
left: center;
height:150px;
width:768px;
}
*/
/*ul#nav {
background-image: url(nav_bg.jpg);
background-repeat: no-repeat;
position: absolute;
height: 38px;
width: 773px;
}
div#container {
background-image: url(sides.jpg);
background-repeat: repeat-y;
*/
I love how this is exactly the same as theDoc's post, but 2 hours later :lol:
So I don't make that same mistake again, can one of you explain why I needed to set the margin: auto, and padding: 0 in my body tag? What does "auto" do in CSS?
you need to understand the box modal really.
(this is how I look at it)
think of a product like a TV
TV is the content
padding is the stuff between the TV and the box
Border is the box it comes in
and margin is the space that box sites from the edge of the room (if that makes sense)
so you set your margin to have a set size, if you want it to be a certain size e.g. in the centre you use auto, (no matter what size).
Just to clarify, do you have margin:auto in your body tag? What I suggested was:
It should be...
...in your body.
What this is doing is resetting automatic browser settings. There are numerous articles about "CSS Resets", do a google search and I'm sure you'll find some answers there. Change the padding to 5px and you'll see what the browser was trying to do originally.
The...
...should be the one in your header div to center it.
If you still require to have top and/or bottom margins, here are some examples: