[GrafZahl]

Hi Leute, habe hier n ziemlich dummes Problem.

Mache zum ersten mal ein komplett auf CSS basierendes Layout und bekomms nicht hin das der Border der Menüleiste zu 100% den Container(also bis zum Anfang der Footer-Leiste ausfüllt, er reicht immer weiter als der Container eigentlich hoch ist.

Hier zur aktuellen Ablage: http://xulu.net/sauerzweig/

Wisst ihr da was am Code falsch seien könnte?

Oh und eben is mir aufgefallen das mit dem Footer was im IE nicht stimmt...aaaaaargh, das is ja zum ausflippen mit css

html, body {
	height: 100%;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	background-image: url(bg.gif);
	background-repeat: repeat;
	background-attachment: fixed;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.container {
	min-height: 100%;
	height: 100%;
	width: 804px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #53788a;
	border-left-color: #53788a;
	margin-top: 0em;
	margin-right: auto;
	margin-bottom: 1em;
	margin-left: auto;
	background-color: #FFFFFF;
}
.headbar {
	background-color: #FFFFFF;
	height: 25px;
	text-align: right;
}
.header {
	background-image: url(header.jpg);
	background-repeat: no-repeat;
	height: 155px;
	width: 804px;
}
.content {
	margin-right: 151px;
	margin-left: 151px;
	width: auto;
	padding: 10px;
	text-align: justify;
}

.mainnav {
	background-image: url(nav_bg.jpg);
	height: 70px;
	margin: 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #53788a;
	background-repeat: repeat-x;
	text-align: center;
	vertical-align: top;
	background-color: #FFFFFF;
}
.menu {
	width: 140px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #006699;
	float: right;
	padding: 5px;
}
.menu2 {
	min-height: 100%;
	height: 100%;
	width: 140px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #006699;
	float: left;
	padding: 5px;
}
.footer {
	background-image: url(footbar_bg.jpg);
	background-repeat: repeat-y;
	width: 804px;
	position: absolute;
	bottom: 0;
	height: 22px;
	text-align: center;
	padding-top: 6px;
}

Dieser Beitrag wurde von GrafZahl bearbeitet: 18. Januar 2006 - 19:01

[Floele]

Deine Seite ist im Moment nicht erreichbar...also helfen wird da schwierig.

[GrafZahl]

Hab den Link mal auf meinen Webserver geändert, so besser?

[Floele]

So wie du es machen möchtest geht es auch nicht, weil sich die 100% auf die Größe des übergeordneten Elementes beziehen. 100% heißt also für die linke Spalte: Genau so hoch wie das umgebende Element (nicht 100% des zur Verfügung stehenden Platzes). Mögliche Lösung:
http://www.alistapar...es/fauxcolumns/

Dieser Beitrag wurde von Floele bearbeitet: 18. Januar 2006 - 20:47

[GrafZahl]

Also hab mir nu die Seite durchgelesen und obwohl mein englisch nicht das schlechteste ist steig ich da nicht durch.

Warum muss mann bei CSS Layouts eigentlich IMMER mit irgendwelchen Tricks und Cheats arbeiten?

Der Link ist glaube auch nicht das was ich suche, ich will einfach das die linke und rechte box vom content immer so hoch sind wie der eigentliche contentteil, und mindest das browserfenster einmal vertikal füllt.

Kann doch denke nicht so schwer sein...aber ich hab nu schon alles versucht...warum nimmt css als 100% marke denn immer den kompletten container als massstab? ist doch komplett hirnrissig...bei den guten alten table-zeiten war das doch auch kein problem?

[Floele]

Zitat (GrafZahl: 18.01.2006, 21:17)

Der Link ist glaube auch nicht das was ich suche, ich will einfach das die linke und rechte box vom content immer so hoch sind wie der eigentliche contentteil, und mindest das browserfenster einmal vertikal füllt.

Genau das wird dort erklärt. Den Artikel gibt's bestimmt auch noch irgendwo auf Deutsch.

Zitat

Kann doch denke nicht so schwer sein...aber ich hab nu schon alles versucht...warum nimmt css als 100% marke denn immer den kompletten container als massstab? ist doch komplett hirnrissig

Eigentlich nicht. Es ist sogar ziemlich logisch.

[GrafZahl]

Mhm hatte eigentlich gedacht das mir da Code-Mäßig jemand nen Tipp geben kann weil ich als CSS Einsteiger
mir mit dem Code

background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

nicht viel vorstellen kann...und mehr Code steht nicht auf der Seite

Wenn ichs wie da beschrieben in meine css datei mit inne body klasse pack passiert NIX, ausser das sich die die hintergrundfarbe ändert...die seite an sich ist immernoch zu hoch

Zitat

Eigentlich nicht. Es ist sogar ziemlich logisch.

Wäre schön zu wissen warum?

[flo]

Na wenn du angibst 100% höhe, auf was soll es sich den sonnst beziehen?


Logischerweise auf das Element oder?

Dieser Beitrag wurde von Flo bearbeitet: 18. Januar 2006 - 22:40

[Floele]

Zitat (GrafZahl: 18.01.2006, 22:31)

Wenn ichs wie da beschrieben in meine css datei mit inne body klasse pack passiert NIX

Lies dir doch mal den Rest vom Text durch.

[GrafZahl]

Mhm, sorry aber ich bin wie gesagt kein profi in sachen css und da der artikel noch dazu auf english is und wie ich finde das problem nur anreißt hilft er mir schlichtweg nicht weiter...auch nach 3 fachem lesen finde ich nicht die stelle wo ich anzusetzen habe.

Ist für mich auch kein wirklich gutes Forum das bei ner Fragestellung mal kurz gegoogelt wird, n link reingeworfen wird und das wars dann.

[Floele]

Dann auf Deutsch: http://alistapart.by....de/fauxcolumns

Du kannst aber von keinem erwarten, dass er dir CSS erklärt. Dazu gibt es genug Tutorials im Internet.

Zusammengefasst rät der Artikel dir folgendes: Um ein <div> mit einem Rahmen so aussehen zu lassen als wenn es sich über das komplette übergeordnete Element erstreckt, bekommt das übergeordnete Element eine Hintergrundgrafik die in y-Richtung wiederholt den Rahmen des <div>s vortäuscht.