SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Object problem

  1. #1
    SitePoint Enthusiast Aaroniza's Avatar
    Join Date
    Dec 2005
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Object problem

    I couldn't think of a suitable title but anyway...
    I have some css "boxes" that hold links in them and that go horizontally of the page
    Code:
    #links {
    text-align: center;
    background-color: #A08C6B;
    border: 1px #000000 solid;
    width:120px;
    position: fixed;
    top: 80px;
    margin-left:1px;
    }
    Now, If i put two of these together (<div id="links">First link</div><div id="links">Second link</div>) then they overlap. What should i do to fix this without using messy margin tags.
    Thanks
    oh, and excuse me for my bad CSS markup I usually code desktop applications not websites

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds like a menu...
    See if this helps...http://css.maxdesign.com.au/listamatic/horizontal07.htm

  3. #3
    SitePoint Enthusiast Aaroniza's Avatar
    Join Date
    Dec 2005
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that but it turned out vertical and didn't even work in firefox.
    Anymore ideas?

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Float left, PS use Ul LI 's for menu's, i think BonRouge is pionting to that

    PS and an other thing, IE hovers only on A tag's

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	.links {
    text-align: center;
    background-color: #A08C6B;
    border: 1px #000000 solid;
    width:120px;
    top: 80px;
    margin-left:1px;float:left;
    } 
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    <div class="links">First link</div><div class="links">Second link</div>
    
    </body>
    </html>

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I tried that but it turned out vertical and didn't even work in firefox.
    Don't tell fibs

    The code worked straight away in firefox with no modifications at all .

    I've simplified it a bit below and fixed ie.

    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    #navlist ul
    {
    margin: 0;
    white-space: nowrap;
    padding: 0;
    }
    #navlist li
    {
    display: inline;
    list-style-type: none;
    position:relative;
    }
    #navlist a
    {
    padding: 1px 12px;
    border: 1px solid #333;
    background-color: #999;
    color: #EEE;
    text-decoration: none;
    }
    #navlist a:hover,#navlist a#current
    {
    border: 1px solid #333;
    background-color: #FF6600;
    color: #333;
    }
     
    </style>
    </head>
    <body>
    <ul id="navlist">
     <li><a href="#" id="current">Item one</a></li>
     <li><a href="#">Item two</a></li>
     <li><a href="#">Item three</a></li>
     <li><a href="#">Item four</a></li>
     <li><a href="#">Item five</a></li>
    </ul>
    </body>
    </html>

    In your original code you are using position:fixed which you should not be using at all as it fixes the element in one place relative to the viewport at all times. The biggest reason for not using position:fixes is because IE doesn't understand it anyway.

    If you are styling a menu or a selection of similar items then you should use a semantic structure like a list which is perfect for this and provides all the hooks you need for styling.

    Block elements will not align next to each other unless you float then or set them to display:inline (as in the list example). Block elements always start on a new line under the previous element unless of course they are absolutely positioned and then will appear wherever you put them. However absolute positioning isn't the best way to go as you lose the flow of the document.

    Play around with the example above and it should do what you want without too much trouble

  6. #6
    SitePoint Enthusiast Aaroniza's Avatar
    Join Date
    Dec 2005
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Woot, that works thanks! "kore"


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
  •