homepage Welcome to WebmasterWorld Guest from 54.166.113.249
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Help.I am new to CSS!
VividDreamer

5+ Year Member



 
Msg#: 3844566 posted 6:26 pm on Feb 7, 2009 (gmt 0)

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]

 

g1smd

WebmasterWorld Senior Member g1smd us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3844566 posted 1:28 am on Feb 8, 2009 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved