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 3 of 3
  1. #1
    Junior Member
    Join Date
    Nov 2014
    Posts
    2
    Member #
    40671

    creating menu and navigation with CSS div and other ways ?

    Hi there,

    I am currently attempting to build a site, and have shot myself a bit in the foot when selecting the menu design.
    It is hopefully to look something like this
    Code:
    item1 ----------------- item2
    item3 - item4 - item5 - item6
    In the good old days of tables, that would have been simple, just create a table,two of the first top fields double their <td> and Bob's you uncle.

    With CSS divs it seems to be much harder, I have to define the position of each element separately using first a relative div, and then define absolute divs inside this to place the elements correctly.

    Can this be right ?
    Last edited by </head>; Nov 02nd, 2014 at 04:13 PM.

  2.  

  3. #2
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    You can set item width as well as separator width.
    <style>
    .item, .separator {
    display: inline-block;
    width: 150px;
    }
    .divider {
    clear: right;
    }
    <div class='item'>Item 1</div> <div class='separator'></div> <div class='separator'></div> <div class='item divider'>Item 2</div>
    <div class='item'>Item 3</div> <div class='item'>Item 4</div> <div class='item'>Item 5</div> <div class='item'>Item 6</div>

  4. #3
    Junior Member
    Join Date
    Nov 2014
    Posts
    2
    Member #
    40671
    Quote Originally Posted by sasha_bolcina View Post
    You can set item width as well as separator width.
    <style>
    .item, .separator {
    display: inline-block;
    width: 150px;
    }
    .divider {
    clear: right;
    }
    <div class='item'>Item 1</div> <div class='separator'></div> <div class='separator'></div> <div class='item divider'>Item 2</div>
    <div class='item'>Item 3</div> <div class='item'>Item 4</div> <div class='item'>Item 5</div> <div class='item'>Item 6</div>
    Ah, that is smart. I can then place all this inside a div that has a set height, and the formation is there!
    Thanks!


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 11:04 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com