ok, i was really excited to find out about css. but now i am really disappointed to find olut that nothing i create in goLive ever looks right in ANY browsers. what am i doing wrong? i have seen some pages that look great. but i have seen some examples on these forums that don't appear proper either. can anyone let me in on the secret to making css work?
here is the page i am trying to create:
<!-- w --><a class="postlink" href="http://www.afih.net/CSS.html">www.afih.net/CSS.html</a><!-- w -->
here is the stylesheet:
body
{
background: #fff;
color: #000;
margin-left: 0px;
padding: 0;
}
ul
{
position: absolute;
top: 46px;
left: 0px;
float: left;
width: 100%;
padding: 0px;
margin: 0;
list-style-type: none;
}
a.menu
{
font-size: 15px;
text-align: center;
float: left;
width: 100px;
text-decoration: none;
color: white;
background-color: #999;
padding: 2px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
a.menu:hover {background-color: #c00}
li {display: inline}
a {font-family: Times}
a.main:link {color: #c00}
a.main:hover {color: #000}
a.main:visited {color: #069}
a.footer {text-decoration: none;}
a.footer:link {color: #900}
a.footer:hover {color: #f00}
a.footer:visited {color: #000}
H1
{
background-color: #fff;
width: 790px;
color: #f90;
font-size: 37px;
font-family: Arial;
border-bottom-width: 2px;
border-bottom-color: #c00;
border-bottom-style: solid;
/*position: absolute;
left: 0px;
top: 0px;*/
p.main {font-family: Courier}
div.left
{
/*position: absolute;
top: 68px;*/
font-family: Courier;
border-top: 1px solid #fff;
width: 200px;
height: 300px;
background-color: #999;
padding-left: 9px;
padding-top: 5px;
}
p.footer
{
font-size: 12px;
font-family: Times;
text-align: center;
position: absolute;
bottom: 0px;
}
here is the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Forged WebDesign, LLC</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"CSS_stylesheet.css">
</head>
<body>
<h1>Forged WebDesigns, LLC</h1>
<div class="menu">
<ul>
<li><a class="menu" href=http://www.webdeveloper.com/forum/archive/index.php/"#">Home</a></li>
<li><a class="menu" href=http://www.webdeveloper.com/forum/archive/index.php/"#">Experiments</a></li>
<li><a class="menu" href=http://www.webdeveloper.com/forum/archive/index.php/"#">Portfolio</a></li>
<li><a class="menu" href=http://www.webdeveloper.com/forum/archive/index.php/"#">Referrences</a></li>
<li><a class="menu" href=http://www.webdeveloper.com/forum/archive/index.php/"#">Contact Info</a></li>
<li><a class="menu" href=http://www.webdeveloper.com/forum/archive/index.php/"#"></a></li>
<li><a class="menu" href=http://www.webdeveloper.com/forum/archive/index.php/"#"></a></li>
</ul>
</div>
<div class="left">What happens now?</div>
<p></p>
<p></p>
<p></p>
<p><a class="main" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.afih.net">Main page links</a></p>
<p>Regular Text.</p>
<p class="footer">
Copyright ?2005 Forged WebDesigns, LLC
<a class="footer" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.afih.net">Contact Info</a>
</p>
</body>
</html>Post the URL, we're not mind readers you know.Post the URL, we're not mind readers you know.
i added it above.No closing "}" for your H1 style definition.Good catch.Good catch.
a good catch indeed. i am blind apparently. so if i use absolute positioning,on an element, it's as if all of the following elements are positioned as if that one is not there. do i have to manually position all of my elements? also, my text-links aren't the proper color. strange thing is that they are a color i used in another web page(no css).
<!-- w --><a class="postlink" href="http://www.afih.net/CSS_noPos.html">www.afih.net/CSS_noPos.html</a><!-- w -->
<!-- w --><a class="postlink" href="http://www.afih.net/CSS_withPos.html">www.afih.net/CSS_withPos.html</a><!-- w -->
stylesheet (remove comments for positioned version):
body
{
background: #fff;
color: #000;
margin-left: 0px;
padding: 0;
}
ul
{
/*position: absolute;
top: 47px;
left: 0px;
float: left;*/
width: 100%;
padding: 0px;
margin: 0;
list-style-type: none;
}
a.menu
{
font-size: 15px;
text-align: center;
float: left;
width: 100px;
text-decoration: none;
color: white;
background-color: #999;
padding: 2px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
a.menu:hover {background-color: #c00}
li {display: inline}
a {font-family: Times}
a.main:link {color: #c00}
a.main:hover {color: #000}
a.main:visited {color: #069}
a.footer {text-decoration: none;}
a.footer:link {color: #900}
a.footer:hover {color: #f00}
a.footer:visited {color: #000}
H1
{
background-color: #fff;
width: 790px;
color: #f90;
font-size: 37px;
font-family: Arial;
border-bottom-width: 2px;
border-bottom-color: #c00;
border-bottom-style: solid;
padding: 0px;
/*position: absolute;
left: 0px;
top: 0px;*/
}
p.main {font-family: Courier}
div.left
{
/*position: absolute;
top: 70px;*/
font-family: Courier;
width: 200px;
height: 300px;
background-color: #999;
padding-left: 9px;
padding-top: 5px;
}
p.footer
{
font-size: 12px;
font-family: Times;
text-align: center;
/*position: absolute;
bottom: 0px;*/
}I think it's best to avoid absolute positioning, at least until you're really comfortable with how the flow goes without it.Good catch.
My eyes aren't that good. I just ran it through the w3.org validators and it gave me a good idea where to look.
I think it's best to avoid absolute positioning, at least until you're really comfortable with how the flow goes without it.
I've avoided using absolute positioning so far, as it seems not worth the headaches, especially since I've been able to do whatever I need via floats, margins, padding, etc. (at least so far).
here is the page i am trying to create:
<!-- w --><a class="postlink" href="http://www.afih.net/CSS.html">www.afih.net/CSS.html</a><!-- w -->
here is the stylesheet:
body
{
background: #fff;
color: #000;
margin-left: 0px;
padding: 0;
}
ul
{
position: absolute;
top: 46px;
left: 0px;
float: left;
width: 100%;
padding: 0px;
margin: 0;
list-style-type: none;
}
a.menu
{
font-size: 15px;
text-align: center;
float: left;
width: 100px;
text-decoration: none;
color: white;
background-color: #999;
padding: 2px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
a.menu:hover {background-color: #c00}
li {display: inline}
a {font-family: Times}
a.main:link {color: #c00}
a.main:hover {color: #000}
a.main:visited {color: #069}
a.footer {text-decoration: none;}
a.footer:link {color: #900}
a.footer:hover {color: #f00}
a.footer:visited {color: #000}
H1
{
background-color: #fff;
width: 790px;
color: #f90;
font-size: 37px;
font-family: Arial;
border-bottom-width: 2px;
border-bottom-color: #c00;
border-bottom-style: solid;
/*position: absolute;
left: 0px;
top: 0px;*/
p.main {font-family: Courier}
div.left
{
/*position: absolute;
top: 68px;*/
font-family: Courier;
border-top: 1px solid #fff;
width: 200px;
height: 300px;
background-color: #999;
padding-left: 9px;
padding-top: 5px;
}
p.footer
{
font-size: 12px;
font-family: Times;
text-align: center;
position: absolute;
bottom: 0px;
}
here is the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Forged WebDesign, LLC</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"CSS_stylesheet.css">
</head>
<body>
<h1>Forged WebDesigns, LLC</h1>
<div class="menu">
<ul>
<li><a class="menu" href=http://www.webdeveloper.com/forum/archive/index.php/"#">Home</a></li>
<li><a class="menu" href=http://www.webdeveloper.com/forum/archive/index.php/"#">Experiments</a></li>
<li><a class="menu" href=http://www.webdeveloper.com/forum/archive/index.php/"#">Portfolio</a></li>
<li><a class="menu" href=http://www.webdeveloper.com/forum/archive/index.php/"#">Referrences</a></li>
<li><a class="menu" href=http://www.webdeveloper.com/forum/archive/index.php/"#">Contact Info</a></li>
<li><a class="menu" href=http://www.webdeveloper.com/forum/archive/index.php/"#"></a></li>
<li><a class="menu" href=http://www.webdeveloper.com/forum/archive/index.php/"#"></a></li>
</ul>
</div>
<div class="left">What happens now?</div>
<p></p>
<p></p>
<p></p>
<p><a class="main" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.afih.net">Main page links</a></p>
<p>Regular Text.</p>
<p class="footer">
Copyright ?2005 Forged WebDesigns, LLC
<a class="footer" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.afih.net">Contact Info</a>
</p>
</body>
</html>Post the URL, we're not mind readers you know.Post the URL, we're not mind readers you know.
i added it above.No closing "}" for your H1 style definition.Good catch.Good catch.
a good catch indeed. i am blind apparently. so if i use absolute positioning,on an element, it's as if all of the following elements are positioned as if that one is not there. do i have to manually position all of my elements? also, my text-links aren't the proper color. strange thing is that they are a color i used in another web page(no css).
<!-- w --><a class="postlink" href="http://www.afih.net/CSS_noPos.html">www.afih.net/CSS_noPos.html</a><!-- w -->
<!-- w --><a class="postlink" href="http://www.afih.net/CSS_withPos.html">www.afih.net/CSS_withPos.html</a><!-- w -->
stylesheet (remove comments for positioned version):
body
{
background: #fff;
color: #000;
margin-left: 0px;
padding: 0;
}
ul
{
/*position: absolute;
top: 47px;
left: 0px;
float: left;*/
width: 100%;
padding: 0px;
margin: 0;
list-style-type: none;
}
a.menu
{
font-size: 15px;
text-align: center;
float: left;
width: 100px;
text-decoration: none;
color: white;
background-color: #999;
padding: 2px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
a.menu:hover {background-color: #c00}
li {display: inline}
a {font-family: Times}
a.main:link {color: #c00}
a.main:hover {color: #000}
a.main:visited {color: #069}
a.footer {text-decoration: none;}
a.footer:link {color: #900}
a.footer:hover {color: #f00}
a.footer:visited {color: #000}
H1
{
background-color: #fff;
width: 790px;
color: #f90;
font-size: 37px;
font-family: Arial;
border-bottom-width: 2px;
border-bottom-color: #c00;
border-bottom-style: solid;
padding: 0px;
/*position: absolute;
left: 0px;
top: 0px;*/
}
p.main {font-family: Courier}
div.left
{
/*position: absolute;
top: 70px;*/
font-family: Courier;
width: 200px;
height: 300px;
background-color: #999;
padding-left: 9px;
padding-top: 5px;
}
p.footer
{
font-size: 12px;
font-family: Times;
text-align: center;
/*position: absolute;
bottom: 0px;*/
}I think it's best to avoid absolute positioning, at least until you're really comfortable with how the flow goes without it.Good catch.
My eyes aren't that good. I just ran it through the w3.org validators and it gave me a good idea where to look.
I think it's best to avoid absolute positioning, at least until you're really comfortable with how the flow goes without it.I've avoided using absolute positioning so far, as it seems not worth the headaches, especially since I've been able to do whatever I need via floats, margins, padding, etc. (at least so far).