sailingfree
Programmer
This sort of relates to my previous post but it has some changes. Basically my site is all layers. I have a main layer 100% wide to contain everything; a centralised wrapper layer that's 768px wide to contain the menu and the content (which have their own layers); and a layer that sits to the left of the wrapper that contains a logo. (There is a footer layer that currently sits annoyingly at the top of the page - please ignore this for the time being).
It is this logo layer that must always sit to the left of the wrapper, ie to the left of the menu. When in 800x600 I don't want this to be seen as only the wrapper layer would be seen since it is 768px wide. However when in a screen res higher than 800x600 the logo layer should be visible. Currently that layer moves so when in 800x600 it sits over the top of the menu.
What I'm confused about is how this layer should be programmed to do what I've just described. Here is the web page:
The html for this page is:
And the CSS is:
It is this logo layer that must always sit to the left of the wrapper, ie to the left of the menu. When in 800x600 I don't want this to be seen as only the wrapper layer would be seen since it is 768px wide. However when in a screen res higher than 800x600 the logo layer should be visible. Currently that layer moves so when in 800x600 it sits over the top of the menu.
What I'm confused about is how this layer should be programmed to do what I've just described. Here is the web page:
The html for this page is:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%response.Charset="utf-8"%>
<html>
<head>
<title>Follow The Boat, Cruise The World: A Sailing Log</title>
<meta name="description" content="A sailing and cruising log from around the world, including Atlantic crossing, Bay of Biscay and Turkey">
<meta name="robots" content="index,follow">
<link rel="stylesheet" type="text/css" href="css/css.css">
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body class="body">
<div class="main">
<div class="top1"> </div>
<div class="top2"> </div>
<div class="wrapper">
<div class="content">hello hello <br>
hello asd a sd asd ads ad as da d asd a d s as dasd asd a sd a sd as da
sd asd hello hello <br>
hello asd a sd asd ads ad as da d asd a d s as dasd asd a sd a sd as da
sd asd hello hello <br>
hello asd a sd asd ads ad as da d asd a d s as dasd asd a sd a sd as da
sd asd hello hello <br>
hello asd a sd asd ads ad as da d asd a d s as dasd asd a sd a sd as da
sd asd he</div>
<div class="menu"><!--#include file="system/menu.txt"--></div>
</div>
<div class="logo"></div>
<div class="footer"><!--#include file="system/footer.htm"--></div>
</div>
</body>
</html>And the CSS is:
Code:
.body {
font-family: Trebuchet MS, Helvetica, sans-serif;
margin: 0px;
text-align: center;
}
.main {
width: 100%;
position: relative;
}
.wrapper {
position: relative;
width: 768px;
margin: 0 auto; text-align: left;
}
.content {
position: absolute;
width:600px;
left: 150px;
top: 40px;
border: solid #000000;
float: left;
}
.top1 {
background-color: #1C3549;
position: relative;
height: 7px;
width: 100%;
left: 0px;
top: 0px;
border-bottom-style: groove;
border-bottom-color: #83A7A7;
z-index: 1;
}
.top2 {
position: relative;
height: 7px;
width: 100%;
left: 0px;
top: 30px;
border-bottom-style: solid;
border-bottom-color: #052D69;
border-bottom-width: medium;
z-index: 2;
}
.logo {
position: absolute;
left: 120px;
top: -15px;
background-image: url(../images/logo.gif);
background-repeat: no-repeat;
border: thin double #4585B6;
background-color: #D3E2EE;
background-position: center center;
height: 10em;
width: 10em;
z-index: 1;
}
.head {
background-image: url(../images/ftb.gif);
background-repeat: no-repeat;
}
.footer {
bottom: 50px;
height: 44px;
width: 100%;
left: 0px;
}
.menu {
background-repeat: no-repeat;
height: 400px;
width: 100px;
position: absolute;
left: 1px;
top: 40px;
}
.foot1 {
font-family: Trebuchet MS, Helvetica, sans-serif;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #052D69;
border-right-color: #052D69;
border-bottom-color: #052D69;
border-left-color: #052D69;
background-image: url(../images/foot.gif);
height: 44px;
position: relative;
}
.foot2 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
border-right-style: none;
border-top-width: thin;
border-bottom-width: thin;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #052D69;
border-bottom-color: #052D69;
height: 44px;
vertical-align: middle;
color: #052D69;
}
/* whole block*/
#nav, #nav ul {
padding: 0;
margin: 0 0 0 0px;
list-style: none;
float : left;
width : 150px;
border-top-width: thin;
border-bottom-width: thin;
border-top-style: dashed;
border-bottom-style: dashed;
border-top-color: #666666;
border-bottom-color: #666666;
background-color: #FFFFFF;
}
/* individual blocks*/
#nav li {
position : relative;
float : left;
line-height : 1.50em;
margin-bottom : -1px;
width: 150px;
}
#nav li ul { /* second-level lists */
position : absolute;
left: -800em;
margin-left : 9.05em;
margin-top : -1.50em;
}
#nav li ul ul { /* third-and-above-level lists */
left: -800em;
}
#nav li a {
width: 150px;
display : block;
color: #5A445E;
text-decoration : none;
background : transparent;
padding : 0 0.6em;
font-size: 14px;
}
#nav a.daddy {
background: url(../images/arrow.gif) left no-repeat;
}
#nav li a:hover {
color : white;
background-color : #91A1FF;
width: 131px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}