SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    new to CSS. problem to image positions

    Hi guys,

    Having trouble with making a menu for a simple photography portfolio site.
    The first image on a horizontal strip won't budge! I am thinking it is something to do with the float code for the captions.

    Eek can't get my head around it!

    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">
    <head>
        <title>NERYS JONES PHOTOGRAPHY</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <link href="style1.css" rel="stylesheet" type="text/css" />
    
       <style type="text/css">
           /*
          CSS for Nerys Jones
         */
         
          body {
          line-height: 100%;
          padding: 56px; 
     
          }
    
          h1 {
          font-family: Georgia, Serif;
          font-size: small;
          color: gray;
          font-weight: lighter;
          letter-spacing: 0.3em;
          }
    
          h1:hover {
          color: black;
          text-decoration:none;
          }
    
          h2 {
          font-family: Georgia, Serif;
          font-size: small;
          color: gray;
          font-weight: lighter;
          letter-spacing: 0.3em;
          }
    
          h3 {
          font-family: Georgia, Serif;
          font-size: small;
          color: gray;
          font-weight: lighter;
          letter-spacing: 0.3em;
          padding: 0px;
          }
    
          p {
          font-family: Georgia, Serif;
          color: gray;
          font-size: 70%;
          font-weight: lighter;
          letter-spacing: 0.3em
          
          }
    
          div.float {
          float: left;
          }
      
          div.float p {
          text-align: left;
          margin-top: 0;
          }
    
          a:link {
          color: gray;
          text-decoration:none;
          }
    
          a:visited {
          color: gray;
          text-decoration:none;
          }
    
          a:hover {
          color: black;
          text-decoration:none;
          }
    
       </style>
    </head>
    <body>
    <div id="header">
                 
    
    <a href="index.html"><h1>CHILDREN</h1></a></div>
    
    
    <div class="float">
                  <div style="position:absolute;top:204px;left:30px;"></div>
                  <a href="colourpop.html"><img src="menu/colourpop.jpg" border="0" width="164" height="210"/></a>
                  <p>COLOUR POP</p>
                  </div>
                
    <div class="float">
                 <div style="position:absolute;top:204px;left:228px;">
                 <a href="ssdresses.html"><img src="menu/ssdresses.jpg" border="0" width="140" height="210"/></a>
                 <p>S/S DRESSES</p>
                  </div>
                
    <div class="float"> 
                 <div style="position:absolute;top:204px;left:368px;">
                 <a href="lilah.html"><img src="menu/lilah.jpg" border="0" width="280" height="210"/></a>
                 <p>LILAH'S WORLD</p>
                  </div>
    
    <div class="float"> 
                 <div style="position:absolute;top:204px;left:648px">
                 <a href="kids.html"><img src="menu/kids.jpg" border="0" width="168" height="210"/></a>
                  <p>KIDS</p>
                  </div>
    
    <div class="float"> 
                 <div style="position:absolute;top:204px;left:816px">
                 <a href="fancydress.html"><img src="menu/fancydress.jpg" border="0" width="286" height="210"/></a>
                  <p>FANCY DRESS</p>
                  </div>
    
    <div class="float">
                  <div style="position:absolute;top:204px;left:1102px;">
                  <a href="ireland.html"><img src="menu/ireland.jpg" border="0" width="295" height="210"/></a>
                  <p>IRELAND</p>
                  </div>
    
    <div class="float">
                  <div style="position:absolute;top:204px;left:1397px;">
                  <a href="birthday.html"><img src="menu/birthday.jpg" border="0" width="315" height="210"/></a>
                  <p>BIRTHDAY</p>
                  </div>
             
             
    
    
    
    
    </body>
    </html>
    Last edited by Paul O'B; May 12, 2011 at 08:12. Reason: code tags added


Bookmarks

Posting Permissions

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