[thelist] html/css centering problem for ya

[AG]

I'm not sure how exactly you want the words to flow around, but in order to put the circle in the middle, you could try this:

#globalnav ul{
margin: 0 auto;

border: 1px solid orange;
text-align: center;
width: 65%; /* to constrain the ul width for centering in page */
background-color: #eee;
overflow: hidden; /* takes care of clearing the floats */
line-height: 100px; /* vertical aligns words and circle */
}

#globalnav li{
float: left;
width: auto;
display: inline;
margin: 0em;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 0.5em;
padding-right: 0.5em;
}

I inserted the circle in one of the <li> . Everything else stays the same.
Just and idea.

Ara G.




>________________________________
> From: Audrey Blumeneau <blumeneau at aboutaudrey.com>
>To: "thelist at lists.evolt.org" <thelist at lists.evolt.org> 
>Sent: Tuesday, August 14, 2012 7:57 AM
>Subject: Re: [thelist] html/css centering problem for ya
> 
>Hi John, 
>
>Would the technique that Chris Coyier explains by using pseudo-elemenets :before and :after work for what you are doing?
>
>http://css-tricks.com/float-center/
>
>I am thinking that you are faking the user out by thinking that the words are all one line…. but you would have to find the "middle" and split them into two div's. 
>
>Just a thought.
>
>Audrey Blumeneau
>
>
>
>
>On Aug 14, 2012, at 5:49 AM, John Allsopp wrote:
>
>> Hi everyone
>> 
>> This http://www.johnallsopp.co.uk/tc1/
>> 
>> What I'm wanting is for the circle to be in the middle of the menu (words) so it's basically up a bit.
>> 
>> Let's forget word wrapping for now and just assume all the words are in one line .. what do you suggest for putting the image in the middle and flowing the words around it?
>> 
>> J
>> 
>> -- 
>> -------------------------------------------------------------
>> John Allsopp
>> tel: 01723 376477
>> Twitter: @JohnAllsoppIM
>> 
>> -- 
>> 
>> * * Please support the community that supports you.  * *
>> http://evolt.org/help_support_evolt/
>> 
>> For unsubscribe and other options, including the Tip Harvester
>> and archives of thelist go to: http://lists.evolt.org
>> Workers of the Web, evolt ! 
>
>-- 
>
>* * Please support the community that supports you.  * *
>http://evolt.org/help_support_evolt/
>
>For unsubscribe and other options, including the Tip Harvester
>and archives of thelist go to: http://lists.evolt.org
>Workers of the Web, evolt ! 
>
>
>