Center A Web Page Layout
One of the most common layout questions asked about when building a website has to be how to create a fixed width layout, with the container floating in the middle of the page. Add the following code to the CSS:
#container
{
width: 700px;
margin: 0 auto;
}
Then add <div id=”container”></div> in the body of your HTML to give an automatic margin on both its left and right, ensuring that it's always placed in the centre of the screen.
To quickly see if your container is there simply add:
#container
{
width: 700px;
margin: 0 auto;
height: 200px;
background: red;
}
If a red box appears in the middle of your page, you know the container is sitting in the correct place.
You can then remove the height and background from the CSS for this ID.
Font Shorthand
When styling fonts with CSS you may be doing this:
font-size: 110%;
line-height: 140%;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: arial,serif;
You can use this CSS shorthand property instead:
font: 110%/140% bold italic small-caps arial,serif
Please Note - This CSS shorthand version will only work if you're specifying both the font-size and the font-family. Also, if you don't specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal.
Content Selection Colour
When selecting content on a web page by holding down the left mouse button, your browser makes the selected the content background colour blue and text white. This can be styled but unfortunately doesn’t work in IE, but it's still a nice touch. Add the following to your style sheet and view your site in Firefox.
*::selection
{
background: black;
color: yellow;
}
*::-moz-selection
{
background: black;
color: yellow;
}
Using Two Classes Together
Usually attributes are assigned in just one class, but this doesn't mean that that's all you're allowed. You can assign as many classes as you like!
For example: <p class="left dark”>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both ‘left’ and ‘dark’. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.
Image Replacement
It's always advisable to use regular HTML mark-up to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if you've got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then really you've got no choice but to use an image.
For example, you wanted the top heading of each page to be ‘SEO Tips’, as you're an SEO Blogger and you'd like to be found for this phrase in the search engines. You're pretty set on it being an obscure font so you need to use an image: <img src="seo-tips.gif" alt="SEO Tips" />
This is OK but there's strong evidence to suggest that search engines don't assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be: <div id=”logo”><h1>SEO Tips</h1></div>
Now, this obviously won't use your obscure font. To fix this problem place these commands in your CSS document:
#logo
{
background: url(seo-tips.gif) no-repeat left top;
width: 200px;
height: 50px;
}
#logo h1
{
text-indent: -9999px;
}
The image, with your fancy font, will now display and the regular text will be safely out of the way, positioned 9999px to the left of the screen thanks to our CSS rule.
It’s also worth making your H1 a hyperlink: <div id=”logo”><h1><a href="#">SEO Tips</a></h1></div> and adding the following to your CSS:
#logo h1 a
{
display: block;
width: 200px;
height: 50px;
cursor: pointer;
}
