On Feb 16, 2011, at 11:32 AM, Alan Gresley wrote:
> On 17/02/2011 12:49 AM, James Sheffer wrote:
>> Hey all-
>>
>> In my last post, my problem was the main navigation at the top of the
>> page. I was going to leave it in a "table" format for now, but the
>> middle of the nav produced a "gap" when stretched out. Needing to
>> fix that, I decided to go ahead and re-write it without tables
>> (Thanks Alan for a quick start on the code from the last posting!).
>>
>> I'm not quite sure of the best way to go about this but I ended up
>> using an unordered list to do the nav which seems to work.
>>
>> My problem now (and I'm sure it's an easy fix) is to get the blue bar
>> in the image on the left to line up with the blue nav bar on the
>> right. Right now it is all in a div with "float: left".
>
>
> #nav2 {
> background-position: left 32px; /* add */
> }
> #nav2 li+li {
> float: left;
> margin-top: 32px;/* add */
> }
>
>
> I would remove the the <img from the list.
>
>
>
> <div id="header">
> <img src="graphics/thetoyz_logo.jpg" height="173" alt="thetoyz logo">
> <ul id="nav2"> .... </ul>
> </div>
>
>
> And have this CSS.
>
>
> #header img {
> float: left;
> }
> #nav2 li {
> float: left;
> margin-top: 32px;
> }
>
>
> [snip]
>> I've removed most of the site except the top nav for ease of use:
>> http://new.thetoyz.com/index1.lasso
>>
>
> [snip]
>> I guess my questions to the list are: 1. Is using a list tag a good
>> way to go about this:
>
>
> Yes.
>
>> 2. How to format it so I can align the image
>> with the nav 3. any other tips (I'm new to using CSS to this
>> extent!)
>
>
> Where is nav 3?
>
Sorry that was a typo - there is no nav 3.
I changed my stylesheet and removed the img from the list, adding it in the
header div. This was along my thought pattern of removing it from the list but
I wasn't sure what to do with it!
I'm still doing something wrong. The nav bar lines up "under" the image now,
not the the right of the image.
When I remove the "width: 100%" from nav2, the nav aligns to the right (makes
sense). I also removed the border styles.
I cannot get it to align with the blue bar, however.
I tried playing with "margin-top: 32px;" thinking it would move the nav up or
down from the top, but it shrinks/expands the bar rather than moving it.
Right now the nav bar is about 10px(?) too low...
Here's the page with the new settings:
http://new.thetoyz.com/index2.lasso
ALSO: The nav bar does not stretch with the browser and if the browser is too
small the nav jumps below the image...
Here's what I have:
Stylesheet:
#header img {
float: left;
}
#nav2 li {
float: left;
margin-top: 32px;
}
#nav2 {
float: left;
list-style: none;
font-size: 12px;
background-image:url(/graphics/nav_blue.jpg);
background-repeat: repeat-x;
color: #CCCCCC;
font-weight: bold;
background-position: left 32px;
}
Thanks for your help on this!
James
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
