...

View Full Version : Having issues with images and div tags



Ziamor
10-21-2010, 11:28 PM
I am ahaving problems with my images. I have all my main contant in div tags with a class called main. I put some images inside, but there are not streching the div area and are going out of bounds.
http://i51.tinypic.com/x3bdsj.jpg
The green area is my main area where I want the images. The red area is my footer. As you can see the images are going off the area I want it to be. How do I fix this?


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" xml:lang="en" dir="ltr">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>D-Day</title>

<link rel="stylesheet" href="../css/style.css" type="text/css" />

</head>

<body>
<div id="container">

<div id="header">
</div>
<div id="main">
<h1>War is Hell - D-Day scenes</h1>
<h2>Scenes from the Normandy invasion relay the greatness and the loss of the day.</h2>
<img src="order.jpg" alt="order" class="floatLeft" width="25%"/>
<p>Ike and the 101st - General Dwight D. Eisenhower gives the order of the Day. `Full victory-nothing else' to paratroopers in England, just before they board their airplanes to participate in the first assault in the invasion of the continent of Europe. D-Day, June 6, 1944.</p>

<img src="utah.jpg" alt="utah" class="floatRight" width="25%"/>
<p>Utah Beach - Members of an American landing party lend helping hands to others whose landing craft was sunk by enemy action off the coast of France. These survivors reached Utah Beach, near Cherbourg, by using a life raft. D-Day, Normandy, 1944.</p>

<img src="omaha.jpg" alt="omaha" class="floatLeft" width="25%"/>
<p>Omaha Beach Casualties - American assault troops of the 16th Infantry Regiment, injured while storming Omaha Beach, wait by the Chalk Cliffs for evacuation to a field hospital for further medical treatment. Collville-sur-Mer, Normandy, D-Day, 1944.</p>

<img src="wounded.jpg" alt="wounded"class="floatRight" width="25%"/>
<p>Wounded on Stretchers - American wounded being carried on stretchers. Normandy, 1944.</p>

<img src="bunker.jpg" alt="bunker" class="floatLeft" width="25%"/>
<p>Concrete Bunker - Monster Nazi gun battery silenced in France. This German gun emplacement has walls of concrete 13 feet thick and four guns each with a 10 inch bore. This particular position was bombed out of action by Allied flyers before the invasion. France, 1944.</p>

<img src="pow.jpg" alt="pow.jpg" class="floatRight" width="25%"/>
<p>Japanese POW - Dismay and loneliness is written on the face of this young Japanese man, wearing a Nazi uniform, in a roundup of German prisoners on the beaches of France. The Japanese man is giving his name and number to an American Army captain. France, 1944. </p>
</div>
<div id="footer">Alex Zukowski&copy; 2010
</div>
</div>

</body>

</html>


CSS


body
{

}
#container
{
width:950px;
margin: 0px auto;
color:#083D52;
}
#header
{
width:950px;
height:365px;
background-image:url('../images/dday_header.jpg');
background-repeat:no-repeat;
}
#main
{
background-color:#efefef;
border: solid 1px #efefef;
}
#main h1,h2
{
color:#51BDE8;
}
#footer
{
background-color:#989898;
padding:0px 10px 5px 10px;
}
img.floatLeft {
float: left;
margin: 4px;
clear: left;
}
img.floatRight {
float: right;
margin: 4px;
clear: right;
}

ilikesemantics
10-21-2010, 11:49 PM
Try this.

#main
{
background:#efefef;
border: 1px solid #efefef;
overflow: auto;
}

can read more here (http://css-tricks.com/all-about-floats/)

also read about background shorthand (http://www.w3schools.com/css/css_background.asp). You have to scroll down a bit.

Ziamor
10-21-2010, 11:57 PM
Thank you so much! I've been pulling my hair from this for that last couple of hours.

ilikesemantics
10-22-2010, 12:14 AM
You're welcome.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum