Looking over at the latest poll running in the sidebar, I see quite a few of you consider yourselves css newbies. Seems like a good opportunity to ask you to ask me some of your css questions. I’ll do what I can to help increase your skills.
Ask any css questions you have in the comments below. Depending on how many questions you have I’ll either answer them in a single post or a series of posts.
Also feel free to ask questions that may need more than a short response. I’ll be happy to write some longer tutorials to answer your questions as well.
If you supply the Q I’ll supply the A. Now get your mind out of the gutter and ask your css questions.
Download a free sample from my book, Design Fundamentals.
I’m alright with CSS, but it’s still one of those things I’m not 100% comfortable with at all times. Can you recommend any good reads or resources that work as a good primer to CSS?
Should I compress my CSS files?
The best practice is to compress CSS files. This will help when users visit, as it will require less downloading time.
Hi Steve,
I’ve come across a lot of websites where the body of the web page is not centered and is instead left aligned, and this is one of my pet peeves. I know centering can be a pain and was wondering if there was a foolproof method that works on all browsers?
Thank you,
Kathy
Thanks for the questions so far. I’ll let people ask more through the weekend and then do my best to answer early next week.
I actually had two questions, one being a little advanced, but CSS3, what can we safely use? What is not accepted yet?
And I dont quite understand why people do “div#divname”. What is the purpose of the “div” in front?
You know, it can be:
-> #same-name (for div), but also
-> #same-name (for ul)
-> #same-name (for li)
-> #same-name (for span)
-> etc…
The purpose of giving div# before divname is to prevent referencing to other objects with the same-name. It’s easy to distinguish then.
Bryan a lot of people probably add the div in front for readability, but it’s really about specificity. Using div out in front is more specific than not using it so if you had
#divname {color:blue}
div#divname {color:red}
the second will be the one that controls color for the div as it’s more specific.
“And I dont quite understand why people do “div#divname”. What is the purpose of the “div” in front?”
Readability, for me. But that’s just me. I’m fully aware of what it means, still I tend to use it sometimes.
Have a look at any of the gallery pages, they have a min- and max-width setting. The “big” image (click a thumbnail) scales and works great in FF, IE7+, Opera but Safari just scales the image to fit the box. I can’t see what is wrong.
http://www.egdesign.co.uk/paintStill.htm
http://www.egdesign.co.uk/styles.css
I’m not entirely sure, but I think the problem might be in the code below in your css file
#content #content3 #placeholder { height: 80%; width: 95%; }I think the problem is because you’ve set both width and height. Try just specifying the width and see if that works.
I “get” most CSS, but I’ve never found a really good explanation of when to use a DIV and when to use a SPAN.
The best I can find is that DIV is for “block level” usage, and SPAN is for “inline” usage. But what does that mean?
Any clarification welcomed!
The block level and inline level is really the main difference. Maybe an example would help.
Say you wrap a block of text in a div. That text will have a block of space around it. There will be a space between it and whatever elements are above and below it in the design.
If you wrapped a span around that same text that block of space wouldn’t be there. Until you style the span the text would fall exactly where it would had you not wrapped it with a span.
An easy way to see the difference is create an html page with a paragraph of text. Take a few words in the text and wrap span tags around them. You shouldn’t see any difference.
Then remove the span tags and wrap div tags around those same words. The text should then break out of the paragraph and look as though it’s in a new paragraph.
Steven,
Thanks for your reply. I understood what you were saying but tried your example as suggested. I probably could have figured that out by myself (doh), but your description made all the difference.
And now I have a better understanding of what the spec means when it refers to block level vs inline elements.
Great stuff!
Glad I could help. Sometimes the best way to figure this stuff is just try a few different things and see what happens.
I learned a lot just by experimenting. I’ll often keep a basic html file on my desktop and open it up when I want to try something and see what happens and what I can create.
Hi, you rock to answer questions here. I am having a knit-picky problem with tabs I am working on. I started with a free theme and altering code to get the look I want. The theme has active and inactive tabs, but the homepage tab shows active even when it is not. How do I fix this?
Here’s the code:
#menu {
width: 1000px;
height: 65px;
margin: 0 auto;
padding: 0 0 0 20px;
background: url(images/img04.jpg) no-repeat left top;
}
#menu ul {
float: right;
margin: 0;
padding: 0px 25px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
height: 65px;
margin-left: 10px;
padding: 15px 5px 5px 5px;
background: url(images/img05.jpg) repeat-x left top;
font-family: Georgia, “Times New Roman”, Times, serif;
text-decoration: none;
text-align: center;
font-size: 18px;
font-weight: normal;
color: #ffffff;
border: none;
}
#menu a:hover, #menu .current_page_item a {
text-decoration: underline;
}
#menu .current_page_item a {
background: url(images/img06.jpg) repeat left top;
padding-left: 5px;
padding-right: 20px;
color: #493E2B;
}
Hard to know without seeing the html for the menu. If the page is online feel free to post a link to it.
Based on your css what I think is probably happening is your home page link has the current_page_item class hardcoded on the link. You need to test to see if the page is the home page.
If you are testing then it’s possible WordPress isn’t doing quite what you think. For example you might be testing for is_home() when you should be testing for is_front_page()
Sorry to bother you again, but I have two new questions.
1. When doing a dropcap at the beginning of a document, do you include the period too if the first character is an initial, for instance M. and what about the quotation mark when the first letter is part of a quote?
2. I created a body background command on my stylesheet and successfully changed the color of my document. I wanted to add a little space around all the elements in the body by adding the padding property. It worked on the top and bottom but not on the sides. What did I do wrong?
Not a bother at all. Sorry I’ve taken a few days to respond. As far as drop caps, I had no idea so I searched a little and it seems the conventional wisdom is it’s ok to include the punctuation. It’s recommended to include the quotation marks by none other than Robert Bringhurst who wrote the The Elements of Typographic Style and knows far more about typography than I do. You can adjust the size of the quotes to suit your site.
As for your second question, I would need to see your code. Giving the body a little padding is the right approach. If you want to send me your css code, I’ll take a look and see if I can spot something. Or if the page is online send me a link and I’ll take a quick look.