SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,644
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    position 2 ele,ments on bottom of div

    In
    http://sandiegosbroker.com/new.shtml
    How do I correctly make the tabs div app[ear on the bottom of the containing header div (I know a way but its probably not too good.
    Also, Im using niftycorners to make the header div to have rounded corners (javascript) but why it the bottom of that diuv not being rounded? (Instead its ronding just above the tabs div.
    Thanksss
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's appearing rounded for me in FF/IE7/Opera .

    The wrapper is appearing rounded I mean, the header (bottom part) isn't but that's because no code is there to make it rounded '
    After the header div is closed you need to put the nifty corners there
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,644
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I dont know how the nifty corners are even generated, I just pointer the header div to the niftycorners javascript thing. That is what is confusing me on that. Why is the white line not placed at the bottom of its containing div? (header)
    Attached Images Attached Images
    "Oh, and Jenkins--apparently your mother died this morning."

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    For the header you need to use the "fixed-height" setting in the js.

    e.g.

    Code:
    <script type="text/javascript">
    window.onload=function(){
    Nifty("div#container");
    Nifty("div#content","same-height small");
    Nifty("div#footer","small");
    Nifty("div#header","small fixed-height"); 
    
    }
    </script>
    Then you need to clear the floated image in the header because it is upsetting the corners somehow.

    This seems to fix it.

    Code:
    <div id="container">
        <div id="header"> <a href="/"><img src="http://sandiegosbroker.com/images/logo.png" alt="Click to return to the home page" width="250" height="28" border="0" id="logo" /></a> <img src="http://sandiegosbroker.com/images/headshot.gif" alt="George" style="float:right"/>
            <div style="clear:both;width:100&#37;"></div>
            <div id="tabs">
                <ul>
                    <li id="Home"><a href="/"><span>Home</span></a></li>
                    <li class="services"><a href="" class="services"><span>Services</span></a></li>
                    <li class="portfolio"><a href="" class="portfolio"><span>Portfolio</span></a></li>
                    <li class="contact"><a href="" class="contact"><span>Contact</span></a></li>
                </ul>
            </div>
        </div>
        <div id="content">
    Of course you could make it class or perhaps neater would be to use more semantic html as inline elements shouldn't be left hanging in mid air.

    e.g.
    Code:
        <div id="header">
            <p class="logo"><a href="/"><img src="http://sandiegosbroker.com/images/logo.png" alt="Click to return to the home page" width="250" height="28" border="0" id="logo" /></a> <img src="http://sandiegosbroker.com/images/headshot.gif" alt="George" style="float:right"/></p>
            <div id="tabs">
                <ul>
                    <li id="Home"><a href="/"><span>Home</span></a></li>
                    <li class="services"><a href="" class="services"><span>Services</span></a></li>
                    <li class="portfolio"><a href="" class="portfolio"><span>Portfolio</span></a></li>
                    <li class="contact"><a href="" class="contact"><span>Contact</span></a></li>
                </ul>
            </div>
        </div>
    Code:
    p.logo {
        width:100%;
        overflow:hidden;
       margin:0;
    }

  5. #5
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,644
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    You did it to me again, paul
    "Oh, and Jenkins--apparently your mother died this morning."


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
  •