Willkommen in der Webstatt Zum Webstatt Blog und Stories
BNightSpeeder am 09.12.06 15:20

Hallo,

ich hab eine Problem, ich habe eine Boxendesign mit div's das eigentlich auch gut funktioniert nur bei der Höhe gibt es Probleme, also wenn ich height: 100% angebe kommt der ganze Style durcheinander aber bei 150px (z.b.) geht alles:

Man findet die Klassen in der Mitte des CSS Codes es sind l_m,r_m und m_m.
Beispiel im Anhang.

Code:

<div class="main">
<div class="l_o"></div>
<div class="r_o"></div>
<div class="m_o"></div>

<div class="l_m"></div>
<div class="r_m"></div>
<div class="m_m">Ich bin ein ziemlich kurzer und dummer Blindtext!</div>

<div class="l_u"></div>
<div class="r_u"></div>
<div class="m_u"></div>
</div>


Und CSS:

/* Boxen Div's */

.main {
width: 600px;
}

.main_small {
width: 200px;
}

.l_o {
float: left;
width: 24px;
height: 33px;
background-image: url(./box/l_o.gif);
background-repeat: no-repeat;
}


.m_o {
width: 100%;
height: 33px;
background-image: url(./box/m_o.gif);
background-repeat: repeat;
}


.r_o {
float: right;
width: 24px;
height: 33px;
background-image: url(./box/r_o.gif);
background-repeat: no-repeat;
}





.l_m {
float: left;
width: 24px;
height: 100%;
background-image: url(./box/l_m.gif);
background-repeat: repeat;
}

.m_m {
width: 100%;
height: 100%;
}

.r_m {
float: right;
width: 24px;
height: 100%;
background-image: url(./box/r_m.gif);
background-repeat: repeat;
}




.l_u {
float: left;
width: 24px;
height: 24px;
background-image: url(./box/l_u.gif);
background-repeat: no-repeat;
}


.m_u {
width: 100%;
height: 24px;
background-image: url(./box/m_u.gif);
background-repeat: repeat;
}


.r_u {
float: right;
width: 24px;
height: 24px;
background-image: url(./box/r_u.gif);
background-repeat: no-repeat;
}

netcup.de Warum gibt es hier Werbung?
Scraper Scraper am 09.12.06 15:32

gewöhn dir mal aussagekräftige Namen für deine Divs an, oder kommentier das direkt, das ist ja scheusslich ;)

Also, es gibt erstmal keine Definition, wie hoch ein Browserfenster ist, demnach kannst du auch nicht height: 100% verwenden. Je nach Browser und zusätzlichen CSS-Befehlen wird das a) gar nicht interpretiert, b) die Browserhöhe des Fensters in Pixeln verwendet, c) als 0 interpretiert.

Stell doch bitte mal ein Beispiel online, das ist sonst so blöd zu betrachten.

Wenn l.m und r.m lediglich zum Anzeigen des Hintergrundbilds da sind, alle drei Divs (l.m, m.m, r.m) zu einem Div verschmmelzen, eine 1px große Grafik erstellen, die dann die Breite der 3 Divs zusammen hat und eben die Ränder und den Hintergrund als Inhalt hat. Du kannst dich aber auch anderer Tricks bedienen, Beispiele gibt es zuhauf

http://www.intensivstation.ch

BNightSpeeder am 09.12.06 17:08

Also es geht mir darum das die Höhe der Box sich anpasst zum Inhalt. Nur krige ich das nichthin, wie auf dem Bild zu sehen, nur wenn ich eine px angabe mache wird die Box richtig dargestellt.

Ich weiß deshalb nicht welches Beispiel du willst. das mit 100% oder 100px??

Scraper Scraper am 09.12.06 17:24

Hey, bissi tüfteln gehört auch dazu :)

Schau dir mal das Template an. Da kannst du doch wunderbar deine Seite dran anpassen:
http://www.intensivstation.ch/files/templates/2/template-3.html

BNightSpeeder am 21.12.06 18:50

Ich werde irgendwie daraus nicht schlau, mein Problem ist ja eigentlich nur das ich will das die div's:

l_m
r_m

automatisch die selbe höhe kriegen wie das div "m_m".

Gibt es eine möglichkeit das sich die div's die höhe von einem anderem div hohlen?

Mfg. BNS

BNightSpeeder am 21.01.07 14:20

<Thema hochhol>

Hi, also ich habe jetzt die drei div's oben und unten zu einen zusammengefasst so sieht es jetzt aus:

CSS:

<!--

* {
padding: 0;
margin: 0;
border: 0;
}



/* Boxen Div's */

.main {
width: 750px;
}

.main_small {
width: 250px;
}



/* Oben */

.oben {
width: 100%;
height: 20px;
background-image: url(./box/box_oben.png);
background-repeat: no-repeat;
}



/* Unten */


.unten {
float: left;
width: 100%;
height: 20px;
background-image: url(./box/box_unten.png);
background-repeat: no-repeat;
}



/* Mitte */

.mitte {
width: 100%;
text-align: left;
}

.l_mitte {
float: left;
width: 37px;
background-image: url(./box/box_mitte_03.png);
background-repeat: repeat;
}

.r_mitte {
float: right;
width: 37px;
background-image: url(./box/box_mitte_04.png);
background-repeat: repeat;
}



-->


Und der Code:

<div class="main">
<div class="oben"></div>
<div class="l_mitte"></div>
<div class="r_mitte"></div>
<div class="mitte">TEXT</div>
<div class="unten"></div>
</div>


Doch leider passen sich weiterhin die beiden divs außen ("l_mitte" und "r_mitte") nicht an den mittigen an, ich hab jetzt schon mehrere versuche mit boxmodellen versucht aber irgendwie geht es nicht.

Mfg. BNS

fish fish am 21.01.07 14:54

könntest du bitte ein live-beispiel hochladen? danke.

BNightSpeeder am 21.01.07 15:51

http://victorvici.vi.funpic.de/live/

fish fish am 21.01.07 16:00

was genau ist dein problem?
ich vermute mal, dass du nen roten rahmen auf allen seiten willst, richtig?
doll der kasten, der in dem der text steht, eine bestimmte größe haben oder 100% groß sein?
vll kannst du es ja mal aufmalen?

BNightSpeeder am 21.01.07 16:22

Also der im div in der Mitte steht ja der text und die Box soll sich nach unten hin dynamisch erweitern, das klappt auch ganz gut, mein Problem ist aber ja das sich die beiden div die eigentlich an den seiten sind nicht erweitern sondern sich die höhe da auf 0px einstellt und wenn ich 100% angebe wird die box solange wie die Seite.

also so sieht es aus, so soll es aussehen:

Michael Michael am 21.01.07 16:24

6 DIVs für eine aufgewertete Textbox? Das klingt ja fast nach Rekord.

fish fish am 21.01.07 16:28

wüfür brauchst du dann 4 divs? es reichen doch 3? (eine feste breite vorrausgesetzt?
ein div: hintergrund: border-oben
ein div: hintergrund: border-linksundrechts hier kommt der text rein, lässt sich strecken
ein div: hintergrund: border-unten

Michael Michael am 21.01.07 16:29

Genau!

BNightSpeeder am 21.01.07 16:34

ok, werde es mal so versuchen thx.

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt