[CSS]Making menu with line

Discussion in 'Graphics & Webdesign' started by galaxyAbstractor, Oct 25, 2008.

Thread Status:
Not open for further replies.
  1. galaxyAbstractor

    galaxyAbstractor Community Advocate Community Support

    Messages:
    5,508
    Likes Received:
    35
    Trophy Points:
    48
    [​IMG]

    I want the links and lines to be in one line as an menu but I'm clearly not suceeded... Any ideas?

    This is the code I am using:

    HTML:
    <div class="menuleft">
    <a href="#">Link1</a><div class="line"><img src="images/line.png" alt="" /></div><a href="#">link2</a><div class="line"><img src="images/line.png" alt="" /></div>
    </div>
    The CSS:

    HTML:
    .menuleft {
    margin-top:-32px;
    padding-left:100px;
    width:100%;
    
    }
    .line {
    margin-top:-33px;
    margin-left:30px;
    }
    Any ideas?

    I tried:

    HTML:
    <div class="menuleft">
    <div class="border">
    <a href="#">Link1</a>
    </div>
    </div><div class="menuleft"><div class="border">
    <a href="#">Link1</a>
    </div>
    </div>
    and

    HTML:
    .menuleft {
    margin-top:-32px;
    padding-left:100px;
    
    }
    
    .border {
    width:40px;
    border-right: #b2d1e1;
    border-right-width:1px;
    border-right-style:solid;
    }
    too but it won't work either
     
    Last edited: Oct 25, 2008
  2. rlodge

    rlodge Member

    Messages:
    230
    Likes Received:
    0
    Trophy Points:
    16
    Don't you need a "display: inline;" or "display: block;" in the css to determine how it is laid out?

    Believe me, I'm no expert but that's what I've used in the menus I've done or edited.
     
  3. galaxyAbstractor

    galaxyAbstractor Community Advocate Community Support

    Messages:
    5,508
    Likes Received:
    35
    Trophy Points:
    48
    nope. inline just moved the links to the position where they were without margin, and block did nothing

    but guess what? display:inline-block; did it yey!

    Please see http://forums.x10hosting.com/marketplace/86973-req-500-credits-fix-ie.html#post473587 too. I give you 500 credits for a working IE solution since display isn't supported by IE (Why would it? Nothing is supported in IE...)
     
    Last edited: Oct 25, 2008
  4. rlodge

    rlodge Member

    Messages:
    230
    Likes Received:
    0
    Trophy Points:
    16
    Well, I gave it a shot. I'm still learning CSS myself so.........

    Glad everything worked out.
     
Thread Status:
Not open for further replies.

Share This Page