CSS Forum

**JustAGuy** · 01-09-2009, 09:05 AM

I'm a bit of a newbie and I am working on a page where I am trying to integrate new things that I've learned, but I'm having a bit of a problem.

The page can be seen HERE and the code is:

<style type="text/css">
body {
background-color: rgb(102,102,102);
margin:0;
padding:0;
}
#container {
background-color: #000;
width:823px;
margin:0 auto;
}
#head1 {
background-image:url('../new/images/head1.jpg');
background-repeat:no-repeat;
width: 823px;
height: 157px;
}
#head2 {
background-color: black;
width: 817px;
height: 140px;
border-left: medium solid #CCC;
border-right: medium solid #CCC;
}

#head3 {
background-image:url('../new/images/nav-bar.jpg');
background-repeat:no-repeat;
width: 823px;
height: 40px;
}
#left {
float: left;
color: #FFF;
background-image:url('../new/images/left.jpg');
background-repeat:repeat;
border-left: medium solid #CCC;
width: 177px;
height: 569px;
padding-left:10px;
}
#mid {
float: left;
color: #FFF;
background-image:url('../new/images/mid.jpg');
background-repeat:repeat;
width: 375px;
height: 550px;
padding-left:35px;
padding-right:10px;
padding-top: 0px;
text-align: justify;
}
#right {
float:right;
color: #FFF;
text-align: justify;
background-image:url('../new/images/right.jpg');
background-repeat:repeat;
border-right: medium solid #CCC;
width: 172px;
height: 550px;
padding-left:15px;
padding-right:15px;
padding-top: 0px;
}
#footer {
clear: both;
background-image:url('../new/images/footer.jpg');
width: 823px;
height: 89px;
color: #FFF;
text-align:center;
}
#menu ul li {
margin-top: 11px;
list-style-type: none;
float: left;
}
#menu ul li a {
color: #FFF;
font-family: sans-serif;
font-size: 14px;
font-weight: bold;
font-style: italic;
text-decoration: none;
padding: 0px 44px 0px 0px;
}
#menu ul li a:hover{color: black;}

.bartext {
float: left;
width: 149px;
padding-top: 5px;
font-family: sans-serif;
font-size: 14px;
text-align: justify;
}

#bar_top {
margin-top: 25px;
background-image:url('../new/images/bar-top.jpg');
background-repeat:no-repeat;
width: 195px;
height: 39px;
}
#bar_fill {
padding-left: 25px;
adding-right: 25px;
background-image:url('..new/images/bar-fill.jpg');
background-repeat:repeat;
width: 195px;
height: 225px;
}
#bar_bot {
background-image:url('..new/images/bar-bot.jpg');
background-repeat:no-repeat;
width: 195px;
height: 28px;
}
#copyright {
font-family:sans-serif;
text-align: center;
color: #FFF;
font-size: 11px;
padding-top: 10px;
line-height: 25px;
clear:both;
}
a:link {color:rgb(254,251,154)}
a:visited {color: red}
a:active {color: #FFF}

.clear { clear: both; width: 100%; height: 0; visibility: none; }

#list ul li {
color: rgb(254,251,154);
margin-left: 30px;
font-weight: bold;
line-height: 36pt;
text-align:left;
}
</style>
</head>
<body>
<div id="container">
<div id="head1"></div>
<div id="head2">

</div>
<div id="head3">
<div id="menu">
<ul>
<li><a href="*" title="Home">Home</a></li>
<li><a href="*" title="About Us">About Us</a></li>
<li><a href="*" title="Why Us">Why Us</a></li>
<li><a href="*" title="Services">Services</a></li>
<li><a href="*" title="Pricing">Pricing</a></li>
<li><a href="*" title="Request More Information">Request More Info</a></li>
<li><a href="*" title="Contact Us">Contact Us</a></li>
</ul>
</div></div>
<div style="clear"> </div>
<div id="left">
<div id="bar_top">
<div id="bar_fill">
<div class="bartext">Now is the time for all good men to come to the aid of their country.</div>
<div id="bar_bot">
</div></div></div></div>
<div style="clear"> </div>
<div id="mid">
<h2>Contact Us</h2>
<br>
<p>If you have questions, need additional information or would like to schedule a video session, please feel free to
contact us by any of the means below:</p>
<div id="list">
<ul>
<li>Telephone . . . . .&n bsp;. . . .(724) 968-8679</li>
<li>Yahoo Messenger ID . . . .<br>creative_videopr oductions
<li>Email . . . . .  . . . . . . . . <a href="mailto:info@creativevp.com?subject=More Information Request">info@creativevp.com</a></li>
</ul></div>

</div>
<div id="right">Now is the time for all good men to come to the aid of their country.
Now is the time for all good men to come to the aid of their country.</div>
<div id="footer">
<div id="copyright">
© 2007     Creative Video Productions        All Rights Reserved

</div>
</div>
</div>

My problems are this:

I want to have an image show on the left hand side. I have it coded for bar_top, bar_fill & bar_bot but I can't get it to display.

The next problem is with the border, especially around the "nav-bar" and the top of the "right" column.

Do any of the experts have any suggestions?

Thanks

**LadynRed** · 01-09-2009, 11:20 AM

You have #left defined as 177px wide, you your #bar-top, #bar-fill, and #bar-bot are set to 195px inside it- which means the bar boxes are too wide for #left.

I don't see an particular reason for having a div for .bartext - and you certainly don't need to float the text. Just put the text in a proper <p></p> and apply the styling class to the <p>.

You've got some margin-collpase going on causing the big spaces around your navigation.

This code fixes most of these issues:

Quote:

#head3 {
background:url(junk_files/nav-bar.jpg) no-repeat;
/*background-repeat:no-repeat;*/
width: 823px;
height: 40px;
padding-top: 1px;
}
#left {
float: left;
color: #FFF;
background:url(junk_files/left.jpg) repeat-y;
/*background-repeat:repeat;*/
border-left: medium solid #CCC;
width: 177px;
height: 569px;
/*padding-left:10px;*/
overflow: auto;

}

.bartext {
/*float: left;*/
width: 149px;
padding: 5px 3px 5px 16px;
font-family: sans-serif;
font-size: 14px;
text-align: justify;

}

#bar_top {
margin-top: 25px;
background:url(junk_files/bar-top.jpg) no-repeat;
/*background-repeat:no-repeat;*/
width: 177px;
height: 39px;
padding-top: 1px;
}
#bar_fill {
padding-left: 0px;
padding-right: 0px;
background:url(junk_files/bar-fill.jpg) repeat-y;
/*background-repeat:repeat;*/
width: 177px;
height: 225px;
margin-top: 38px;
/*position: relative;*/

}

#bar_bot {
background: url(junk_files/bar-bot.jpg);
/*background-repeat:no-repeat;*/
width: 177px;
height: 28px;

}

The path on your images you'd leave alone, it's changed so it would work on my machine.

The overflow: auto on #left clears the floats.

**JustAGuy** · 01-09-2009, 03:05 PM

Thank your LadynRed.

If you will take a look at the page HERE, you will see that I have made the changes to my code that you suggested with a few minor changes.

The first was:
#head3 {
background:url(junk_files/nav-bar.jpg) no-repeat;
/*background-repeat:no-repeat;*/
width: 823px;
height: 40px;
padding-top: 1px;
}

For some reason, this caused the image (nav-bar.jpg) to not display. If I remove the "no-repeat", if displayed fine. Did I do something wrong with my code?

Second, you made no changes to this, but I had to change it to get it to center up on the nav-bar.jpg as shown below:
#menu ul li {
margin-top: -7px;
list-style-type: none;
float: left;
}

Third, your suggestions corrected a gap in the border above the "nav-bar.jpg", but the gaps below this image still exists. How can I correct this?

Fourth, for some reason now there is a scroll bar(?) at the bottom of the "left" column that I really don't care for. Apparently I did something not quite right to cause this. What did I do wrong here?

Lastly, I see in your suggested code changes that some of my lines shown as:
/*whatever changes here*/ and I have been trying to find out if this is how "comments" are added or what the purpose of the "/* . . . */" is.

I apologize for what seem like ignorant questions, but I am new at this and I am trying new things as I learn on the fly.

Thank you again for your time and explainations.

**LadynRed** · 01-09-2009, 09:07 PM

Quote:

For some reason, this caused the image (nav-bar.jpg) to not display. If I remove the "no-repeat", if displayed fine. Did I do something wrong with my code?

Did you put in the correct path ?? Putting the no-repeat on the end of the background property is just shortand, it should have no effect at all.

I figured you'd have to adjust the menu on the nav bar, but you got it fixed on your own

Quote:

Fourth, for some reason now there is a scroll bar(?) at the bottom of the "left" column that I really don't care for. Apparently I did something not quite right to cause this. What did I do wrong here?

Your widths of the #barxxx boxes inside #left are set to be wider than #left. The boxes inside #left have to be the SAME width (w/o margins and padding) or slightly less.

You also don't want to put 25px padding on the div.bar_text - use a <p> for your text and apply the padding to it instead. You don't need a div there.

If you want to leave the div there, reduce the left padding to about 12px and the scrollbar will go away.

As for /* xxxxxx */ - yes that is how you comment something out in a css file.

**JustAGuy** · 01-09-2009, 11:32 PM

Thanks again LadynRed. I will incorporate your suggestions and will try to learn more about the "shorthand".

Now, if I may, if I need to code a "fix" for IE, is there a way to do that? For instance if a "height" needs to be say 51px for FF or Opera and needs to be 50px to work right for IE, is there a way to do that without having to have a seperate css?

Thanks so much for al your advice.

**LadynRed** · 01-10-2009, 10:59 AM

The best and most accepted way of 'fixing' IE is to use conditional comments to call a separate CSS file. Hacking inside one CSS file is a very bad idea. There are ways to code around most of IE's bugs, but you have to be very familiar with what those are and how to prevent them.

The separate css file isn't all that big a deal and it works perfectly. You're not repeating an entire CSS file, the 'fixes' file only contains the rules necessary to make IE behave. My 'iefixes' files typically contain no more than a dozen lines and many times its far less.