mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 19.03.2024 08:44 Benutzername: Passwort: Auto-Login

Thema: Probleme mit Layout - div im layout height="100%" vom 28.07.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Probleme mit Layout - div im layout height="100%"
Autor Nachricht
mariokrupik
Threadersteller

Dabei seit: 06.02.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 28.07.2010 15:14
Titel

Probleme mit Layout - div im layout height="100%"

Antworten mit Zitat Zum Seitenanfang

Nun bin ich schon stunden dabei, mein Template ein bisschen zu verändern, und komme aber bei einem Problem nicht drumherum.

Und zwar gibt es bereits einige tutorials ein div mit der höhe von 100% anzulegen, jedoch beziehen sich diese alle auf ein wrapper element direkt unter dem Body Tag.

Bei mir sind es aber 2 Div im Wrapper, left floated, - links Navigation - rechts Content

Wie schaffe ich es, dass die linke navigationsleiste die selbe höhe erreicht wie die des Contents?

Hier ein Beispielcode: (oder hier)
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >
<head>
<meta name="title" content="Testseite für Height 100%" />

<style type="text/css">
body {height:100%;}
#wrapper {width: 950px; margin:0 auto; border: 1px solid #ccc; padding:0; }
#wrapper td, #wrapper tr {margin:0; padding:0; }
#top {width: 900px; position:relative; left:25px; height:60px; background-color:#ffff99;}
#center-outer {width:850; margin: 10px 0 0 50px; background-color:#ccffff; height:100%;  }
#center-left {width:400px; float:left; background-color:#cc00cc; height:100%; min-height: 100%; height:auto !important; overflow: hidden !important;}
#center-right {width:450px; float:left;background-color:#3333cc; }
</style>


</head>
<body>


<table id="wrapper"><tr><td>
<div id="top">top</div>
<div id="center-outer">
<div id="center-left">center left</div>
<div id="center-right">center right <br /> asdf<br /> asdf<br /> asdf<br /> asdf<br /> asdf<br /></div>
</div>
</table></tr></td>

</body>
</html>


Schonmal vielen Dank für jede hilfe.
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mi 28.07.2010 15:18
Titel

Antworten mit Zitat Zum Seitenanfang

zZ imo garnicht.

Du hast die möglichkeit über Faux Columns

http://www.alistapart.com/articles/fauxcolumns/

oder mithilfe des Borders und negativem Margin.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
mariokrupik
Threadersteller

Dabei seit: 06.02.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 28.07.2010 15:38
Titel

Antworten mit Zitat Zum Seitenanfang

vielen dank,

habs auch schon mit tabellen versucht, aber aufgrund meines aufwendig verschachtelten Layouts entweder extrem aufwendig (neugestaltung) oder auch nicht möglich.

hab jetzt noch diesen blog gefunden
http://www.ejeliot.com/blog/61

vielleicht klappts ja mit padding und negative bottom margin.

melde mich dann wieder.
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mi 28.07.2010 15:46
Titel

Antworten mit Zitat Zum Seitenanfang

Nur bei deaktiviertem JavaScript funktioniert es nicht.

Zeig mal Dein Layout, dann kann ich Dir heute Abend (falls es passen sollte) ein Bsp mit der Borderlösung posten.
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mi 28.07.2010 16:40
Titel

Antworten mit Zitat Zum Seitenanfang

mariokrupik hat geschrieben:
vielleicht klappts ja mit padding und negative bottom margin.

Warum klappt es Deiner Meinung nach nicht mit faux columns? Dein Layout verwendet ausschl. px-Breiten, dem hast Du schneller faux columns verpasst, als Dein div-Layout in Tabellen nachgebaut (was eh ein No-Go wäre) oder Spatzen mit der Equal-Height-Columns-Kanone beschossen *zwinker*


Zuletzt bearbeitet von heiko_rs am Mi 28.07.2010 16:42, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen CSS - Layout height Problem
Website mit festen Layout in dynamisches Layout umbauen
Probleme mit [CSS] Layout
Layout Probleme
Probleme bei Layout
Paar Probleme bei Div Layout
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.