Re: [css-d] Gap below footer
David Laakso wrote:
Brian M. Curran wrote:
Marc or anyone else,
However, I can't get the text for class .columnTitle to center align. If I
set padding and margin for h3 to zero and then text-align: center; it works.
However when I add the class it doesn't work. I added the class because I
want three of the four columns to have a center aligned h3.
Sincerely,
Brian Curran
The headings h1 through h6 are used to create an outline (like the kind
we all made in school) of a documents content. Consequently, h2 follows
h1, h3 follows h2, and so on. Most Web documents have only one h1 (as
it is usually the title of the document). You may have as many h2
through h6 as you need. CSS is used to set their look and feel. A class
is only needed to distinguish a specific difference -- for example, you
have 47 h2 headings, only 3 of which should be red ( those 3 get:
h2.c1 {color: red}).
re: http://www.locallaw11news.com/
Good! Its better as of this writing. Want to push it?
This:
h1Local Law 11 News span class=header and all things related to
Local Law 11 /span/h1
Becomes:
h1Local Law 11 News band all things related to Local Law 11/b/h1
h1 b {font-size: your-call; font-weight: normal;}
This:
h3What is Local Law 11?/h3
Becomes:
h2What is Local Law 11?/h2
This:
p
span class=creditsby: Brian M. Curran/spanbr /
span class=creditsPosted: September 17, 2009/spanbr /
Becomes:
div id=credit
pby: Brian M. Curran/p
pPosted: September 17, 2009/p
div
CSS
#credit p {your call}
These (and the ones at the very bottom of that column):
br /
Local Law 11, in a nutshell, is a New York City Department of Buildings
law that ...br /
br /
This article has been written to serve as a brief primer on Local Law
11. For more .br /
br /
Become:
pLocal Law 11, in a nutshell, is a New York City Department of
Buildings law that .../p
pThis article has been written to serve as a brief primer on Local Law
11. For more ./p
These:
span class=subTitleWhat's the history of Local Law 11?/spanbr /
Local Law 11 is referred to in many differentbr /
Become:
h4What's the history of Local Law 11?/h4
pLocal Law 11 is referred to in many different/p
CSS
h4 {your call}
These:
h5Articles/h5
h5Topics/h5
h5Advertisers/h5
And:
Everyone screen does not default to a white screen (my default is
fuchsia to keep myself from making this mistake).
add:
html, body {background: #fff; color: #000; }
This will keep the NYC Web Accessibility Police from shutting you down:
body {
/*font-size: small; font-family: Arial, sans-serif;*/
font: 100%/1.4 'Helvetica Neue', Arial, sans-serif;
}
Let the p inherit 100%(default) and set h1-h5 using percent.
You may want to make the narrow columns a little wider and adjust the nav (
Good luck.
~d
__
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] web 2.0 style, 100% browser width backgrounds for header and footer
Chris Blake wrote: Hi, http://www.redrunner.co.uk/rr/?q=content/home-page# The design I am trying to recreate can be seen here: http://www.redrunner.co.uk/rr/themes/framework/img/RedRunner.jpg I would like to know how I can have two background images that repeat across the browser and still keep all my content in the 980px wide container. I see this style being used all over the place (web 2.0) but I can't figure out how. Point to one of them. P.S. If anyone knows where the padding at the top of my #navcontainer is coming from then that would be a great help. Line 56. Delete the br /. __ 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] Navigation: Unordered list or simply float links
Hi, In my short time of CSS web page formatting I've been using unordered lists to create navigation buttons. You know: home, about, contact, and etc. Well I've been thinking. Is there anything wrong with: putting my desired a=href ... links in a div, right aligning the text, and thus giving me something similar to a navigation bar? The reason I ask is because: 1. On a project I'm working on I'm not looking to do a nav bar, but rather a bunch of links in a row. Like how you may see at the bottom of a number of websites. 2. In my experience of working with unordered lists, they haven't been the easiest things to manipulate. Sincerely, Brian Curran __ 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] Gap below footer
Originally I thought that when I was sizing my header tags, using percentages, that the base size was that of the p tag. Umm, no. The percent is the size based off the parent element. Which means that if you want to set a basic font size for a whole page, you do it from the body tag. The p style has no effect for text outside of p tags whatsoever. /* = font-size: small; font-family: Arial, sans-serif; = */ font: 100%/1.4 'Helvetica Neue', Arial, sans-serif; I also don't understand the font family change and the 100%/1.4. By increasing or decreasing 1.4 I can see the effect that it has, but why you recommended it I don't know. Arial is a Windows font. It's ugly on other OSes. By putting in Helvetica Neue, you're making it Mac friendly. By putting it first, you're using a prettier font than Arial if it's available. By putting the font size to 100%, instead of small, you're using the user's default font-size, so they can still read your content, which is what the web is all about anyway. The 1.4 is the line-height. It defaults to 1.2 in most browsers, but bigger line-heights make things easier to read, especially at smaller font sizes / long line lengths. Putting in as just a number (instead of a % or px) makes it work off of the default page font-size, so you don't have varying line-heights around the page. Thank you Tim. This is what I was looking for. :) -Brian __ 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] Navigation: Unordered list or simply float links
On 20/09/2009, at 5:27 AM, Brian M. Curran wrote: Hi, In my short time of CSS web page formatting I've been using unordered lists to create navigation buttons. You know: home, about, contact, and etc. Well I've been thinking. Is there anything wrong with: putting my desired a=href ... links in a div, right aligning the text, and thus giving me something similar to a navigation bar? The reason I ask is because: 1. On a project I'm working on I'm not looking to do a nav bar, but rather a bunch of links in a row. Like how you may see at the bottom of a number of websites. 2. In my experience of working with unordered lists, they haven't been the easiest things to manipulate. Hi Brian - Of course you can do what you want! However, I'd be intrigued to know what effect you are having trouble with using an ordered list. You will probably find that a good starting point is to zero everything out with some reset CSS (e.g. http://developer.yahoo.com/yui/reset/ , http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/). This gives you a blank-ish slate to start applying your rules to. Have a look at Listamatic for inspiration http://css.maxdesign.com.au/listamatic/ Cheers, 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/
[css-d] Text not wrapping properly
Hey everyone. I have a bit of a quandary. I have a scroll area
implemented with a div box, which itself is inside of a fieldset for a
form. I have another div area nested inside of this one with a width of
50%, which should, I assume, make it 50% of the width of the parent div
area (the scroll area.)
Below I've posted the CSS, followed by a sample HTML file showing the
hierarchy of elements. In the most deeply nested div box (with a class
of definition), I've tried specifying absolute as well as relative
widths, but nothing gets the text to wrap. I've tried replacing that div
box with both p and span elements, all with both relative and absolute
widths, and I just can't get the text to wrap; in Firefox, it always
spills over the side of the scroll area (the parent div area) and causes
the scrollarea to require me to scroll to the right, and in Opera, it
just cuts off beyond the edge of the scroll area without wrapping.
Does anyone know how I can make this work or if anything's wrong with my
code? Maybe I'm making false assumptions about the behavior I should be
expecting.
Thanks so much!
CSS:
.body {
position: absolute;
left: 340px;
top: 75px;
width: 600px;
font-size: 10pt;
font-family: sans-serif;
}
fieldset.normal {
background-color: LightSteelBlue;
width: 100%;
margin-bottom: 15px;
}
div.definition {
font-size: 0.85em;
width: 50%;
margin: 1%;
}
div class=body
form
fieldset class=normal
!-- This is the scroll area --
div style=height: 200px; overflow: auto; border: solid 2px #999;
margin-left: auto; margin-right: auto; background-color: #eee
div class=definition
Text goes here (this is the text that doesn't wrap
according to the specified width of a definition div box)
/div
/div
/fieldset
/div
James
__
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] Navigation: Unordered list or simply float links
Brian M. Curran wrote: Hi, In my short time of CSS web page formatting I've been using unordered lists to create navigation buttons. You know: home, about, contact, and etc. Well I've been thinking. Is there anything wrong with: putting my desired a=href ... links in a div, right aligning the text, and thus giving me something similar to a navigation bar? The reason I ask is because: 1. On a project I'm working on I'm not looking to do a nav bar, but rather a bunch of links in a row. Like how you may see at the bottom of a number of websites. 2. In my experience of working with unordered lists, they haven't been the easiest things to manipulate. Tim wrote: Hi Brian - Of course you can do what you want! However, I'd be intrigued to know what effect you are having trouble with using an ordered list. You will probably find that a good starting point is to zero everything out with some reset CSS (e.g. http://developer.yahoo.com/yui/reset/ , http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/). This gives you a blank-ish slate to start applying your rules to. Have a look at Listamatic for inspiration http://css.maxdesign.com.au/listamatic/ Cheers, Tim Tim, That is a super resource. Thanks so much. Perhaps now I'll just stick with the list. ... I'd be intrigued to know what effect you are having trouble with using an ordered list. In the past it has just seemed cumbersome to work with. Specifically it seems the list is in a container, so the container and the list both need to be formatted with css. Then items under the list need to be cleared. Maybe there is, but at this point I don't see the up side to using an ul. Perhaps I need to learn more, and then an up side will become apparent. Sincerely, Brian __ 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] Navigation: Unordered list or simply float links
On Sep 20, 2009, at 6:26 AM, Brian M. Curran wrote: ... I'd be intrigued to know what effect you are having trouble with using an ordered list. In the past it has just seemed cumbersome to work with. Specifically it seems the list is in a container, so the container and the list both need to be formatted with css. Then items under the list need to be cleared. Maybe there is, but at this point I don't see the up side to using an ul. Perhaps I need to learn more, and then an up side will become apparent. Using an unordered list (ul/li) is not so much about styling (you can style anything to look the way you want anyway) but about using a well- structured and semantically-rich html foundation. This offers advantages for users that use non-visual UAs (robots...) or screen readers. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ 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] Text not wrapping properly
James Colannino wrote: Hey everyone. I have a bit of a quandary. I have a scroll area implemented with a div box, which itself is inside of a fieldset for a form. I have another div area nested inside of this one with a width of 50%, which should, I assume, make it 50% of the width of the parent div area (the scroll area.)[...] So, I have an update. If the page is loaded with content inside the div box, it wraps. If Javascript adds content to the div box dynamically after the page has loaded, the text doesn't wrap. This happens both in Opera and Firefox. Weird. Anybody have any ideas? James __ 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/
