Re: [css-d] Disabling wrapping elements within a div
Mike Botsko wrote: > Thanks, this worked perfectly! You are very welcome! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Disabling wrapping elements within a div
Thanks, this worked perfectly!
Michael Botsko
Web Developer
503.227.2571 x230
AIM: botskonet
TechTracker, Inc
www.techtracker.com
-Original Message-
From: Donna Casey [mailto:[EMAIL PROTECTED]
Sent: Monday, April 17, 2006 10:11 AM
To: CSS Discuss (E-mail)
Cc: Mike Botsko
Subject: Re: [css-d] Disabling wrapping elements within a div
Mike Botsko wrote:
> http://www.botsko.net/test.html
However, I don't want the link text itself
> to wrap, so that a link is broken between two lines. I just want the
> entire link to be pushed to the next line if the first line is too
> long, I don't want it to wrap the link itself otherwise the gray box
> starts on one line and ends on the next
for your tags, add the following properties:
display: block;
width: auto;
float: left;
white-space: nowrap;
and then, just before the closing div of the container that surrounds
all the links, add a clearing element:
.clearme {
clear: both;
height: 0px;
}
See this page. I set the #simulatedHeader to an 80% width so you can
change the browser width and see that all the links behave as expected.
http://n2dreamweaver.com/n2dreamweaver/tips/nowrap.htm
HTH
Donna
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Disabling wrapping elements within a div
Thanks. However, that causes the links to jump out of the containing header DIV
in Firefox. In IE, the last item on each line is not wrapped, just wrapped
within its own DIV, which expands the line-height. I'll try this using lists,
but so far I'm still getting the weird wrapping in IE.
Michael Botsko
Web Developer
503.227.2571 x230
AIM: botskonet
TechTracker, Inc
www.techtracker.com
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of Glenn E.
Lanier, II
Sent: Monday, April 17, 2006 10:00 AM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] Disabling wrapping elements within a div
From: Mike Botsko
Sent: Monday, April 17, 2006 11:40 AM
> http://www.botsko.net/test.html
> That I am designing a very basic set of links. In the real
> site, the header will limit this area to a min-width of
> 600px. The number of links within this area will vary. If
> there are too many, I want them to wrap to the next line.
> However, I don't want the link text itself to wrap, so that a
> link is broken between two lines. I just want the entire link
> to be pushed to the next line if the first line is too long,
> I don't want it to wrap the link itself otherwise the gray
> box starts on one line and ends on the next - very ugly. I
> need this to work in IE 6+, Firefox, Safari.
Add float:left; to your #subCatLinkBox a rule, i.e.,
#subCatLinkBox a
{
/* all your other rules */
border: 1px solid #ccc;
float:left; /* the new rule */
}
You *may* have to add a clear:left; to the section following your
div#subCatLinkBox.
However, you may want to look at marking these links as an unordered list
instead of many div's containing a single link.
See the wiki for List tricks [1], which includes a link to Listamatic [2]
which should prove really helpful. If you want the links to appear in
columns, then the wiki multiple column lists [3] may help.
[1] http://css-discuss.incutio.com/?page=ListTricks
[2] http://css.maxdesign.com.au/listamatic/
[3] http://css-discuss.incutio.com/?page=MultipleColumnLists
--G
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Disabling wrapping elements within a div
Mike Botsko wrote:
> http://www.botsko.net/test.html
However, I don't want the link text itself
> to wrap, so that a link is broken between two lines. I just want the
> entire link to be pushed to the next line if the first line is too
> long, I don't want it to wrap the link itself otherwise the gray box
> starts on one line and ends on the next
for your tags, add the following properties:
display: block;
width: auto;
float: left;
white-space: nowrap;
and then, just before the closing div of the container that surrounds
all the links, add a clearing element:
.clearme {
clear: both;
height: 0px;
}
See this page. I set the #simulatedHeader to an 80% width so you can
change the browser width and see that all the links behave as expected.
http://n2dreamweaver.com/n2dreamweaver/tips/nowrap.htm
HTH
Donna
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Disabling wrapping elements within a div
From: Mike Botsko
Sent: Monday, April 17, 2006 11:40 AM
> http://www.botsko.net/test.html
> That I am designing a very basic set of links. In the real
> site, the header will limit this area to a min-width of
> 600px. The number of links within this area will vary. If
> there are too many, I want them to wrap to the next line.
> However, I don't want the link text itself to wrap, so that a
> link is broken between two lines. I just want the entire link
> to be pushed to the next line if the first line is too long,
> I don't want it to wrap the link itself otherwise the gray
> box starts on one line and ends on the next - very ugly. I
> need this to work in IE 6+, Firefox, Safari.
Add float:left; to your #subCatLinkBox a rule, i.e.,
#subCatLinkBox a
{
/* all your other rules */
border: 1px solid #ccc;
float:left; /* the new rule */
}
You *may* have to add a clear:left; to the section following your
div#subCatLinkBox.
However, you may want to look at marking these links as an unordered list
instead of many div's containing a single link.
See the wiki for List tricks [1], which includes a link to Listamatic [2]
which should prove really helpful. If you want the links to appear in
columns, then the wiki multiple column lists [3] may help.
[1] http://css-discuss.incutio.com/?page=ListTricks
[2] http://css.maxdesign.com.au/listamatic/
[3] http://css-discuss.incutio.com/?page=MultipleColumnLists
--G
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
