Hi simple question I hope

Still trying to understand how to align various parts.
this is my html page

<!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 Illustrations Graphics and Fine Arts</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8895-1"/>
<link rel="stylesheet" type="text/css" href="dlmStyleSource01.css" />
</head> 



<body>
<div id="wrap">
	<div id="header">
	<p>Vehicle Banners</P>
	</div> <!-- headerEnd -->
		<div id="main">
		<div id="sidebar01">
		<ul id="nav">
	<li><a href="">Traditional Illustration </a></li>
	<li><a href="">Digital Illustration </a></li>
	<li><a href="">Vector Illustration </a></li>
	<li><a href="htms/services.html">Web Banners</a></li>
	<li><a href="htms/products.htm"> Sculptures </a></li>
	<li><a href="htms/Art.htm"> Fine art, portraits, paintings and 	

commemorative art </a></li>	
	<li><a href="htms/links.htm"> Photos </a></li>
	<li><a href=""> Rates </a></li>
	<li><a href="htms/contact.htm"> Contact link </a></li>
	<li><a href="htms/links.htm"> Links </a></li>
	<li><a href="htms/links.htm"> Links </a></li>
		</ul>
		</div> <!-- sidebar01End -->
			<div id="pgContent">
			<h3>Web banners</h3>
<p>Here are some samples of banners done for dealers across the country. </p>

			<table>
		<tr class="odd">
		<td><img src="MotorBanners/bannerMS.jpg" /> </td>
		<td><img src="MotorBanners/carsByJimFinalMS.jpg" /> </td>
		
		</tr>
		<tr class="even">
		<td><img src="MotorBanners/cwLogosMS.jpg" /> </td>
		<td>Row 2, Cell 2 </td>
		<td>Row 2, Cell 3 </td>
		</tr>
		</table>	
			</div> <!-- contentEnd -->
		</div> <!-- mainEnd -->	
<div id="footer">			
<p>footer</p>
</div> <!-- footerEnd -->
	</div><!-- wrapEnd -->







</body>
</html>


this is my CSS


body {
margin: 0;
padding: 0;
font: small Helvetica, Arial, Sans-serif;
background-color: #deb887;
color: #99ff99;
}

#wrap{
background-color: #f3f8f2;
color: #000000;
margin: 30px 10px 30px 10px;
Padding: 20px;
}

#header {
font-weight: bold;
margin: 0;
padding: 0;
}

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

#sidebar01 {
float: left;	
top: 0;
right: 0;
width: 220px;
border: 2px solid #0000ff;
background-color: #dddddd;
color: #ffffff;
}

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


#pgContent{
border: 2px solid #0000ff;
background-color: #9999ff;
margin: 10 240px 10 160px;
}

table{
margin: 10 240px 10 160px;
border: 2px solid #0000ff;
background-color: #80800;
color: #99ff99;
}


#footer{
clear: both;
border: 2px solid #00fff;
background-color: #c0c0c0;
margin: 30px 40px 30px 40px;
Padding: 5px;
} 

And added a pic. How do I write the css so the table appears next to, not under the sidebar I would have thought the float property would have taken care of that. but if I resize the window it winds up under the bar.
Thank you.

May I ask why you have that table there in the first place? I don’t see any logic. Maybe if you have a link it would be easier to understand

Everything look OK to me and as it looks in the screenshot - what browser are you checking with?

Just saw the screenshot. Try to stay away from tables when they are not needed. And in what I see you don’t need them.

You’ve missed the units (px) off your positive dimensions which get treated as zero in a strict doctye.



#pgContent{
border: 2px solid #0000ff;
background-color: #9999ff;
[B]margin: 10 240px 10 160px[/B];
}


It should be:



#pgContent{

margin: 10[B]px[/B] 240px 10[B]px[/B] 160px;
}


You’ve done that in a couple of places.

Hi all and thank you for taking a look.
as to why the table is there. it is a page where clients can take a look at sample of banners I created for dealers. when I send them to this link they see the small banners. when they click on one of them the link will take them to a larger version of the banner.
thank you also Paul O’B for catching the typo & explaining how strict type would treat them.
but I guess I am also trying to understand how to line things up.
so how do I get that table that is w/in the pgConent div that is floating next to the sidebar to float there as well?

I think the question was more along the lines of “Given that this isn’t tabular data, why are you using a table, when another structure would be more appropriate?”

Hi Stevie.
Like what?
I thought to put in a series, of images, all will be the same size. in an orderly setting a table would be pretty good.

use x & y positioning?

I would probably just leave the images inline within the <div> or whatever other container you’re using - that way, they will wrap onto the next row whenever they run out of space, rather than at fixed points that don’t necessarily work for different screen sizes. And it’s a lot less code.

K thanks will try that. Like the less code part.
cheers
D

So this is nice.
using list and it is working better. Still looking for way to improve it of course, & it needs tons of it. but better than tables.
Any advice or opinions is of course welcomed.

If the blue background is supposed to be around those banners then you need to clear the floats. Add overflow:hidden to the wrapper that holds the floats (and haslayout for IE6 - e.g. zoom:1.0 (if you don’t mind proprietary code)) and then it will encompass the floated children.

Thanks Paul, right now the blue background is not really an issue as much as trying to align everything correctly.
but will take a look at adding the overflow: hidden; & see what haps.
Thanks
D

for example the list w/the banner is nested w/in the #pgContent DIV. So basically I am trying to create two columns. one w/the sidebar on the left. floated left. and the main body w/the images.
but so far the layout is not aligning correctly.

You’ll have to post your updated code so that we can take another look :).

Also define what you expect to happen and how the elements are supposed to look so that we get a good idea of what you want.

ok basically I would like a header, a sidebar on the left clear & separate from the main body. The main body right next to it. & a footer.
I have been slowly getting closer to it.
here is the html

<!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 Illustrations Graphics and Fine Arts</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8895-1"/>
<link rel="stylesheet" type="text/css" href="dlmStyleSource01.css" />
</head> 



<body>
<div id="wrap">

	<div id="header">
	<p>Vehicle Banners</P>
	</div> <!-- headerEnd -->

		<div id="main">
		<div id="sidebar01">
		<ul id="nav">
	<li><a href="">Traditional Illustration </a></li>
	<li><a href="">Digital Illustration </a></li>
	<li><a href="vectorIllustration.html"> Vector Illustration </a></li>
	<li><a href="services.html"> Web Banners</a></li>
	<li><a href="products.htm"> Sculptures </a></li>
	<li><a href="Art.htm"> Fine art, portraits, paintings and commemorative art </a></li>	
	<li><a href="links.htm"> Photos </a></li>
	<li><a href=""> Rates </a></li>
	<li><a href="contact.htm"> Contact</a></li>
	<li><a href="links.htm"> Links </a></li>
		</ul>
		</div> <!-- sidebar01End -->




<div id="bnrs">	
<h3>Web banners</h3>
<p>Here are some samples of banners done for dealers across the country. </p>
		<ul id="nav">
	<li><a href=""><img src="MotorBanners/msquickTruckSales.jpg" /></a><a href=""><img 

src="MotorBanners/mstrucksBanner.jpg" /></a></li>
	<li><a href=""><img src="MotorBanners/mscwLogos.jpg" /> </a><a href=""><img 

src="MotorBanners/mscarsByJimFinal.jpg" /></a></li>
	<li><a href=""><img src="MotorBanners/msfamilyAutoCtr.jpg" /></a><a href=""><img 

src="MotorBanners/msoceanStreet.jpg" /></a></li>
	<li><a href="htms/services.html"><img src="MotorBanners/msmichaelson.jpg" /></a><a 

href=""> <img src="MotorBanners/msautobonAutoSales.jpg" /> </a></li>
	<li><a href="htms/products.htm"> <img src="MotorBanners/mseastWest.jpg" /></a><a href=""> 

<img src="MotorBanners/msfgAutoBroker.jpg" /></a></li>
	<li><a href="htms/products.htm"> <img src="MotorBanners/mszalliMotors.jpg" /></a></li>

		</ul>
</div>	<!-- bnrs End -->
</div> <!-- pgcontentEnd -->
		</div> <!-- mainEnd -->	

<div id="footer">			
<p>footer</p>
</div> <!-- footerEnd -->
	</div><!-- wrapEnd -->








</body>
</html>

Here is the css

body {
margin: 0;
padding: 0;
font: medium Helvetica, Arial, Sans-serif;
background-color: #deb887;
color: #99ff99;
}


#wrap{
overflow: hidden;
background-color: #f3f8f2;
color: #000000;
margin: 30px 10px 30px 10px;
Padding: 20px;
}

#header {
font-weight: bold;
border: 2px solid #00fff;
background-color: #c0c0c0;
margin: 30px 40px 30px 40px;
Padding: 5px;
}

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

#sidebar01 {
float: left;
top: 0;
left: 0;
width: 220px;
border: 2px solid #0000ff;
background-color: #9999ff;
color: #ffffff;
}

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

#nav li {
border-bottom: 1px solid #0000ff;
padding: 0.4em 0 0.2em 0;
font-size: 90%;
}

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




#bnrs{
margin: 10px;
float: right;
background-color: #808080;
color: #99ff99;
}


#footer{
clear: both;
border: 2px solid #00fff;
background-color: #c0c0c0;
margin: 30px 40px 30px 40px;
Padding: 5px;
}

and I have added the new image. it looks nearer to the final idea if the window is fully open. but it I resize it the box w/the banners winds up below the side bar. Thinking adding size:100%; might fix it. will try. Also tried making the sidebar absolute & the main body relative but the later still wound up below the sidebar on shrinking the window.
Thanks Paul & all! :slight_smile:

Hi,

I think you are looking for something like this.


<!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 Illustrations Graphics and Fine Arts</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8895-1"/>
<link rel="stylesheet" type="text/css" href="dlmStyleSource01.css" />
<style type="text/css">
html,body {
    margin: 0;
    padding: 0;
}
a img{border:none}
body{
    font: medium Helvetica, Arial, Sans-serif;
    background: #deb887;
    color: #99ff99;
}
#wrap {
    overflow: hidden;
    background-color: #f3f8f2;
    color: #000000;
    margin: 30px 10px 30px 10px;
    padding: 20px;
    min-height:0;
}
#header {
    font-weight: bold;
    border: 2px solid #00fff;
    background-color: #c0c0c0;
    margin: 30px 40px 30px 40px;
    padding: 5px;
}
#header h1{font-size:120%;margin:1em 0;}
#main {
    margin-top: 10px;
    border: 2px solid #0000ff;
    overflow:hidden;
    background:blue;
}

#sidebar01 {
    float: left;
    width: 220px;
    border: 2px solid #0000ff;
    background-color: #9999ff;
    color: #fff;
    margin:0 10px 10px 0;
}
#nav {
    list-style: none;
    margin: 5px;
    padding: 0;
}
#nav li {
    border-bottom: 1px solid #0000ff;
    padding: 0.4em 0 0.2em 0;
    font-size: 90%;
}
#nav li a:link, #nav li a:visited {
    text-decoration: none;
    color: #245185;
    font-weight: normal;
}
#bnrs {
    background: #808080;
    color: #99ff99;
    overflow:hidden;
    padding:10px;
}
* html #wrap,* html #main,* html #bnrs{zoom:1.0}
#footer {
    clear: both;
    border: 2px solid #00fff;
    background-color: #c0c0c0;
    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:320px;height:72px;display:block;background:red}/* for testing only as I didn't know banner widths*/
ul.bnr li img{border:1px solid #000}

</style>
</head>
<body>
<div id="wrap">
    <div id="header">
        <h1>Vehicle Banners</h1>
    </div>
    <!-- headerEnd -->
    <div id="main">
        <div id="sidebar01">
            <ul id="nav">
                <li><a href="#">Traditional Illustration </a></li>
                <li><a href="#">Digital Illustration </a></li>
                <li><a href="vectorIllustration.html"> Vector Illustration </a></li>
                <li><a href="services.html"> Web Banners</a></li>
                <li><a href="products.htm"> Sculptures </a></li>
                <li><a href="Art.htm"> Fine art, portraits, paintings and commemorative art </a></li>
                <li><a href="links.htm"> Photos </a></li>
                <li><a href="#"> Rates </a></li>
                <li><a href="contact.htm"> Contact</a></li>
                <li><a href="links.htm"> Links </a></li>
            </ul>
        </div>
        <!-- sidebar01End -->
        <div id="bnrs">
            <h3>Web banners</h3>
            <p>Here are some samples of banners done for dealers across the country. </p>
            <ul class="bnr">
                <li><a href="#"><img src="MotorBanners/msquickTruckSales.jpg" /></a><a href=""><img src="MotorBanners/mstrucksBanner.jpg" /></a></li>
                <li><a href="#"><img src="MotorBanners/mscwLogos.jpg" /> </a><a href=""><img src="MotorBanners/mscarsByJimFinal.jpg" /></a></li>
                <li><a href="#"><img src="MotorBanners/msfamilyAutoCtr.jpg" /></a><a href=""><img src="MotorBanners/msoceanStreet.jpg" /></a></li>
                <li><a href="htms/services.html"><img src="MotorBanners/msmichaelson.jpg" /></a><a href=""><img src="MotorBanners/msautobonAutoSales.jpg" /></a></li><li><a href="htms/products.htm"><img src="MotorBanners/mseastWest.jpg" /></a><a href=""> <img src="MotorBanners/msfgAutoBroker.jpg" /></a></li>
                <li><a href="htms/products.htm"><img src="MotorBanners/mszalliMotors.jpg" /></a></li>
            </ul>
        </div>
        <!-- bnrs End -->
    </div>
    <!-- pgcontentEnd -->
</div>
<!-- mainEnd -->
<div id="footer">
    <p>footer</p>
</div>
<!-- footerEnd -->
</div>
<!-- wrapEnd -->
</body>
</html>


Thank you Paul will try right away. Thank you for your time.

Paul O’B, Hi. been studying, tweaking and learning from the code you gave me. Thanks again for the help. I wanted to add a hover.
this is what I added.

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

#nav li a:hover{
text-decoration: none;
color:#ffffff;
background-color: #9999ff;
font-weight: normal;
}
It works changing the fonts’s color (most of them) but why is the background not kicking in?
Thx to one & all
D