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 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Problem with image placment

    Hi there all i have been reading the forums for a while but signed up tonight as the advice on this forum is fantastic hopefully some one will be of help with a issue i am having

    For collage i need to complete a website layout based on the below image please forgive the messy code i am very new to the code side as you can see i am unable to format the images in the correct position

    Site needs to look this way



    Site Link

    CSS CODE

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>John Leslie | Garden Design</title>
    <link href="css/garden.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div class="container">
      <div class="sidebar1">
     txt
      </div>
      <div class="content">
        <div class="img"> <img src="images/grdns_country_01.jpg" alt="" width="124" height="122" />
          
          <div class="desc">
         <h3>GARDENS</h3>
         <pre>Click for details</pre>
          </div>
     </div>
     <div class="img"> <img src="images/feat_thm_water.jpg" alt="" width="124" height="122" />
       
       <div class="desc">
         <h3>WATER</h3>
         <pre>Click for details</pre>
       </div>
     </div>
     <div class="img"> <img src="images/feat_thm_wood.jpg" alt="" width="124" height="122" />
       
       <div class="desc">
         <h3>WOOD</h3>
         <pre>Click for details</pre>
       </div>
     </div>
     <div class="img"> <img src="images/feat_thm_general.jpg" alt="" width="124" height="122" />
       
       <div class="desc">
         <h3>GENERAL</h3>
         <pre>Click for details</pre>
       </div>
     </div>
      </div>
      <div class="sidebar2"><br  />
           
          <p><a href="#">Home</a></p>
          <p><a href="#">Gallerys</a></p>
          <p><a href="#">Features</a></p>
          <p><a href="#">About Us</a></p>
          <p><a href="#">Contact Us</a></p>
       
    </div>
    </div>
    </body>
    </html>

    HTML CODE

    Code:
    @charset "utf-8";
    body {
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    	padding: 0;
    	color: #666;
    }
    
    ul, ol, dl { 
    	padding: 0;
    	margin: 0;
    }
    h1, h2, h3, h4, h5, h6, p {/* Htag padding */
    	margin-top: 0px;
    	padding-right: 15px;
    	padding-left: 15px;
    	color: #A99C7C;
    }
    /* Start of imgage center layout */
     <style type="text/css">
     div.img
       {
       margin:2px;
       border:1px solid #0000ff;
       height:auto;
       width:auto;
       float:left;
       text-align:center;
       }
     div.img img
       {
    	display:inline;
    	margin:3px;
    	border:1px solid #ffffff;
    	width: auto;
       }
     div.img a:hover img
       {
       border:1px solid #0000ff;
       }
     div.desc
       {
    	text-align:right;
    	font-weight:normal;
    	width:auto;
    	margin:2px;
       }
    /* End of imgage center layout */
    
    a:link { 
    	color:#FFF;
    	text-decoration: none;
    }
    
    a:visited {
    	color: #FFF;
    	text-decoration: underline;
    }
    
    a:hover, a:active, a:focus {
    	text-decoration: blink;
    	color: #9C0;
    	font-size: 100%;
    	line-height: inherit;
    	font-family: Arial, Helvetica, sans-serif;
    }
    
    .container {
    	width: 80%;
    	max-width: 1260px;
    	min-width: 780px;
    	background: #FFF;
    	margin: 0 auto; 
    	overflow: hidden; 
    }
    
    .sidebar1 {
    	float: left;
    	width: 20%;
    	height: 900px;
    	background-image: url(../images/left_panel.png);
    	background-repeat: no-repeat;
    }
    
    .content {
    	padding: 0px 0;
    	width: 60%;
    	float: left;
    	color: #666;
    }
    
    .sidebar2 {
    	float: left;
    	width: 20%;
    	height: 900px;
    	background-image: url(../images/right_panel.png);
    	background-repeat: no-repeat;
    	color: #CCC;
    	font-weight: bold;
    	font-style: italic;
    }
    
    .content ul, .content ol { 
    	padding: 0 15px 15px 40px; 
    }
    Thank you very much in advance greatly appericated
    Last edited by Ani[|]al; 11-23-2011 at 01:58 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Ani[|]al,
    Without your images it's hard to see what the problem is... a link to the test site would be best since this question involves images.

    Have you tried floating those images instead of using display: inline; ... ?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thanks for the fast reply Excavator i have added the site link to my orignal post

    many thanks

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Yes, a good example of why a link works best - if you remove this bit I've highlighted in red, things will look a bit different.
    Code:
    	padding: 0;
    	color: #666;
    }
    
    ul, ol, dl { 
    	padding: 0;
    	margin: 0;
    }
    h1, h2, h3, h4, h5, h6, p {/* Htag padding */
    	margin-top: 0px;
    	padding-right: 15px;
    	padding-left: 15px;
    	color: #A99C7C;
    }
    /* Start of imgage center layout */
     <style type="text/css">
     div.img
       {
       margin:2px;
       border:1px solid #0000ff;
       height:auto;
       width:auto;
       float:left;
       text-align:center;
       }
     div.img img
       {
    	display:inline;
    	margin:3px;
    	border:1px solid #ffffff;
    	width: auto;
       }
     div.img a:hover img
       {
       border:1px solid #0000ff;
       }
     div.desc
       {
    	text-align:right;
    See the links about validation in my signature line below. Pretty handy and they will help you a lot.



    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Ani[|]al (11-23-2011)

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    amazing i cant thank you enough i have been staring at code for 4 hours i really appericate all your help

    *update i have checked the links in your sig extremly helpfull not 100% sure i understand the CSS errors its throwing up and how to fix them

    sorry if this is basic info i am still learning
    Last edited by Ani[|]al; 11-23-2011 at 02:24 AM.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by Ani[|]al View Post
    sorry if this is basic info i am still learning
    Still learning is the secret!

    Look what clear: both; can do for your h1. Just to test, add a background color before and after the clear: both;.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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