Display: inline

http://www.danielamorescalchi.com/MotorBanners/motorBannersLg.html
I have starteed to upload the new site. Thank you all that have helped so far with your advice it has helped a lot.
I have a questions about the page link above.
how can I put the list at the top. abobe the images, so the images won’t be cut off?
this are the respective html & css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">


<head> 

<title> Daniela Morescalchi Web Banners</title>
<meta http-equiv="Content-Type" content="text/html; 

charset=iso-8895-1"/>
<link rel="stylesheet" type="text/css" 

href="../dlmStyleSource01.css" />
<style>
#nav li{
display: inline;
}
</style>
</head> 



<body>
<div id="wrap">

	<div id="header">

	</div> <!-- headerEnd -->

		<div id="main">
		<div id="sidebar01">
		<ul id="nav">
	<li><a 

href="../traditionalIllustration.htm">Traditional Illustration 

</a></li>
	<li><a href="../digitalIllustration.html">Digital 

Illustration </a></li>
	<li><a href="../vectorIllustration.html"> Vector 

Illustration </a></li>
	<li><a href="../motorBanners.html"> Vehicles web 

Banners</a></li>
	<li><a href="../sculptures.html"> Sculptures </a></li>
	<li><a href="../sqArt.html"> Sequential art </a></li>
	<li><a href="../paintings.html"> Fine art, portraits, 

paintings and commemorative art </a></li>	
	<li><a href="../photos.html"> Photos </a></li>
	<li><a href="../rates.html"> Rates </a></li>
	<li><a href="../contact.html"> Contact</a></li>
	<li><a href="../links.html"> Links </a></li>
	<li><a href="../index.html"> Home </a></li>
		</ul>
<h3>A closer view</h3>
<p>Here are the banners. Size used on the clients's Site </p>
		</div> <!-- sidebar01End -->

<div id="bnrs">

				<ul id="navBnr">
<li><img src="fnlRAndRCars.jpg" /></li>
<li><img src="fnltrucksBanner.jpg" /></li>
<li><img src="fnlcwDropShadowLogos.jpg" /></li>
<li><img src="fnlcarsByJim.jpg" /></li>
<li><img src="fnlfamilyAutoCtr.jpg" />
<li><img src="fnloceanStreet.jpg" /></li>
<li><img src="fnlmichaelson.jpg" /></li>
<li><img src="fnlautobonAutoSales.jpg" /></li>	
<li><img src="fnleastWest1stDraft.jpg" /></li>
<li><img src="fnlfgAutoBroker.jpg" /></li>
<li><img src="fnlzalliMotors.jpg" /></li>
<li><img src="fnlquickTruckSales.jpg" /></li>
		</ul>
</div>	<!-- bnrs End -->
</div> <!-- pgcontentEnd -->
		</div> <!-- mainEnd -->	

<div id="footer">
<p>Daniela Morescalchi All Rights Reserved <span 

class="copyright"> 2010.</span></p>
</div><!-- footerEnd --
	</div><!-- wrapEnd -->

</body>
</html>

html,body {
    margin: 0;
    padding: 0;
}

a img{ 
vborder:none;
}

body{
    font: medium Helvetica, Arial, Sans-serif;
    background: #660033;
    color: #99ff99;   
}

#wrap {
    overflow: hidden;
    background-color: #3D145C;
    color: #000000;
    margin: 30px 10px 30px 10px;
    padding: 20px;
    min-height:0;
}

#header {
    background-image: url(navImages/images/header.jpg);
    background-repeat: no-repeat;    
    padding: 75px;
}



#main {
    margin-top: 10px;
    border: 2px solid #0000ff;
    overflow:hidden;
}

#sidebar01 {
    float: left;
    width: 220px;
    border: 3px solid #0000ff;
    background-color: #9999ff;
    color: #fff;
    margin: 5px 10px 10px 10px;
    font-size: 80%;
}



#nav{
    list-style: none;
    margin: 5px;
    padding: 0;
}

#nav li {
    border-bottom: 1px solid #0000ff;
    font-size: 90%;
}

#nav li a:link, #nav li a:visited {
    text-decoration: none;
    color: #245185;
    font-weight: normal;
    padding: 0.4em 0 0.2em 0;
}
#nav li a:hover {
    text-decoration: none;
    color: red;
    background: white;
    display: block;
    font-weight: normal;
}


#navBnr {
    color: #99ff99;
    overflow:hidden;
    padding:10px;}

#navBnr {
    list-style: none;
    margin: 5px;
    padding: 0;
}
#navBnr li {
    border-bottom: 1px solid #0000ff;
    font-size: 80%;
}
#navBnrli a:link, #nav li a:visited {
    text-decoration: none;
    color: #245185;
    font-weight: normal;
}

* html #wrap,* html #main,* html #bnrs{zoom:1.0}



.cr:before{ content:"Copyright :";}

#footer {
    clear: both;
    border: 2px solid #99ff99;
color: #000000;
    background-color: #cc0000;
    margin: 30px 40px 30px 40px;
    padding: 5px;
}

ul.bnr{
    margin:0;
    padding:0;
    list-style:none;
    text-align:center;
}

ul.bnr li{display:inline;}
ul.bnr li a{display:inline-block;margin:10px}

ul.bnr li img{width:740px;height:72px;display:block;background:red}/* for testing only as I didn't know banner widths*/
ul.bnr li img{border:1px solid #000}

as you can see I have booth an outside css sheet and a couple of embedded css at the top. I know it is in the sidebar float part.
any advice appreciated.

I’m not quite sure what you are asking but if you don’t want a fixed width left floated sidebar then remove the float from the sidebar and let it be 100% width and it will automatically stretch across the top of those banner images.

I don’t think that’s what you were asking though.

do you mean that you want a horizontal menu above the banners?

Hey folks!
thank you both for looking into this thread. I want to put what was sidebar01 on top. above the images. So the images are displayed in the center of the page.
so I am thinking I need to removed the fixed sized. remove the float. and that should do it. Right?
also I don’t understand one thing. at the hover part. althought right now I have a white background. when I tried to change the font it would not take. Or it would on one or two of the links.

The way Paul OB explained above should do the trick for the menu. I didn’t really look at your menu but it’s behaving kind of weird . I thnk moving it above the banners would be a good idea

going for that one next. Finishing another project but hope to get the html/css done by tonight (ok…tomorrow latest)on that page. crossing fingers.
also could you please explain how this bit of code works?

  • html #wrap,* html #main,* html #bnrs{zoom:1.0}

thx
daniela

K. uploaded the page. Placed the new code in the html page itself.

http://www.danielamorescalchi.com/MotorBanners/motorBannersLg.html

changed from sidbebar01 to 02 & renamed the nav.

<style>

#sidebar02 {

    border: 3px solid #0000ff;
    background-color: #9999ff;
    color: #fff;
    margin: 5px 10px 10px 10px;
    font-size: 80%;
}


#nav01{
    list-style: none;
    margin: 5px;
    padding: 0;
}

#nav01 li {
    font-size: 90%;
}

#nav01 li a:link, #nav li a:visited {
    text-decoration: none;
    color: #245185;
    font-weight: normal;

}
#nav01 li a:hover {
    text-decoration: none;
    color: red;
    background: white;
    display: block;
    font-weight: normal;

}

</style>
</head> 

However, why doesn’t it go inline?
Also was wondering what should I use so the images are not cut off when the window is re sized? is that possible?

Hi,

You’d need to set the list item to display;inline to make the links go horizontal and remove the display:block from the anchor hover.

To stop the window at the width of the banner you would need to add a min-width (not supported in IE6) and then remove the overflow;hidden from #main and #wrap.


#wrap,#main{overflow:visible}
#wrap{min-width:910px}
#nav01 li {
display:inline;
margin:0 10px 0 0
}


I think when you follow Paul OB’s advice about the menu and you make the menu the same width as the header and banners and you center the site (#wrap {margin: 0 auto;}) It will look very balanced, since all objects will have the same width.