Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Having issues with images and div tags

    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.

    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
    Code:
    <!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
    Code:
    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; 
    }

  • #2
    New Coder
    Join Date
    Oct 2010
    Posts
    15
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Try this.

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

    can read more here

    also read about background shorthand. You have to scroll down a bit.
    Last edited by ilikesemantics; 10-21-2010 at 10:55 PM.

  • #3
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much! I've been pulling my hair from this for that last couple of hours.

  • #4
    New Coder
    Join Date
    Oct 2010
    Posts
    15
    Thanks
    0
    Thanked 2 Times in 2 Posts
    You're welcome.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •