New to CSS. problem to image positions

HTML & CSS
1

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!

<!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>
2

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>:

<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

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

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

It’s hard to see what look you are aiming for but the structure should be like this to start with.


<!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.