On Feb 17, 2011, at 6:41 AM, Alan Gresley wrote:
> On 17/02/2011 9:08 AM, James Sheffer wrote:
>>
>> On Feb 16, 2011, at 3:11 PM, Alan Gresley wrote:
> [snip]
>>> Ok, now that we have the img floating, we will un-float the #nav2
>>> which now behave as a block in normal flow.
>>>
>>> #nav2 {
>>> /* float: left; DELETE */
>>> list-style: none;
>>> font-size: 12px;
>>> background-image:url(http://new.thetoyz.com/graphics/nav_blue.jpg);
>>> background-repeat: repeat-x;
>>> color: #CCCCCC;
>>> font-weight: bold;
>>> background-position: left 32px;
>>> margin:0; /* removing this causes both the img and nav2 to move down
>>> 10px ??? */
>>> overflow:hidden; /* Add to contain the floats */
>>> }
>>>
>>> #header img {
>>> float: left;
>>> }
>>> #nav2 li {
>>> float: left;
>>> margin-top: 32px;
>>> }
>>>
>>>
>>> Since the div#nav2 is in normal flow, it will now expand to the
>>> full width of the viewport. This doesn't stop the list items
>>> dropping when you narrow the viewport enough but it's one step
>>> closer. There are way to stop this but it's time for my sleep.
>>>
>>> Alan-
>>
>> Thank you so much!
>>
>> That lined up the nav as I was wanting!
>>
>> As for the nav wrapping, I noticed that the entire nav wraps, not
>> just one part of it. I can see that this is because it is all in a
>> list.
>
>
> It would happen to any set of sibling elements that are floated.
Right. That's what I figured!
>
>
>> I'll do some homework to see what can be done for this before
>> asking here on the list but if someone can point me in the right
>> direction that would be great. I'm thinking that either I need to
>> get it out of a list, or better yet there is a way to prevent the
>> entire list from wrapping. I'm going to go with the later so If I'm
>> wrong someone please stop me :-)
>>
>> James
>
>
> The later is the best option. I do not know if the original site and format
> had a width declared. This is the common way to somewhat prevent float
> dropping. If the layout is fluid then it never happens if zooming in. My own
> site and menu just grows with zooming.
>
> <http://css-class.com/test/>
>
> It can tolerate a user text size setting of 26px without any wrapping. It can
> tolerate a text size siting of 40px without any wrapping on my widescreen. My
> container has this.
>
> min-width:760px;
> max-width:1300px;
I haven't learned about min/max sizing yet - Something I'll do some studying
about!
>
>
> Now next stage in learning. We will remove the image from the HTML an use it
> as a background-image and float the list again and also add some min-width.
>
> Major parts of the CSS.
>
> #nav2 {
> float: left;
> margin: 0; /* zero out default margin */
> margin-left: 32%; /* see width below, keep it after the margin: 0 above
> */
> width: 68%; /* see margin above */
> background :url(http://new.thetoyz.com/graphics/nav_blue.jpg) left 32px
> repeat-x;
> }
> #website {
> min-width:1000px;
> max-width:1600px;
> }
>
>
> And a test.
>
> <http://css-class.com/x/laaso.htm>
>
>
> Trying resizing the viewport now. A screenshot showing the rendering with a
> user font-size setting of 20px.
>
> <http://css-class.com/x/laaso.png>
>
>
> Working in FF4b, IE9 RC, IE7 mode in IE9 RC, Opera 11 and Safari 5. Not game
> to look in IE6 yet.
>
>
Alan-
Thanks so much for all the info!
I'm going to try to get to it in more depth today but you gave me a plethora of
great info to look over and learn from!
I'll post back (probably with more questions) once I've played around with
everything you have sent and I've done some more studying on the subjects!
Jim
______________________________________________________________________
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/
