nicht angemeldet
layout + div
StruppiNabend,
ok ich höre immer wieder divs wären ja so toll...
und tabellen sollte man ja garnicht mehr fürs layout nehmen...
hab en bissel rumgebastelt, rumgesucht aber nunja jetzt brauch ich auch mal hilfe ;)
HTML code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="header">
test<br />
</div>
<div class="test">
<div class="nav">
test3<br />
</div>
test2<br />
</div>
</body>
</html>
CSS:
body, div {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
div.header{
position:relative;
top: 0px;
left: 0px;
height: 150px;
width: 100%;
background-color: green;
float: left;
z-index: 10;
}
div.nav{
position:relative;
top: 0px;
left: 0px;
height: 100%;
width: 150px;
background-color: red;
z-index:5;
}
div.test{
position:relative;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: #3366ff;
z-index:1;
}
wahrscheinlich viel unnötiges bzw flasches aber schau euch des bitte mal an und helft mir das des so aussieht wies sein soll xD
test2 steht zumindest bei mir unter dem div... sollte aber in den... dann wärs richtig toll und ich würde die divs wahrscheinlich nehmen aber nunja hab schon gelesen das so etwas angeblich nicht möglich ist (soll auch so bleiben das es 100% variable breiten und höhen hat)...
achso noch was wenns nicht so einfach geht, kein JAVA oder sonstige scriptsprachen, die seite soll von jederman/jederfrau ohne zusätlicher software (java) angesehen werden können... (ok später kommt noch php dazu aber naja...)
und joa bin en css noob, vllt hätte des besser in des thema gepasst aber hm... von beiden etwas...
und ja ich merk schon ich schreibe zu viel...
Mit freundlichen Grüßen Sascha
-
Moin,
du mußt die nebeneinander liegenden Container absolut positionieren und den genauen Startpunkt festlegen. Die Innenabstände habe ich mal rausgenommen, die bewirken hier eh nichts. Ansonsten habe ich mir das Ganze nicht so genau angeschaut aber ich denke Du wirst noch viel Spaß beim basteln haben.
So funktioniert auf jedenfall das was Du haben wolltest:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="header">
test<br />
</div>
b<div class="nav">
test2<br />
</div><div class="test">
test3<br />
</div>
</body>
</html>body, div {
margin: 0px 0px 0px 0px;
}
div.header{
position:relative;
top: 0px;
left: 0px;
height: 150px;
width: 100%;
background-color: green;
float: left;
z-index: 10;
}
div.nav{
position:absolute;
top: 150px;
left: 0px;
height: 100%;
width: 150px;
background-color: red;
z-index:5;
}
div.test{
position:absolute;
top: 150px;
left: 150px;
height: 100%;
width: 100%;
background-color: #3366ff;
z-index:1;
}Viele Grüße,
Stefan-
moin^^ naja bissel spät oder? XD
naja in dem beispiel muss man aber dann auch wieder scrollen was ich ja eigentlich nicht wollte... wollt in den "test" div en iframe reinsetzen... (auch wenn das nicht mit allen browser kompatible is) aber naja trozdem danke... ich bleib wohl doch bei tabellen XD
Gruß Sascha
-
moin^^ naja bissel spät oder? XD
naja in dem beispiel muss man aber dann auch wieder scrollen was ich ja eigentlich nicht wollte... wollt in den "test" div en iframe reinsetzen... (auch wenn das nicht mit allen browser kompatible is) aber naja trozdem danke... ich bleib wohl doch bei tabellen XD
Gruß Sascha
Naja wenn du irgendwo 150px festlegst und das nächste div plötzlich 100% hat wird halt das fenster vergrößert, irgendwo muß der Platz ja bleiben. Du könntest das scrollen im body mit overflow:hidden unterbinden.
Wenn Du aber mit Tabellen besser zurecht kommst dann nimm sie doch einfach, die 3 Zellen blähen den Code auch nicht mehr auf als divs und diese endlose "Das ist nicht dafür gedacht auch wenns überall funktioniert"-Diskussion hängt mir eh zum Hals raus.Die Römer haben früher auch Butter ausschließlich als Wagenschmiere benutzt... ^^
-
joa wie gesagt trozdem danke ;)
najoa morgen nochmal drüber nachdenken wie man des sonst machen könnte ;)
Also schönen gruß gn8 und so weiter bis zum nächsten ma
euer Sascha -
Wenn Du aber mit Tabellen besser zurecht kommst dann nimm sie doch einfach, die 3 Zellen blähen den Code auch nicht mehr auf als divs und diese endlose "Das ist nicht dafür gedacht auch wenns überall funktioniert"-Diskussion hängt mir eh zum Hals raus.
Ich wüßte auch nicht was es da zu diskutieren gibt. Es gibt kaum Argumente für Tabellen als Layoutmittel, es sei denn du musst unbedingt die Browser der 4'er Generation unterstützen.
Die Römer haben früher auch Butter ausschließlich als Wagenschmiere benutzt... ^^
Gutes Argument - nur falls du es nicht weißt, es gibt heutzutage diverse Schmierfette, die dafür viel beser geeignet sind.
Struppi.
-
Wenn Du aber mit Tabellen besser zurecht kommst dann nimm sie doch einfach, die 3 Zellen blähen den Code auch nicht mehr auf als divs und diese endlose "Das ist nicht dafür gedacht auch wenns überall funktioniert"-Diskussion hängt mir eh zum Hals raus.
Ich wüßte auch nicht was es da zu diskutieren gibt. Es gibt kaum Argumente für Tabellen als Layoutmittel, es sei denn du musst unbedingt die Browser der 4'er Generation unterstützen.
Die Römer haben früher auch Butter ausschließlich als Wagenschmiere benutzt... ^^
Gutes Argument - nur falls du es nicht weißt, es gibt heutzutage diverse Schmierfette, die dafür viel beser geeignet sind.
Struppi.
Es gibt wohl ein Argument: WYSIWYG und Anfänger, warum soll jemand nicht den simplen Weg gehen dürfen obwohl dieser funktioniert. Solange es richtig interpretiert wird ist es doch wohl jedem selbst überlassen.
Ich baue lieber mit div als mit table aber muß zugeben das man dabei auch gerne mal verzweifeln kann.-
Moin Stefan,
WYSIWYG und Anfänger, warum soll jemand nicht den simplen Weg gehen dürfen obwohl dieser funktioniert.
ich sehe deine Aussage, wie schon die Aussage mit der Absoluten Positionierung der Divs, als falsch an.
In WYSIWYG ist es durchaus sinnvoll mit DIVs oder ähnlichen frei positionierbaren Elementen zu arbeiten.
Warum sollte es erst, nicht unbedingt falsch, aber unpraktisch gelernt werden und nachher mühseelig umgestellt werden, wenn man es gleich von Anfang an richtig lernen könnte?
Die Vorteile werden dir sicher auch klar, wenn du mit Templatesystemen und Dynamischen Sites arbeiten musst. Dann tauchen ganz plötzlich erhebliche Probleme mit Tabledesigns auf, die dich letztendlich mehr Arbeit kosten, als wenn du gleich von Anfang an die bessere und praktikablere Struktur gewählt hättest. Auch wenn diese auf den ersten Blick mehr Zeit in Anspruch nimmt.
Man sollte nicht immer den Weg des geringsten Widerstandes gehen.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
-
-
-
-
-
Hi Sascha,
HTML code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="header">
test<br />
</div>
<div class="test">
<div class="nav">
test3<br />
</div>
test2<br />
</div>
</body>
</html>test2 steht zumindest bei mir unter dem div... sollte aber in den... dann wärs richtig toll und ich würde die divs wahrscheinlich nehmen aber nunja hab schon gelesen das so etwas angeblich nicht möglich ist
Wo soll test 2 stehen, wo liegt denn das Problem?
<div class="header">
test<br />
</div><div class="test">
<div class="nav">
test3<br />test2<br />
</div> </div>So wäre test 2 in class="nav", willst du das erreichen?
und ja ich merk schon ich schreibe zu viel...
Viel schreiben ist kein Problem, eine Problembeschreibung auf den Punkt bringen manchmal schon.
Grüße,
Engin
GYRO-
test2 steht zumindest bei mir unter dem div... sollte aber in den... dann wärs richtig toll und ich würde die divs wahrscheinlich nehmen aber nunja hab schon gelesen das so etwas angeblich nicht möglich ist
Wo soll test 2 stehen, wo liegt denn das Problem?
bei mir steht des unter beiden divs (nur mit FF getestet) und es sollte in dem div.test^^
-
-
Moin
Guter Tip von mir. Fang ja nicht an, wie von Stefan verlangt, alles absolut zu positionieren. Das ist der Falsche Weg, denn die Seite wird dadurch undynamisch, da alle Elemente aus dem Fluß genommen werden!!!
Gib deinem Container div.nav einfach ein float:left im CSS. Und du wirst dein gewünschtes Ergebnis sehen!
100% Breite, ist etwas kompliziert. 100% Höhe dagegen, lässt sich eigentlich ganz gut verwenden.
Bleibe auf diesem Weg, Tables durch andere Elemente zu ersetzen. Da bin ich auch schon beim Thema. Auch DIVs sind nicht das Allheilmittel. HTML kennt viele Elemente, die auch getrost zum Einsatz gebracht werden können.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Gib deinem Container div.nav einfach ein float:left im CSS. Und du wirst dein gewünschtes Ergebnis sehen!
nein im ie isses dann so lang das man scrollen muss und im FF wird die nav leiste dardurch zu lang... und dabei ise dann noch länger als die div.test
Bleibe auf diesem Weg, Tables durch andere Elemente zu ersetzen. Da bin ich auch schon beim Thema. Auch DIVs sind nicht das Allheilmittel. HTML kennt viele Elemente, die auch getrost zum Einsatz gebracht werden können.
nene allheilmittel sowieso nich XD is nie etwas!
aber ich bastel zur zeit fast nur noch an einer hp und hab darduch vermehrt mitbekommen das man tabellen nimmer verwenden soll sondern divs...MFG Sascha
-
-
wahrscheinlich viel unnötiges bzw flasches aber schau euch des bitte mal an und helft mir das des so aussieht wies sein soll xD
test2 steht zumindest bei mir unter dem div... sollte aber in den... dann wärs richtig toll und ich würde die divs wahrscheinlich nehmen aber nunja hab schon gelesen das so etwas angeblich nicht möglich ist (soll auch so bleiben das es 100% variable breiten und höhen hat)...Das klingt konfus, ohne das man wirklich weiß was du willst.
Mit ein bisschen Phantasie läßt sich vermuten, dass du ein mehrspaltiges Layout willst. Die Beispiele in selfhtml helfen dir nicht weiter?
Struppi.
-
Zumindest nicht das was ich gefunden hatte^^
Aber naja ich suche un probiere weiter...-
Zumindest nicht das was ich gefunden hatte^^
Dein Ansatz hat ähnlichkeiten mit diesem
Aber naja ich suche un probiere weiter...
Ich würde ganz von vorne Anfangen, so wie du es bisher probiert hast machst du es dir sehr kompliziert. Den im Prinzip ist das was du willst sehr einfach.
Struppi.
-
Zumindest nicht das was ich gefunden hatte^^
Dein Ansatz hat ähnlichkeiten mit diesem
naja ähnlichkeit... wenn des fixe größen ist das ja auch nich so das problem... das problem sind die 100% + header div... die dann zusammen halt einen bereich ergeben der nimmer in des fenster passt und somit man scrollen muss was ich aber eigentlich nich unbedingt möchte...
also so sehe ich des kann sein das ich mich täusche...Vielen Dank Sascha
-
Zumindest nicht das was ich gefunden hatte^^
Dein Ansatz hat ähnlichkeiten mit diesem
naja ähnlichkeit... wenn des fixe größen ist das ja auch nich so das problem... das problem sind die 100% + header div... die dann zusammen halt einen bereich ergeben der nimmer in des fenster passt und somit man scrollen muss was ich aber eigentlich nich unbedingt möchte...
also so sehe ich des kann sein das ich mich täusche...Dann stimmt irgendwas mit deinem Code nicht. Bei mir sieht dein Code so aus.
Aber selbst die Höhe wäre kein Problem ohne positionierte Elemente. Du meinst vermutlich in etwa so was:
http://javascript.jstruebig.de/selfhtml/layout + div.htmlStruppi.
-
Dann stimmt irgendwas mit deinem Code nicht. Bei mir sieht dein Code so aus.
sowas hatte ich beim ausprobieren auch schonmal aber naja nicht der gepostete quellcode...
Aber selbst die Höhe wäre kein Problem ohne positionierte Elemente. Du meinst vermutlich in etwa so was:
http://javascript.jstruebig.de/selfhtml/layout + div.htmlja genau^^ aber dazu habe ich noch ne frage... werds morgen mal ausprobieren aber wenn man jetzt in den "text berreich" en frame einbauen würde mit 100% höhe... wäre der jetzt nicht in den overflow bereich? also wie gesagt probier ich morgen... aber des fällt mir gerade so ein...
Vielen lieben dank und gruß
Sascha
-
-
-
-
-
