Code: Select all
body {
background-color: #FEF35D
;
color: #333;
margin:2em; /* gives some air for the pagewrapper */
}
/* center wrapper, min max width */
div#pagewrapper {
border: 10px solid black;
margin: 0 auto; /* this centers wrapper */
max-width: 80em; /* IE wont understand these, so we will use javascript magick */
min-width: 60em;
background-color: #fff;;
color: black;
}
/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/
div#header {
height: 210px; /* adjust according your image size */
background: #fe2aa2;
}
div#header h1 a {
/* you can set your own image here */
background: #ffffff url(images/auntlaura/header.gif) no-repeat 0 12px;
display: block;
height: 205px; /* adjust according your image size */
text-indent: -999em; /* this hides the text */
text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}See how the puzzle pieces on the top are cut off? I'd love to have that sit up tight to the black border created with the 10px solid black in the pagewrapper and all the way to the right.
Can someone please explain to me how to make that happen? I'm obviously missing something simple.
Thank you for your help!
