Länge eines Div's ohne Inhalt

A

andmon

Grünschnabel
Hallo,

ich arbeite gerade an einer Homepage und hab nun den ganzen Sonntag damit verbracht, dass Problem zu lösen, doch ich habs nicht hinbekommen... vllt. ist es ja ganz einfach, aber naja...

ich habe ein div, einen container der ganz ausenrum ist,

dann hab ich oben eine div-leiste

den inhalt,

und unten eine div leiste ...ungefähr so

xxxxxxxxxxxx
0000000
0000000
0000000
0000000
xxxxxxxxxxx

(der inhalt. also hier die nullen sollen zentriert sein)


dass also links und rechts neben dem inhalt noch ein wenig frei ist. In diesen freien Raum will ich jetzt links und rechts jeweils einen div reinmachen... der sich dann mit der länge des inhaltes mitzieht... also keine bestimmte länge haben soll...

wie stell ich das an ? meine lögischen überlegungen waren, dass ein teil der unteren leiste einbezogen werden muss, die die seite dann mitnach unten zieht... hab das aber nicht wirklich hinbekommen... sowas wie height: 100% klappt da ja auch nicht oder ?

ich hoffe ich konnte euch mal mein problem so erklären...
 
Hallo und herzlich Willkommen im Forum, andmon :)

Deiner Beschreibung und der "Skizze" zufolge, dürfte mein CSS-Tutorial CSS-Layout mit 100%-Höhe mit der Beispielvariante "Modell mit Header und Footer" (im Attachment die Vorlage "3cols_header_footer.htm") deinen Vorstellungen entgegenkommen.

Ansonsten findest du in dem Artikel AnyColumnLongest noch weitere technische Lösungsansätze zum Erzeugen solcher "Equal-Height-Columns", die sich unabhängig von ihrem Inhaltsumfang in der Höhe automatisch angleichen.

Eine Bitte hätte ich auch an dich: Als Neumitglied unserer Community solltest du dich mit unserer Netiquette vertraut machen, und beim Verfassen deiner Forenbeiträge u.a. den Punkt 15 bzgl. deiner durchgängigen Kleinschreibung beachten - vielen Dank! :)

mfg Maik
 
So, ich hab mir das jetzt nochmal durchgelesen, aber ich habe damit glaub keinen Erfolg. Mal ein Ausschnitt...

Ich habe einen Container, und links und rechts 2 Leisten, die mit der Länge des Inhaltes in der Mitte des Containers (Inhalt) mitgestreckt werden sollen.

css:
#inhalt{
width:802px;
background-color:#FFFFF;
float: none;
margin-top: 9px;
margin-right: auto;
margin-bottom: 9px;
margin-left: auto;
}


#leiste1{
width:11px;
float:left;
height:100%;
background-image:url....gif);
background-repeat:repeat-y;
}

#leiste2{
width:11px;
height: 100%;
float:right;
background-image:url....gif);
background-repeat: repeat-y;
}


html:

<div id="inhalt">

<div id="leiste 1">

</div>

<div id="leiste2">

</div>

</div>


Kann ich so die Höhe angeben ? Dass die Leiste also 100% des Inhaltes beträgt ? Denn meine leiste ist mit dieser Angabe nur immer so groß wie die Schriftgröße und hängt oben links bzw rechts im Eck. Ich möchte aber dass es sich über die ganze Länge, von oben bis unten erstreckt.

Schoneinmal vielen Dank

gruß
 
Moin,

führe mal die beiden Hintergrundgrafiken in einer Grafikdatei zusammen, die die Breite des Gesamtlayouts besitzt (hier: 802px + 2*11px = 824px), und binde sie stattdessen in einer vierten übergeordneten Box als vertikal zu wiederholendes Hintergrundbild ein, die die drei Boxen #inhalt, #leiste1, #leiste2 in sich aufnimmt.

Die derzeit festgelegten Höhen- und Hintergrundangaben für #leiste1 und #leiste2 entfallen somit gänzlich im Stylesheet.

Wenn du das Layout auch bei wenig Seiteninhalt in seiner Höhe auf 100% "strecken" willst, sodass es den Anzeigebereich des Fensters in der Vertikalen ausfüllt, würde sich folgender CSS-Code ergeben:

