Throndorin
Neues Mitglied
Hallo
ich habe eine gewisse Vorstellung davon wie mein Webseiten Layout sein soll
1. Seite wächst nicht in die Breite mit wenn man den Browser vergrößert -> also immer schön mittig => das bekomme ich hin
2. Die Seite hat einen fixen Bereich, heißt Kopf und Fuß sind immer an der selben Stelle und haben etwas Abstand zum Rand => habe ich auch
3. Der Content Anteil scrollt als alleiniger Bereich unter dem Head und dem Foot => das bekomme ich nicht hin
hier das css;
hier meine index.html
hat da jemand eine Idee oder einen Rat?
sollte ähnlich zu diesem aussehen Willert Software Tools - Embedded UML und Softwaretools
nur das halt der content teil scrollt und nicht alles
Throndorin
ich habe eine gewisse Vorstellung davon wie mein Webseiten Layout sein soll
1. Seite wächst nicht in die Breite mit wenn man den Browser vergrößert -> also immer schön mittig => das bekomme ich hin
2. Die Seite hat einen fixen Bereich, heißt Kopf und Fuß sind immer an der selben Stelle und haben etwas Abstand zum Rand => habe ich auch
3. Der Content Anteil scrollt als alleiniger Bereich unter dem Head und dem Foot => das bekomme ich nicht hin
hier das css;
Code:
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
font-size:76%;
font-family:georgia, palatino linotype, times new roman, serif;
background-image : url(../images/notes.png);
background-attachment : fixed;
background-repeat : repeat;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
/*ckground-color : White;*/
}
#content {
overflow:auto;
position:absolute;
z-index:3;
top:150px;
bottom:52px;
width:800px;
min-height:300px;
margin-left:-400px;
left:50%;
border:0;
background:#DCDCDC;
}
#head {
position:fixed;
margin-left:-400px;
left:50%;
top:40px;
width:800px;
min-width:700px;
height:120px;
font-size:1em;
z-index:5;
border:0;
background:#fff;
}
* html #head {
top:2px; width:802px; height:148px;
}
#head a .pad {
display:block;
width:80px;
height:125px;
background:transparent;
border:0;
}
#foot {
text-align:center;
position:absolute;
margin-left:-400px;
left:50%;
bottom:20;
width:800px;
min-width:700px;
height:20px;
font-size:1em;
z-index:5;
border:0;
font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
font-weight:bold;
color:#000;
}
* html #foot {
bottom:2px; width:802px; height:48px;background:#fff;
}
#content p {
padding:5px; text-align:justify;
}
.boldhead {
font-size:1.5em;
font-weight:bold;
}
.bold {font-weight:bold;}
.left {float:left; margin:10px; border:1px solid #000;}
.right {float:right; margin:10px; border:1px solid #000;}
.lefttext {float:left; width:300px; text-align:justify;}
.righttext {float:right; width:300px; text-align:justify;}
* html .lefttext {float:left; widt
HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><!-- Put IE into quirks mode -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Amatöne 1te idee</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="head">
<img src="http://www.html.de/images/linie_oben.png"/>
<img src="http://www.html.de/images/weh.jpg" />
</div>
<div id="foot">
<img src="http://www.html.de/images/linie_unten.png"/>
</div>
<div align="center" id="content">
<p style="color:#fff" align="center">Das ist in Weiß</p>
<p style="color:#000" align="center">Das ist in Schwarz</p>
</div>
</body></html>hat da jemand eine Idee oder einen Rat?
sollte ähnlich zu diesem aussehen Willert Software Tools - Embedded UML und Softwaretools
nur das halt der content teil scrollt und nicht alles
Throndorin
