Navigation Layout Problem

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8398
  • Loc: USA

Post 3+ Months Ago

I am trying to get the links on this site to go from side to side rather than on top of each other... I can't seem to accomplish that. The code and the CSS is in the source. Could someone please look it over and help me out there? Thanks :D
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

add "float: left" to the ul

or, add "display: inline-block" to the li
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8398
  • Loc: USA

Post 3+ Months Ago

Neither worked :(
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

use display:inline and set the ul#navlinks line-height to a value, also give it the white-space: nowrap; and display:table; properties.

finally, give "#navlinks li a" a padding

also, ensure the wrapping div#nav has a height and width.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8398
  • Loc: USA

Post 3+ Months Ago

That didn't do anything :(

[EDIT:] I finally got it to be almost the way I want... now they are side to side, but they aren't centered :( One thing fixed, another thing broken :( Thanks for your help so far though :D
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8398
  • Loc: USA

Post 3+ Months Ago

Nevermind... I don't need them centered anymore... I like it how it is :D
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

lol, ok
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8398
  • Loc: USA

Post 3+ Months Ago

mindfullsilence wrote:
lol, ok

Thanks though :D
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Posts: 1417
  • Loc: 55° N, 3° W

Post 3+ Months Ago

Something's wrong when viewed in Opera though...

Image
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8398
  • Loc: USA

Post 3+ Months Ago

Fixed that :D Thanks for pointing that out.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

btw, what did you end up doing to get it to show up horizontally? If the code I gave didn't work than I'm interested to learn another method
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8398
  • Loc: USA

Post 3+ Months Ago

My code was as follows:
Code: [ Select ]
<ul id="navlinks">
    <li><a href="#">Link Title</a></li>
</ul>
  1. <ul id="navlinks">
  2.     <li><a href="#">Link Title</a></li>
  3. </ul>

What I did was:
Code: [ Select ]
<div id="navlinks">
    <ul>
         <li><a href="#">Link Title</a></li>
    </ul>
</div>
  1. <div id="navlinks">
  2.     <ul>
  3.          <li><a href="#">Link Title</a></li>
  4.     </ul>
  5. </div>

And added display: inline; to #navlinks ul () and display: block; to #navlinks ul li {}... that seems to take care of the nonsensical vertical menu :lol:

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 39 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.