Code: 
html,body {
height:100%;
}
#wrapper { /* Elternbox */
width:824px;
min-height:100%;
height:auto !important;
height:100%;
background:#FFF url(*.gif) repeat-y;
}
#inhalt{
margin:9px 11px;
}
#leiste1{
width:11px;
float:left;
}
#leiste2{
width:11px;
float:right;
}
HTML: 
<body>
    <div id="wrapper">
        <div id="leiste1">...</div>
        <div id="leiste2">...</div>
        <div id="inhalt">...</div>
    </div>
</body>

Desweiteren ist unbedingt darauf zu achten, dass in diesem Layoutkonzept die floatenden Spaltenblöcken zum Abschluß wieder "gecleart" werden - dies hab ich aber in meinem empfohlenen Tutorial berücksichtigt, und zusätzlich im Frühjahr diesen Jahres in den Webmaster-FAQ meinen Artikel CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an? reingestellt, da zu der auftretenden Problematik desöfteren im CSS-Forum Fragen auftauchen.

mfg Maik
 
So, ich hab mir das mal nun genauer angeschaut.

Ich versteh da noch nicht ganz den Sinn. Wenn ich die kleinen Hintergrundbildchen, die ich links und rechts in die Leisten reinpacken will, zusammenpack als ein großes Hintergrundbild, dann brauch ich ja die beiden Leisten 1 und 2 garnicht mehr... aber dann hab ich immer ein großes Hintergrundbild, sodass es ja theoretisch länger dauert, dieses zu laden oder ?

Gehen die 100% Höhe auch bezogen auf den Container Inhalt ? Also nicht auf das komplette Browserfenster, sondern nur auf den Container ?
 
andmon hat gesagt.:
Ich versteh da noch nicht ganz den Sinn. Wenn ich die kleinen Hintergrundbildchen, die ich links und rechts in die Leisten reinpacken will, zusammenpack als ein großes Hintergrundbild, dann brauch ich ja die beiden Leisten 1 und 2 garnicht mehr... aber dann hab ich immer ein großes Hintergrundbild, sodass es ja theoretisch länger dauert, dieses zu laden oder ?
Zum Vergrößern anklicken....

Sicher dauert es etwas länger, ein Bild mit 10kb zu Laden, als ein Bild mit 20kb.

Aber es gibt da mehrerer Gesichtspunkte.
Vor einigen Jahren, als viele noch mit ihrem 56k-Modem herumgurkten, hat man schon so gearbeitet, dass man grosse Grafiken in kleine aufgeteilt hat, damit es nicht so lange dauert, bis überhaupt etwas geladen werden kann.

Heutzutage, wo es billiger ist eine weissdeiergeierfetteundschnelle Flatrate zu kaufen, als per ISDN oder gar analog durchs Netz zu kriechen, hat sich das etwas geändert. Das Nadelöhr ist nicht mehr die Verbindung, welche der User zur Verfügung hat, sondern der Server, der nicht mehr hinterherkommt mit den Anfragen.

Wenn man 2 Bilder in eines packt, hat man die HTTP-Requests für den Zweck halbiert...und die Datenmenge selbst ist dadurch ja nicht grösser geworden :)

Mal ein wie ich finde recht gutes Beispiel für die Wirkung der Reduzierung der Requests.... tutorials.de selbst :-)

Wir haben hier ja viele kleine Grafiken, welche wir benötigen.
Bis vor ein paar Wochen wurde jede dieser Grafiken einzeln als <img> eingebunden...für jede Grafik war eine separate Anfrage an den Server notwendig, je nach Seite und Userstatus hat das Anzeigen einer Seite bis zu 120 Serveranfragen erfordert...was den Server mächtig ausbremst.

Jetzt verwenden wir für viele der Grafiken folgendes:map_.png
Das ist eine einzige Grafik--->eine Serveranfrage, und sie ersetzt 60! Grafiken...seitdem wir diese Technik einsetzen, würde ich einschätzen, dass die Seiten hier im Schnitt 30% schneller laden :)
 
Zuletzt bearbeitet:
andmon hat gesagt.:
Gehen die 100% Höhe auch bezogen auf den Container Inhalt ? Also nicht auf das komplette Browserfenster, sondern nur auf den Container ?
Zum Vergrößern anklicken....
Selbstverständlich :)

Code: 
/*html,body {
height:100%;
}*/
#wrapper { /* Elternbox */
width:824px;
/*min-height:100%;*/
/*height:auto !important;*/
/*height:100%;*/
background:#FFF url(*.gif) repeat-y;
}


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück