Back To Website Design Forum

Navigation Layout Problem

  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post July 8th, 2009, 10:21 pm

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
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post July 8th, 2009, 10:21 pm

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post July 8th, 2009, 11:43 pm

add "float: left" to the ul

or, add "display: inline-block" to the li
Use your words like arrows to shoot toward your goal.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post July 8th, 2009, 11:55 pm

Neither worked :(
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post July 9th, 2009, 12:53 am

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.
Use your words like arrows to shoot toward your goal.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post July 9th, 2009, 10:41 am

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
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post July 9th, 2009, 12:46 pm

Nevermind... I don't need them centered anymore... I like it how it is :D
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post July 9th, 2009, 1:08 pm

lol, ok
Use your words like arrows to shoot toward your goal.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post July 9th, 2009, 1:22 pm

mindfullsilence wrote:
lol, ok

Thanks though :D
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Zwirko
  • Guru
  • Guru
  • User avatar
  • Joined: May 29, 2005
  • Posts: 1417
  • Loc: 55° N, 3° W
  • Status: Offline

Post July 9th, 2009, 4:06 pm

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

Image
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post July 9th, 2009, 4:37 pm

Fixed that :D Thanks for pointing that out.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post July 9th, 2009, 6:30 pm

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
Use your words like arrows to shoot toward your goal.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post July 9th, 2009, 6:47 pm

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:
"Bring forth therefore fruits meet for repentance:" Matthew 3:8

Page 1 of 1

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 152 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.