CSS Layout
0 0 0 0 0 
Detlef G.
0
CSS Layout
Guten Tag,
ich habe folgendes Problem:
Ich habe mit CSS ein Layout erstellt und als externe Stylesheet gespeichert. Nun das Layout wird angezeigt sobald ich aber ein wenig mehr Inhalt in meiner HTML-Datei habe ist der Graue Menürand auf einmal weiß. Gibt es da eine Möglichkeit das der Rand mit dem Inhalt wächst. Hier mal mein CSS-COde:
/*-----body-----*/
body
{background-color:#FFFFFF; padding:0; margin:0;}
a {color: #000000; TEXT-DECORATION: none}
a:visited {color:#000000; TEXT-DECORATION: none}
a:hover {color: #ffffff; TEXT-DECORATION: none}
a:active { color:#ffffff; TEXT-DECORATION: none}
h2 {
font-size: 1.7em;
font-weight: normal;
}
/*-----Container-----*/
#container
{width:60em; margin:0 auto; padding:0; background-color:#FFFFFF;}
/*-----Banner-----*/
#banner
{margin:0; padding:0; height:3em ; background-color:#FFFFFF;}
/*-----Kopfzeile-----*/
#kopf
{background-color:#808080;}
/*-----Inhalt-----*/
#inhalt
{margin:0; padding:0; min-height:300px; background-color:#FFFFFF;}
/*-----Links-----*/
#links
{float:left; width:10em; min-height:500px; margin:0; padding: 0; background-color:#808080;}
/*-----Rechts-----*/
#rechts
{float:right; width:10em; min-height:500px; margin:0; padding: 0; background-color:#808080;}
/*-----Fußzeile-----*/
#fuss
{clear:both; background-color:#808080;}
Gruß
Janos
-
Hi Janos,
Mit Deinen Daten allein lässt sich ziemlich wenig anfangen.
Bei der Problembeschreibung rate ich aber mal: Wenn Du ein floatendes Element in ein nicht-floatendes Eltern-Element packst, wächst das Eltern-Element nicht mit. Das lässt sich ganz einfach lösen, indem Du auch diesem umschließenden Element ein float:left gibst.
Susanne
-
Hey,
das hier ist mein Elternelement:
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="stylesheet.css" media="screen">
<title>Sponsoren</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="container">
<div id="banner"><img src="#"></div>
<div id="kopf"><center><?php include(""); ?><?php include(""); ?></center></div>
<div id="links"><?php include(""); ?></div>
<div id="rechts"><center><?php include(""); ?></center></div>
<div id="inhalt"><?php include(""); ?></div>
<div id="fuss"><center><?php include(""); ?></center> </div>
</div>
</body>
</html>
Und wie sieht es nun aus?-
Hi Janos,
Der graue Rand wird in Deinem Code nicht vom "container" erzeugt, sondern von "links". Da dieses Element gar nicht mitbekommen _kann_, wie groß "inhalt" im konkreten Fall ist, kann es auch nicht mitwachsen.
Wenn etwas mitwachsen soll, muss es das Inhaltselement umschließen und ebenfalls floaten.
Susanne
-
Also in etwa so?!:
<div id="container">
<div id="banner"><img src="#"></div>
<div id="kopf"><center><?php include(""); ?><?php include(""); ?></center></div>
<div id="inhalt"><?php include(""); ?></div>
<div id="links"><?php include(""); ?></div>
<div id="rechts"><center><?php include(""); ?></center></div>
<div id="inhalt"><?php include(""); ?></div>
<div id="fuss"><center><?php include(""); ?></center> </div>
oder liegt das Problem in der stylesheet-datei?
Gruß-
So jetzt wächst das alles mit, aber kann man das nicht vielleicht nur bei links und rechts einstellen?
Gruß
-
-
Hallo Susanne
Wenn etwas mitwachsen soll, muss es das Inhaltselement umschließen und ebenfalls floaten.
Das ist eine Möglichkeit, es gibt aber auch andere.
Entweder muss sich nach den gefloateten Elementen aber innerhalb des umschließenden Elements ein claerendes Element befinden, oder das umschließende Element muss einen Block Formatting Context bilden (im IE hasLayout). Float ist nur eine von mehreren Möglichkeiten, dieses zu erreichen.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
Servus,
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
[...]
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />XHTML 1.1 sollte nicht als text/html ausgeliefert werden. Es empfiehlt sich (u.a. bis _I_rgend_E_in Browser XML versteht) stattdessen XHTML 1.0 Strict zu verwenden.
<center>
Error: element "center" undefined.
Wenn du schon XHTML 1.1 schreibst, solltest du dich auch an dessen Regeln halten. Aber auch in anderen Doctypes ist center als deprecated eingestuft und sollte nicht mehr verwendet werden.
Darstellung steuert man über CSS, dazu zählt auch Zentrierung<?php include(""); ?>
Serverseitiger Code spielt für ein Darstellungsproblem keine Rolle, sondern nur dessen Ergebnis. (Hier ist das zwar relativ wurscht, aber es stört mehr als es hilft.) Zeige uns also nächstes mal den Code, den dein Script erzeugt.
Und wie sieht es nun aus?
Du kannst dem Inhalts-Element Rahmen links und rechts in Breite der Spalten mit derselben Farbe wie deren Hintergrundfarbe geben. Für ein "simples" Layout ist das eine recht praktikable Lösung.
Weitere Lösungsansätze findest du auf der Suche nach dem Heiligen Gral oder dem Einzige Wahren Layout.Uebrigens sind "links" und "rechts" denkbar ungünstig gewählte Bezeichner.
Gruss
Patrick--
sh:( fo:| ch:? rl:( br:> n4:( ie:% mo:) va:} de:> zu:) fl:| ss:| ls:[ js:|-
jetzt bin ich total verwirrt?!?!?!
Sry, aber 1. warum ist "links" bzw. "rechts" als name nicht gut?
Und wie meinst du das mit der Hintergrundfarbe?
Gruß-
Hi,
jetzt bin ich total verwirrt?!?!?!
kein guter Ausgangspunkt, um ein Posting zu verfassen.
Sry, aber 1. warum ist "links" bzw. "rechts" als name nicht gut?
Das kommt darauf an. Wenn sich in dem Bereich im Wesentlichen Links befinden (bzw. es dort thematisch um Links geht) oder ein Rechtswesen beleuchtet wird, sind die Bezeichner sinnvoll. Sollen sie hingegen aussagen, dass die Bereiche links respektive rechts dargestellt werden sollen, so ist das eine Information, die im Markup nicht das geringste verloren hat.
Und wie meinst du das mit der Hintergrundfarbe?
Meiner Ansicht nach hat shn recht gut beschrieben, was er meint. Wo hast Du Verständnisschwierigkeiten?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
-
-