Hallo ich habe noch wenig bis keine Erfahrungen in CSS und HTML und wär sehr dankbar über eure Hilfe.
Also zu meinem Problem:
Ich habe mit div Boxen mein Layout erstellt und möchte das sich die Größe automatisch der Bildschirmgröße anpasst.
Das Layout besteht aus 4 Boxen Überschrift,Navigation,Hauptfenster und Fußleiste.
Wenn ich jetzt die Höhe meiner Überschriftbox ändere, verlängert sich auch meine Gesamte Website nach unten, so das ich scrollen muss. Ich möchte aber das meine Seite nicht über die Bildschirmgröße hinausgeht auch wenn ich die Größe der Überschirftsbox ändere.
Hab schon viele Sachen probiert und gegoogelt aber bin noch zur keiner Lösung gekommen....:?
Hier mein CSS-Code:
HTML-Code:
Also zu meinem Problem:
Ich habe mit div Boxen mein Layout erstellt und möchte das sich die Größe automatisch der Bildschirmgröße anpasst.
Das Layout besteht aus 4 Boxen Überschrift,Navigation,Hauptfenster und Fußleiste.
Wenn ich jetzt die Höhe meiner Überschriftbox ändere, verlängert sich auch meine Gesamte Website nach unten, so das ich scrollen muss. Ich möchte aber das meine Seite nicht über die Bildschirmgröße hinausgeht auch wenn ich die Größe der Überschirftsbox ändere.
Hab schon viele Sachen probiert und gegoogelt aber bin noch zur keiner Lösung gekommen....:?
Hier mein CSS-Code:
Code:
*
{ margin: 0;
padding: 0;
}
html, body
{ height: 100%;
}
#Wrapper1
{
height: 100%;
}
#Wrapper
{
background-color: lightblue;
height: 100%;
}
#Kopfleiste
{ background-color: lightgrey;
height: 100px;
}
#Steuerung_Links
{ background-color: orange;
width: 10em;
float: left;
height: 100%;
}
#Steuerung_Links p
{ padding-bottom: 0.5em;
}
#Hauptfenster
{ background-color: lightgreen;
margin-left: 10em;
width: 500px;
}
#Hauptfenster h1
{ color: red;
padding-bottom: 1em;
}
#Fussleiste
{ background-color: lightgrey;
position: relative;
bottom: 0;
width: 100%;
}HTML-Code:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Startseite</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="Wrapper1">
<div id="Kopfleiste">
<p>Überschrift/Banner</p>
</div>
<div id="Wrapper">
<div id="Steuerung_Links">
<p>Steuerungsleiste</p>
<p>Navigation</p>
<p>Struktur</p>
</div>
<div id="Hauptfenster">
<h1>Hauptfenster/Inhalt</h1>
</div>
</div>
<div id="Fussleiste">
<p>Fußleiste</p>
</div>
</div>
</body>
</html>