www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Positioning elements using CSS

  1. #1
    Join Date
    Jun 2006
    Location
    Doncaster
    Posts
    78

    resolved [RESOLVED] Positioning elements using CSS

    Hi, the CSS has got me...

    Below is a grid layout, currently not having any content.
    I'm having two issues: in Dreamweaver CS3 I keep losing divs - literally, when previewed sections are not there. This happens in IE7 and Firefox.

    Also in Dreamweaver, the design preview shows some of the 5px divs as much wider although this does not show up in the browser.

    I've sent both pages through the HTML and CSS validators.

    Can anyone point out where I may be going wrong?

    This is the 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>Welcome to THT Doncaster</title>
    <style type="text/css">
    body {
    color: #FFFFFF;
    
    }
    
    #positioned-element44 {
    background-color: #ffffff;
    height: 525px;
    left: 50px;
    position: absolute;
    top: 55px;
    width: 5px;
    z-index: 100
    }
    
    #HEADLINEBOX {
    background-color: #800000;
    height: 75px;
    left: 55px;
    position: absolute;
    top: 55px;
    width: 155px;
    z-index: 20
    }
    
    #positioned-element39 {
    background-color: #ffffff;
    height: 5px;
    left: 50px;
    position: absolute;
    top: 50px;
    width: 650px;
    z-index: 100
    }
    
    #positioned-element23 {
    background-color: #ffffff;
    height: 40px;
    left: 295px;
    position: absolute;
    top: 25px;
    width: 5px;
    z-index: 4
    }
    
    #positioned-element21 {
    background-color: #ffffff;
    height: 120px;
    left: 455px;
    position: absolute;
    top: 55px;
    width: 5px;
    z-index: 10
    }
    
    #positioned-element17 {
    background-color: #ffffff;
    height: 5px;
    left: 55px;
    position: absolute;
    top: 130px;
    width: 645px;
    z-index: 100
    }
    
    #positioned-element15 {
    background-color: #ffffff;
    height: 5px;
    left: 50px;
    position: absolute;
    top: 575px;
    width: 645px;
    z-index: 100
    }
    
    body {
    background-image: url(images/155475_5051.jpg)
    }
    
    #positioned-element41 {
    background-color: #ffffff;
    height: 525px;
    left: 695px;
    position: absolute;
    top: 55px;
    width: 5px;
    z-index: 100
    }
    
    #positioned-element18 {
    background-color: #ffffff;
    height: 525px;
    left: 210px;
    position: absolute;
    top: 55px;
    width: 5px;
    z-index: 100
    }
    
    #positioned-element20 {
    background-color: #ffffff;
    height: 5px;
    left: 55px;
    position: absolute;
    top: 130px;
    width: 400px;
    z-index: 1
    }
    
    #positioned-element22 {
    background-color: #ffff00;
    height: 395px;
    left: 55px;
    overflow: hidden;
    position: absolute;
    top: 180px;
    width: 155px;
    z-index: 20
    }
    
    #positioned-element25 {
    background-color: #CC3300;
    height: 75px;
    left: 215px;
    position: absolute;
    top: 55px;
    width: 480px;
    z-index: 20
    }
    
    #positioned-element26 {
    background-color: #ffffff;
    height: 5px;
    left: 55px;
    position: absolute;
    top: 175px;
    width: 645px;
    z-index: 100
    }
    
    #positioned-element27 {
    background-color: #8000ff;
    height: 40px;
    left: 55px;
    position: absolute;
    top: 135px;
    width: 155px;
    z-index: 20
    }
    
    #positioned-element28 {
    height: 40px;
    left: 135px;
    position: absolute;
    top: 135px;
    width: 75px;
    z-index: 38
    }
    
    #positioned-element29 {
    background-color: #408080;
    height: 40px;
    left: 215px;
    position: absolute;
    top: 135px;
    width: 75px;
    z-index: 20
    }
    
    #positioned-element30 {
    background-color: #8000ff;
    height: 40px;
    left: 295px;
    position: absolute;
    top: 135px;
    width: 75px;
    z-index: 20
    }
    
    #positioned-element24 {
    background-color: #808000;
    height: 395px;
    left: 215px;
    position: absolute;
    top: 180px;
    width: 480px;
    z-index: 20
    }
    
    #positioned-element21 {
    background-color: #ffffff;
    height: 1px;
    left: 455px;
    position: absolute;
    top: 55px;
    width: 5px;
    z-index: 43
    }
    
    #positioned-element19 {
    background-color: #008080;
    height: 40px;
    left: 375px;
    position: absolute;
    top: 135px;
    width: 75px;
    z-index: 20
    }
    
    #positioned-element31 {
    background-color: #8080ff;
    height: 40px;
    left: 455px;
    position: absolute;
    top: 135px;
    width: 75px;
    z-index: 20
    }
    
    #positioned-element32 {
    background-color: #99CC66;
    height: 40px;
    left: 535px;
    position: absolute;
    top: 135px;
    width: 75px;
    z-index: 46
    }
    
    #positioned-element33 {
    background-color: #8000ff;
    height: 40px;
    left: 615px;
    position: absolute;
    top: 135px;
    width: 80px;
    z-index: 20
    }
    
    #positioned-element34 {
    background-color: #ffffff;
    height: 40px;
    left: 130px;
    position: absolute;
    top: 135px;
    width: 5px;
    z-index: 48
    }
    
    #positioned-element35 {
    background-color: #ffffff;
    height: 40px;
    left: 290px;
    position: absolute;
    top: 135px;
    width: 5px;
    z-index: 49
    }
    
    #positioned-element36 {
    background-color: #ffffff;
    height: 40px;
    left: 370px;
    position: absolute;
    top: 135px;
    width: 5px;
    z-index: 50
    }
    
    #positioned-element37 {
    background-color: #ffffff;
    height: 40px;
    left: 450px;
    position: absolute;
    top: 135px;
    width: 5px;
    z-index: 51
    }
    
    #positioned-element38 {
    background-color: #ffffff;
    height: 40px;
    left: 530px;
    position: absolute;
    top: 135px;
    width: 5px;
    z-index: 52
    }
    
    #positioned-element40 {
    background-color: #ffffff;
    height: 40px;
    left: 610px;
    position: absolute;
    top: 135px;
    width: 5px;
    z-index: 53
    }
    
    #positioned-element28 {
    background-color: #808080;
    height: 40px;
    left: 535px;
    position: absolute;
    top: 135px;
    width: 75px;
    z-index: 54
    }
    
    #positioned-element20 {
    background-color: #ffffff;
    height: 40px;
    left: 290px;
    position: absolute;
    top: 135px;
    width: 5px;
    z-index: 100
    }
    
    #positioned-element21 {
    background-color: #ffffff;
    height: 40px;
    left: 370px;
    position: absolute;
    top: 135px;
    width: 5px;
    z-index: 100
    }
    
    #positioned-element28 {
    background-color: #ffffff;
    height: 40px;
    left: 450px;
    position: absolute;
    top: 135px;
    width: 5px;
    z-index: 100
    }
    
    #positioned-element34 {
    height: 40px;
    left: 535px;
    position: absolute;
    top: 135px;
    width: 75px;
    z-index: 20
    }
    
    #positioned-element35 {
    background-color: #ffffff;
    height: 40px;
    left: 530px;
    position: absolute;
    top: 135px;
    width: 5px;
    z-index: 100
    }
    
    #positioned-element32 {
    background-color: #ffffff;
    height: 40px;
    left: 610px;
    position: absolute;
    top: 135px;
    width: 5px;
    z-index: 100
    }
    </style>
    
    
    </head>
    <body>
    
    
    <div id="positioned-element44">this is the positioned element originally called "positioned-element3"</div>
    
    
    
    
    <div id="HEADLINEBOX">this is the positioned element originally called "positioned-element2"</div>
    
    
    <div id="positioned-element39">this is the positioned element originally called "positioned-element"</div>
    
    <div id="positioned-element17">this is the positioned element originally called "positioned-element17"</div>
    
    
    
    <div id="positioned-element15">this is the positioned element originally called "positioned-element13"</div>
    
    
    <div id="positioned-element41">Rborder</div>
    <div id="positioned-element18">this is the positioned element originally called "positioned-element18"</div>
    
    <div id="positioned-element22"></div>
    
    <div id="positioned-element25">
    &nbsp;</div>
    
    
    
    <div id="positioned-element26">this is the positioned element originally called "positioned-element26"</div>
    <div id="positioned-element27">this is the positioned element originally called "positioned-element26"</div>
    <div id="positioned-element29">this is the positioned element originally called "positioned-element28"</div>
    <div id="positioned-element30">this is the positioned element originally called "positioned-element29"</div>
    <div id="positioned-element24">this is the positioned element originally called "positioned-element21"</div>
    <div id="positioned-element19">this is the positioned element originally called "positioned-element18"</div>
    <div id="positioned-element31">this is the positioned element originally called "positioned-element19"</div>
    
    <div id="positioned-element33">this is the positioned element originally called "positioned-element21"</div>
    <div id="positioned-element20">this is the positioned element originally called "positioned-element19"</div>
    <div id="positioned-element21">this is the positioned element originally called "positioned-element20"</div>
    <div id="positioned-element28">this is the positioned element originally called "positioned-element21"</div>
    <div id="positioned-element34">this is the positioned element originally called "positioned-element22"</div>
    <div id="positioned-element35">this is the positioned element originally called "positioned-element23"</div>
    <div id="positioned-element32">this is the positioned element originally called "positioned-element23"</div>
    </body>
    </html>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Why compare Dreamweaver view with browser view? Use browsers to see the proper layout.

    Using position: absolute; for all your elements will cause problems once you add content as you can already see.

  3. #3
    Join Date
    Jun 2006
    Location
    Doncaster
    Posts
    78

    Thanks Fang...

    The absolutely positioned divs will have limited content, so should scale okay.

    In fact, i have solved the problem myself.
    Dreamweaver was showing the divs with an overflow, hence the apparently random, but totally logical, 73px width on a 5px div.

    RTFM I guess - useful to have a preview showing how wide the div would look with more content!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles