Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Senior Member tha_Gsheep's Avatar
    Join Date
    Feb 2003
    Location
    Scotland
    Posts
    188
    Member #
    780
    Ello, this is funny if you use netscape 6 to look at this page:
    http://www.westclub.co.uk/newsite/css/notreall.html

    You'll see that the layers have been shifted straight up and halved for some reason, but its not a z-index problem. The answer lies in something to do with the {Display: block} because thats the only time I can get the solid colour behind the full image but of course it inserts line breaks. So use spans right? or inline? but that dosen't work.

    I'm stumped and I was really looking forward to using PHP insert to make this my nice and clean header that would be soo managable.

    Help me boys!

    Gsheep.xxxx

    P.s. of course explorer renders it fine so you can see what its supposed to look like there.

    P.P.s Thought I'd add money to this one to make things competitive.
    www.appletv.co.uk

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    try using "display:inline" and see if that changes anything.

  4. #3
    Senior Member tha_Gsheep's Avatar
    Join Date
    Feb 2003
    Location
    Scotland
    Posts
    188
    Member #
    780
    nope, that has absolutley no effect for some reason. You would think that it would carry out the same purpose as block but obviously not here.

    http://www.westclub.co.uk/newsite/css/header.css
    heres just a link to the CSS sheet for quick viewing.
    www.appletv.co.uk

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Block displays the element in its own block, similar to how a paragraph or header is displayed, with a line break before and after it.

    Inline, on the other hand, will place the element inline with its parent element, similar to a span or image element.

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Try this:
    Code:
    <body tracingsrc="bac.gif" tracingopacity="50" leftmargin="10" topmargin="10">
    <div id="Nav" style="width:710px; height:150px;">
        <img src="images/NAV_TOP.gif" width="710" height="20"><br>
        <img src="images/NAV_middlle_default.jpg" width="710" height="109"><br>
        <img src="images/NAV_bottom.gif" width="710" height="26"><br>
    </div>
    <div id="Buttons" style="position: relative; top: -24px; width: 710px; height:24px;">
        <a href="http://www.home.com" class="ala"><img class="ala" src="images/NAV_BUTTON_home.gif" width="31" height="24"></a>&nbsp;
        <a href="http://www.nights.com" class="ala"><img class="ala" src="images/NAV_BUTTON_nights.gif" width="31" height="24"></a>&nbsp;
        <a href="http://www.photos.com" class="ala"><img class="ala" src="images/NAV_BUTTON_photos.gif" width="31" height="24"></a>&nbsp;
        <a href="http://www.articles.com" class="ala"><img class="ala" src="images/NAV_BUTTON_articles.gif" width="32" height="24"></a>&nbsp;
        <a href="http://www.vip.com" class="ala"><img class="ala" src="images/NAV_BUTTON_vip.gif" width="30" height="24"></a>&nbsp;
        <a href="http://www.forums.com" class="ala"><img class="ala" src="images/NAV_BUTTON_forums.gif" width="31" height="24"></a>&nbsp;
        <a href="http://www.location.com" class="ala"><img class="ala" src="images/NAV_BUTTON_location.gif" width="31" height="24"></a>&nbsp;
        <a href="http://www.contact.com" class="ala"><img class="ala" src="images/NAV_BUTTON_contact.gif" width="31" height="24"></a>
    </div>
    </body>

  7. #6
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Also, get rid of this stuff out of your header.css:
    Code:
    #Nav {}
    #Title {}
    #Buttons {}

  8. #7
    Senior Member tha_Gsheep's Avatar
    Join Date
    Feb 2003
    Location
    Scotland
    Posts
    188
    Member #
    780
    Nope sorry Trans, its not giving. What is it in the actual DOM that is the problem? Have you got any idea if so please enlighten me? I can see where your coming from though and it does look cleaner, but still just will not work.
    I haven't got a clue which area to try manipulating!
    www.appletv.co.uk

  9. #8
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Oh... well your problem lies in that you're putting absolute positioning on your DIVs.

    If you use relative positioning, they will line up much better. the way relative positioning works, you just put your relative to the position it would normally occupy.

    For instance, if we have the following:
    Code:
    <div style="position: relative; 
                width: 500px; 
                height: 100px; 
                background-color: blue;">
    
    </div>
    <div style="position: relative; 
                width: 400px; 
                height: 80px; 
                background-color: black;">
    
    </div>
    <div style="position: relative; 
                width: 300px; 
                height: 60px; 
                background-color: yellow;">
    
    </div>
    We can adjust the relative position of the second one to line up with the top of the first one like so:
    Code:
    <div style="position: relative; 
                width: 500px; 
                height: 100px; 
                background-color: blue;">
    
    </div>
    <div style="position: relative; 
                top: -100px;
                width: 400px; 
                height: 80px; 
                background-color: black;">
    
    </div>
    <div style="position: relative; 
                width: 300px; 
                height: 60px; 
                background-color: yellow;">
    
    </div>
    You'll notice in this example that the third box hasn't moved. That's because its relative position remains the same as always (no elements have been added or removed before it, or had their sizes changed). We can line up all of the elements on the bottom using this:
    Code:
    <div style="position: relative; 
                width: 500px; 
                height: 100px; 
                background-color: blue;">
    
    </div>
    <div style="position: relative; 
                top: -80px;
                width: 400px; 
                height: 80px; 
                background-color: black;">
    
    </div>
    <div style="position: relative; 
                top: -140px;
                width: 300px; 
                height: 60px; 
                background-color: yellow;">
    
    </div>
    Notice that the second div gets a top position of negative of its height. The third div must subtract the height of the second div also, because its relative position includes the height of both.

    Here, we encapsulate the second div and the third div into one super-div, eliminating the need to subtract heights... notice the super-div is moved up relative to the first div and the third div relative to the second div (inside the super-div). I'm lining these up on the top.
    Code:
    <div style="position: relative; 
                width: 500px; 
                height: 100px; 
                background-color: blue;">
    
    </div>
    <div style="position: relative; 
                top: -100px;">
    
        <div style="position: relative;
                    width: 400px; 
                    height: 80px; 
                    background-color: black;">
        </div>
        <div style="position: relative; 
                    top: -80px;
                    width: 300px; 
                    height: 60px; 
                    background-color: yellow;">
        </div>
    </div>

  10. #9
    Senior Member tha_Gsheep's Avatar
    Join Date
    Feb 2003
    Location
    Scotland
    Posts
    188
    Member #
    780
    Sorry transio, haven't had even a second to try out your suggestion. I will as soon as I can and I'll reply.
    www.appletv.co.uk


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:12 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com