Reading about CSS positioning today.
CSS positioning
42
Tag Archives: css
HTML/CSS hexadecimal colour codes
Found a few handy web pages that help pick HTML/CSS colours. Hex Hub and Hexadecimal Color Codes.
Making a HTML element’s width equal to its contents
Today I learned how to make a HTML element’s width equal to its contents.
Basically you use CSS and set the element’s “display” property to “inline-block”.
CSS overflow Property
I used the CSS overflow Property today and set it to ‘auto’ so that my code fit on the screen.
pre { overflow: auto; }
CSS :last-child:after
I used the CSS :last-child and :after selectors to hack the content: property on my menu lists. Basically items in the menu have a pipe ‘|’ between them, except no pipe before or after the list. I did that in CSS with:
#menu li:after {
content: ' | ';
}
#menu li:last-child:after {
content: '';
}
Handling character encodings in HTML and CSS
On my list of things to do is read the document Handling character encodings in HTML and CSS from the W3C. For some reason I can’t quite bring myself to concentrate on it right now.
HTML5 and CSS positioning
I stumbled across a weird bug today that I didn’t know about and wasn’t expecting. I’d done a little bit of a CSS file to go with a little bit of HTML that did some simple positioning of content. Then I validated my document on the W3C Markup Validation Service and it complained about a missing doctype. So I added a doctype for HTML5. After I did that my page looked all screwy, the CSS positioning was applying correctly. Anyway it turned out that the reason the CSS wasn’t applying was because I had property specifications like this:
#content {
margin: 170 50 50 50;
padding: 0;
}
Whereas I needed to specify the units, like this:
#content {
margin: 170px 50px 50px 50px;
padding: 0px;
}
Disable CSS on Firefox
Learned how to Disable CSS on Firefox. It’s in View -> Page Style.
CSS content Property
I used the CSS content Property for the first time the other day. You’d have to wonder where I’ve been…
Inline Small CSS
Page Speed is telling me to Inline Small CSS. I knew it!