Hi everyone.
I am hoping that someone can help me out with my css. I will post a
file showing what I am trying to achieve (called terrysdesign).
I am wondering why, unless I give a specific height for the division
"contentcontainer", my borders do not extend to go around my content.
I am also having a hard time applying padding to the divs
"contentright" and "contentleft"
Lastly, If I refresh the page it will jump in IE. This does not occur
with Firefox or Netscape.
Any help, is greatly appreciated. I am also posting a screenshot of
what I have now in IE. It is called terrysiescreenshot.
Below is the css file as well as the html page.
body {
text-align: center;
margin-left: 0px;
margin-top: 0px;
}
#containerfx {
width: auto;
height: auto;
}
#container {
position: relative;
/*overflow; hidden;*/
top: 0;
left: 0;
text-align: left;
width: 778px;
padding: 0;
margin:auto;
border: 2px solid #999999; padding: 0;
}
#header {
position: relative; /*absolute;*/
background-image: url(images/header-with-veg-rest.jpg);
top:0;
left:0;
width: 778px;
height: 242px;
border:0;
margin: 0;
padding: 0;
}
#navcontainer {
position: absolute;
/*float: left;*/
top: 217px;
left: 0;
width: 778px;
height: 31px;
}
..navigations {
float:left;
padding-left:22px;
text-align:center;
font: 14px arial;
}
a.nav:link {
color: #333333;
text-decoration: none;
}
a.nav:visited {
color: #333333;
text-decoration: none;
}
a.nav:hover {
color: #006633;
text-decoration: none;
}
#contentcontainer {
background-color: orange;
position: relative;
text-align: left;
width: 100%;
/* height: 400px; */
border: 2px solid red; padding: 0;
/*padding: 0;*/
/*margin:auto;*/
}
#contentleft {
background-color: blue;
position: absolute;
top: 5px;
left:0px;
margin-right: 30%;
padding-right: 10px;
/*margin: auto;*/
float: left;
width: 33%;
/*display:inline;*/
/*overflow:hidden;*/
border-right: 2px dotted #999999;margin:0; padding: 0;
}
#contentright {
background-color: green;
top: 5px;
position: absolute;
margin-left: 34%;
/*padding-left:3px;*/
width: 66%;
/*display:inline;*/
}
#gap {
position: relative;
width: 778px;
height:2px;
padding:0;
margin:0;
}
Below is the html page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>headertasty</title>
<META HTTP-EQUIP="Content-Type" content="text/html;
charset=iso-8859-1">
<link rel="STYLESHEET" href="styles1.css" type="text/css">
</head>
<body>
<div id="containerfx">
<div id="container">
<div id="header"></div>
<div id="navcontainer">
<div class="navigations"><a class="nav" href="">about us</
a></
div>
<div class="navigations"><a class="nav"
href="">reservations</
a></div>
<div class="navigations"><a class="nav" href="">drink</
a></div>
<div class="navigations"><a class="nav" href="">our food</
a></
div>
<div class="navigations"><a class="nav" href="">contacts</
a></
div>
</div>
<div id="contentcontainer">
<div id="contentleft">
Well let's see if this works. I am certainly hoping that
it will. But you never
know. Sometimes these things are temperamental.Well
let's
see if this works. I am certainly hping that it will. But you
never know. Sometimes these things are temperamental.<br>
So it remains to be seen what is going to happen.
</div>
<div id="contentright">
Well let's see if this works. I am certainly hoping that
it will. But you never
know. Sometimes these things are temperamental.<br>
So it remains to be seen what is going to happen.
</div>
</div>
</div>
</div>
</body>
</html>
Search
