1 Reply Latest reply on Jun 4, 2010 12:14 AM by håvardnoren

    Image overlapping and aligning

    håvardnoren

      Hi,

       

      I'm trying to add 2 white lines ontop of my #header picture. I've managed to make them overlap, but I can't seem to move them where I want them to be.

      I'll post my code below, but since I don't have a website, you wont be able to see the picture so I'll be posting a picture on how it looks and how I want it to look below my code.

      Do not hesitate if you feel like commenting on other parts of my code, I do not understand the placement logic in css stylesheet yet...

       

      Here's my css stylesheet code:

       

      @charset "utf-8";
      /* CSS Document */
      body {
       font:"Times new Roman";
      }
      .meny{
       padding-bottom:100;
       font-size:38px;
      }
      h1{
       color:#FFF;
       float:right;
       font-size:88px;
       padding-right:32px;
      
      }
      a{
       color:#FFF;
       font-size:28px;
       text-decoration:none;
       
          margin-left:33px;
       margin-right:0px;
       padding-right:24px;
      }
      a:hover{
       color:#d8d8d8;
       text-decoration:underline;
      }
      
      
      #page{
       background:#d8d8d8;
       position:absolute;
       top:0px;
       left:0px;
       width:1024px;
       height:768;
      }
      #top{
       background:#d8d8d8;
       position:absolute;
       top:0px;
       left:0px;
       width:1024px;
       height:142px;
       }
      
      #line{
       background-image:url(Images/Line.jpg);
       top:162px;
       left:25px;
       height:6px;
       width:378px;
       z-index:1;
      }
      #line2{
       background-image:url(Images/line2.jpg);
       top:187px;
       left:100px;
       height:5px;
       width:379px;
       z-index:2;
      }
      #leftheader{
      background-image:url(Images/Header.jpg);
      position:absolute;
      top:142px;
      left:0px;
      width:700px;
      height:27px;
      padding-top: 91px;
      padding-bottom: 38px;
      z-index:3;
      }
      
      #rightheader{
       background-image:url(Images/Header.jpg);
       position:absolute;
       top:142px;
       left:667px;
       width:357px;
       height:140px;
       padding-top:16px;
       z-index:3;
       
      }
      
      #bottom{
       background:#d8d8d8;
       position:absolute;
       top:298px;
       left:0px;
       width:1024px;
       height:468px;
      }
      #venstre{
       background-color:#FFF;
       position:absolute;
       top:26px;
       left:33px;
       width:608px;
       height:357px;
      }
      #hoyre{
       background-color:#FFF;
       position:absolute;
       top:26px;
       left:667px;
       width:323px;
       height:430px;
      }
      


      Here's my html 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>Webside</title>
      <link href="Stilark backup.css" rel="stylesheet" type="text/css" />
      </head>    
      <body>
      <div id="page">
      
       <div id="top"></div>
          
          <div id="leftheader">
      
          <div id="line"></div>
          
          <div id="line2">
          
          </div>
          
          <a href="Webside.html">Home</a>
          
          <a href="Webside.html">Gimmy</a>
          
          <a href="Webside.html">Carina  </a><a href="Webside.html">Bilder</a>
          
          <a href="Webside.html">Linker</a>
          
          </div>
          
          <div id="rightheader">
          
          <h1>Webside</h1>
          
        </div>
          
      <div id="bottom">
            
            <div id="venstre">
      </div>
              
           <div id="hoyre">
        
           </div>
         
      </div>
      </div>
          
      </body>
      </html>
      


      That white line you see here is my two whitw lines, they're just placed right above each other and the image is kinda small...

       

       

      Webside.png

       

       

      and this is how I want the 2 lines to be placed:

       

      Webside.png

        • 1. Re: Image overlapping and aligning
          håvardnoren Level 1

          I might've thought out a solution for my problem. The padding in my #leftheader is the problem why I can't place my lines where I want them. What I think I need to do is to add my lines inside the #leftheader before I add my links, so that I can use spacing to place my links where I want them after I've added the lines. But earlier on I've had troubles when I wanted to align my links to the bottom of my #leftheader, and that still pussles me why I couldn't do so.

          If I do add something inside my #leftheader and try to align it top, right, bottom, left etc, shouldn't they be aligned according to the outerlines of my #leftheader? (that's what I tried to do, but since i didn't get it to work, I added "padding" to place the links where I wanted them to be) I might've tried to align my links in the wrong place inside my code, anyway I'll try to solve the problem with what I just came up with.