• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Seitenlayout Positionierung

D

dotnet

Neues Mitglied
Hallo,

wieso bekomme ich immer einen Scrollbalken? Ich möchte das "left" und "main" immer der größe vom Browser anpassen (höhe). Wenn ich es so lasse, muss ich scrollen.

Danke im Voraus und Grüße

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="style/css/reset.css" media="screen" rel="stylesheet" type="text/css" />
<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}
html {
    background-color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
}
/* Body Base */
body {
    background-color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: left;
    color: #000000;
    height: 100%;
}
#wrapper {
    width: 100%;
    height: auto;
    min-height: 100%;
    background-color: maroon;
    min-width: 1000px;
}
#header {
    width: 100%;
    height: 80px;
    background-color: yellow;
    min-width: 1000px;
    position: absolute;
}
#left {
    width: 220px;
    background-color: fuchsia;
    min-height: 100%;
    height: 100%;
    position: absolute;
    top: 80px;
    bottom: 0px;
}
#main {
    width: 100%;
    height: auto;
    min-height: 100%;
    min-width: 780px;
    background-color: teal;
    position: absolute;
    top: 80px;
    bottom: 0px;
    left: 220px;
}
</style>
<title>Startseite</title>
</head>

<body>

<div id="wrapper">
    <div id="header">
        header </div>
    <div id="left">
        left </div>
    <div id="main">
        main </div>
    <div style="clear: both">
    </div>
</div>

</body>

</html>
 
Hallo.

Dein Header hat eine Höhe von 80px, left und main haben eine Höhe von 100%
Das ergibt bei mir eine Höhe von 100% + 80px es muss also eine Scrolleiste erscheinen weil deine Höhe ja höher als der zur Verfügung stehende Platz ist.

Bei deiner Breite ist es genau das selbe.

Du solltest ausserdem auf die absoluten Positionierungen verzichten, dein einfaches Layout kannst du auch mit einem float erreichen.
Dann würde sogar das clear im body einen Sinn ergeben.

Gruss
Elroy
 
hallo elroy,

ich habe die positionierung nur gewählt da ich die höhe vom "left" nicht geschafft habe auf die komplette browser höhe zu setzen. ich hatte das float drinne und eine höhe von 100%, es war aber nur so hoch wie der inhalt von "left"

grüße
 
dotnet schrieb:
hallo elroy,

ich habe die positionierung nur gewählt da ich die höhe vom "left" nicht geschafft habe auf die komplette browser höhe zu setzen. ich hatte das float drinne und eine höhe von 100%, es war aber nur so hoch wie der inhalt von "left"

grüße
Zum Vergrößern anklicken....

Dann reicht es aber doch den Header absolut zu positionieren.

Schau dir das mal an. Keine Ahnung ob du das so haben willst, aber von dieser Lösung kannst du uasgehen und es dann für dich anpassen.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="style/css/reset.css" media="screen" rel="stylesheet" type="text/css" />
<style type="text/css">
* {margin: 0px;
   padding: 0px;}

html {background-color: #FFFFFF;
      font-family: Arial, Helvetica, sans-serif;
      height: 100%;}

/* Body Base */
body {background-color: #FFFFFF;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      color: #000000;
      height: 100%;}

#header {width: 100%;
         height: 80px;
         background-color: yellow;
         position: absolute;
         left: 0; top: 0;}

#left {width: 220px;
       background-color: fuchsia;
       float: left;
       height: 100%;}

#main {background-color: teal;
       height: 100%;}

</style>
<title>Startseite</title>
</head>

<body>

    <div id="header">
        header </div>
    <div id="left">
        left </div>
    <div id="main">
        main </div>
    <div style="clear: both">
    </div>

</body>

</html>
Gruss
Elroy
 
muss ich den "wrapper" entfernen? die anderen elemente (left und main) sehe ich nicht bzw. die sind ganz oben (der text "left" und "main" ist nicht sichtbar)?
 
Hallo.

Der Text liegt unter dem Header.
Du musst deinen Inhalt semantisch korrekt auszeichnen und mit margin und padding anpassen.

Hier ging es ja jetzt erst mal vorrangig um das Aussehen. Oder habe ich da was falsch verstanden?

Wenn du den Wrapper für irgend etwas brauchst nimm ihn rein, für das Beispiel hab ich ihn nicht gebraucht.
 
so, also ich habe es versucht, wenn ich margin-top: 80px und margin-bottom: -80px; mache, klappt es leider nicht, das element ist wieder um die 80px größer :/
 
ok. hat sich erledigt, danke @Elroy, so wie du es mir vorgeschlagen hast, klappt es doch, hatte nur nen kleinen fehler drinne.
.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben