Welcome to WebmasterWorld Guest from 23.22.79.235

Forum Moderators: not2easy

Message Too Old, No Replies

Help.I am new to CSS!

   
6:26 pm on Feb 7, 2009 (gmt 0)

5+ Year Member



I wrote this code but for some reason it seems out of wack and the firefox browser scambled all of the codes.

* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {

margin: 0 auto;
width: 800px;

}

#header {
OPACITY: 1.00;
-MOZ-OPACITY: 1.00;
-KHTML-OPACITY: 1.00;
FILTER: ALPHA (OPACITY=100);
BACKGROUND-COLOR: RGB(0,0,0)! IMPORTANT;
BACKGROUND-IMAGE: URL(IMAGE URL GOES HERE);
BACKGROUND-POSITION: CENTER CENTER;
BACKGROUND-REPEAT: NO-REPEAT;
BACKGROUND-ATTACHMENT: FIXED;
BORDER-COLOR: RGB(135,120,19)! IMPORTANT;
BORDER-STYLE: DOUBLE;
BORDER-WIDTH: 0px;
FONT-FAMILY: Verdana;
FONT-WEIGHT: BOLD;
FONT-STYLE: NORMAL;
FONT-SIZE: 12px;
TEXT-DECORATION: UNDERLINE;
TEXT-TRANSFORM: UPPERCASE;
TEXT-ALIGN: CENTER;
POSITION: relative;
MARGIN-TOP: 50px;
MARGIN-LEFT: 0px;
MARGIN-RIGHT: 0px;
MARGIN-BOTTOM: 10px;
PADDING-TOP: 10px;
PADDING-LEFT: 10px;
PADDING-RIGHT: 10px;
PADDING-BOTTOM: 10px;
WIDTH: 800px; HEIGHT: 200px;
VISIBILITY: VISIBLE! IMPORTANT;
}
#navigation {
color: #333;

MARGIN-TOP: 0px;
MARGIN-LEFT: 0px;
MARGIN-RIGHT: 0px;
MARGIN-BOTTOM: 10px;
background: yellow;
width: 800px;
PADDING-TOP: 10px;
PADDING-LEFT: 10px;
PADDING-RIGHT: 10px;
PADDING-BOTTOM: 10px;
}
#leftcolumn {
background: green;
display: incline;
color: #333;
MARGIN-TOP: 0px;
MARGIN-LEFT: 0px;
MARGIN-RIGHT: 10px;
MARGIN-BOTTOM: 10px;
PADDING-TOP: 10px;
PADDING-LEFT: 10px;
PADDING-RIGHT: 10px;
PADDING-BOTTOM: 10px;
width: 580px;
float: left;
}

#rightcolumn {
background: blue;
PADDING-TOP: 10px;
PADDING-LEFT: 10px;
PADDING-RIGHT: 10px;
PADDING-BOTTOM: 10px;
display: incline;
color: #333;
MARGIN-TOP: 0px;
MARGIN-LEFT: 0px;
MARGIN-RIGHT: 0px;
MARGIN-BOTTOM: 10px;

width: 180px;
float: right;
}
#footer {
MARGIN-TOP: 0px;
MARGIN-LEFT: 0px;
MARGIN-RIGHT: 0px;
MARGIN-BOTTOM: 10px;
width: 800px;
clear: both;
color: #333;
background: orange;

