|
|||||||||
|
|||||||||
|
|||||||||
 |
|||||||||
| |
||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
ASP Free Forums Sponsor:
|
|
|
|
#1
September 30th, 2005, 07:56 AM
|
||||
|
||||
|
css layout help please
ok guys i have a left hand box, and a right hand box i want them to have a little gap inbetween them and for them to be at the exact same height from the top. 2 collums basically.
this is my page my left hand box isnt behaving why? http://www.languageschoolsuk.com/search.asp heres my html code Code:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<!-- ****************link to style css sheet************************-->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- ************************************************** *************-->
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>
<body>
<!-- the container to hold everything-->
<div id="container">
<div id="banner"><!-- #include file="header.html"--></div>
<div id="content1">content 1</div>
<div id="content2">content 2</div>
<!-- this div closes the conatiner-->
</div>
</body>
</html>
heres my css code i expect i have something wrongs with the content 1 and content 2 parts. Code:
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:#FFAA00;}
#container
{
position: relative;
border-color: grey;
border: 2px solid;
background-color: white;
margin: 0 auto;
width: 750px;
height: 600px;
}
#banner
{
border-bottom: 1px solid;
border-color: pink;
}
/* 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-left: 10px;
overflow: hidden;
}
#content1
{
position: absolute;
float: left;
width: 300px;
margin-top: 10px;
margin-left: 10px;
border: 2px solid;
background-color:orange;
height: 400px;
overflow: auto;
left: 21px;
top: 150px;
}
#content2
{
position: absolute;
float: right;
width: 300px;
margin-top: 10px;
margin-left: 50px;
border: 2px solid;
background-color:orange;
height: 400px;
overflow: auto;
left: 449px;
top: 150px;
}
#footer
{
background-color: orange;
text-align: left;
border-top: 1px solid #333;
position: absolute;
bottom: 0;
width: 750px;
}
__________________
dsaddigh 
Last edited by deansaddigh : September 30th, 2005 at 08:22 AM. Reason: wrong problem!
|
|
#2
September 30th, 2005, 08:58 AM
|
||||
|
||||
|
Code:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<!-- ****************link to style css sheet************************-->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- ************************************************** *************-->
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<style type="text/css">
<!--
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:#FFAA00;}
#container
{
position: relative;
border-color: grey;
border: 2px solid;
background-color: white;
margin: 0 auto;
width: 750px;
height: 600px;
}
#banner
{
border-bottom: 1px solid;
border-color: pink;
}
/* 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-left: 10px;
overflow: hidden;
}
#content1
{
float: left;
margin-top: 10px;
margin-left: 10px;
border: 2px solid;
background-color:orange;
margin-right: 10px;
height: 200px;
width: 200px;
}
#content2
{
float: left;
margin-top: 10px;
border: 2px solid;
background-color:orange;
overflow: auto;
height: 200px;
width: 200px;
}
#footer
{
background-color: orange;
text-align: left;
border-top: 1px solid #333;
position: absolute;
bottom: 0;
width: 750px;
}
-->
</style>
</head>
<body>
<!-- the container to hold everything-->
<div id="container">
<div id="banner"><!-- #include file="header.html"--></div>
<div id="content1">content 1</div>
<div id="content2">content 2</div>
<!-- this div closes the conatiner-->
</div>
</body>
</html>
ok basically u dont need to possition them on the page controll the possition in the containing div via margins i have put the css in the one doc for ease u can change the height of both etc in the css hope this helps
|
|
| Viewing: ASP Free Forums > Web Design > Web Layout > css layout help please |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
