Inline List and No Wrap problem
in [CSS]
|
Prev: the height of a td
Next: Div inline without float
From: shapper on 7 Apr 2010 21:45 Hello, I am trying to create an inline list with 400px maximum width. Each list item should contain an anchor with padding. Each anchor text should not wrap so the phrase is not broken. At the moment I am not able to "break" the list items so the list does not exceed 400px. I am also having some white space between the previous div and the list. I have an example: http://flyondreams.net/lab/list.htm How can I solve this? Thank You, Miguel
From: Thomas 'PointedEars' Lahn on 7 Apr 2010 22:12 shapper wrote: > I am trying to create an inline list with 400px maximum width. > Each list item should contain an anchor with padding. > Each anchor text should not wrap so the phrase is not broken. > > At the moment I am not able to "break" the list items so the list does > not exceed 400px. > I am also having some white space between the previous div and the > list. (Note: "White space", "white-space" or "whitespace" usually specifies a set of space-like characters.) > I have an example: > http://flyondreams.net/lab/list.htm > > How can I solve this? Use ul, li, li a { float: left; } ul { /* pixel widths/heights are a bad idea, use em, % or ex instead */ max-width: 400px; /* use the similar web-safe color #333 instead */ background-color: #303030; /* add color declaration here, see http://www.w3.org/QA/Tips/color */ } li a { white-space: nowrap; } div.After, div.Before { clear: left; } instead. PointedEars -- var bugRiddenCrashPronePieceOfJunk = ( navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1 ) // Plone, register_function.js:16
From: dorayme on 8 Apr 2010 00:14 In article <90b1635b-61c9-4593-a7a7-bb4a1976bbd4(a)g11g2000yqe.googlegroups.co m>, shapper <mdmoura(a)gmail.com> wrote: > Hello, > > I am trying to create an inline list with 400px maximum width. > Each list item should contain an anchor with padding. > Each anchor text should not wrap so the phrase is not broken. > > At the moment I am not able to "break" the list items so the list does > not exceed 400px. You are tying your hands a bit using so many px dimensions. But if you want to use inline display - floats are more flexible for styling - consider something simpler (add your own colours) like: ul.Cloud {width: 400px; margin: 0; padding: 0;} ul.Cloud li {display: inline; white-space: nowrap;} ul.Cloud li a { text-transform: lowercase; } with <ul class="Cloud"> <li><a href="http://www.google.com">Cars</a></li> <li><a href="http://www.google.com">Beaches</a></li> <li><a href="http://www.google.com">A few good notes</a></li> <li><a href="http://www.google.com">Music</a></li> <li><a href="http://www.google.com">Art</a></li> <li><a href="http://www.google.com">Sports</a></li> <li><a href="http://www.google.com">Surf</a></li> <li><a href="http://www.google.com">Little things</a></li> <li><a href="http://www.google.com">Fashion</a></li> <li><a href="http://www.google.com">Engineering</a></li> <li><a href="http://www.google.com">Travel</a></li> <li><a href="http://www.google.com">Politics</a></li> <li><a href="http://www.google.com">Arquitecture</a></li> <li><a href="http://www.google.com">Design</a></li> <li><a href="http://www.google.com">A few meters up</a></li> </ul> > I have an example: > http://flyondreams.net/lab/list.htm > > How can I solve this? > > Thank You, > Miguel -- dorayme
From: shapper on 8 Apr 2010 08:16 On Apr 8, 3:12 am, Thomas 'PointedEars' Lahn <PointedE...(a)web.de> wrote: > shapper wrote: > > I am trying to create an inline list with 400px maximum width. > > Each list item should contain an anchor with padding. > > Each anchor text should not wrap so the phrase is not broken. > > > At the moment I am not able to "break" the list items so the list does > > not exceed 400px. > > I am also having some white space between the previous div and the > > list. > > (Note: "White space", "white-space" or "whitespace" usually specifies a set > of space-like characters.) > > > I have an example: > >http://flyondreams.net/lab/list.htm > > > How can I solve this? > > Use > > ul, > li, > li a { > float: left; > } Why floating left the UL, LI and A? Wouldn't be enough to float only the LI? > > ul { > /* pixel widths/heights are a bad idea, use em, % or ex instead */ > max-width: 400px; > > /* use the similar web-safe color #333 instead */ > background-color: #303030; > > /* add color declaration here, seehttp://www.w3.org/QA/Tips/color*/ > } > > li a { > white-space: nowrap; > } > > div.After, div.Before { > clear: left; > } Why the need to clear the float on the Before div? Wouldn't be enough to clear only on the After div? > > instead. > And thank for all the other tips. It is working fine. Miguel
From: Gus Richter on 8 Apr 2010 08:46
On 4/7/2010 10:12 PM, Thomas 'PointedEars' Lahn wrote: > /* use the similar web-safe color #333 instead */ > background-color: #303030; > > /* add color declaration here, see http://www.w3.org/QA/Tips/color */ Created Date: 2003-07-30 for your W3C ref link. <http://en.wikipedia.org/wiki/Web_colors#Web-safe_colors> Last modified on 30 March 2010 for the Wikipedia link. "The use of "web-safe" colors has fallen into practical disuse" <http://www.lynda.com/resources/webpalette.aspx> "browser-safe colors are [merely] a historical curiosity" -- Gus |