Re: [css-d] Q and A (Question and Answer) format using ul
Hi Stephen,
Personally, I like to use dl for QA features with the dt tag as the question
and the dd tag as the answer. It gives me control over how the two different
elements appear (Q in bold for ex) without assigning id's.
Another method could be the alternating table rows trick, just with a ul
though. Example: li class=odd and alternate with li class=even and then
assign those classes with whatever styling you want.
Hope this helps!
Jenn Mears-Nickerson
Jenn Mears Web Design LLC
39B Northey Street
Salem, MA 01970
617-816-1209
LinkedIn
Facebook
Twitter
From: Stephen Tang clowwizarder...@gmail.com
Sent: Friday, March 13, 2009 11:37 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] Q and A (Question and Answer) format using ul
Hello,
I saw a FAQ page where it listed a question followed by an answer as
follows (fictional question and answer below):
Q. How do I login?
A. You log in by clicking on the login link.
The HTML markup is an unordered list (ul), where the list (li) have
background images for the Q. and A.
ul.QandA li.Q {
background:transparent url(../images/img_Q.gif) no-repeat scroll 0 2px;
padding:0 0 0 20px;
}
ul.QandA li.A {
background:transparent url(../images/img_A.gif) no-repeat scroll 0 2px;
padding:0 0 16px 20px;
}
Does CSS2.1 allow a way to actually use Q. and A. as text? Or
maybe a different markup (dl?) should be used?
I know the background image technique is well-known
(http://css.maxdesign.com.au/listutorial/introduction.htm), but since
in this example, it's just Q and A, I was hoping there is a way
not to use images.
Thanks,
Stephen
__
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] Tricky 3-col layout issue
Hi All, Thank you, at least I know I'm not crazy. I am trying to modify a pre-existing Wordpress template that another person created for a client. I will try and clean up the code and eliminate the table and clutter. The template I am working with had a function installed to switch the sidebar either from left to right and I at least managed to circumvent that, but that last bit of positioning is killing me. Thanks, Jenn Mears-Nickerson From: mx.css...@googlemail.com Sent: Friday, February 06, 2009 6:41 AM To: Gunlaug Sørtun gunla...@c2i.net, j...@jennmearswebdesign.com, css-d@lists.css-discuss.org Subject: Re: [css-d] Tricky 3-col layout issue I have to agree with Georg here. I've noticed you are partially using tables (top section) and then DIVs for layout. You need to clean the code and stick with DIVs. Also the 'IE6 fix' conditional comments need to be removed! ie So if it loads in IE6 it'll add even more tables! I'm unsure why the [if IE 7] you close the but not in any other browser. Next step once you've re-coded it into DIVs is to ensure its at least HTML or XHTML Transitional valid. That should be your starting point. Sorry to seem unhelpful but as was said it would only fail again if further modifications were make or may break in IE7/6 due to the conditional comments. ~Mx On Feb 6, 2009 10:57am, Gunlaug Sørtun wrote: Jenn Mears-Nickerson wrote: http://testblog.jennmearswebdesign.com [...] Here is the relevant CSS as it stands now. [...] Sorry, but it wouldn't make sense to try to debug on CSS level when the source-code it has to act on is as weak as this... http://validator.w3.org/check?uri=http://testblog.jennmearswebdesign.com/ What you're attempting is quite easy when the source-code is good and prepared for it, but more like a maneuver in the dark when the source-code is totally dependent on error-handling across browser-land - like yours is now. Focus on getting the source-code right - not just valid but also somewhat logical in its use of elements/containers - before going any further. Otherwise you may spend days and weeks making it appear to work, only to see it fail again when you try to add something or modify it ever so slightly. regards Georg -- http://www.gunlaug.no __ 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/ __ 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] Tricky 3-col layout issue
Hello,
This may be a simple fix, but I think I have familiarity blindness at this
point. I have a templat layout that I have been customizing and I almost have
it working here:
http://testblog.jennmearswebdesign.com
As you can probably tell, I'm trying to squeeze a third column in on the right,
but the center content keeps forcing it down. I tried wrapping the left column
and the content into their own wrapper div, but it made things even crazier.
Is there a way to float the content (posts) in the center without having to
wrap it into another div?
Here is the relevant CSS as it stands now. I put a string of asterix next to
the tags that I have been modifying from the original:
/* Layout */
.outerMost {
margin: 0 auto;
width: 950px;
background: url(images/950-main_table_bg.gif) center repeat-y;
}
#wrapper {
margin: 0 auto;
width: 912px;
background-color: #FFF;
text-align: left;
}
#header {
background-color: #F5F5E7;
}
/* Header Styles */
#header h1 {
margin: 0;
font-size: 1.8em;
}
#header h1 a {
text-decoration: none;
color: #80904F;
}
#content { ***
float: none;
margin: 0 0 0 10px;
width: 350px;
display: inline; /* IE double margin bug fix */
}
#sidebar {
float: left;
margin: 0 10px 0 10px;
padding: 0 0 0 0px;
width: 206px;
font-size: 0.9em;
display: inline; /* IE double margin bug fix */
border: 2px solid #DFD5BC;
}
* html #content, * html #sidebar {
overflow: hidden; /* For IE */
}
/* Blog */
.post { *
float:left;
width:350px;
}
.posttitle {
margin-bottom: 0;
width: 400px;
color: #FFF;
overflow: auto;
/* Width and overflow to clear '.posttitle a' */
}
.posttitle a {
float: left;
padding: 0 10px;
background: #9BBB38 url(images/posttitle.gif) no-repeat top right;
}
.posttitle a:link, .posttitle a:visited {
color: #FFF;
}
.posttitle a:hover, .posttitle a:active {
background: #E8E7D0 url(images/posttitle.gif) no-repeat 100% -91px;
color: #80904F;
}
.postmeta {
margin-top: 0;
padding-top: 1px;
background: url(images/postmeta.gif) no-repeat top left;
font-size: 0.9em;
color: #999;
}
.postentry { **
width:350px;
}
.permalink {
margin: 0 1.8em 0 0;
padding: 0 0 0 14px;
background: url(images/permalink.gif) no-repeat center left;
}
.commentslink {
padding: 0 0 0 17px;
background: url(images/commentslink.gif) no-repeat center left;
}
Thanks in advance for any help!
Jenn Mears-Nickerson
__
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/
