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

[ERLEDIGT] Hauptlayout der Webseite erstellen

S

swiss16

Neues Mitglied
Hallo liebe Forummitglieder,
Ich bin relativ neu in der Webentwicklung und möchte meine erste Seite ohne Frames erstellen.
Obwohl ich ein gutes Buch habe, funktioniert nichts so wie ich es möchte. Ich weiss nicht genau was ich falsch mache.
Ich möchte oben auf gesamter Breite ein Header, danach links die Navigation und der Content und zu unterst noch einen Footer.
Der Html Code bis jetzt:
HTML: 
<!DOCTYPE html>
<html>

<head>
<link href="config/layout.css" type="text/css" rel="stylesheet">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Reining-Haus</title>
</head>

<body>
<header>kopf</header>
<div id="navi">navi</div>
<div id="content">inhalt</div>
<footer>fuss</footer>
</body>

</html>
und der Css code bis jetzt:
Code: 
*{
    margin: 0px;
    padding: 0px;
}
body {
    color: #000;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    overflow:auto;
}
header{
    background-color:aqua;
    height:150px;
    width:100%;
    top:0;
    left:0;
    position:absolute;
}
#navi{
    float: left;
    width:15%;
    min-width:150px;
    background-color:bisque;
    height:730px;
    top:150px;
    left:0;
    position:absolute;
    }
#content{
    width:85%;
    height: 730px;
    top: 150px;
    left: 15%;
    position: absolute;
    background-color: blue;
}
footer{
    clear:left;
    height:100px;
    width:100%;
    position:absolute;
    top:880px;
    left:0;
    background-color:chartreuse;
}
Das Problem welches ich habe ist, dass die Navigation egal wie gross der Bildschirm ist, immer eine gewisse grösse hat (so 150px). Aber der min-width funktioniert aber nicht.
Und ich wollte am Anfang, die höhe vom Footer auf 10% machen. Das Problem dabei ist aber, dass danach der Fuss immer angezeigt wird, auch wenn ich runterscrolle.
Ich benötige deshalb ein bisschen Starthilfe.
Was wäre ein guter Weg um auch auf verschiedenen Browsern und evtl auch Smartphones der Selbe design zu haben?
Ich hoffe dass Ihr mir helfen könnt.
Freundliche Grüsse
Osti
 
Wenn links die Navi, rechts der Content und unten der Footer stehen soll, benötigen #navi und #content ein float:left und footer ein clear:both. Außerdem musst du überall das position absolute löschen und das top und left durch margin-top und margin-left ersetzen. Wobei die Gesamtbreite von Navi und Content, incl. des margin-left, 100% nicht überschreiten dürfen.

Das mit Smartphones und responsive Design vergiss erst mal, solange du noch mit statischem Layout Schwierigkeiten hast.
 
Hallo Tronjer,
Danke dir das ist genau das was ich wollte. Aber gibt es ohne responsive Design eine möglichkeit das der Content immer bis zum Rand auffüllt? jetzt ist es so, wenn ich das Fenster kleiner mache, so ca 50% vom Bildschirm, verschwindet es, weil es nicht mehr angezeigt werden kann. Wenn ich aber nur einen "min-width" und "max-width" setze, ist es genau so gross wie der Text platz braucht.
So sieht jetzt der Content im css aus:
Code: 
#content{
    float:left;
    max-width:85%;
    width:85%;
    min-width:10%;
    min-height:700px;
    margin-top: 0;
    margin-left: 0;
    background-color: blue;
}

Nur das Min-width macht irgendwie nichts. Natürlich sollte wen das Fenster kleiner wird scrollen. Im Body habe ich overflow auf Auto gestellt.
wenn ich die 85% width weg nehme ist es wie gesagt so breit wie der text. Wenn ich jetzt eine Hintergrundfarbe als Design verwende, wird dadurch die Homepage natürlich etwas komisch wen ein teil Weiss bleibt.
 
für min-width musst du eine fixe breite in px nehmen. prozent geht nicht.

p.s. hast doch ein gutes buch.lies doch noch mal
 
Naja geht auch nicht, ich nehme mal an, dass in diesemfall responsive Design nötig ist.
So gut ist das Buch auch wieder nicht :)
Es wird halt alles mit Position und width meistens in % angegeben, und das Thema Responsive Design habe ich zwar gelesen, werde ich aber erst später versuchen. Dann werde ich es dann halt schaffen.
Trotzdem Danke
 
swiss16 schrieb:
Naja geht auch nicht, ich nehme mal an, dass in diesemfall responsive Design nötig ist.
So gut ist das Buch auch wieder nicht :)
Es wird halt alles mit Position und width meistens in % angegeben, und das Thema Responsive Design habe ich zwar gelesen, werde ich aber erst später versuchen. Dann werde ich es dann halt schaffen.
Trotzdem Danke
Zum Vergrößern anklicken....

Wenn in diesem Buch alles mit position angegeben ist, ist es nicht "nicht gut", sondern abartig schlecht. Am Besten du lehrst dem Buch das Fliegen - in Richtung Tonne.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben