PDA

View Full Version : starting an image on a new 'line'

hopi
05-26-2008, 01:42 AM
Hi experts, This is my first non-table web page. I am creating a rectangle with 5 pictures across the top and bottom and two inner lines with pictures at each edge. I intend to have some text in the middle as well.

pic01..pic02..pic03..pic04..pic05
pic06.............................pic07
pic08.............................pic09
pic10..pic11..pic12..pic13..pic14

So far I have pictures 1-7 going to the right place but when I add 8 & 9 they do not go onto the next line. Instead I get line two as
pic06..pic08............pic09..pic07

Below is what I have so far for the HTML and CSS. The colors are only for figuring out what is going on.

QUESTION: Can you please tell me how to make images lsp185.jpg and lsp172.jpg go to the next 'line'. Thank you ever so much. Warm regards, Hope

<body>
<div class="card">
<div class="img">
<img src="images/lsp169.jpg" height="160" alt="img169" />
<img src="images/lsp166.jpg" height="160" alt="img166" />
<img src="images/lsp184.jpg" height="160" alt="img184" />
<img src="images/lsp171.jpg" height="160" alt="img171" />
<img src="images/lsp168.jpg" height="160" alt="img168" />
<div class="left">
<img src="images/lsp183.jpg" height="151" alt="img183" />
</div>
<div class="right">
<img src="images/lsp170.jpg" height="151" alt="img170" />
</div>
<div class="left">
<img src="images/lsp185.jpg" height="151" alt="img185" />
</div>
<div class="right">
<img src="images/lsp172.jpg" height="151" alt="img172" />
</div>
</div>
</div>
</div>
</body>


My CSS is like this:

div.card
{
color: blue;
float: center;
position: fixed;
width: 797px;
height: auto;
left: 50px;
top: 25px;
}
div.left
{
float:left;
width:156px;
margin-top: -2px;
margin-left:0;
}
div.right
{
float:right;
width:153px;
margin-top: -2px;
margin-left: 547;
}

div.img
{
margin: 0px;
border: 1px solid green;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: -2px;
border: 1px solid red;
}
body
{
background-color: white
}
jessnoonyes
05-26-2008, 02:40 AM
Instead of having <div class="left"> and <div class="right">, have both of those inside one div that spans the full width. Then inside that div you can float both images to the left and right of the written words.
hopi
05-26-2008, 03:04 AM
Will I still be able to put something in the center? Would I add to the div for the images a z-index: -1; so that the text for the center would be on top? Or maybe add a background: transparent; so the text show through? Thank you. Warm regards, Hope
jessnoonyes
05-26-2008, 03:24 AM
No, you would just have the images float to the sides of the words. Like so:

<div id="longdiv">

<img src="images/lsp169.jpg" height="160" alt="img169" style="float:left;"/>
<img src="images/lsp166.jpg" height="160" alt="img166" style="float:right;" />

Words Words Words Words Words Words Words Words Words Words

</div>

Something like that. The words should fill in the space between the two images.
jessnoonyes
05-26-2008, 03:26 AM
Or if that doesn't work you can have three divs wrapped inside of one, the two images and the text each having their own div and the image divs floating to the left and right of the text.

<div id="longdiv">

<div class="floatleft">image</div>
<div class="floatright">image</div>
<div class="words">Words</div>

</div>


One of those two solutions should work for you.
hopi
05-26-2008, 04:31 AM
Thank you, I will try both. I also found that I could add {clear: right;} and {clear: left;}. This div stuff is tricky. Thank you. Warm regards, Hope