September 27th, 2005, 09:34 AM
|
 |
Constant Learner
|
|
Join Date: Jun 2005
Posts: 487
Time spent in forums: 4 Days 7 h 14 m 17 sec
Reputation Power: 4
|
|
|
css design layout.
hi all, this is my page.
http://www.languageschoolsuk.com/we.../postioning.asp
can you see the left hand navigation box, well the box underneath iit in yellow is, well its meant to stay underneath the navigation box, but as the naviagtion box grows its passes through the yellow box, how can i get the yellow box to stay underneath it even when it grows.
heres my css code
Code:
/* attempting site desing with css*/
#container
{
position: relative;
border-color: grey;
border: 2px solid;
background-color: white;
margin: 0 auto;
width: 750px;
height: 600px;
}
a {
color:#09c;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}
#banner
{
border-bottom: 1px solid #333;
}
/* this is a descendant selector - which will select only <h1>
elements within a <div> styled with id="banner".*/
#content h1
{
color:#09c;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}
#nav
{
position: absolute;
float: left;
width: 130px;
margin-top: 10px;
margin-left: 10px;
border: 1px solid;
border-color: grey;
background-color: orange;
overflow: hidden;
}
#info
{
position: absolute;
width: 130px;
border: 1px solid;
border-color: grey;
background-color: yellow;
float: left;
margin-top: 200px;
margin-left: 10px;
overflow: hidden;
}
#content
{
position: absolute;
float: right;
width: 550px;
margin-top: 10px;
margin-left: 150px;
border: 2px dashed;
background-color:orange;
height: 400px;
overflow: auto;
}
#footer
{
background-color: orange;
text-align: left;
border-top: 1px solid #333;
position: absolute;
bottom: 0;
width: 750px;
}
and my asp page.
Code:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ****************link to style css sheet************************-->
<link rel="stylesheet" type="text/css" href="css/newlayout.css">
<!-- ************************************************** *************-->
</head>
<body>
<!--***********************CSS LAYOUT***************************-->
<div id="container">
<div id="banner">
<!-- #include file="mumsheader.htm"-->
</div>
<div id="nav">
<li><strong><font color="#FFFF00">Navigation</font></strong> <a href="http://www.google.co.uk">Cowboy
Hats</a> <a href="http://www.google.co.uk">Cowboy Boots</a> <a href="http://www.google.co.uk">Cowboy
Shirts</a> <a href="http://www.google.co.uk">Cowboy Accesories</a>
--------------------------
Comming soon (knifes)
werfweweeeeeeeeeeeweeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<p>rtssssssssssss</p>
<p>weFRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR RRRRRRRRRRRRRRRRRRRRRRRRRRRRRREG</p></li>
</div>
<div id="info">this is well all the extra content will go!
dddddddddddddddddddddddddddfgggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggg </div>
<div id="content">
<div align="center"><a href="http://www.google.co.uk">Cowboys&Indians.co.uk
</a> </div>
<p align="center">
<p>Welcome to cowboys and indians, Please feel free to take a look around!</p>
<p>we have alot of stock that isnt on this website so please feel free to
contact us</p>
<p> </p>
<p> </p>
<p align="center"> </p>
<p> </p>
<p> </p>
</div>
<div id="footer"> Copyright!</div>
</div>
</div>
</body>
</html>
__________________
__________________
dsaddigh 
|
ASP Free Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
