nicht angemeldet
CSS Layout macht Probleme
Hallo Community,
ich habe ein Problem mit meinem ersten CSS Layout. Da das Problem nicht ganz so einfach niederzuschreiben ist, bitte ich auch mal meinen Code im Browser anzuschauen. Das Problem ist, dass der Rot gefärbte Bereicht viel zu gross wird.
Kann mir bitte jemand helfen?
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: url(../gfx/bg.gif);
height: 100%;
margin: 0;
padding: 0;
}
#page_center_help {
text-align: center;
position: absolute;
left: 0px;
width: 100%;
height: 100%;
overflow: visible;
}
#page_main {
width: 780px;
height: 100%;
background-color: #FDFDF2;
text-align: left;
position: absolute;
margin-left: -390px;
left: 50%;
}
#page_leftborder {
width: 13px;
height: 100%;
background-image: url(../gfx/left_border.gif);
background-repeat: no-repeat;
position: relative;
float: left;
}
#page_innerbox {
width: 754px;
height: 100%;
position: relative;
float: left;
}
#page_rightborder {
width: 13px;
height: 100%;
background-image: url(../gfx/right_border.gif);
background-repeat: no-repeat;
position: relative;
float: left;
}
#page_header {
width: 754px;
height: 32px;
background-image: url(../gfx/header_bg.gif);
background-repeat: repeat-x;
text-align: left;
}
#page_graphic {
width: 754px;
height: 111px;
background-color: #CECECE;
text-align: left;
}
#page_menu {
width: 754px;
height: 26px;
background-image: url(../gfx/bg_menu.gif);
text-align: left;
border: 1px #FFFFFF;
border-style: solid none none none;
}
#page_content {
width: 754px;
height: 100%;
background-color: #EAEAEA;
text-align: left;
border: 1px #FFFFFF;
border-style: solid none none none;
position: relative;
}
#page_content_left {
width: 580px;
height: 100%;
background-color: red;
text-align: left;
position: relative;
float: left;
}
#page_content_right {
width: 173px;
height: 100%;
background-color: #EAEAEA;
text-align: left;
position: relative;
float: left;
border: 1px #D0D0D0;
border-style: none none none solid;
}
#page_footer {
width: 754px;
height: 26px;
background-image: url(../gfx/bg_footer.gif);
background-repeat: repeat-x;
position: relative;
} -->
</style>
</head>
<body>
<div id="page_center_help">
<div id="page_main">
<div id="page_leftborder"></div>
<div id="page_innerbox">
<div id="page_header"></div>
<div id="page_graphic"></div>
<div id="page_menu"></div>
<div id="page_content">
<div id="page_content_left"></div>
<div id="page_content_right"></div>
</div>
<div id="page_footer"></div>
</div>
<div id="page_rightborder"></div>
</div>
</div>
</body>
</html>
-
Das Problem ist, dass der Rot gefärbte Bereicht viel zu gross wird.
Definiere "zu groß".
Kann mir bitte jemand helfen?
Für CSS-Layout solltest Du Deinem Code einen Doctype spendieren, der alle Browser in den Standards Mode versetzt.
Außerdem ist Dein Code (verständlicherweise, da ohne Inhalt) eine fürchterliche div-Suppe. Layout macht man nicht mit divs, sondern mit semantisch korrekt ausgezeichnetem Inhalt. Zu Testzwecken ist das, was Du machst, natürlich okay, leider driften fast alle Anfänger dann ab, wenn sie Inhalt hinzufügen, sprich, sie packen den Inhalt nur in die divs rein. Das ist nicht im Sinne des Erfinders. Leichter wirds, wenn Du zuerst den Inhalt auszeichnest.
Aber dazu später mehr...wenn Du willst.-
Hallo,
vielen Dank erstmal für deine Antwort. Ich habe die Page einmal unter
www.mindstorm.ch/tpl/template.htm
raufgeladen damit du Sie dir vielleicht einmal ansehen kannst. Da sieht man sofort was "zu gross" bedeuted.
Da dieses Template in ein CMS System eingelesen werden soll, steht da auch kein Inhalt drin.
Scheinbar habe ich aber etwas noch überhaupt nicht verstanden.
Für Hilfe wäre ich dankbar.
-
raufgeladen damit du Sie dir vielleicht einmal ansehen kannst. Da sieht man sofort was "zu gross" bedeuted.
Nein. Woher soll man das erkennen? Damit etwas "zu groß" ist, muss man wissen, wie die richtige Größe ist.
-
Also.
Ich habe im Mittelteil drei DIV-Contaier (page_header, page_graphic, page_menu) welche eine feste Grösse in Pixel haben. Darunt habe ich einen weiteren DIV-Container in page_content wo der Inhalt einmal stehen soll. Dieser Container soll den Rest der Höhe auffüllen. Leider passiert nun auf der Seite folgendes:
Der Container page_content ist = 100% PLUS die fixen Werte. Er sollte jedoch nur die Anzahl % kriegen welche noch nicht gebraucht wurden. Es ist nicht ganz so einfach zu erklären. Schaus dir mal an, dann sollte es eigentlich klar sein.
Danke
http://www.mindstorm.ch/tpl/template.htm
-
Der Container page_content ist = 100% PLUS die fixen Werte. Er sollte jedoch nur die Anzahl % kriegen welche noch nicht gebraucht wurden.
Sowas funktioniert nicht. 100% - npx geht nicht.
Schaus dir mal an, dann sollte es eigentlich klar sein.
Durchs Schauen habe ichs nicht verstanden, aber durch Deine Erklärung.
Schönes Wochenende,
-Efchen-
Hallo.
Nicht gerade sehr aufbauend deine Antwort :-)
Wie könnte man denn das gewünschte Layout sonst noch realisieren? Gibts da keinen Workaround?
Gruss Claudio
Auch dir ein schönes Wochenende.
-
Nicht gerade sehr aufbauend deine Antwort :-)
Soll ich lügen, damit Du Dich besser fühlst? :-)
Wie könnte man denn das gewünschte Layout sonst noch realisieren? Gibts da keinen Workaround?
Mit Inhalt.
Inhalt in die Site schreiben, dann entsprechend semantisch richtig auszeichnen, und erst dann das Lyout drum rum machen. Geht meist einfacher, weil man sich nicht so auf das Layout konzentriert, und man nicht immer an Tabellenlayout denkt. Und man schreibt keine div-Suppe.Du versuchst, mit aussagelosen Block-Elementen jede Fläche irgendwie abzubilden, so als würdest Du die Zellen eines Tabellenlayouts mit divs abzubilden versuchen. Das ist Unfug. So funktioniert das nicht.
Nimm Deinen Inhalt, zeichne ihn logisch aus, und mach erst dann das Layout drum rum.
Du wirst feststellen, dass Du Textabsätzen auch eigene Hintergrundfarben geben, auch dicke Linien (20px z.B.) mittels border für z.B. eine Überschrift (<h1>) realisieren kannst.
Sollen der Haupthintergrund und die Navigation verschiedene Hintergrundfarben bekommen und gleich lang sein, bietet sich ein Hintergrundbild über die gesamte Breite an.
Ich habe das Gefühl, meine Einschätzung mit dem Abbilden der Tabellenzellen könnte ins Schwarze getroffen haben, oder? :) In dem Fall musst Du komplett umdenken und nochmal von vorne anfangen:
Trennung von Inhalt und Layout
HTML: SemantikGruß,
-EfchenP.S.: Bei Fragen möge er sich beeilen, ich habe ab nächste Woche Urlaub ;-)
-
-
-
-
-
Scheinbar habe ich aber etwas noch überhaupt nicht verstanden.
Höchstens, dass es mit Inhalt leichter ist, weil man dann nicht hinterher wieder alles ändern muss. Einen blauen Balken mit einem <div> zu machen, ist nämlich Blödsinn. Dazu gibt es die "border"-Eigenschaft in CSS.
-
-