[CSS] Div in Div -> lest

**wahsaga** · 17.06.2004, 12:36

Re: [CSS] Div in Div -> lest

Original geschrieben von Benny-one
wie macht man das?

*seufz*, schon wieder ...

dass zwei von einander unabhängige elemente ihre höhe gegenseitig beeinflussen, ist in CSS nicht vorgesehen.

(und wird von den tabellenlayout-umsteigern dementsprechend auch immer wieder lautstark maulend bemängelt, nachdem man sie nach so einer frage darauf hingewiesen hat ...)

wenn du sicher sein kannst, dass eines der elemente immer das längere sein wird, kannst du einen optisch ähnlichen effekt u.U. mit anderer verschachtelung und hintergrundfarben/-bildern erreichen.

die divs haben bei position den wert absolute.

wozu?

[X] benny möchte float kennenlernen.

**Benny-one** · 17.06.2004, 13:45

http://www.4webmaster.net/images/beta_pic.gif

wie soll man das realisiern?
es muss ja oben links in die ecke

**wahsaga** · 17.06.2004, 14:00

Original geschrieben von Benny-one
http://www.4webmaster.net/images/beta_pic.gif

wie soll man das realisiern?
es muss ja oben links in die ecke

wie soll man was realiseren?

sag wenigstens mal, was du vorhast, und wo es dabei probleme gibt - aus einem bild ist ja wohl kaum ersichtlich, wo es hapert.

für mich sieht das jedenfalls man nach einer <h1>-überschrift aus, deren (sinnvoller, für SuMas relevanter) textinhalt ausgeblendet und dafür durch ein hintergrundbild ersetzt wird, für den header.

und darunter kommen halt navigation und inhaltsbereich, wobei die navigation halt nach links gefloatet wird.

wenn du die navigation in den inhaltsbereich schachtelst, und ganz am ende des inhaltsbereiches noch ein das float aufhebendes (clear), ggf. auch leeres element einfügst, dann wird auch der hauptbereich immer mindestens so lang wie die navi.

**mrhappiness** · 17.06.2004, 14:09

Original geschrieben von wahsaga
dann wird auch der hauptbereich immer mindestens so lang wie die navi.

das "mindestens" ist wahrscheinlich das wort zuviel

**wahsaga** · 17.06.2004, 14:12

Original geschrieben von mrhappiness
das "mindestens" ist wahrscheinlich das wort zuviel

dass mehr mit standard-CSS nicht erreichbar ist, und große klimmzüge/javascript-gewürge erfordern würde, sagte ich ja bereits - sollte auch beim frager angekommen sein.

**mrhappiness** · 17.06.2004, 14:33

fast dran wärst du mit sowas (denke ich)

Code:

<body>
<h1><img src="header.jg" width="breite" height="hoehe" 
alt="Alternativtext" title="" /></h1>
<div id="nav" 
style="width:150px;background:#aaa;float:left;">Test<div id="content" 
style="float:left;margin:-1em 0 0 160px;background:white;">Hallo <br />a
</div></div>
</body>

aber lass das bloß wahsaga nicht sehen, logisches markup isses nämlich nicht

**wahsaga** · 17.06.2004, 14:36

Original geschrieben von mrhappiness
aber lass das bloß wahsaga nicht sehen, logisches markup isses nämlich nicht

klar kann man vielleicht noch bessere semantik reinbringen, eine navigation als liste implementieren, für textabschnitte auch wirklich ein <p> hernehmen, anstatt immer alles nur in divs zu kleben, etc.

aber von der grundidee her ... ist doch schon nah dran an dem, was ich vorgeschlagen habe.

(wofür du den inhaltsbereich allerdings auch floaten willst, wenn er die navi doch umschliesst, verstehe ich nicht.)

**mrhappiness** · 17.06.2004, 14:41

weiß ich auch nicht *g*

der nachteil dabei ist jedoch, dass über dem eigentlichen inhalt noch ein schmaler balke in der farbe der navigation zu sehen ist, aber da findet bestimmt jemand anders was (-1.2em als margin-top funktioniert, aber frag mich bitte niemand warum)

[CSS] Div in Div -> lest