Simple, and i cant get why i canny get this to work, ive managed it before, this time its got me stumped
3 column design, need to stop the center column flowing underneath the left and right columns when its longer than them.
heres the
html
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link href="stylesheets/mystyles1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="login" align="right">
<table>
<tr><td colspan="2" align="center">Members Log In Below</td></tr>
<form method="POST" action= "checklogin.php">
<tr><td>User name</td><td><input type="text" name="username" /></td></tr>
<tr><td>Password</td><td><input type="password" name="password" /></td></tr>
<tr><td colspan="2" align="center"> <input type="submit" name="Submit" value="Submit" /></td></tr>
</form>
</table>
</div> <!-- /login -->
</div><!-- /header -->
<div id="divnav">
<div id="divnav">
<ul id="ulmainnav">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div><!-- /divnav -->
<div id="sidebar">
<h2>Right</h2>
<p>Advertising in this section</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div><!-- /sidebar -->
<div id="left">
<h2>Left</h2>
<p>Advertising in this section</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div><!-- /left -->
<div id="main">
</div><!-- /main -->
<!-- Hack for NN6 -->
<div class="clearing"> </div>
<!-- Hack for NN4 -->
<div class="clearing"> </div>
<div id="footer">
<h2>Footer</h2>
<p>...</p>
</div><!-- /footer -->
</div><!-- /wrapper -->
</body>
and heres the
css
- Code: Select all
body {
background-color: #FFFFFF;
}
#wrapper {
}
#header {
width:100%;
background-color: #D9D9FF;
height: 105px;
background-image: url(../images/logo2.jpg);
background-repeat: no-repeat;
background-position: 8px 8px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #D9D9FF;
border-bottom-color: #D9D9FF;
border-left-color: #D9D9FF;
margin: 0;
padding-top: 8px;
}
#ulmainnav li{
display: inline;
list-style-image: none;
list-style-type: none;
padding-right: 0px;
padding-left: 10px;
font-family: "Times New Roman", Times, serif;
}
#ulmainnav a:link, #ulmainnav a:visited {
width: 125px;
height: 45px;
background-image: url(../images/small%20aqua%20button.jpg);
background-repeat: no-repeat;
background-position: center top;
text-decoration: none;
margin-top: 5px;
color: #6633FF;
text-align: center;
vertical-align: baseline;
padding-top: 17px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#ulmainnav a:hover, #ulmainnav a.active {
background-image: url(../images/small%20aqua%20button%20over.jpg);
background-repeat: no-repeat;
background-position: center top;
color: #6699FF;
}
#divnav {
/* this is to "give layout" to the element and fix some peek-a-boo bug in IE (v6 sp2) */
width:100%;
background-color: #D9D9FF;
text-align: center;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #D9D9FF;
padding-right: 1px;
}
#left {
float:left;
width:150px;
/* IE doubles the margins on floats, this takes care of the problem */
display:inline;
margin-left:0px;
background-color: #ECD9FF;
border-top-width: 10px;
border-top-style: solid;
border-top-color: #FFFFFF;
border-right-width: 5px;
border-right-style: solid;
border-right-color: #FFFFFF;
}
#main {
text-align: center;
background-color: #D9D9FF;
margin: 0px;
padding: 0px;
border-top-width: 10px;
border-top-style: solid;
border-top-color: #FFFFFF;
width: 100%;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #FFFFFF;
clear: none;
float: none;
}
/* good to know: if #sidebar is to be shorter than #main, then there is no need for this rule */
#sidebar {
width: 150px;
background-color: #ECD9FF;
clear: left;
float: right;
margin: 0px;
padding: 0px;
border-top-width: 10px;
border-top-style: solid;
border-top-color: #FFFFFF;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #FFFFFF;
}
#sidebar p {
/* this is to make sure IE (v6 sp2) *displays* this element (same problem as #header, but using a different fix) */
position:relative
}
#footer {
/* see #outer_wrapper */
width:100%;
/* this is to clear #container */
clear:both;
border-top-width: 10px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFCC;
background-color: #ECD9FF;
}
/* this is the class that is applied to 2 structural hacks in the markup. The first "meaningless" element is used to clear #left in NN6 and the last one is used to clear #container in NN4 */
.clearing {height:0;clear:both}
h1 {
font-family: Helvetica, sans-serif, Arial;
color: #4B4040;
text-decoration: underline;
}
ul#gallery {
padding:0;
margin:0;
width:448px;
height:336px;
position:relative;
background-color: #888;
background-image: url(../images/gallary%20background.jpg);
}
#gallery li {
list-style-type:none;
width:64px;
height:48px;
float:left;
z-index:100;
}
#gallery li.lft {
float:left;
clear:left;
}
#gallery li.rgt {
float:right;
clear:right;
}
#gallery a {
position:relative;
width:64px;
height:48px;
display:block;
float:left;
z-index:100;
cursor:default;
}
#gallery a img {
position:relative;
width:62px;
height:46px;
border:1px solid #FFFFFF;
z-index:100;
}
#gallery a:hover {
width:160px;
height:120px;
padding:108px 144px;
position:absolute;
left:0;
top:0;
z-index:20;
}
#gallery a:hover img {
background:#eee;
position:relative;
width:160px;
height:120px;
border:0;
z-index:20;
}
#gallery a:active, #gallery a:focus {
background:transparent;
width:320px;
height:240px;
padding:48px 64px;
position:absolute;
left:0;
top:0;
z-index:10;
}
#gallery a:active img, #gallery a:focus img {
background:#eee;
position:relative;
width:320px;
height:239px;
border:0;
z-index:10;
}
/* hack for Internet Explorer */
#gallery li.pad {
height:0;
display:block;
margin-top:-2px;
width:448px;
font-size:0;
}
/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
background:#888;
width:320px;
height:240px;
padding:48px 64px;
position:absolute;
left:0;
top:0;
z-index:10;
}
#gallery a:hover img {
background:#aaa;
position:relative;
width:320px;
height:240px;
border:0;
z-index:10;
}
}
ul#thumbs {
padding:0;
margin:0;
width:100px;
height:100px;
position:relative;
}
#thumbs li {
list-style-type:none;
width:100px;
height:100px;
float:left;
z-index:100;
}
#thumbs a {
position:relative;
width:100px;
height:100px;
display:block;
float:left;
z-index:100;
cursor:default;
}
#thumbs a img {
position:relative;
width:100px;
height:100px;
border:1px solid #FFFFFF;
z-index:100;
}
ul#mailhome li {
display: inline;
list-style-image: none;
list-style-type: none;
}
ul#mailhome a:link {
color: #9966CC;
}
ul#mailhome a:hover {
color: #99CCFF;
}
I know this should be easy, but my brain has melted
Dec 21st, 2006, 09:16
Similar Threads
