2 replies [Last post]
Emma
Emma's picture
Offline
Enthusiast
Last seen: 1 year 44 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 148
Points: 34

Hi
I have been following a tutorial to construct a page layout and it was fine until the addition of a new rollover menu - this then makes the divs under it left aligned. I can't figure out why this has happened...and it also seems to cut off the containing div also.

Any explanations appreciated!

thanks Emma


* CSS Document */

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}
/* hide from IE mac */
html {
min-height: 100%;
margin-bottom: 1px;
}
/* end hiding from IE5 mac */

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
#wrapper {
text-align: left; /* Resets the text alignment to left to override what was set for versions of WinIE5. */
margin: 0px auto; /* Centers the content of the page within the window in all but versions of WinIE5. */
width: 641px; /* Sets the overall width of the layout. */
}
#header {
height: 92px;
width: 641px;
background: url(images/topbar.jpg) no-repeat center top;
}
#header h1 {
text-align: left;
}
#header span {
position: absolute;
left: -3000px;
}
/* NAVIGATION BUTTONS */
/*.menu {
height: 29px;
width: 1007px;
}
.cssnav {
position:relative;
float: right;
margin-right: 1px;
padding: 0px;
font-family: verdana, arial, helvetica, sans-serif;
background: url(overbtn.jpg) no-repeat;
width: 122px;
height: 29px;
overflow:hidden;/* for ie to hide extra height*/
/*font-weight: bold;
}
.cssnav a {
display: block;
color: #000000;
font-size: 11px;
width: 122px;
height: 29px;
display: block;
float: right;
color: white;
text-decoration: none;
overflow:hidden;/* for ie to hide extra height*/
/*}
.cssnav a:hover {
color: #ffffff;
}

.cssnav img {width: 122px; height: 29px; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}

.cssnav span {
position: absolute;
left: 0px;top: 8px;
text-align: center;
width: 122px;
cursor: pointer;

}*/
/* END OF NAVIGATION */
/**#bar{
width: 641px;
height: 24px;
background-image:url(images/barback.jpg);
}**/
#innerwrapper {
background: url(images/content_bg.jpg) repeat-y center top; /* Adds a background image to the column container that repeats on the y axix as long as there is content in either column. */
float: left; /* Floating all columns and their container helps avoid IE bugs.*/
width: 641px; /* Sets the width of the column container to 641 pixels, the total width of the layout. */
padding: 1px 0px; /* This odd padding is added to the top and bottom of the DIV to avoid the escaping margin effect. */
}

/* STYLE THE CONTENT COLUMN --------------------------------- */
/* --------------------------------------------------------- */

#content {
float: left; /* Floats the content DIV to the left of the layout. */
width: 420px; /* Sets the width of the content column to 420 pixels. */
}
#content h2 {
padding-top: 5px; /* Adds 5 pixels of padding to the top of the h2 element. */
padding-right: 5px; /* Adds 5 pixels of padding to the right of the h2 element. */
padding-bottom: 5px; /* Adds 5 pixels of padding to the bottom of the h2 element. */
}

#content span {
position: absolute; /* Takes the span (that holds the text for the H2 text) out of the document flow so that it can be positioned in an exact place on (or off) the page. */
left: -3000px; /* Puts the text within the h1 way off screen so that visual users to not see it. */
}

#content p {
font-size: 85%; /* Sets the font size to 85% of the user's browser preference, */
margin-top: 5px; /* Places 5 pixels of margin above content paragraphs. */
margin-right: 10px; /* Places 10 pixels of space between the right edge of the content paragraphs and the right edge of the container. */
margin-left: 20px; /* Places 20 pixels of space between the left edge of the content paragraphs and the left edge of the container. */
line-height: 1.4; /* Opens up the spacing (leading) between lines of text. */
}

#sidebar {
float: left; /* Floats the sidebar to the left within its container. */
width: 200px; /* Sets the width of the sidebar to 200 pixels. */
}

#sidebar h2 {
font-size: 100%; /* Sets the font size to 100% of the user's browser preference, */
font-weight: normal; /* Removes the default bolding that the browser puts on heading text. */
margin-top: 20px; /* Adds 20 pixels of top margin so that the baseline of the sidebar h2 text starts at the baseline of the Welcome image. */
margin-right: 10px; /* Adds some space on the right of the h2 to make sure it doesn't touch the edge of the container. */
margin-left: 10px; /* Adds some space on the left of the h2 to make sure it doesn't touch the left edge of the container. */
}

#footer {
background: url(images/footer_bg.jpg) no-repeat center top; /* Places a non repeating background image on the footer, and positions it at the top center of the DIV. */
height: 103px; /* Sets a height that equals the height of the background image. */
}
#footer p {
font-size: 70%; /* Sets the font size to 70% of the user's browser preference, */
text-align: center; /* Aligns footer paragraph text in the center of the DIV. */
padding-top: 60px; /* Pads the footer paragraph text so that it starts in the soft, rounded, green rectangle. */
}

/* CLASSES FOR IMAGES AND CLEARING FLOATS -------- */
/* --------------------------------------------------------- */

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
font-size: 1px; /* Sets the font size to 1 pixel */
line-height: 0px; /* Sets line-height to 0 -font and line-height, even if not explicitly on the page, might add diemnsion to the clearing element rather than make it larely invisible */
clear: both; /* Keeps floated divs from draping over objects beneath them. */
height: 0px; /* Makes sure the clearing element has no height */
}

.lftflt {
float: left; /* Moves the image to the left side of its container and allows text to flow around its right side. */
margin-right: 8px; /* Adds 8 pixels of space to the right of the image so that it does not touch the text */
}

Welcome to Blue Skies DesignWelcome to Blue Skies Design

Blue SkiesLoHrem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti.

uam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti.


wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 18 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Emma, I think you've been

Emma, I think you've been around long enough to know to use <code> tags around your posted code (css as well as html).

The problem is an extra closing div (after the main nav end comment tag). This closes the wrapper that had the text-align: left placed on it. The rest inherets from body, which as you know, is set to text-align: center for IE5*. I'm not sure where you got the code for the navigation, but it suffers of divitis. An unordered list would be a much better choice.

Emma
Emma's picture
Offline
Enthusiast
Last seen: 1 year 44 weeks ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 148
Points: 34

Sorry as I don't post often

Sorry as I don't post often I always forget what tags to use for posting code...

Thanks very much, that works!

cheers
Em