SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid 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

  2. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You aren't closing many divs there, which might be what's causing that problem.

    For example, in last piece of code you have 2 <div>:
    Code:
    <div class="float">
    <div style="position:absolute;top:204px;left:1397px;">
    but only one </div>

    Also, why are you trying to use absolute position inside a float? It doesn't make any sense.

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks for your reply.

    Adding the </divs> didnt change anything.

    I am really stuck! If I take away the absolute positioning they all move.

    x

  4. #4
    SitePoint Zealot FaridHadi's Avatar
    Join Date
    Nov 2008
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What are those empty nested divs for? (e.g. <div style="position:absolute;top:204px;left:30px;></div>)

    You need to set a width to those floated divs.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It's hard to see what look you are aiming for but the structure should be like this to start with.

    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 */
    a img, img {
        border:none
    }
    a {
        color: gray;
        text-decoration:none;
    }
    a:visited {
        color: gray;
        text-decoration:none;
    }
    a:hover {
        color: black;
        text-decoration:none;
    }
    html, body {
        margin:0;
        padding:0
    }
    body {
        line-height: 1.3;
        padding:20px 0;
        font-family: Georgia, Serif;
    }
    h1 {
        font-size: small;
        color:#ccc;
        font-weight: lighter;
        letter-spacing: 0.3em;
    }
    h1 a {
        color:#ccc;
    display:block;
    }
    h1 a:hover {
        color: black;
        text-decoration:none;
    }
    h1#header {
        text-transform:uppercase
    }
    h2 {
        font-size: small;
        color: #ccc;
        font-weight: lighter;
        letter-spacing: 0.3em;
    }
    h3 {
        font-size: small;
        color:#ccc;
        font-weight: lighter;
        letter-spacing: 0.3em;
        padding: 0px;
    }
    .menu {
        list-style:none;
        padding:0;
        margin:0;
    }
    .menu img {
        display:block;
    }
    .menu span {
        color:#ccc;
        font-size: 70%;
        font-weight: lighter;
        letter-spacing: 0.3em;
        display:block;
        text-transform:uppercase
    }
    .menu li {
        float: left;
        margin:5px 5px 5px 0;
    }
    </style>
    </head>
    <body>
    <h1 id="header"><a href="index.html">Children</a></h1>
    <ul class="menu">
        <li><a href="colourpop.html"><img src="menu/colourpop.jpg"  width="164" height="210"/></a><span>Colour Pop</span></li>
        <li><a href="ssdresses.html"><img src="menu/ssdresses.jpg"  width="140" height="210"/></a><span>S/S Dresses</span></li>
        <li><a href="lilah.html"><img src="menu/lilah.jpg"  width="280" height="210"/></a><span>Llilah's World</span></li>
        <li><a href="kids.html"><img src="menu/kids.jpg"  width="168" height="210"/></a><span>Kids</span></li>
        <li><a href="fancydress.html"><img src="menu/fancydress.jpg"  width="286" height="210"/></a><span>Fancy Dress</span></li>
        <li><a href="ireland.html"><img src="menu/ireland.jpg"  width="295" height="210"/></a><span>Ireland</span></li>
        <li><a href="birthday.html"><img src="menu/birthday.jpg"  width="315" height="210"/></a><span>Birthday</span></li>
    </ul>
    </body>
    </html>
    You can't add anchors around block elements either. The anchors must be inside although you could set them to display:block if you want the whole area active.


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
  •