✔ Website mit Navigation und Rest 100%

Status
Nicht offen für weitere Antworten.
tinella

tinella

Erfahrenes Mitglied
Liebe Leute

Ich folgendes Problem:
Habe eine Website, oben einen header über die ganze Seite, dann unter dem Header links eine Navigation von genau 190Pixel und rechts von der Navigation ebenfalls unter dem Header einen Platz wo der ganze Text hinkommt, von der Navigation bis zur rechten Browserfensterseite (siehe Anhang).

Die Seite soll mit divs gemacht werden.

Kann mir jmd. sagen wie ich das hinkriege, dass es mir den Text nicht immer nach ganz unten verschiebt, wenn ich 100% angebe?


Hab im Moment wirklich keinen Plan, eine Antwort würde mir sehr helfen.

Tinella
 

Anhänge

  • 26798attachment.jpg
    26798attachment.jpg
    18,9 KB · Aufrufe: 7
Mit PHP hat das nicht viel zu tun, von daher schiebe ich das Thema mal ins CSS-Board.

Wie sieht denn der Quellcode (HTML + CSS) des Dokuments aus?
 
Sorry, da hast du natürlich recht!

Der Quellcode sieht momentan wieder recht dürftig aus, weil ich noch keine Lösung des Problems rausgefunden habe:

Code: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<titleDas Problem</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainContainer">
	<div id="header">
	</div>
	<div id="bottom">
		<div id="navigation"></div>
		<div id="title"></div>
		<div id="text"></div>
	</div>
</div>
</body>
</html>

Das CSS schaut so aus:
Code: 
#mainContainer{
width:100%;
}

#header{
background-image:url(../images/backgroundheader.jpg);
height:140px;
width:100%;
}

#bottom{
/*background-image:url(../images/bottomsize.jpg);*/

/*türkis*/
background-color:#00CC99;
height:600px;
width:100%;
}

#navigation{
height:100%;
width:190px;
float:left;
/*green*/
background-color:#66FF00;
}

#title{
/*blue*/
background-color:#000099;
width:100%;
height:100px;

float:left;
padding-left:190px;
margin-left:190px;
}

#text{
/*red*/
background-color:#CC0000;
width:100%;
height:300px;
float:left;
padding-left:190px;
margin-left:190px;
}

Das Ganze lässt sich erst im Mozilla schön anschauen.
 
Das ist zu lösen mit absolut positionierten Div's.

Überarbeiteter Quellcode zum Ansehen

Hier der überarbeitete Quellcode
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>
<title>Das Problem</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

<div id="header">Seitentitel</div>

<div id="navigation">Navigation<br />hierhin<br />dahin<br />dorthin</div>

<div id="content">bla bla bla</div> 

</body>
</html>

style.css:
Code: 
#header{
 background-image:url(../images/backgroundheader.jpg);
 border-bottom: 1px solid #cccccc;
 position: absolute;
 top: 0; /* Abstand zum oberen Fensterrand */
 left: 0; /* Abstand zum linken Fensterrand */
 right: 0; /* Abstand zum rechten Fensterrand */
 height: 140px; /* Blockhöhe */ 
 padding: 0; /* Interpretation Boxmodell! */
 overflow: hidden; /* Scrollbalken unterbinden */
 z-index: 3;
}

#navigation{
 width:190px;
 float:left;
 background-color:#66FF00;
 position: absolute;
 top: 140px; /* Abstand zum oberen Fensterrand */
 left: 0px; /* Abstand zum linken Fensterrand */
 bottom: 0px; /* Abstand zum unteren Fensterrand */
 width: 190px; /* Blockbreite */
 overflow: auto; /* Scrollbalken, falls notwendig */
 z-index: 4;
}

#content{
 background-color:#CC0000;
 float:right;
 position:absolute;
 top: 140px; /* Abstand zum oberen Fensterrand */
 left: 190px; /* Abstand zum linken Fensterrand */
 bottom: 0px; /* Abstand zum unteren Fensterrand */
 right: 0px; /* Abstand zum rechten Fensterrand */
 overflow: auto; /* Scrollbalken, falls notwendig */
 z-index: 4;
}
 
Zuletzt bearbeitet:
:):):)Hey Kunsi:):):)


DANKESCHÖN ! ! !

Hast mir echt super geholfen, toll!

Ich wünsche dir einen herrlichen Tag!

Tinella:)
 
prinzipiell ist mein layout auch nach diesem TUT gestaltet, nur bin ich davon ausgegangen, das man eben Nnicht den IE benutzt sondern einen Browser :) (Quatsch...) (IE bezeichne ich net als Browser sondern als Sicherheitslücke - Meine Meinung)
aber ich hab auf meiner seite 86,5% Firefox und 9,8% Opera-Besucher und von daher ist der IE-Benutzer-Anteil von 5,7% vernachlässigbar gering ...
 
Ich bin auch nicht der große Freund vom IE, aber dennoch sollte er beim Entwerfen eines CSS-Layouts berücksichtigt werden.

Was dir deine Seitenstatistik ausgibt, kannst du nicht als Maßstab für Webprojekte Dritter annehmen, und den IE daraufhin in deinen Lösungsvorschlägen einfach "unter den Tisch kehren".

Ansonsten weise bitte das nächste mal den User darauf hin, daß in deinem Lösungsvorschlag der IE unberücksichtigt geblieben ist.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück