nicht angemeldet
Gunnar Bittersmann
Felix Riesterer
Felix Riesterer
Felix Riesterer
Gunnar Bittersmann
Gunnar Bittersmann
Felix Riesterer
Gunnar Bittersmann
Felix Riesterer
Hallo zusammen,
ich habe zwar schon ein wenig hier im Forum und bei Google gestöbert, aber nicht die passende Lösung gefunden. Zudem habe ich nun schon den ganzen Vormittag rumprobiert und den Fehler nicht ausmachen können.
Ich habe ein paar verschachtelte DIVs in Form von
-- Beispiel --
<div style='position:absolute;top:50px;left:50px;width:500px;height:400px;margin:0px;padding:0px;'>
<div style='height:30px;'>
Title
</div>
<div style='border:1px solid #00ff00;'>
<div style='border:1px solid #ff0000;'>
<div style='margin:1px;'>
<div style='width:100%;height:100%;'>
Content
</div>
</div>
</div>
</div>
</div>
--------
Hier eine etwas plastischere Version zur Anschauung...
http://www.oreigon.de/test/test.html
Mein Problem ist nun, dass der "Content" Bereich mit den Border+Margins im Firefox nicht die gewünschte Höhe annimmt.
Ich kann leider nicht mit feste Größen arbeiten, da das komplette Konstrukt nachher mit Scriptaculous seine Abmaßen ändern soll.
Im IE macht er zwar den Content Bereich so groß wie den Hauptcontainer, aber das wäre mir auch recht, wenn denn der Firefox das auch so darstellen würde.
Kann mir jemand weiter helfen?
LG Sandra
@@Sandra:
Kann mir jemand weiter helfen?
Eine Suche im Archiv nach "+height +100% +Vorfahr" ganz gewiss.
Live long and prosper,
Gunnar
Hmm, nun diese Problem mit dem Vorfahr(en) habe ich ja schon gesehen. Nur wenn ich in jedem Element wieder die Höhe auf 100% setzen bekomme ich Probleme mit dem Box Modell. Meine ineinander verschachtelten Rahmen sind dann nicht mehr so schön wie jetzt.
Wie muss ich denn vorgehen, damit die Abstände so bleiben wie sie im Explorer dargestellt werden?
So wie ich das sehe, bedeutet 100% eines inneren Elements, nämlich nicht abzüglich margin+padding+border des äußeren Elements.
*seufz* Das ist echt zum verzweifeln. :-/
Liebe Sandra,
Wie muss ich denn vorgehen, damit die Abstände so bleiben wie sie im Explorer dargestellt werden?
BÖSER FEHLER!!! Du scheinst den Explorer als Testbrowser für Deine erstellten Seiten zu benutzen. Merke: Der IE macht vieles falsch, auch in seiner neuesten Version 7! Benutze als Testbrowser den Firefox oder Opera. Repariere dann Darstellungsfehler im IE mittels zusätzlicher CSS-Dateien, die Du über conditional comments einbindest.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
So, nun habe ich wie von euch vorgeschlagen in die Eltern-Tags die entsprechende Höhe übergeben. Das sieht zwar nun in beiden Browsern gleich aus, aber die Container verschieben sich in der Höhe. Die Breite allerdings geht. Hmm..
Ich habe doch per Doctype schon dafür gesorgt, dass der IE das BoxModel richtig anzeigt, oder habe ich was falsch verstanden?
Schaut es euch an..
http://www.oreigon.de/test/test.html
Ehrlich gesagt, war ich auch heut Morgen schon so weit, aber dadurch das es unten übersteht, habe ich den Entwurd schon mehrfach über den Haufen geworfen, und es sogar schon mit Tabellen versucht. *zugeb*
Liebe Sandra,
Schaut es euch an..
da sehe ich etwas, das wie ein Windows-Fenster aussieht. Dazu bedarf es eigentlich nicht dieser <div>-Suppe. Gegenbeweis
Liebe Grüße aus Ellwangen,
Felix Riesterer.
Wenn ich dir jetzt sage, dass ich gerade sowas ähnliches mache. Aber nicht mit IFrames arbeite sondern mit Ajax die sich in einem viel viel größeren Projekt befinden dann hilft mir das bei meinem Pixel-Problem auch nicht weiter. :(
Ich habe gesehen du benutzt <span> Elemente, und davon auch ein paar mehr. Doch Aufgrund von einem anderen Problem (ich will das ganze Theme abhängig machen winxp/vista/macos usw.) ist es besser, wenn ich jeden Knopf individuell beweglich machen kann. Das ganze ist dynamisch in den Größe usw. Aus diesem Grunde kann ich auch kein allgemeines CSS File nehmen. Denn die Themes werden per XML-File konfigurierbar eingelesen. Alles n bisl komplexer, als ich es hier aufführen wollte. :)
Egal egal.. mir ging es einzig und allein um die Pixel. :)
Magst du mir trotzdem dort weiter helfen?
Am besten an meiner <div> Suppe. *zwinker*
lg
Sandra
Liebe Sandra,
Wenn ich dir jetzt sage, dass ich gerade sowas ähnliches mache. Aber nicht mit IFrames arbeite sondern mit Ajax die sich in einem viel viel größeren Projekt befinden
"die" = was genau? Ob da jetzt ein Iframe sitzt, oder nur weiterer HTML-Code ist doch völlig egal, das Prinzip und die Problemstellung bleiben dieselben.
Ich habe gesehen du benutzt <span> Elemente, und davon auch ein paar mehr.
Klar! Die sind ja auch Inline-Elemente und von daher semantisch noch umproblematischer. Außerdem werden sie dynamisch erstellt, sodass sie von der Zugänglichkeit kein Problem darstellen. Da es keine verschachtelten <div>s sind, können die Kinder auch keine Eigenschaften vom Eltern-<div> erben. Das macht manches dadurch einfacher.
Doch Aufgrund von einem anderen Problem (ich will das ganze Theme abhängig machen winxp/vista/macos usw.) ist es besser, wenn ich jeden Knopf individuell beweglich machen kann.
Du kannst doch je nach Theme ein anderes Stylesheet benutzen... Jeweils eines für das jeweilige Theme. Die "Beweglichkeit" oder was auch immer an Interaktion mittels JavaScript dann geschieht, ist davon zunächst unabhängig. Und damit sieht das alles dann doch wieder so aus, als ob Du externe CSS-Dateien benutzen solltest. ;-)
Das ganze ist dynamisch in den Größe usw. Aus diesem Grunde kann ich auch kein allgemeines CSS File nehmen. Denn die Themes werden per XML-File konfigurierbar eingelesen. Alles n bisl komplexer, als ich es hier aufführen wollte. :)
Wie schon geschrieben: Das Prinzip bleibt dasselbe. Und ein allgemeines CSS-File, das für einfach alles zuständig sein soll, ist eh unsinnig. Erstelle für jedes Theme ein eigenes CSS-File, das die Optik eines Fensterimitats steuert. Je nach verlangtem Theme wird dann diese CSS-Datei in das Dokument eingebunden. Wo ist das Problem?
Egal egal.. mir ging es einzig und allein um die Pixel. :)
Du meinst um den IE und seine fehlerhafte Umsetzung des Box-Modells?
Magst du mir trotzdem dort weiter helfen?
Am besten an meiner <div> Suppe. *zwinker*
Nö, an die <div>-Suppe gehe ich nicht dran. Die darfst Du selbst auslöffeln. Und wie man dem IE mittels conditional comments zusätzliche CSS-Dateien unterjubelt, die seine Marotten dann korrigieren, findest Du zuhauf im Archiv.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
Magst du mir trotzdem dort weiter helfen?
Am besten an meiner <div> Suppe. *zwinker*
Aber nur weil mir gerade etwas langweilig war und ich 10 min Zeit hatte ;)Was Du mit Deier "Divsuppe" vor hattes war mirnicht klar, gerade die ganzen DIV die nur ein Rahmen zeichnen waren mir sehr unklar!
Ich habe mir Deinen Quelltext auf (für mich!!!) das nötigste gekürzt. Und das kommt dabei raus. Wieweit du das verwenden kannst, weiss ich nicht (weil ich halt nicht verstanden habe was Deine DIV so anstellen sollten?)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
<!--
body{
background-color:#ffffff;
}
.rahmen{
position:absolute;
top:50px;
left:50px;
width:500px;
height:30px;
margin:0px;
padding:0px;
border-top:1px solid #f00;
border-left:1px solid #f00;
border-right:1px solid #f00;
background-color:#00f;
color:#fff;
}
.box{
position:absolute;
top:80px;
left:50px;
width:500px;
height:400px;
margin:0px;
padding:0px;
border:1px solid red;
}
.content{
border:1px solid #00f;
height:99.5%;
background-color:#555;
overflow-x:scroll;
overflow-y:scroll;
}
-->
</style>
</head>
<body>
<div class="rahmen">Title</div>
<div class="box">
<div class="content">Content</div>
</div>
</body>
</html>
Gruß
mati
Hallo,
Schaut es euch an..
da sehe ich etwas, das wie ein Windows-Fenster aussieht.
das hätte dir auch schon beim ersten Beispiel auffallen können^^
Dazu bedarf es eigentlich nicht dieser <div>-Suppe. Gegenbeweis
Nunja, man muss nicht immer JavaScript benutzen nur weil man es kann.
Ich würde nicht die, aber auch eine "div-Suppe" bevorzugen ;)
Naja kommt vielleicht auch auf den Einsatz an, aber wenn es nur grafischen Zwecken dient, dann lieber mit ein paar Divs.
Grüße, Matze
Hallo,
Wie muss ich denn vorgehen, damit die Abstände so bleiben wie sie im Explorer dargestellt werden?
du weißt aber, dass der IE das Box-Modell falsch darstellt?
Schreib die Seite also erstmal für Firefox und pass den Code anschließend so an, dass es im IE gleich aussieht. Nicht andersrum.
Grüße, Matze
So wie ich das sehe, bedeutet 100% eines inneren Elements, nämlich nicht abzüglich margin+padding+border des äußeren Elements.
Tut es aber.
Grüße, Matze
Hallo Sandra,
Gunnar hatte dir bereits einen Hinweis auf das Archiv gegeben.
Ergänzend will ich noch erklären warum.
<div style='width:100%;height:100%;'>
Content
</div>
Bei height -> 100% wovon? Den umschließenden Divs fehlen die Höhenangaben.
Die Angabe width:100% kannst du dir sparen weil ein Div ein Blockelement ist und sowieso die ganze Breite einnimmt solange du nichts anderes sagst.
Grüße, Matze
@@Matze:
Bei height -> 100% wovon? Den umschließenden Divs fehlen die Höhenangaben.
Und deren umschließenden Boxen ... bis zu der des Wurzelelements.
Live long and prosper,
Gunnar
Hallo Sandra,
Was Gunnar und Matze Dir sagen wollen ist dieses
<!-- Content Layout -->
<div style="border:1px solid #00ff00;height:100%;">
<div style="border:1px solid #ff0000;height:100%;">
<div style="margin:1px;height:100%;">
<div class="maintext_12b"
style="height:100%;background-color:#555555;
overflow-x:scroll;overflow-y:scroll;">
Content
</div>
</div>
</div>
</div>
die Erklärungen warum das so ist haben die beiden Dir schon gegeben.
gruß
mati
@@mati:
Was Gunnar und Matze Dir sagen wollen ist dieses
Mitnichten. Unterstelle mir bitte niemals solch unübersichtlichen Code. Unterstelle mir bitte niemals die Verwendung von 'style'-Attributen.
Außerdem bist du den Baum nicht weit genug raufgeklettert. Oder runter. [http://forum.de.selfhtml.org/archiv/2008/1/t164464/#m1075148]
Live long and prosper,
Gunnar
Hallo Gunnar,
@@mati:
Was Gunnar und Matze Dir sagen wollen ist dieses
Mitnichten. Unterstelle mir bitte niemals solch unübersichtlichen Code. Unterstelle mir bitte niemals die Verwendung von 'style'-Attributen.
Danke, ich wollte mich auch gerade beschweren :)
Bis auf wenige Ausnahmen ist es absolut unklug die Style-Angaben direkt in das Tag zu schreiben.
Hm... "das" Tag? "der" Tag? *grübel
Grüße, Matze
@@ Euch beide
Danke, ich wollte mich auch gerade beschweren :)
Bis auf wenige Ausnahmen ist es absolut unklug die Style-Angaben direkt in das Tag zu schreiben.
Hm... "das" Tag? "der" Tag? *grübelGrüße, Matze
Jaja, ich habe es ja verstanden und werde es auch nieeee wieder tun ;)
Gruß
mati
Mitnichten. Unterstelle mir bitte niemals solch unübersichtlichen Code. Unterstelle mir bitte niemals die Verwendung von 'style'-Attributen.
Was ist denn so verkehrt an style Attributen? So habe ich alles auf einen Blick und muss nicht in 2 Dateien schauen.
Wenn ich die Styles auslagere habe ich zich Class Einträge die es auch erstmal zu verwalten gilt. Finde ich.
Liebe Sandra,
Wenn ich die Styles auslagere habe ich zich Class Einträge die es auch erstmal zu verwalten gilt. Finde ich.
wenn Du zum ersten Mal eine Website mit allen ihren Unterseiten vom Layout (allgemeiner formuliert: von ihrer Darstellung) her umgestalten willst, dann wirst Du sehr schnell erkennen, dass Du mit einer zentralen Steuerung wesentlich besser fährst, als wenn Du jede einzelne Unterseite im Quelltext anpassen musst.
Aber anscheinend erstellst Du ein einziges HTML-Dokument, das nur Links zu externen Seiten enthalten wird, sodass Du Dein Layout überhaupt nicht mehrmals in einem HTML-Dokument anwenden musst...
Bedenke: Im Endeffekt ist es uns allen so ziemlich egal, was Du mit Deiner Seite machst, wir sagen/schreiben hier nur unsere Ansichten und Meinungen dazu, wie es im jeweiligen Falle wohl am besten gemacht werden sollte. Du darfst natürlich darauf pfeifen!
Liebe Grüße aus Ellwangen,
Felix Riesterer.
Hallo Felix,
Bedenke: Im Endeffekt ist es uns allen so ziemlich egal, was Du mit Deiner Seite machst, wir sagen/schreiben hier nur unsere Ansichten und Meinungen dazu, wie es im jeweiligen Falle wohl am besten gemacht werden sollte. Du darfst natürlich darauf pfeifen!
Ich bin ja auch immer für Verbesserungen offen, nur manchmal verschliesst sich mir wohl der Grund. Vielleicht werde ich ja deinen/euren Vorschlag ja aufnehmen, aber erstmal möchte ich es in der "Konzeptionsphase" vernünftig dargestellt bekommen.
:)
Liebe Grüße aus Oldenburg,
Sandra
Hallo,
Was ist denn so verkehrt an style Attributen? So habe ich alles auf einen Blick und muss nicht in 2 Dateien schauen.
Wenn ich die Styles auslagere habe ich zich Class Einträge die es auch erstmal zu verwalten gilt. Finde ich.
findest du _noch_.
Es ist nichts verkehrt an style-Attributen wenn sie sinnvoll eingesetzt werden.
Zitat: "Sinnvoll ist diese Möglichkeit, wenn Sie entweder sonst auf CSS verzichten und es nur mal für ein paar Ausnahmen benötigen, oder wenn Sie Seite zentrale Formate verwenden, einzelne Elemente aber anders als mit den dort definierten Formatdefinitionen gestalten möchten."
Alternativ könntest du die Style-Angaben auch in den Head-Bereich verpflanzen und erst wenn dein Layout fertig ist auslagern. So halte ich es in der Regel. Da hab ich zu Beginn auch alles auf einer Seite und trotzdem klar getrennt.
Grüße, Matze
Was ist denn so verkehrt an style Attributen? So habe ich alles auf einen Blick und muss nicht in 2 Dateien schauen.
Wenn ich die Styles auslagere habe ich zich Class Einträge die es auch erstmal zu verwalten gilt. Finde ich.
Garnichts! Es ist nur sehr unübersichtlich.
Die meisten legen die Styleangaben im <head> Bereich ab, oder lagern sie aus in eine externe .css
Dein Problem mit der höhe lag in den fehlenden Angaben in den Eltern DIV. Die Art und weise wie Du die SyleAngaben schreibst ist eigendlcih ein anderes Thema.
Lies es Dir aber ruhig mal duch was die Anderen so schreiben, die Diskution darüber ist natürlcih nicht neu aber schon interessant.
Gruß
mati
Mahlzeit,
Was ist denn so verkehrt an style Attributen? So habe ich alles auf einen Blick und muss nicht in 2 Dateien schauen.
Und wenn Du nun das Layout von bestimmten Elementen, die alle ein relativ umfangreiches style-Attribut tragen, grundsätzlich ändern willst? Dann bastelst Du an allen herum und wirst Copy'n'Paste-Meisterin? Und wenn Du diese Änderungen dann noch durch x Dokumente ziehen musst?
Wenn ich die Styles auslagere habe ich zich Class Einträge die es auch erstmal zu verwalten gilt. Finde ich.
Sicher. Aber dafür hast Du pro "designtem" Element nur genau EINE Stelle, wo Du dessen Aussehen bestimmen kannst und ändern musst. Auf Dauer und insbesondere für umfangreichere Projekte erheblich einfacher.
MfG,
EKKi
Hi Gunnar,
Mitnichten. Unterstelle mir bitte niemals solch unübersichtlichen Code. Unterstelle mir bitte niemals die Verwendung von 'style'-Attributen.
Bleib locker, ich habe dir nichts unterstellt. Mir ging es nur um die height Angaben in den "Eltern Divs", der Code war für mich erstmal irrelevant. Denn er funktioniert.
Wenn man den IMG noch ein ALT Atribut und noch eine <meta http-equiv="Content-Style-Type" content="text/css"> mit einfügt (ok, und bei der .....content="text/html;charset=utf-8" noch das ";" am Ende entfernt) ist das sogar valides HTML 4.01 strict ! ;)
Nimm es nicht persönlich :)
grüße
mati
@@Sandra:
<div style='position:absolute;top:50px;left:50px;width:500px;height:400px;margin:0px;padding:0px;'>
<div style='height:30px;'>
Title
</div>
<div style='border:1px solid #00ff00;'>
<div style='border:1px solid #ff0000;'>
<div style='margin:1px;'>
<div style='width:100%;height:100%;'>
Content
</div>
</div>
</div>
</div>
</div>
Vermeide Divitis! Wozu die vielen 'div'?
Vermeide 'style'-Attribute! Solch ein Code-Wust ist völlig unübersichtlich. Notiere ALLE CSS-Angaben im Styesheet (externe CSS_Datei bzw. 'style'-Element)!
Live long and prosper,
Gunnar
Liebe Sandra,
Du leidest offensichtlich an Divitis, denn Du produzierst eine relativ sinnfreie DIV-Suppe:
<div style='position:absolute;top:50px;left:50px;width:500px;height:400px;margin:0px;padding:0px;'>
<div style='height:30px;'>
Title
</div>
<div style='border:1px solid #00ff00;'>
<div style='border:1px solid #ff0000;'>
<div style='margin:1px;'>
<div style='width:100%;height:100%;'>
Content
</div>
</div>
</div>
</div>
</div>
Ich bin mir sehr sicher, dass Du auf mindestens die Hälfte der hier aufgeführten <div>s verzichten könntest, was den Code Deiner Seite wesentlich semantischer machen würde. Beispiel:
<div style='height:30px;'>
Title
</div>
Wie wäre es stattdessen mit diesem Code? <h1>Title</h1>
Und wozu ist dieses monströse Ding hier gut?
<div style='border:1px solid #00ff00;'>
<div style='border:1px solid #ff0000;'>
<div style='margin:1px;'>
<div style='width:100%;height:100%;'>
Content
</div>
</div>
</div>
</div>
Nach dem, was ich aus den Style-Angaben erkennen kann, willst Du einen Rahmen mit zweierlei Farben haben... Da könnte ich mir die Verwendung eines passenden Hintergrundbildes vorstellen, das dieselbe Aufgabe erledigt - prompt drei <div>s gespart! Es reicht ja dann ein einziges <div>: <div id="content">Content</div>
Näheres zu sinnvollen HTML-Gerüsten für CSS-basierte Layouts findest Du im <http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm@title=Quelltext zu diesem Beispiel> aus ebendiesem Artikel.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
