PDA

View Full Version : HTML & CSS Optimization and Text Alignment?



Sanitarium
Mar 22nd, 2007, 12:54 AM
Hey guys,

I just made this website (www.blandstreetbloom.com) in photoshop and I sliced it and then saved it for web.
To position the text I wrapped the text in div's and made it 'position: absolute;' in the CSS. I heard this is very bad for the
cross browser compatibility as it might be out of align in some browsers. Could someone suggest an alternative? I have tried using tables with no luck. It messes with the image alignment.

Also, I am using blocks of images as backgrounds. Is there another way to get around this as the image takes time to load.

Any suggestions/help/examples would be greatly appreciated. I am just looking for a way to speed up my site and make it as will written as possible.

Thanks for the help.

Colm

twodayslate
Mar 22nd, 2007, 01:41 AM
Use divs (tables bad!) and float it into position.

BTW your site looks great, keep it up!

Might want to check this out. http://bonrouge.com/2c-hf-fluid(r).php A two column layout is what you need and no tables needed.

rmedek
Mar 22nd, 2007, 01:46 AM
Absolute positioning isn't always bad. I use it all the time…the trick is to know when it won't work. It takes elements out of flow, so absolutely positioned elements won't respect things like fluid widths or dynamic heights. But if its fixed dimension elements, go for it.

Looking at your site, like twodayslate says, floats are probably the way to go. Search Google for "CSS two column layout" and you'll get more examples than you'll know what to do with.

Sanitarium
Mar 23rd, 2007, 06:25 PM
Thanks for the advice and the links guys.
I'm going to do some work on the site over the weekend. I'll let you know how I get on.

felgall
Mar 23rd, 2007, 09:00 PM
There are two occasions where you need position:absolute.

1. Where you want to overlap elements on top of one another in the same spot.
2. Where you want to be able to move it around the page using Javascript.

The rest of the time you can lay out the entire page using:
margin, padding, width, overflow, float, clear

These 6 attributes can do any layout that tables can do and a lot more in a lot less code.

Don't use divs unless you need to. Wrap your content in HTML tags that properly decribe what the content is and apply the styles to that.

Sanitarium
Mar 27th, 2007, 12:09 AM
Well, with all your help, I have managed to hustle this up:

http://www.blandstreetbloom.com/new/

it only uses 12 images (I think) and renders very fast. I think that is going to be my final design, unless you have any more suggestions.

Thanks again for all the help.

VIPStephan
Mar 27th, 2007, 01:32 AM
You’re still using tables for the wrong purpose. And even worse: A table just to display an image.
Look at that:


<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/image_05.png" alt=" "></td>
</tr>
</table>



<img src="images/image_05.png" alt=" ">

/* CSS */

img {display: block;}

Which one is less code and makes more sense? I guess you know the answer…

Images that are solely for presentational/stylistic purposes should be background images of existing HTML elements, and not be put into the HTML. My favorite example is http://csszengarden.com where not one single image is used in the HTML, and yet beautiful designs/layouts can be achieved. Learn from the big ones. ;)

Also your image names aren’t very descriptive. A good image file name can also contribute to search engine friendlyness and makes maintenance easier because you see from the file name what the image is about.

Sanitarium
Mar 27th, 2007, 09:40 AM
The only reason I am using tables to align those 5 images is because when I don't put them in a table... they don't line up horizontally. They go vertically. This is because of display: block; and I need that to keep the images butting up against each other because there is a 3mm gap under each image otherwise.

ahallicks
Mar 27th, 2007, 10:53 AM
You need to float them to get them to display in a line, or instead of using display: block; use display: inline;

Tables are for tabular data, NOT laying out your website. It is so much easier to create a nice clean page using CSS and (X)HTML, which means simpler building, and easier maintenance.

What I suggest you do is zero out all the margins (I know it's not always good, but I do it and it works, so ner ner):



* {
margin: 0;
padding: ;
}

#wrapper {
width: 766px;
height: auto;
margin: 0 auto; /* Centers the page */
overflow: hidden; /* Clears any floats */
}


So now you have everything set to zero and a nice wrapper (you will need to change the width to that of your site). Next you work on the header:



#header {
background-image: url(images/header.jpg);
width: 766px;
height: 100px;
float: left;
}


And work through the section of your site as such. Your HTML should then be clean and tidy, looking something like:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BlandStreetBloom</title>
<style type="text/css">
body
{
background-image: url(images/bg.png);
background-attachment: fixed
}
</style>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">

<div id="header"></div>

<div id="leftcontent">
Left content section floated left with a width that either matches the max width of the content, or is a percentage if you want a fluid layout
</div>
<div id="rightcontent">
The 'About' section etc can go in this floated div called rightcontent that contains everything in the right hand column of you page. Same rules apply as the left content section.
</div>

<div id="footer"></div>

</div>
</body>
</html>


Use an unordered list to create your navigation as this is semantically correct because a navigation menu is technically a list of links. You will either need to float the li left, or display: inline; All padding and margins have already been removed thanks to the universal selector *

Arbitrator
Mar 27th, 2007, 01:24 PM
There are two occasions where you need position:absolute.

1. Where you want to overlap elements on top of one another in the same spot.
2. Where you want to be able to move it around the page using Javascript.Two other occasions:


You want to position an element relative to a containing block. Margin notes in the CSS3 List Module (http://www.w3.org/TR/css3-lists/) and the technique noted in Making the Absolute, Relative (http://www.stopdesign.com/articles/absolute/) are examples. Of course, the former can also be done using floats and negative margins.
You want to position an element relative to the initial containing block. For example, to vertically center an element (http://jsg.byethost4.com/demos/CF%20109578.html).


The rest of the time you can lay out the entire page using:
margin, padding, width, overflow, float, clear

These 6 attributes can do any layout that tables can do and a lot more in a lot less code.The correct terminology is “property”, not “attribute”.


The only reason I am using tables to align those 5 images is because when I don't put them in a table... they don't line up horizontally. They go vertically. This is because of display: block; and I need that to keep the images butting up against each other because there is a 3mm gap under each image otherwise.To get the image elements on one line while display: block is being used, float them all in one direction.

There is an alternative to using display: block to remove the descender space under the image baseline as well. Just set the vertical-align property (of the images) to a value such as bottom. The default is baseline, if that helps you understand why this technique works. See the official spec (http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align) for all of the available values.