Forum Moderators: not2easy
What Techniques and Tips Can You Share?
My favorite would have to be this:
h1 {
font: bold 1.3em arial, verdana, sans-serif;
background-color: red;
color: white;
background-image: url(logo.gif);
background-repeat: no repeat;
text-align: middle;
}
It puts your h1 right next to the body tag and if your logo is smallish, you don't need to worry about the text overlapping it (if it's larger, add some padding to it).
I know my code could be simplified but I want people that don't use so much CSS to understand it ;)
So, what do you consider to be the essential techniques and tips when designing pages with CSS?
Nick
I design my pages badly, I'm afraid. I start with an idea in my head but always end up tweaking the CSS and becoming frustrated with the limitations of browsers at the same time.
I also like to try out new ideas as they come to me, often resulting in a totally different design.
Some people create their layout in Photoshop and then convert it to HTML. I know I spend far too much time editing the code and not concentrating on the look. In fact, I feel that designers have become programmers thesedays. Do you agree? Have we lost the way?
Put a properly sized empty <div style="float:left;"> over the logo, and then your header to accomplish the same thing you are trying Nick. (This could probably also be done with position:relative).
It confuses the uninitiated when they try to lift the logo as an image I have discovered. Was contacted by one person trying to establish a link using our logo that couldn't figure out how we were "protecting" it :)
WBF
.clear{
clear: both;
}
Example(without .clear):
<h1>page whatever</h1>
<p>
<img style="float: left;" src="/path/" />
content content content content content content content content content content content content content content content content
</p>
<h2>whatever</h2>
<p>more content</p>
In the above example, the <h2> will position to the right of the image if the image is taller than the paragraph text. Adding an empty div(<div class="clear"></div>) after the first paragraph or adding the .clear class to the <h2>(<h2 class="clear">) will make the <h2> start on a new line, below the image(or whatever was floated).
I know that is a simple one, but it may help someone,somewhere. And..it is an essential CSS technique, in my book.
>Birdman
As for my tip, it has to do w/ vertical navigation. Instead of changing the icon for each list item apply a background image to the individual links as so:
a {
padding-left: 15px; /* width of icon */
background: url(icon.gif) left middle no-repeat;
}
There are two main benifits to this approach.
I know that sounds simple, almost trivial, but without that closing tag, Netscape 4.7 put the columns all together.
The only trouble I see using a background image for the logo is it might be confusing for users. Isn't it common thinking that clicking a site's logo should take you back to the home page. Or are you including an anchor tag in your h1?
I think it is far more confusing to have a link that is not identified as a link. So, links to the home page are text links so identified (i.e. "widgets home"). Besides, this gives more targeted achor text :)
WBF
Takes all the in-line layer positioning information and dumps into css in the head - from where you can cut and paste it into an external style sheet.
Couldn't work without it.
Sure, its not for css purists, but then as Nick has pointed out previously, I am a code hooligan with no pride ;)
Another trick I've just started playing with is to use background images, image replacement, and :hover to create clean, degrading, no-javascript hover buttons. You can do a google search for more details.
By the way Hester, I looked at a page with Opera and made all of the images (including backgrounds) go away. Maybe one of us has an odd version?
display:none
<div class="navbar">
</div> <!-- end of navbar -->
Doing it to every single tag might add too much superfluous code, but where you have a whole string of closes together like </div></div></div></div> I find it really helps.
