Ok,
I did spend tons of time now (as a beginner in css stylecoding) (but making
html pags for many years), to get this right.
But I am overseeing something.
At this link you find a drawing of my wanted layout:
description:
-a left column in which I want to put some artwork only (jpg with repeat-y
over the whole heigth of the page!).
-the obvious header
-a MainContent block (in which I now floated my "menu" div and a first
content "cont1" div (- I also tried to take the menu outside the content
block))
-a footer
Whatever I do, I keep getting strange things.
At the moment, for instance, the content and menu texts go through my footer
and go on below it. That is my main problem now.
But some other problems, having to do with absolute and relative positioning
I guess(?), also show up sometimes.
The footer problem, I tried to solve with this concept:
But somehow, I loose my footer completely than!?!?!
I did go through several internet courses on how to work with css layouts,
but mostly they work with the concept of a fixed width content. And that is
not what I want. I want to desing for 800x600 minimum. And content should be
adapting to larger resolutions/screens.
Maybe you people can have a look below?
thx
Ron
Here is the rough code I use at the moment (sorry for notepad not
structuring this text):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>blabla </title>
<style type="text/css">
<!--
body {
text-align: center;
}
#Wrapper {
text-align: left;
}
#Header {
position:absolu te;
left:7%;
top:0px;
width:93%;
height:100px;
z-index:1;
background-color: #00FF00;
text-align: left;
}
#MainContent {
position:absolu te;
top:102px;
width:93%;
z-index:1;
background-color: #FFFF00;
left: 7%;
text-align: left;
}
#cont1 {
float: left;
width: 70%;
}
#Menu {
top:102px;
width:20%;
z-index:2;
background-color: #00FFFF;
bottom: 102px;
left: 80%;
text-align: left;
float: right;
}
#Footer {
position:absolu te;
left:7%;
width:93%;
height:100px;
z-index:1;
background-color: #FF0000;
bottom: 0px;
}
#LeftPixAchter {
position:absolu te;
left:0px;
width:7%;
z-index:5;
background-color: #FFFFFF;
background-image: url(pix/achter.jpg);
background-repeat: repeat-y;
top: 0px;
height: 100%;
float: left;
}
-->
</style>
</head>
<body>
<div id="Wrapper">
<div id="Header"></div>
<div id="MainContent ">
<div id="Menu">
test<br />
test<br />
</div>
<div id="cont1">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi.</p>
</p>
</div>
</div>
<div id="Footer"></div>
<div id="LeftPixAcht er"></div>
</div>
</div>
</body>
</html>
I did spend tons of time now (as a beginner in css stylecoding) (but making
html pags for many years), to get this right.
But I am overseeing something.
At this link you find a drawing of my wanted layout:
description:
-a left column in which I want to put some artwork only (jpg with repeat-y
over the whole heigth of the page!).
-the obvious header
-a MainContent block (in which I now floated my "menu" div and a first
content "cont1" div (- I also tried to take the menu outside the content
block))
-a footer
Whatever I do, I keep getting strange things.
At the moment, for instance, the content and menu texts go through my footer
and go on below it. That is my main problem now.
But some other problems, having to do with absolute and relative positioning
I guess(?), also show up sometimes.
The footer problem, I tried to solve with this concept:
But somehow, I loose my footer completely than!?!?!
I did go through several internet courses on how to work with css layouts,
but mostly they work with the concept of a fixed width content. And that is
not what I want. I want to desing for 800x600 minimum. And content should be
adapting to larger resolutions/screens.
Maybe you people can have a look below?
thx
Ron
Here is the rough code I use at the moment (sorry for notepad not
structuring this text):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>blabla </title>
<style type="text/css">
<!--
body {
text-align: center;
}
#Wrapper {
text-align: left;
}
#Header {
position:absolu te;
left:7%;
top:0px;
width:93%;
height:100px;
z-index:1;
background-color: #00FF00;
text-align: left;
}
#MainContent {
position:absolu te;
top:102px;
width:93%;
z-index:1;
background-color: #FFFF00;
left: 7%;
text-align: left;
}
#cont1 {
float: left;
width: 70%;
}
#Menu {
top:102px;
width:20%;
z-index:2;
background-color: #00FFFF;
bottom: 102px;
left: 80%;
text-align: left;
float: right;
}
#Footer {
position:absolu te;
left:7%;
width:93%;
height:100px;
z-index:1;
background-color: #FF0000;
bottom: 0px;
}
#LeftPixAchter {
position:absolu te;
left:0px;
width:7%;
z-index:5;
background-color: #FFFFFF;
background-image: url(pix/achter.jpg);
background-repeat: repeat-y;
top: 0px;
height: 100%;
float: left;
}
-->
</style>
</head>
<body>
<div id="Wrapper">
<div id="Header"></div>
<div id="MainContent ">
<div id="Menu">
test<br />
test<br />
</div>
<div id="cont1">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi.</p>
</p>
</div>
</div>
<div id="Footer"></div>
<div id="LeftPixAcht er"></div>
</div>
</div>
</body>
</html>
Comment