| Autor |
Nachricht |
tnobs
Threadersteller
Dabei seit: 27.07.2005
Ort: insbruck
Alter: -
Geschlecht: 
|
Verfasst Di 18.04.2006 15:43
Titel CSS / Seite mit Header - Content - Footer / height="100 |
  |
|
hi, versuche gerade eine seite mit drei div tags aufzubauen, welche aus header / content / footer bestehen soll. die ganze seite soll in der höhe immer 100 % betragen, header (100px) und footer (30px). wie schaffe ich es dass der content sich automatisch anpasst, ohne dass ein vertikaler scrollbalken auftaucht.
mein bisheriger code:
<style type="text/css">
<!--
body{
margin: 0;
}
.box1{
background:#cde0eb;
padding:10px;
height: 100px;
margin:0 10px 0 10px;}
.box2{
padding:10px 10px 10px 30px;
width:35%;
height: 100%;
float:left;}
.box3{
padding:10px 30px 10px 10px;
margin:0 0 0 45%;}
.box4{
background:#cde0eb;
clear:left;
height: 30px;
padding:10px;
margin:0 10px 0 10px;}
-->
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
</body>
</html>
|
|
| |
  |
 |
fuchsbau
Dabei seit: 15.08.2005
Ort: .//root
Alter: 40
Geschlecht:
|
Verfasst Di 18.04.2006 16:21
Titel
|
|
|
 Versteh ich nicht. Was verstehstn unter automatisch anpassen?
Du hast z.B. n Fließtext und der is zu lang, also kommt ne vertikale Scrollbar. Ja und nun? Was soll automatisch passieren? Oder binnich zu doof? 
.//thomas
edit:
sonst (nach deiner beschreibung) würd ichs halt so machen, nur aufpassen, dass der content nicht zu dick wird.
| Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>test</title>
<style type="text/css">
<!--
body { margin: 0; padding: 0; }
.complete { height: 100%; margin: 0; padding: 0; border: 0; background-color: #ffffff;}
.header { height: 100px; margin: 0; padding: 0; border: 0; background-color: #cde0eb;}
.footer { position: absolute; bottom: 0; height: 30px; width: 100%; border: 0; margin: 0; background-color: #cde0eb; padding: 0; }
-->
</style>
</head>
<body>
<div class="complete">
<div class="header"></div>
<div>CONTENT</div>
<div class="footer"></div>
</div>
</body>
</html> |
haste halt im IE die 2-3px rand unten, gibts bestimmt auch nochn trick, wie du die wegbekommst...
Zuletzt bearbeitet von fuchsbau am Di 18.04.2006 16:50, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 18.04.2006 18:49
Titel
|
|
|
|
geb deinen div dingern mal aussagekräftige IDs das man weiß worum es geht. und google mal nach „einmal erdgeschoss bitte“ dann findeste ne anleitung zu ner 100% height seite mit fixem footer auf der seite von sonem typen namens manuel
|
|
| |
|
|
tacker
Dabei seit: 22.03.2002
Ort: Trondheim, Norwegen
Alter: 43
Geschlecht:
|
|
| |
 |
|
wunschtacho
Dabei seit: 12.04.2006
Ort: Rosenheim/München
Alter: 45
Geschlecht:
|
Verfasst Mi 19.04.2006 14:16
Titel
|
|
|
Hallo,
könnte dir das weiterhelfen:
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Untitled Page</title>
<style type="text/css" media="screen"><!--
body {
color: black;
background: white;
text-align: center;
margin: 0;
}
#frame {
background-color: #c0c0c0;
margin: 0 auto;
width: 300px;
height: auto;
overflow: auto;
/* IE 5 Win fix */
overflow= visible;
height=100%;
margin-bottom= -100px;
}
#minh {
background-color: blue;
float: left;
top: 0;
bottom: 0;
width: 1;
height: 100%;
margin-top: -200px;
/* IE 5 Win fix */
margin-top = -100px;
padding-top = 0;
}
#layer1 {
background-color: #8fbc8f;
float: left;
top: 0;
width: 90px;
height: auto;
!padding-bottom: 100px; /* IE 6 */
}
#layer2 {
background-color: #ffe4c4;
float: left;
margin-left: 5px;
top: 0;
width: 100px;
height: auto;
!padding-bottom: 100px; /* IE 6 */
}
#layer3 {
background-color: #d2691e;
margin-left: auto;
top: 0;
width: 90px;
height: auto;
!padding-bottom: 100px;/* IE 6 */
}
#footer {
background-color: #ee82ee;
width: 300px;
height: 100px;
margin: 0 auto;
}
#head {
background-color: #ffc0cb;
margin: 0 auto;
width: 300px;
height: 100px;
}
--></style>
</head>
<body>
<div id="frame">
<div id="head"></div>
<div id="minh"></div>
<div id="layer1">
Linker Bereich
</div>
<div id="layer2">
#lorem
</div>
<div id="layer3">
Rechter Bereich
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
|
Grüße
|
|
| |
|
|
fuchsbau
Dabei seit: 15.08.2005
Ort: .//root
Alter: 40
Geschlecht:
|
Verfasst Mi 19.04.2006 20:10
Titel
|
|
|
| wunschtacho hat geschrieben: |
| Code: | /* IE 5 Win fix */
margin-top = -100px;
padding-top = 0;
} |
| Code: | | !padding-bottom: 100px; /* IE 6 */ |
| Code: | | !padding-bottom: 100px; /* IE 6 */ |
| Code: | | !padding-bottom: 100px;/* IE 6 */ |
|
 Sowas geht ja wohl mal garnicht.
Und überhaupt sieht das ganze bei mir (FF) recht seltsam aus.
Zuletzt bearbeitet von fuchsbau am Mi 19.04.2006 20:14, insgesamt 1-mal bearbeitet
|
|
| |
|
|
wunschtacho
Dabei seit: 12.04.2006
Ort: Rosenheim/München
Alter: 45
Geschlecht:
|
Verfasst Mi 19.04.2006 20:17
Titel
|
|
|
Aber sicher geht so was
ist ein gängiger CSS Hack für den Internet Explorer - kannst dir gleich mal merken 
width: 100px;
!width: 120px;
Grüße
|
|
| |
|
|
fuchsbau
Dabei seit: 15.08.2005
Ort: .//root
Alter: 40
Geschlecht:
|
Verfasst Mi 19.04.2006 20:20
Titel
|
|
|
ja, ist mir schon klar. du kannst auch gleich ne browserweiche mit javascript bauen. du kannstes aber eben auch lassen ^^ janee, das ist wohl n programmier-  entschuldigung tacker *schreibt100.000mal"HTMLundCSSsindkeineProgrammiersprachen!"andietafel" ein äh non-print-allgemein-philosophie-problem. ich finde das stinkt nach langen dünnen nudeln. egal ^^
Zuletzt bearbeitet von fuchsbau am Mi 19.04.2006 20:22, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[CSS] Layout(Header, Sidenav, Content, Footer) mit 100% Höhe
Variabler Header/Footer in Höhe - fester Content - WIE?
Footer, Min-Height - das Problem was alle haben...
E.Mail Header/Footer
[CSS] Content Div überlagert Footer
CSS Problem - Inhalt an Footer und Header anpassen?
|
|
Willkommen auf dem Portal für Mediengestalter
