Autor |
Nachricht |
remote
Threadersteller
Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 110
Geschlecht:
|
Verfasst Fr 10.12.2010 23:22
Titel [CSS] Knoten im Hirn, Layoutaufbau |
|
|
Irgendwie steh ich gerade auf dem Schlauch.
Ich will das Layout analog um untenstehenden Bild anordnen. Die Zahlen entsprechen der Abfolge der DIV-Container im DOM die ich nicht beeinflussen kann. #3 und #4 liegen dazu noch in einem eigenen Wrapper - auch dies kann ich nicht ändern.
Mir mag nicht so recht einfallen, wie ich hier zu einer Lösung kommen soll. Die einfache Variante mittels float dürfte ja wegen dem 3+4 wrapper ausscheiden.
Falls jemand eine Lösung/Idee hat, gibts ein Bier auf meine Rechnung
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Fr 10.12.2010 23:31
Titel
|
|
|
wie sind denn die rahmenparameter? browserkompatibilität, fixe maße vs. relative und so?
und: ist um das ganze noch ein div oder nur der body?
Zuletzt bearbeitet von sahnemuh am Fr 10.12.2010 23:33, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
buddha-brot
Dabei seit: 24.01.2006
Ort: Süd/Süd-West
Alter: -
Geschlecht:
|
Verfasst Fr 10.12.2010 23:35
Titel
|
|
|
Wenn du Div2 per position:absolute aus dem Fluß rauslöst rutscht der Wrapper doch nach oben nach.
Den Rest löst du mit float und margin.
Zuletzt bearbeitet von buddha-brot am Fr 10.12.2010 23:35, insgesamt 1-mal bearbeitet
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Fr 10.12.2010 23:36
Titel
|
|
|
dann kann div#2 aber immer nur die selbe höhe haben. ansonsten rutscht #4 drunter (außer man hilft per js nach).
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Fr 10.12.2010 23:39
Titel
|
|
|
Es geht auch rein per Float (d.h. ohne pos. abs.) und auch mit komplett variablen Höhen, denn solange der 3/4-Wrapper nicht cleart, beginnt er eh genau auf derselben Höhe wie div 2, und das hat den gleichen Effekt, als wäre dieser Wrapper gar nicht da.
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
padding: 30px;
font-family: sans-serif;
}
#n1,
#n3,
#n4 {
width: 300px;
background: red;
padding: 40px 0;
}
#n1 {
float: right;
margin-bottom: 20px;
}
#n3 {
float: left;
}
#n4 {
clear: right;
float: right;
}
</style>
</head>
<body>
<div id="n1">1. Text</div>
<div id="n2">
<div id="n3">2. Text</div>
<div id="n4">3. Text</div>
</div>
</body>
</html> |
Zuletzt bearbeitet von heiko_rs am Fr 10.12.2010 23:41, insgesamt 1-mal bearbeitet
|
|
|
|
|
remote
Threadersteller
Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 110
Geschlecht:
|
Verfasst Fr 10.12.2010 23:41
Titel
|
|
|
#1 und #2 haben feste heights... also kann ich #2 aus dem fluss lösen und #4 ein padding-top geben.
eigentlich nichts wildes... wie gesagt - stand wohl aufm schlauch. vielen dank.
|
|
|
|
|
buddha-brot
Dabei seit: 24.01.2006
Ort: Süd/Süd-West
Alter: -
Geschlecht:
|
Verfasst Fr 10.12.2010 23:41
Titel
|
|
|
sahnemuh hat geschrieben: | dann kann div#2 aber immer nur die selbe höhe haben. ansonsten rutscht #4 drunter (außer man hilft per js nach). |
Damn. Ich sollte im Print-Forum bleiben
remote hat geschrieben: |
#1 und #2 haben feste heights... also kann ich #2 aus dem fluss lösen und #4 ein padding-top geben.
eigentlich nichts wildes... wie gesagt - stand wohl aufm schlauch. vielen dank. |
Yeah, mein Halbwissen-Tip war doch brauchbar
Zuletzt bearbeitet von buddha-brot am Fr 10.12.2010 23:42, insgesamt 2-mal bearbeitet
|
|
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Fr 10.12.2010 23:42
Titel
|
|
|
öh. viel zu einfach. mach mal was schwereres hier :/
edit: habe ich erwähnt, dass ich das MGI inzwischen statt sudoku spiele?
Zuletzt bearbeitet von sahnemuh am Fr 10.12.2010 23:49, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
problem bei layoutaufbau
[xml] knoten vs attribute
Problem mit DOM Knoten in Javascript
knoten aniimieren mit flash
Corel Draw - Linien rechtwinklig zum Knoten
XML transformation Knoten ersetzen statt dunplizieren
|
|