|
| |
|
|
paul rayner
Posts: 232
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline
 |
Images not floating into position - 8/8/2009 18:57:49
Hi
I've created a page using DW and CSS. There are some template objects in there, but I don't think they impact.
My problem is trying to float images in a gallery. The first row floats in to position, but I assumed the second row would float down and to the left. But it goes all haywire in the second row.
I've validated the CSS and XHTML without apparent problem.
I've looked at it using firebug, but all divs appear to be nested correctly.
Any suggestions please? The page can be viewed here - gallery.
The CSS -
/* CSS Document */
body
{
margin: 0;
padding: 0;
color: #000;
background-color: #ddd;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
#container
{
margin: 1em 5%;
background-color: #FFF;
background-image: url(background.jpg);
background-repeat: repeat-y;
border: 1px solid #333;
width: 800px;
}
#banner
{
background-color: #666;
border-bottom: 1px solid #333;
}
#banner h1
{
margin: 0;
padding: .5em;
}
#nav
{
float: left;
width: 160px;
margin-left: 10px;
padding-top: 1em;
}
#nav p
{
margin-top: 0;
}
#content
{
padding-top: 1em;
margin: 0 2em 0 200px;
}
#footer
{
clear: both;
background-color: #666;
padding: 1em;
text-align: center;
border-top: 1px solid #333;
}
/*Code for image display */
.imgdiv {
float:left;
margin-right:40px;
padding:5px;
}
.caption {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: italic;
color: #000;
text-align:center;
}
XHTML code:
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="banner">
<!-- InstanceBeginEditable name="Banner" -->
<h1>Gallery</h1>
<!-- InstanceEndEditable -->
</div>
<div id="nav"> <div id="vertmenu"><!-- InstanceBeginEditable name="Nav" -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="support.html">FAQ</a></li>
</ul>
<!-- InstanceEndEditable --></div>
</div>
<div id="content"><!-- InstanceBeginEditable name="Content" -->
<div class="imgdiv"><p class="caption">Magma C30</p><br />
<img src="images/694px-Magma_C30_System_thumb.jpg" width="120" height="104" alt="magma" /></div>
<div class="imgdiv"><p class="caption">Cartrdige</p><br /><img src="images/800px-Cartridge_macro_shot_thumb.jpg" alt="cart" width="120" height="90" /></div>
<div class="imgdiv"><p class="caption">56808 Urban</p><br /><img src="images/800px-Dsc_56808_urban_emt_thumb.jpg" alt="urban" width="120" height="80" /></div>
<div class="imgdiv"><p class="caption">Hyundai</p><br /><img src="images/800px-Tabliczka_znamionowa_Hyundai_Accent_thumb.jpg" alt="hyundai" width="120" height="90" /></div>
<div class="imgdiv"><p class="caption">Cryogenics</p><br /><img src="images/Desert_Cryogenics_probe_station_thumb.jpg" alt="cryogenic" width="120" height="90" /></div>
<div class="imgdiv"><p class="caption">Wire</p><br /><img src="images/LHC_NbTi_superconducting_wire_thumb.jpg" alt="wire" width="120" height="90" /></div>
<!-- InstanceEndEditable --></div>
<div id="footer">©Paul Rayner </div>
</div>
</body>
<!-- InstanceEnd --></html>
_____________________________
" In theory, there is no difference between theory and practice. But, in practice, there is!"
|
|
|
|
paul rayner
Posts: 232
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline
|
RE: Images not floating into position - 8/9/2009 2:24:21
Thanks.
I could see in DW that there appeared to be a problem, but I didn't associate it with the longer pic length.
But, how do I work out the relation between pixels and ems? I understand an em is the length of an M for a particular font. How do I relate that to the height of my image?
Cheers
_____________________________
" In theory, there is no difference between theory and practice. But, in practice, there is!"
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
