im new to using layers and i seem to be having nothing but trouble when setting up the layout of the site.
iv decided to remake my current site and make a new one with a fluid design the only problem i cant seem to get the layout to work correct. i want to have the site with a banner (image aligned to the left with a black background of the image. which works)
i then have 5 link layers which i want to align to each other horrizontally accross the page this is within another layer but if i use span it wont work atall but if i use div it will only align to the left vertically
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"style/style1.css" rel="stylesheet" type="text/css">
<title>www.knowj.com</title>
</head>
<body>
<div class="pos-main">
<div class="pos-banner"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/bg_banner.jpg" alt="www.knowj.com - website banner"></div>
<div class="pos-links">
<div class="pos-links1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" >Home</a></div>
<div class="pos-links2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" >About</a></div>
<div class="pos-links1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" >Diary</a></div>
<div class="pos-links2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" >Gallery</a></div>
<div class="pos-links1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" >Contact</a></div>
</div>
</div>
</body>
</html>
CSS
body
{
background-color: #ffffff;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.pos-main
{
position: relative;
width: 90%;
left: 5%;
top: 1%;
overflow: hidden;
background-color: #000000;
}
.pos-banner
{
position: relative;
height: 150px;
width: 100%;
padding: 0;
overflow: hidden;
background-color: #000000;
}
.pos-links
{
position: relative;
height: 5%;
width: 100%;
padding: 0px;
overflow: hidden;
}
.pos-links1
{
position: relative;
height: 100%;
width: 20%;
padding: 5px;
overflow: hidden;
background-color: #000000;
}
.pos-links2
{
position: relative;
height: 100%;
width: 20%;
padding: 5px;
overflow: hidden;
background-color: #922020;
}
a:link
{
font-family: arial;
color: #ffffff;
text-decoration: none;
font-size: 1em;
}
a:hover
{
font-family:arial;
color:#ffffff;
text-decoration:underline;
font-size:1em;
}
a:visited
{
font-family: arial;
color: #ffffff;
text-decoration:none;
font-size: 1em;
}
a:active
{
font-family: arial;
color: #ffffff;
text-decoration: none;
font-size: 1em;
}
also the rollover for the links seems not to work
thanks in advance
<!-- m --><a class="postlink" href="http://www.knowj.com/new/">http://www.knowj.com/new/</a><!-- m -->
how its showing at the momenthave your menu as a floated unordened list and the banner as a background image
Using CSS doesn't mean using an army of <div> tags
Try to use appropriate tagsi want it to be horrizontal accross the page not vertical that is my problem. it seems it would be alot easier using html for this but it will just make more work in the long runand how do you expect to do it without html?i was still going to use html but set the rules in CSS.
basically have the page with the same layout as this:
<!-- m --><a class="postlink" href="http://student.dc.lincoln.ac.uk/~u053934031/Assignment1/index.htmwell">http://student.dc.lincoln.ac.uk/~u05393 ... ex.htmwell</a><!-- m -->, i advice that you start writing the markup first, and then style it.
that implies what i said aboveLayers? Is he talking about chickens or Photoshop or <div>s?divsfrom w3schools:
The <div> tag defines a division/section in a document.how could i go about this then without using tables?
which is basically what my aim isdid you read my previous posts?
iv decided to remake my current site and make a new one with a fluid design the only problem i cant seem to get the layout to work correct. i want to have the site with a banner (image aligned to the left with a black background of the image. which works)
i then have 5 link layers which i want to align to each other horrizontally accross the page this is within another layer but if i use span it wont work atall but if i use div it will only align to the left vertically
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"style/style1.css" rel="stylesheet" type="text/css">
<title>www.knowj.com</title>
</head>
<body>
<div class="pos-main">
<div class="pos-banner"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/bg_banner.jpg" alt="www.knowj.com - website banner"></div>
<div class="pos-links">
<div class="pos-links1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" >Home</a></div>
<div class="pos-links2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" >About</a></div>
<div class="pos-links1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" >Diary</a></div>
<div class="pos-links2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" >Gallery</a></div>
<div class="pos-links1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" >Contact</a></div>
</div>
</div>
</body>
</html>
CSS
body
{
background-color: #ffffff;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
.pos-main
{
position: relative;
width: 90%;
left: 5%;
top: 1%;
overflow: hidden;
background-color: #000000;
}
.pos-banner
{
position: relative;
height: 150px;
width: 100%;
padding: 0;
overflow: hidden;
background-color: #000000;
}
.pos-links
{
position: relative;
height: 5%;
width: 100%;
padding: 0px;
overflow: hidden;
}
.pos-links1
{
position: relative;
height: 100%;
width: 20%;
padding: 5px;
overflow: hidden;
background-color: #000000;
}
.pos-links2
{
position: relative;
height: 100%;
width: 20%;
padding: 5px;
overflow: hidden;
background-color: #922020;
}
a:link
{
font-family: arial;
color: #ffffff;
text-decoration: none;
font-size: 1em;
}
a:hover
{
font-family:arial;
color:#ffffff;
text-decoration:underline;
font-size:1em;
}
a:visited
{
font-family: arial;
color: #ffffff;
text-decoration:none;
font-size: 1em;
}
a:active
{
font-family: arial;
color: #ffffff;
text-decoration: none;
font-size: 1em;
}
also the rollover for the links seems not to work
thanks in advance
<!-- m --><a class="postlink" href="http://www.knowj.com/new/">http://www.knowj.com/new/</a><!-- m -->
how its showing at the momenthave your menu as a floated unordened list and the banner as a background image
Using CSS doesn't mean using an army of <div> tags
Try to use appropriate tagsi want it to be horrizontal accross the page not vertical that is my problem. it seems it would be alot easier using html for this but it will just make more work in the long runand how do you expect to do it without html?i was still going to use html but set the rules in CSS.
basically have the page with the same layout as this:
<!-- m --><a class="postlink" href="http://student.dc.lincoln.ac.uk/~u053934031/Assignment1/index.htmwell">http://student.dc.lincoln.ac.uk/~u05393 ... ex.htmwell</a><!-- m -->, i advice that you start writing the markup first, and then style it.
that implies what i said aboveLayers? Is he talking about chickens or Photoshop or <div>s?divsfrom w3schools:
The <div> tag defines a division/section in a document.how could i go about this then without using tables?
which is basically what my aim isdid you read my previous posts?