Thread Starter
Dgold
(@dgold)
Did I phrase my question badly?
I figured this would take one of you CSS gurus about 5 minutes to show me how!
I would ask on another Forum since it’s mainly a CSS question not WP, but, this is the only code forum I’m on where I know people understand some CSS and care about valid code, please point me to another CSS forum if that’s better
Try this:
#navwrapper
{
width: 100%;
margin: auto;
}
#navleft
{
width: 50%;
float: left;
}
#navright
{
text-align: right;
width: 50%;
float: right;
}
In the HTML document, you’d have
<div id="navwrapper">
<div id="navleft">(your left links)
</div>
<div id="navright">(your right links)
</div>
</div>
Thread Starter
Dgold
(@dgold)
Thanks for the help. It’s not quite working how I want (the navright is flush-right but still appearing 1 line down from the navleft, not directly beside it) but this gave me enough to work with.
You might play around with the widths and see if that helps — especially if you’ve added borders, margins, or padding. Also, if you temporarily assign a background color to each div, you can see if they are overlapping or not.
Try adding
display: block;
to the #navwrapper
Just out of curiosity — isn’t the #navwrapper automatically going to display as block since it’s a div?
It won’t display as a block element if it’s a list. I’m assuming that, since it’s navigation, it’s a list.
And CodingForums is a good board to hop on that cares about valid code and knows about CSS.
I think a link to your page that’s not working correctly would help generate a response here.
Ah that makes sense. I didn’t use a list when I was testing out the solution I offered.
Thread Starter
Dgold
(@dgold)
Thanks for the input. I’m just really new at CSS and I’m not sure about some of the basics. When I was attempting to insert the above code, I think I was messing up the nesting order. Basically I ended up having a few close-div’s in a row, and things got jumbled in my header.
So the way I have it now, I’m using the div id=”navright” but I’m not even using the “navleft”, cuz when I tried to put it in there it messed up.
I already had #navmenu wrapping around it all, and it redefines ul and li to display:inline, so I was trying to combine that with the #navwrapper idea from Marcy above.
Where would be a good place to learn the very-basics of CSS, like how to do nesting, and how to write the { } stuff properly (cuz it’s done in different ways in examples I have been given)? Also I need to learn how classes work, cuz some of my CSS starts with # and some of it starts with a period.
By the way I’ve just been editing my CSS inside WordPress Theme Editor, cuz I’m not sure what I should do it with otherwise. I have access to Dreamweaver & FF with “DOM Inspector” but no idea how to integrate them in the workflow.
If anyone can give me more hints – thank you
A good place to start:
http://www.w3schools.com/css/default.asp
but I am sure there are many others, too.
Good resources – CSS.
# = id
. = class
If you’ve got $25 to spare you cannot do better than lvsonline classes, http://lvsonline.com/. These are instructor-led and quite excellent. The self-study courses are good too, but some of us (me for instance!) need the instructor input in order to JUST DO IT….
Here’s something I slapped together. This works as you describe in the original request for help on Mac OS X, Netscape 7.2, Opera 1.3.2:
http://www.toddseal.com/tests/navfloat.phtml
Another site, particularly for floats and a site I visit all the dang time, is Floatutorial:
http://css.maxdesign.com.au/floatutorial/index.htm
