nouhad wrote:
> Hello there, I recently coded a layout and I seen to be having some
> positioning problems.
> <http://www.nouhad.technat.org/hatharudhan/>and the corresponding
> <http://www.nouhad.technat.org/hatharudhan/styles.css>.
>
> 1. the Content div seems to float down in an odd manner
>
As Els has already replied it is a width problem. Rather than 800px for
a width try 776px so as not to draw a scroll bar at 800 screen
resolution. With column widths of 200px and 575px (1px shy to account
for the border) for #content. If the content on any page is longer than
the height of the navigation, you'll need a faux column to extend that
column to the footer. See: any column longest on the wiki:
<http://css-discuss.incutio.com/?page=AnyColumnLongest>
2. line-heights are a bit abnormal
Line-height is usually expressed with 'normal' or a raw number(no unit
of measure).
line-height: normal;
line-height: 1.1;
line-height: 1.2;
and so on.
You might be kind to children of all ages by amending the body
declaration to relative sizes that can be read and scaled cross browser
by re-setting the body declaration to read:
font: 100%/1.2 aerial, helvetica, sans-serif;
and re-setting the #navlist to:
font-size: 90%;
line-height: 1.4;
And add a new declaration:
html {margin:0 padding: 0;}
to set all browsers on equal turf.
> 3. since my wrapper is coding like so :
> margin: 0 auto;
> width: 800px;/*change to 776px; and see below*/
> I cannot apply paddings within divs
Apply the horizontal padding to the child element-- not the parent.
For example: Delete all this stuff from #content:
line-height: 25px;/*body declaration takes care of this*/
text-align: justify; /* justified text causes rivers and their
tributaries on the Web*/
word-spacing: 2px; /*makes the rivers and their tributaries even wider,
uglier, and more difficult to read on the Web*/
font-size: 1.1em;/*body declaration takes care of this*/
Enclose the text that is in #content with p: <p>This is my content text</p>
Add p to the CSS file with padding assigned to it, something like:
p { 0 20px; margin: 0 0 20px 0;}
It is important that you validate your markup and css files. This will
keep you out of harms way.
Good luck.
~david laakso
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