PADDING-TOP: 10px;
PADDING-LEFT: 10px;
PADDING-RIGHT: 10px;
PADDING-BOTTOM: 10px;
}
.clear { clear: both; background: none; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Faux Column CSS Layouts - 3 Column - faux-4-3-col</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />

<STYLE TYPE="TEXT/CSS">
.MyGen {Text Properties}

.TEXT {
COLOR: RGB(255,255,255)! IMPORTANT;
BACKGROUND-COLOR: RGB()! IMPORTANT;
BACKGROUND-IMAGE:
URL(IMAGE URL GOES HERE);
BACKGROUND-POSITION: CENTER CENTER;
BACKGROUND-ATTACHMENT: FIXED;
BACKGROUND-REPEAT: NO-REPEAT;
BORDER-COLOR: RGB(255,255,255)! IMPORTANT;
BORDER-STYLE: NONE;
BORDER-WIDTH: 1px;
FONT-FAMILY: Verdana;
FONT-WEIGHT: NORMAL;
FONT-STYLE: NORMAL;
FONT-SIZE: 10px;
TEXT-DECORATION: NORMAL;
TEXT-TRANSFORM: NONE;
text-align: justify;

MARGIN: px; PADDING: px;
DISPLAY: BLOCK;
}
A:ACTIVE, A:VISITED, A:LINK,
A.REDLNIK:ACTIVE, A.REDLINK:VISITED, A.REDLINK:LINK,
A.NAVBAR:ACTIVE, A.NAVBAR:VISITED, A.NAVBAR:LINK,
A.TEXT:ACTIVE, A.TEXT:VISITED, A.TEXT:LINK {
COLOR: RGB(255,255,255)! IMPORTANT;
BACKGROUND-COLOR: RGB()! IMPORTANT;
BACKGROUND-IMAGE:
URL(IMAGE URL GOES HERE);
BACKGROUND-POSITION: CENTER CENTER;
BACKGROUND-ATTACHMENT: FIXED;
BACKGROUND-REPEAT: NO-REPEAT;
BORDER-COLOR: RGB(255,255,255)! IMPORTANT;
BORDER-STYLE: NONE;
BORDER-WIDTH: 1px;
FONT-FAMILY: Verdana;
FONT-WEIGHT: NORMAL;
FONT-STYLE: NORMAL;
FONT-SIZE: 10px;
TEXT-DECORATION: NONE;
TEXT-TRANSFORM: UPPERCASE;
TEXT-ALIGN: CENTER;
MARGIN: px; PADDING: px;
DISPLAY: ;
}
A:HOVER, A.REDLINK:HOVER, A.NAVBAR:HOVER, A.TEXT:HOVER {
COLOR: RGB(136,65,18)! IMPORTANT;
BACKGROUND-COLOR: RGB()! IMPORTANT;
BACKGROUND-IMAGE:
URL(IMAGE URL GOES HERE);
BACKGROUND-POSITION: CENTER CENTER;
BACKGROUND-ATTACHMENT: FIXED;
BACKGROUND-REPEAT: NO-REPEAT;
BORDER-COLOR: RGB(255,255,255)! IMPORTANT;
BORDER-STYLE: NONE;
BORDER-WIDTH: 1px;
FONT-FAMILY: Verdana;
FONT-WEIGHT: BOLD;
FONT-STYLE: NORMAL;
FONT-SIZE: 11px;
TEXT-DECORATION: UNDERLINE;
TEXT-TRANSFORM: UPPERCASE;
TEXT-ALIGN: CENTER;
MARGIN: px; PADDING: px;
DISPLAY: ;
}
</STYLE>

</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header"><h1><a href="http://www.example.com">Free CSS Layouts</a></h1></div>
<!-- End Header -->
<!-- Begin Navigation -->
<div id="navigation"> Navigation Here </div>
<!-- End Navigation -->

<!-- Begin Left Column -->
<div id="leftcolumn">

<SPAN CLASS="TEXT"><CENTER>Music Videos</CENTER></SPAN>

<SPAN CLASS="TEXT">

<img border="1" src="http://www.example.com" align="left" width="150" height="200" alt="picture1qu2">

specific text removed

</SPAN>

</div>
<!-- End Left Column -->
<!-- Begin Content Column -->
<!-- End Content Column -->
<!-- Begin Right Column -->
<div id="rightcolumn">

<CENTER>

<SPAN CLASS="TEXT"><CENTER>Music Videos</CENTER></SPAN>

<br>

<SPAN CLASS="TEXT"><CENTER>Paramore<BR>Misery Business<BR></CENTER></SPAN>

<embed src="http://www.example.com" type="application/x-shockwave-flash" allowfullscreen="true" width="180" height="148"></embed>

<br>

<SPAN CLASS="TEXT"><CENTER>Paramore<BR>Misery Business<BR></CENTER></SPAN>

<embed src="http://www.example.com" type="application/x-shockwave-flash" allowfullscreen="true" width="180" height="148"></embed>

<br>

<SPAN CLASS="TEXT"><CENTER>Paramore<BR>Misery Business<BR></CENTER></SPAN>

<embed src="http://www.example.com" type="application/x-shockwave-flash" allowfullscreen="true" width="180" height="148"></embed>

<br>

<SPAN CLASS="TEXT">

specific text removed

</SPAN>

<BR>

</CENTER>

</div>
<!-- End Right Column -->

<!-- Begin Footer -->
<div id="footer"> This is the Footer </div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>

[edited by: VividDreamer at 6:29 pm (utc) on Feb. 7, 2009]

[edited by: swa66 at 11:30 am (utc) on Feb. 10, 2009]
[edit reason] URL and politically loaded specific text removal, please see ToS [/edit]

1:28 am on Feb 8, 2009 (gmt 0)

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



One tip. You can simplify

MARGIN-TOP: 0px; 
MARGIN-LEFT: 0px;
MARGIN-RIGHT: 0px;
MARGIN-BOTTOM: 10px;

to

margin: 0px 0px 10px 0px
/* That's Top, Right, Bottom, Left */

.

Next tip. Make sure all your content is marked up as a heading, paragraph, list, or table (for tabular data).

That is, get rid of the

<br>
tags and put
<p> ... </p>
around each block of text instead. There's great scope for using proper H2 and H3 headings in there too.

.

This is a heading:

<SPAN CLASS="TEXT"><CENTER>Paramore<BR>Misery Business<BR></CENTER></SPAN>

but you are not conveying that fact to searchengines. Change it to this:

<h2>Paramore<BR>Misery Business</h2>

and set the style in the CSS.

.

Get rid of the CENTER tags. You can specify that positioning in the CSS.

Get rid of the &nbsp; non-breaking spaces. You can use CSS to set that gap.

.

I would replace the

<font>
and
<b>
tags in

<font color="#877813"><b>One Tree Hill</b></font>

with just

<b>
or
<strong>
tags or a
<span>
and then set the font-weight and colour in CSS. That way I can change the colour, weight and other things, on all similar pieces of text across the whole site, with just one single edit to the stylesheet.

.

Get your CSS out into an external file so that the same stylesheet can be used by every page of the site.

.

Get the

Firebug
extension for Firefox. Use the HTML tab to traverse the tag tree. Look in the box on the right to see which CSS properties are being applied to that element. It's a revelation.
Usually it's a problem with forgetting to add
position:relative
to my floats, and/or forgetting
clear:both
somewhere along the way.

Other times it is an incorrect margin or something, and most times it is the margin on a parent element, not the margin on the element that appears to be mis-aligned.