000
04.02.2011, 16:05
Felheart
|
Hi, wie einige vielleicht wissen Arbeite ich und ein paar Freunde an einer Internetseite, dabei habe ich ein Problem mit dem Layout.
HTML und CSS kann ich, aber ich krieg dieses mehr oder weniger komplexe Layout nicht wirklich richtig hin.
Die erste Zeile und die Erste spalte sollen fix sein, die zweite spalte der ersten zeile soll variabel sein.
Die zweite Spalte in der Zweiten Zeile soll sowohl horizontal als auch vertikal allen restlichen platz aufbrauchen.
Blau: Linien die einen festen Pixel-Wert haben. z.b. erste zeile erste spalte sollte
immer genau 100x50px sein oder so.
Rot: sollte immer so groß sein das der restliche platz ausgefüllt wird.
Die beiden grünen sind immer gleich groß um den darin liegenden div zu zentrieren.
Soweit hab ichs noch gerade so hinbekommen,
aber wenn ich nun einem div noch ein margin,padding oder border Attribut zuweise dann ändert das div element wieder seine größe und ich muss alle anderen zellen neu anpassen.
Gibts denn keine einfachere lösung als top,bottom,left,right attribute zu setzen, wenn man einfach nur will
das ein div den restlichen verfügbaren platz innerhalb eines containers(divs) ausfüllt ?
Ich habs auch schon mit tabellen versucht aber das kommt sehr unprofessionell und ist eigentlich genau so schwer.
Das eigentliche Problem ist jetzt einfach, wenn ich jetzt zum Beispiel
die höhe von allen den Blauen kästen an der linken seite ändern will,
dann muss ich auch den "top" wert des "auffüller"-divs darunter auch
anpassen.
Wie kann ich das ganze also mit auffüllenden divs machen?
So das ich bei änderungen an den margin,padding oder border attributen
nicht immer so viel ändern muss?
--
Dieser Beitrag wurde am 04.02.2011 um 16:11 von Felheart bearbeitet.
|
|
Profil || Suche
|
001
04.02.2011, 16:15
Dopefish
|
diese seite hat mir schon manchmal weitergeholfen: http://www.stichpunkt.de/css/bereiche.html
--
Resetting politics:
http://www.onlinepartei.eu
|
|
|
Profil || Suche
|
002
04.02.2011, 16:38
Felheart
|
hey, danke für die antwort.
die seite kenn ich bereits.
die beispiele da arbeiten alle mit absoluter positionierung bzw. margins,
was in meinem fall eben echt schwer ist.
meine frage war ja ob es nicht einen anderen weg gibt divs genau so groß
zu machen das sie den restlichen platz ausfüllen...
--
|
|
|
Profil || Suche
|
003
04.02.2011, 18:58
breath-of-death
|
probier folgendes:
<html>
<head>
<title>auffüllendes Div</title>
<style type="text/css">
body, html {
height:100%;
}
body {
margin:0;
}
#all {
width:100%;
height:100%;
background-color:yellow
}
#navbar {
width:100px;
height:100%;
float:left;
background-color:red
}
#nav {
width:100%;
height:500px;
background-color:orange
}
#cont {
height:100%;
background-color:cyan;
}
#head {
height:100px;
background-color:blue;
}
</style>
</head>
<body>
<div id="all" />
<div id="navbar">
<div id="nav"></div>
füllt unter navigation auf
</div>
<div id="cont">
<div id="head"></div>
füllt unterm header auf
</div>
</div>
</body>
</html>
Für den auffüllenden Bereich hast du jetzt zwar kein eigenes div, sondern benutzt einfach das was, nachdem du navigation und header eingefügt hast, vom navbar- und cont-div übrig bleibt, aber optisch ist's so dasselbe.
--
Dieser Beitrag wurde am 04.02.2011 um 18:58 von breath-of-death bearbeitet.
|
|
|
Profil || Suche
|
004
04.02.2011, 21:27
Felheart
|
Cool, das ist was ich wollte.
So hatte ich es eine weile lang und es hat auch funktioniert.
Ich hab die lösung aber wieder verworfen weil dreamweaver das
ganz komisch angezeigt hat und der "auffüllende content" mal nur eine zeile
hoch war und mal garnicht, und manachmal hat er auch aufgefüllt, je nachdem
wie das programm lustig war...
Wir haben nur die adobe suit CS2 an der schule, kanns daran liegen ?
wie auch immer, vielen dank, in chrome funktioniert aufjedenfall.
--
|
|
|
Profil || Suche
|
005
13.02.2011, 03:08
LeJean
|
Das kann daran liegen, dass du das Zeug überhaupt benutzt. Nimm doch einfach nen Editor mit Code-Completion für HTML/CSS/JS und falls du's brauchst PHP (z.B. Aptana) und vernünftigem Syntax-Highlight und schreib das Zeug mit 100%iger Kontrolle selber. So wirst du auf Dauer auch glücklicher, weil die Fehler leichter findest. Du kennst "deinen" Code dann schließlich besser.
--
|
|
|
Profil || Suche
|
.