Re: [css-d] css3 selectors
You should use h* elements instead of p elements for any kind of header. You might then not need to specify any classes and it's more semantically correct Sent from my iPhone On Mar 26, 2009, at 9:21 AM, Climis, Tim tcli...@indiana.edu wrote: What about doing it backwards then put a class on the p and target the following ul What I'm going for is to take the bottom margin off of a paragraph preceding a list. I don't need the list to be styled any differently, so there's no reason to target it at all. Here's a list: * Something * Something else Instead of: Here's a list: *something *something else So targeting the ul doesn't make much sense. What I've got now is a list_header class that goes on all the p elements that are really list headers. But I thought it would be cool if I didn't need the class, and could just say any paragraph before a list is a list header instead. __ css-discuss [cs...@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/ __ css-discuss [cs...@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/
Re: [css-d] Word Links
I assume you mean CSS, not CCS? I'm not aware of any mechanism to create links (of the a sort) in CSS. How exactly do you want to link certain words to specific pages? Any appearances of dog, cat and mouse always become links to /animals.html? On Wed, Mar 25, 2009 at 5:31 PM, Alain Durocher ala...@usc.edu wrote: I need to have certain words be linked to specific pages wherever they appear throughout our site. I would greatly appreciate assistance on how to write the CCS for this function. I have searched my Eric Meyer books for the answer to this question but cannot seem to find it the answer. Thanks, Alain J. Durocher Manager, Multimedia Programs Strategist Information Technology Services (ITS) Technology Enhanced Learning University of Southern California ph 213.923.9668 fx 213.821.2725 ala...@usc.edu __ css-discuss [cs...@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/ -- Scott Mueller http://www.appletree.com AppleTree - Solve the Puzzle __ css-discuss [cs...@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/
[css-d] 3 columns of text, but MINIMAL wrapping, possible?
I would think this is fairly common, but I can neither find a solution or figure one out :(. I just want 3 columns in my header like this (texts are just examples): Login/SignupWe are the bestLanguages | Settings | Help The difficult part is that I want these columns to NOT wrap as much as possible, spread across the width of the browser window and have equal amounts of whitespace between. So when the browser window is small, they can crunch right next to each other (maybe with 1-2 ems padding between). Any more downsizing of the browser window and they'll HAVE to wrap, that's ok, but ideally I'd love a min-width setting that acts on that threshold. This is easily achieved (though I haven't even tried it) using tables. But I need We are the best (not my real text) to be top in the source order. And, of course, I'm very hesitant to use tables for layouts. I know there's a display: table declaration, but I understand no IE browsers pay attention to it... maybe there's an IE hack for this? Oh and Languages is a drop-down menu. Is the above possible without using a table for the layout? Is the above possible while keeping We are the best at the top of the source order? Thanks so much for any help. This is my first CSS stylesheet, I've only just read a few books on CSS including the excellent Flexible Web Design Creating Liquid and Elastic Layouts with CSS by Zoe Gillenwater. -- Scott Mueller http://www.appletree.com AppleTree - Solve the Puzzle __ css-discuss [cs...@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/
Re: [css-d] 3 columns of text, but MINIMAL wrapping, possible?
Hi Gunlaug, thank you for your quick response. Sounds like I'm best off using a table for my layout as painful as that sounds after reading 3 books properly explaining how wrong doing so is... On Sun, Mar 22, 2009 at 5:16 PM, Gunlaug Sørtun gunla...@c2i.net wrote: Scott Mueller wrote: The difficult part is that I want these columns to NOT wrap as much as possible, spread across the width of the browser window and have equal amounts of whitespace between. I know there's a display: table declaration, but I understand no IE browsers pay attention to it... maybe there's an IE hack for this? IE8 has proper support for CSS table, and older IE versions can be tricked... http://www.gunlaug.no/tos/moa_11h.html However, problems arise when one wants source-ordering, table behavior and old IE trickery all at once in a self-adjusting layout. Neither HTML table nor CSS table permits real source-ordering, so you'll probably end up with a complex solution to a small problem. I don't think it's worth it for anything but proof of concept cases. In real life I would forget source-ordering, and use a regular HTML table for a case like yours, to achieve optimal fluidity without premature wrapping, while avoiding problems with older IE versions' lack of CSS table support. You also have to take into account that text can/will be resized, which in itself will complicate things enough if your case is supposed to work across browser-land and various end-user options. regards Georg -- http://www.gunlaug.no -- Scott Mueller http://www.appletree.com AppleTree - Solve the Puzzle __ css-discuss [cs...@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/
Re: [css-d] 3 columns of text, but MINIMAL wrapping, possible?
Hi Tim, thanks for the response. The issue I have is I really don't want
the text to wrap. It either should only wrap if absolutely necessary (all
whitespace is consumed) or horizontal scrollbars should appear when
absolutely necessary. So it is the equal whitespace that I care about, not
equal size columns. The text also changes for each column based on which
language you're viewing it in, your name, whether you're logged in, etc.
My specified source order isn't the end of the world, just a strong desire.
If I can just do this without tables it would be nice.
On Sun, Mar 22, 2009 at 5:37 PM, Tim Climis tcli...@indiana.edu wrote:
On Sunday, March 22, 2009 7:38:22 pm Scott Mueller wrote:
I would think this is fairly common, but I can neither find a solution or
figure one out :(. I just want 3 columns in my header like this (texts
are
just examples):
Login/SignupWe are the bestLanguages | Settings |
Help
The difficult part is that I want these columns to NOT wrap as much as
possible, spread across the width of the browser window and have equal
amounts of whitespace between.
If you want things to appear out-of-flow, you'll need to specifically
position
them. Do you really want equal amounts of white space, or columns of
equal
width? The latter is easy. The former may not be possible.
You might try three divs like this:
body {min-width: 640px} /* keeps the page from shrinking too much */
div#mainContent {
position:absolute; /* positions this column out of the flow */
left: 33%; /* left 1/3 to leave room for the
left column */
width: 33%; /* width is 1/3 of the screen */
text-align: center; /* aligns the text in the center to help
with the white
space balance */
}
div#left {
float: left;/* need this to keep the div from bumping
the right side down
*/
width: 33%} /* keeps the left column from flowing into the center
one */
div#right {
float: right; /* positions the right column over on the right side
*/
width: 33%; /* again keeps right content out of the middle space */
text-align: right; /* helps keep the white space as equal as
possible */
}
To better approximate the equal white space requirement, you might try
playing
with the width of the left and center columns (change left to 20%, and
center
to 46%, or something like that.) But specially adjusted percents like that
won't hold up well to browser and text resizing. The text will end up
wrapping pretty quickly.
This is easily achieved (though I haven't even tried it) using tables.
But
I need We are the best (not my real text) to be top in the source
order.
And, of course, I'm very hesitant to use tables for layouts. I know
there's a display: table declaration, but I understand no IE browsers pay
attention to it... maybe there's an IE hack for this?
Tables wouldn't let you have that at the top of the source. I forget
whether
they resize to the content, because I haven't used them for positioning in
years. That would be their only benefit in this case, i think (if they do
that).
Oh and Languages is a drop-down menu. Is the above possible without
using a table for the layout? Is the above possible while keeping We
are
the best at the top of the source order?
You can stick whatever you want in a div, so the drop down's not going to
be a
problem at all.
---Tim
__
css-discuss [cs...@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/
--
Scott Mueller
http://www.appletree.com
AppleTree - Solve the Puzzle
__
css-discuss [cs...@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/
Re: [css-d] 3 columns of text, but MINIMAL wrapping, possible?
I see you put my desired source order, thanks! The only issue is the spacing between the header parts needs to be equal (this is the most important requirement). On Sun, Mar 22, 2009 at 6:14 PM, Mauricio (Maujor) Samy Silva css.mau...@gmail.com wrote: Hi Scott, As Gunlaug and Tim pointed out there are some issues for a solid solution for the problem. But, just for studies purposes have a look at a test case hosted at: http://www.maujor.com/temp/css-d/fluid-header.html May be you can find a more consistent solution. Regards Maurício Samy Silva -Mensagem Original- De: Scott Mueller sc...@appletree.com Para: Gunlaug Sørtun gunla...@c2i.net Cc: css-d@lists.css-discuss.org Enviada em: domingo, 22 de março de 2009 21:38 Assunto: Re: [css-d] 3 columns of text, but MINIMAL wrapping, possible? Hi Gunlaug, thank you for your quick response. Sounds like I'm best off using a table for my layout as painful as that sounds after reading 3 books properly explaining how wrong doing so is... On Sun, Mar 22, 2009 at 5:16 PM, Gunlaug Sørtun gunla...@c2i.net wrote: Scott Mueller wrote: The difficult part is that I want these columns to NOT wrap as much as possible, spread across the width of the browser window and have equal amounts of whitespace between. I know there's a display: table declaration, but I understand no IE browsers pay attention to it... maybe there's an IE hack for this? IE8 has proper support for CSS table, and older IE versions can be tricked... http://www.gunlaug.no/tos/moa_11h.html However, problems arise when one wants source-ordering, table behavior and old IE trickery all at once in a self-adjusting layout. Neither HTML table nor CSS table permits real source-ordering, so you'll probably end up with a complex solution to a small problem. I don't think it's worth it for anything but proof of concept cases. In real life I would forget source-ordering, and use a regular HTML table for a case like yours, to achieve optimal fluidity without premature wrapping, while avoiding problems with older IE versions' lack of CSS table support. You also have to take into account that text can/will be resized, which in itself will complicate things enough if your case is supposed to work across browser-land and various end-user options. regards Georg -- http://www.gunlaug.no -- Scott Mueller http://www.appletree.com AppleTree - Solve the Puzzle __ css-discuss [cs...@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/ -- Scott Mueller http://www.appletree.com AppleTree - Solve the Puzzle __ css-discuss [cs...@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/
Re: [css-d] 3 columns of text, but MINIMAL wrapping, possible?
So this is what I'm about to use. It's not equal spacing between the 3
columns, but it decreases (or increases) proportionally. So text won't wrap
until absolutely necessary (all whitespace is consumed). Had to use tables
and couldn't use the source order I wanted either :(. Is there anything
better than this? Can I get equal spacing with tables? Browsers seem to
insert the same amount of padding that the text is wide. If I could make
the left and right cells hug the text, problem would be solved, but
padding:0 and margin:0 declarations seem to have no effect:
html
head
style type=text/css
body {
margin: 0;
padding: 0;
}
table {
width: 100%;
border-collapse: collapse;
}
td#a {
padding: 0;
text-align: left;
background-color: red;
}
td#b {
vertical-align: top;
text-align: center;
background-color: yellow;
}
td#c {
vertical-align: top;
text-align: right;
background-color: #55FF55;
}
form {
display: inline;
}
/style
/head
body
tabletr
td id=aabc def ghi jkl mno pqr stu vwxyz
formselectoptiontest/optionoptionanother/option/select/form/td
td id=babcdefghijklmnoqrstuvwxyz/td
td id=ca/td
/tr/table
/body
/html
On Sun, Mar 22, 2009 at 6:25 PM, Mauricio (Maujor) Samy Silva
css.mau...@gmail.com wrote:
the spacing between the header parts needs to be equal ..
It's possible to achieve ONLY if the header has a fixed width (not fluid as
showed in my approach).
Regards
Maurício
-Mensagem Original-
*De:* Scott Mueller sc...@appletree.com
*Para:* Mauricio (Maujor) Samy Silva css.mau...@gmail.com
*Cc:* Gunlaug Sørtun gunla...@c2i.net ; css-d@lists.css-discuss.org
*Enviada em:* domingo, 22 de março de 2009 22:18
*Assunto:* Re: [css-d] 3 columns of text, but MINIMAL wrapping, possible?
I see you put my desired source order, thanks! The only issue is the
spacing between the header parts needs to be equal (this is the most
important requirement).
On Sun, Mar 22, 2009 at 6:14 PM, Mauricio (Maujor) Samy Silva
css.mau...@gmail.com wrote:
Hi Scott,
As Gunlaug and Tim pointed out there are some issues for a solid solution
for the problem.
But, just for studies purposes have a look at a test case hosted at:
http://www.maujor.com/temp/css-d/fluid-header.html
May be you can find a more consistent solution.
Regards
Maurício Samy Silva
-Mensagem Original- De: Scott Mueller sc...@appletree.com
Para: Gunlaug Sørtun gunla...@c2i.net
Cc: css-d@lists.css-discuss.org
Enviada em: domingo, 22 de março de 2009 21:38
Assunto: Re: [css-d] 3 columns of text, but MINIMAL wrapping, possible?
Hi Gunlaug, thank you for your quick response. Sounds like I'm best off
using a table for my layout as painful as that sounds after reading 3
books
properly explaining how wrong doing so is...
On Sun, Mar 22, 2009 at 5:16 PM, Gunlaug Sørtun gunla...@c2i.net wrote:
Scott Mueller wrote:
The difficult part is that I want these columns to NOT wrap as much as
possible, spread across the width of the browser window and have equal
amounts of whitespace between.
I know there's a display: table declaration, but I understand no IE
browsers pay attention to it... maybe there's an IE hack for this?
IE8 has proper support for CSS table, and older IE versions can be
tricked...
http://www.gunlaug.no/tos/moa_11h.html
However, problems arise when one wants source-ordering, table behavior
and old IE trickery all at once in a self-adjusting layout. Neither
HTML table nor CSS table permits real source-ordering, so you'll
probably end up with a complex solution to a small problem. I don't
think it's worth it for anything but proof of concept cases.
In real life I would forget source-ordering, and use a regular HTML
table for a case like yours, to achieve optimal fluidity without
premature wrapping, while avoiding problems with older IE versions' lack
of CSS table support.
You also have to take into account that text can/will be resized, which
in itself will complicate things enough if your case is supposed to work
across browser-land and various end-user options.
regards
Georg
--
http://www.gunlaug.no
--
Scott Mueller
http://www.appletree.com
AppleTree - Solve the Puzzle
__
css-discuss [cs...@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/
--
Scott Mueller
http://www.appletree.com
AppleTree - Solve the Puzzle
--
Scott Mueller
http://www.appletree.com
AppleTree - Solve the Puzzle
__
css-discuss [cs...@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
