nicht angemeldet
DIV geht über Tabelle hinaus
suitHi!
Ich bin gerade echt überfragt!
Seit neusten versuche ich mich vom Tabellenlayout zu verabschieden, und baue alles mit divs aus!
Die einzige Tabelle, die ich noch habe, ist die des Grundgerüstes, also Header, rechts und Links Navigationen, in der Mitte der Mainbereich und natürlich ein Footer!
Es ist eine php seite, in der ich dann im Mainbereich per jump die einzelnen Seiten aufrufe. Bis hierher geht alles!
Nun sollen die einzelnen Texte in Boxen, die ich soweit auch schon aufgebaut hatte, doch irgendwie verhielten sich die veschiedenen Boxen speziell in der Breite immer anders, so das ich nochmals alles neu machen wollte und nun habe ich ein Problem:
Es muß ein Abstand ja zu den Rändern und auch zu den einzelnen Boxen sein, den ich einfach mit
.box4 { width:100%; margin:2% 2%; }
mache! Jetzt ist es aber so, das , wenn ich in Dreamweaver dann die Box anklicke, und er mir diese dann anzeigt, diese über den Maintabellenbereich hinausgeht. Wenn ich mir die Seite dann per Vorschau anschaue ( Habe da der Box eine Hintergrundfarbe gegeben ), sehe ich den Abstand oben, unten und auch links, aber Rechts ist es ganz genau am Tabellenrand.
Wenn ich einem Div sage, es soll 100% breit sein, müßte er doch von dem Platz im Mainbereich ausgehen, oder?
Habe dann gedacht, das ich die breite auf 96% setze, ist prinzipiell ja logisch, da ich ja insgesamt 4% ja durch den Abstand ja schon verbrauche, aber dann sah ich bei Dreamweaver, das ich zwar dann genau rechts am Rand war, es paßte, aber ich hatte links jetzt nen riesen abstand, da es ja nur noch eine 96% breite war!
Wenn ich die Breite jedoch auf 94% runtersetze, dann paßt es!
Ich verstehe die Logik dahinter nicht! Muß ich das jetzt immer so kompliziert machen, oder habe ich Grundsetzlich einen Fehler gemacht, so das ich das jetzt so kompliziert machen muß?
-
Ich verstehe die Logik dahinter nicht! Muß ich das jetzt immer so kompliziert machen, oder habe ich Grundsetzlich einen Fehler gemacht, so das ich das jetzt so kompliziert machen muß?
Dein Problem ist, dass du zu viel des Guten definierst.
.box4{ width:auto; margin:4%; }
würde ausreichen, oder:
.box4{width:94%; margin:4% auto;}
mfg Beat
--
Selber klauen ist schöner! -
Hi!
Ich bin gerade echt überfragt!
Seit neusten versuche ich mich vom Tabellenlayout zu verabschieden, und baue alles mit divs aus!blöde idee - tabellen haben durchaus sinn, für tabellen zb ;)
Die einzige Tabelle, die ich noch habe, ist die des Grundgerüstes, also Header, rechts und Links Navigationen, in der Mitte der Mainbereich und natürlich ein Footer!
versuch das auch loszuwerden und fang "neu" an, somit umgehst du viele "folgefehler" die dir begegnen werden
Es ist eine php seite, in der ich dann im Mainbereich per jump die einzelnen Seiten aufrufe. Bis hierher geht alles!
php hat mit deinem problem nix zu tun
wenn ich in Dreamweaver dann die Box anklicke
dreamweaver ist ein fehler ;) beim bauen des grundlayouts, beim anpassen von bestehenden layouts, beim layouten von seitenkomponenten (news, artikelboxen) - eigentlich überall
Wenn ich einem Div sage, es soll 100% breit sein, müßte er doch von dem Platz im Mainbereich ausgehen, oder?
nein, 100% ist die breite des elements - dazu kommt gemäß boxmodel noch der innenabstand (padding), der rahmen (border) und der aussenabstand (margin)
angenommen die tabelle ist 1000px breit - dann ist 100% width + 2% border 104% also 1040% - was du suchst, ist "auto" für die breite
Habe dann gedacht, das ich die breite auf 96% setze, ist prinzipiell ja logisch, da ich ja insgesamt 4% ja durch den Abstand ja schon verbrauche, aber dann sah ich bei Dreamweaver, das ich zwar dann genau rechts am Rand war, es paßte, aber ich hatte links jetzt nen riesen abstand, da es ja nur noch eine 96% breite war!
sage ich bereits, dreamweaver ist ungeeignet - was der macht ist immer lustig ;)
Wenn ich die Breite jedoch auf 94% runtersetze, dann paßt es!
nein, tut es nicht, du hast dann 2% zu wenig - rechnen kannst du ja anscheinen
Ich verstehe die Logik dahinter nicht! Muß ich das jetzt immer so kompliziert machen, oder habe ich Grundsetzlich einen Fehler gemacht, so das ich das jetzt so kompliziert machen muß?
du musst nichts kompliziert machen, wirf wie gesagt den dreamweaver weg, mach das layout ohne tabellen (wo du schon mal damit anfängst) und du wirst keine probleme mehr haben
btw: valider und sauberer, lesbarer code ist auch eine feine sache die man dadurch erhält (dreamweaver produziert weitestgehend unleserliches zeug)
wenn du dann mal ein problem haben solltest, kann man schnell und problemlos helfen
-
Das ich mit Dreamweaver arbeite, macht keine unsaubere Codes, denn ich schreibe alles selber! Es vereinfacht nur manches, was die Ansicht angeht, und nur mit Editoren arbeiten will ich auch nicht und Frontpage kommt mir nicht auf den PC. Und da ich nicht nochmal Geld für ein Proggi ausgeben möchte, bleibt mir halt mein Dreamweaver. Außerdem ist es ja nicht nur so, das er mir das komisch angezeigt hatte, sondern es auch so im Browser zu sehen war!
Ich würde gerne auch auf das Grundgerüst als Tabelle verzichten und alles per DIV machen, aber das hat mir tierische Probleme bereitet, was die einzelnen höhen betrifft, und ich habe da auch schon im Internet gelesen, das es mir da nicht alleine so geht, und daher habe ich das erstmal so gelassen! Wenn ich dann das irgendwann mal ändern möchte, muß ich halt nur einmal die Index verändern und das war es dann auch schon, also lasse ich das erstmal so, bis ich etwas besser in der Materie geübt bin!
Ich habe das jetzt wirklich so versucht, wie Beat sagte, also
.box4 { width:96%; background-color:#00FF00; margin:2% 2% auto}
.box4 { width:96%; background-color:#00FF00; margin:2% 2% }
.box4 { width:96%; background-color:#00FF00; margin:2% auto }
.box4 { width:96%; background-color:#00FF00; margin:2% }
.box4 { width:auto; background-color:#00FF00; margin:2% 2% auto}
.box4 { width:auto; background-color:#00FF00; margin:2% 2% }
.box4 { width:auto; background-color:#00FF00; margin:2% auto }
.box4 { width:auto; background-color:#00FF00; margin:2% }habe ich alle ausprobiert! Also rechts und links klappt es jetzt super im IE, FireFox und Opera! Nur bei oben und unter wird nur im FireFox der Abstand angezeigt, bei den anderen beiden ist da nichts! 2 Boxen untereinader würden da jetzt sozusagen zusammenhängen, ohne Abstand! Warum das denn nun?
-
Ich würde gerne auch auf das Grundgerüst als Tabelle verzichten und alles per DIV machen, aber das hat mir tierische Probleme bereitet, was die einzelnen höhen betrifft, und ich habe da auch schon im Internet gelesen, das es mir da nicht alleine so geht, und daher habe ich das erstmal so gelassen!
soweit ich dich im ausgangsposting richtig verstanden habe, gehts bei dir um 4 bereiche: header, menu, inhalt und footer - das das jemandem tierische probleme bereitet kann ich mir fast nicht vorstellen - ein derartiges problem ist mit etwas übung in 5 minuten (!) erledigt - mit erklären und lernen hat man das in etwa einer stunde kapiert
der hauptfehler ist vermutlich, dass du noch immer mit tabellen denkst und versucht hast ein tabellenlayout mit divs nachzubauen, das ist von grundauf der falsche ansatz und führt natürlich vielerorts zur verwirrung
2 Boxen untereinader würden da jetzt sozusagen zusammenhängen, ohne Abstand! Warum das denn nun?
ohne deinen exakten code zu kennen - ohne den ist es wirklich schwierig dir zu helfen - würde ich auch "collapsing margins" tippen
-
nein, ich denke da nicht mehr in tabellen! im prinzip würde man einen "hauptdiv" nehmen, den ein hintergrundbild geben, das beide navis und den mittelbereich gleich optisch trennt und dann die DIVS für die Menüs und für den Mainbereich machen! Soweit ist das ja alles ok, habe trotzdem ein wesendliches Problem, das ich mit der Lösung nicht bereinigen kann, da sich bei mir der Mainbereich je mach Theme sehr verändert und so ... Naja, das ist hier jetzt aber auch nicht mein Problem, bei dem ich um Hilfe bitte!
Also: Im Mainbereich kommen ja Themen rein, pro Seite verschiedene Texte, in jeweils einer eigenen Box. Daher habe ich ja am Ende mehrere Boxen untereinander. Momentan will aber der Abstand oben und unten nicht funktionieren!
.box3 { width:auto; background-color:#FF0000; margin:3% 2%}
.box4 { width:auto; background-color:#00FF00; margin:3% 2%}<div class="box3">Beispieltext 1</div>
<div class="box4">Beispieltext 2</div>Die beiden Boxen hängen jetzt direkt aneinander, anstatt einen Abstand zu haben! Außer im FireFox, da ist ein Abstand zwischen!
-
Yerf!
.box3 { width:auto; background-color:#FF0000; margin:3% 2%}
.box4 { width:auto; background-color:#00FF00; margin:3% 2%}<div class="box3">Beispieltext 1</div>
<div class="box4">Beispieltext 2</div>Die beiden Boxen hängen jetzt direkt aneinander, anstatt einen Abstand zu haben! Außer im FireFox, da ist ein Abstand zwischen!
Was mich etwas wundert, da 3% von einer Zeile wohl kaum sichtbar sein dürfte... Prozentuale Werte beim Margin beziehen sich auf die Elementabmessungen. Siehe: CSS4You
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Ja, ansich kann ich da auch feste Werte nehmen, aber da ich gerade mit Hintergrundfarben arbeite ( die jetzt nur zum testen sind ) , sehe ich ja, das keine Abstand oben und unten vorhanden ist!
-
Yerf!
Ja, ansich kann ich da auch feste Werte nehmen, aber da ich gerade mit Hintergrundfarben arbeite ( die jetzt nur zum testen sind ) , sehe ich ja, das keine Abstand oben und unten vorhanden ist!
Hm, ist vieleicht nicht ganz klar geworden: keinen Abstand sehe ich als richtiges Verhalten[1] und der Firefox macht da etwas komisches. Von daher würde ich auf die Prozentwerte beim Margin verzichten.
Gruß,
Harlequin
[1] eine Zeile ist normalerweise 16px hoch. 3% davon sind 0.48px. Gerundet also 0px...
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
[latex]Mae govannen![/latex]
[1] eine Zeile ist normalerweise 16px hoch. 3% davon sind 0.48px. Gerundet also 0px...
Vielleicht versucht die Rendering-Engine, intelligent zu sein:
„Hmm, der Anwender hat explizit einen Abstand angegeben, 0.48px kann ich aber nicht darstellen, kein Rand ist aber auch nicht erwünscht, sonst hätte er direkt 0 angegeben, also nehme ich den nächsthöheren Wert...“Cü,
Kai
--
When the limos return for their final review, it's all thru'
- all they can see is the morning goo.
"There's no-one left alive - must be draw."
So the Blackcap Barons toss a coin to settle the score.
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|] -
aha .... stimmt, die höhe ist ja nicht angegeben, daher sind da % echt kaum zu sehen! Nicht daran gedacht ..... Mom ... teste es mal aus! Ja, jetzt geht es!
DANKE!
-
-
-
-
-
-