nicht angemeldet
Zweispaltiges Layout
StruppiHallo,
in dem Beispiel "Zweispaltiges Layout" in Selfhtml werden die beiden Blöcke definiert durch
ul#Navigation {
float: left; width: 22em;
....
}
....
div#Inhalt {
margin-left: 22em;
.....
also durch absolute Angaben (in width und margin-left).
Kann ich den zweiten Block definieren in der Art "1em rechts vom ersten Block?
Grüsse
Toni
-
Lieber Toni,
in dem Beispiel "Zweispaltiges Layout" in Selfhtml
ich persönlich mag die Rehenfolge im Quelltext nicht. Ich bevorzuge eine andere, in der zuerst der Inhalt kommt, und danach erst alles andere (wie z.B. die Navi). Jedenfalls mache ich das eben so.
Kann ich den zweiten Block definieren in der Art "1em rechts vom ersten Block?
Wenn Du float verwendest, dann nicht. Da kannst Du nur sagen, welchen Abstand ein Element halten soll, um den erforderlichen Freiraum für das floatende Element zu schaffen. Du kannst aber mit position:relative auch einiges erreichen...
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:) -
Hallo,
in dem nachfolgenden Beispiel
flackern Bild und Text (d.h. wechseln von Bild/Text 1 zu Bild/Text 2 und zurück), wenn ich mit dem Cursor über den Text "Überschrift" fahre.
Woran liegt dies?
Zusatzfrage:
Warum ist der rechte (Text-)Block höher als der linke obwohl in beiden die gleiche height-Angabe (372px) erfolgt ist?
Grüsse
Toni<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Bildwechsel</title> <script type="text/javascript"> var txtBild1 = '<h1>Überschrift<\/h1><br>Text Bild1<b>Zeile 1<\/b><br>Text Zeile 2<br><br><b>und ...<\/b>' var txtBild2 = '<h1>Überschrift<\/h1><br>Text Bild2<b>Zeile 1<\/b><br>Text Zeile 2' function tauschen (BildNr,BildName,Text) {window.document.images[BildNr].src=BildName; document.getElementById('Text').innerHTML = Text; } </script> <style type="text/css"> img#Bild { float: left; width: 515px height: 372px; margin: 0; padding: 0; border: 1px dashed silver; } div#Text { margin-left: 515px; height: 372px; padding-left: 1em; padding-top: 80px; border: 1px dashed silver; } </style> </head> <body> <img id="Bild" src="Bild1.jpg" width="515" height="372" alt="" onmouseover="tauschen (0, 'Bild2.jpg', txtBild2)" onmouseout= "tauschen (0, 'Bild1.jpg', txtBild1)"> <div id="Text" onmouseover="tauschen (0, 'Bild2.jpg', txtBild2)" onmouseout= "tauschen (0, 'Bild1.jpg', txtBild1)"> <h1>Überschrift</h1><br>Text Bild1<b>Zeile 1</b><br>Text Zeile2<br><br><b>und ...</b> </div> </html>-
Lieber Toni,
<body>
<img id="Bild" src="Bild1.jpg" width="515" height="372" alt=""
onmouseover="tauschen (0, 'Bild2.jpg', txtBild2)"
onmouseout= "tauschen (0, 'Bild1.jpg', txtBild1)">
<div id="Text"
onmouseover="tauschen (0, 'Bild2.jpg', txtBild2)"
onmouseout= "tauschen (0, 'Bild1.jpg', txtBild1)">
<h1>Überschrift</h1><br>Text Bild1<b>Zeile 1</b><br>Text Zeile2<br><br><b>und ...</b>
</div>
</html>Dein Code ist syntaktisch grenzwertig! Wenn Du dem Browser solche Fehler unterjubelst, darfst Du Dich nicht wundern, wenn er anfängt zu raten. Dass das Ergebnis nicht Deinen Vorstellungen entspricht, verwundert dabei nicht. Zuallererst darf nach "onmouseout" kein Leerzeichen vor dem Istgleichzeichen stehen, da Leerzeichen innerhalb eines Tags als Trennzeichen zwischen den Attributen und ihren Werten verstanden werden. Vergleiche: `<a href ="#">link</a> - <a href="#">link</a>`{:.language-html} - Mit dem Syntaxhighlighting sollte sofort klar werden, dass ="#" als Attribut\_name\_ verstanden wird, anstatt der Wertzuweisung an das href-Attribut. Für Deine onmouseout-Attribute gilt oben dasselbe! Dass Du den <body> am Ende nicht ordnungsgemäß geschlossen hast, ist unsauberer Stil. Ob das bei HTML4.01 strict etwas ausmacht, weiß der Validator besser als ich. Und dass ein <img>-Element kein Kindelement von <body> sein darf (da es ein Inline-Element ist, das ein umgebendes Blockelement braucht), solltest Du auch berücksichtigen! Desweiteren solltest Du allen Ernstes semantischen Code verwenden! Liebe Grüße, Felix Riesterer. -- ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix,
Zuallererst darf nach "onmouseout" kein Leerzeichen vor dem Istgleichzeichen stehen, da Leerzeichen innerhalb eines Tags als Trennzeichen zwischen den Attributen und ihren Werten verstanden werden.
Das war in der Originalversion nicht der Fall. Habe es (leider) zur besseren Übersichtlichkeit hier im Forum geändert.
Dass Du den <body> am Ende nicht ordnungsgemäß geschlossen hast, ist unsauberer Stil. Ob das bei HTML4.01 strict etwas ausmacht, weiß der Validator besser als ich. Und dass ein <img>-Element kein Kindelement von <body> sein darf (da es ein Inline-Element ist, das ein umgebendes Blockelement braucht), solltest Du auch berücksichtigen!
Nach diesen Änderungen hat sich aber auch nichts verändert.
Gruß
Toni<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Bildwechsel</title> <script type="text/javascript"> var txtBild1 = '<h1>Überschrift<\/h1>Text Bild1 Zeile 1<br>Text Zeile 2<br><br>und ...' var txtBild2 = '<h1>Überschrift<\/h1>Text Bild2 Zeile 1<br>Text Zeile 2' function tauschen (BildNr,BildName,Text) {window.document.images[BildNr].src=BildName; document.getElementById('Text').innerHTML = Text; } </script> <style type="text/css"> img#Bild { float: left; width: 515px height: 372px; margin: 0; padding: 0; border: 1px dashed silver; } div#Text { margin-left: 515px; height: 372px; padding-left: 1em; padding-top: 80px; border: 1px dashed silver; } </style> </head> <body> <div> <img id="Bild" src="Bild1.jpg" width="515" height="372" alt="" onmouseover="tauschen (0, 'Bild2.jpg', txtBild2)" onmouseout="tauschen (0, 'Bild1.jpg', txtBild1)"> <div id="Text" onmouseover="tauschen (0, 'Bild2.jpg', txtBild2)" onmouseout="tauschen (0, 'Bild1.jpg', txtBild1)"> <h1>Überschrift</h1>Text Bild1 Zeile 1<br>Text Zeile2<br><br>und ... </div> </div> </body> </html>
-
-
Warum ist der rechte (Text-)Block höher als der linke obwohl in beiden die gleiche height-Angabe (372px) erfolgt ist?
[code lang=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">img#Bild {
float: left;
width: 515px height: 372px;Diese Zeile wird vom Browser ignoriert
margin: 0; padding: 0;
border: 1px dashed silver;
}
div#Text {
margin-left: 515px;
height: 372px;
padding-left: 1em; padding-top: 80px;
border: 1px dashed silver;
}
</style>mfg Beat
-
Hallo Beat!
Warum ist der rechte (Text-)Block höher als der linke obwohl in beiden die gleiche height-Angabe (372px) erfolgt ist?
img#Bild {
float: left;
width: 515px height: 372px;Diese Zeile wird vom Browser ignoriert
Danke, aber eine Korrektur bringt keine Änderung bei den unterschiedlichen Höhen und bei dem Flackern.
Gruß
Toni
-
-
Hallo,
in dem nachfolgenden Beispiel
flackern Bild und Text (d.h. wechseln von Bild/Text 1 zu Bild/Text 2 und zurück), wenn ich mit dem Cursor über den Text "Überschrift" fahre.Woran liegt dies?
Zusatzfrage:
Warum ist der rechte (Text-)Block höher als der linke obwohl in beiden die gleiche height-Angabe (372px) erfolgt ist?
Für mich unerklärlich: Das Flackern erfolgt nicht, wenn die Überschrift nicht in <h1>-Tags eingeschlossen ist.
Grüsse
Toni-
Warum ist der rechte (Text-)Block höher als der linke obwohl in beiden die gleiche height-Angabe (372px) erfolgt ist?
height bezeichnet die Höhe der content-box. Du hast aber noch ein padding notiert.
http://de.selfhtml.org/css/formate/box_modell.htmmfg Beat
-
Hallo,
height bezeichnet die Höhe der content-box. Du hast aber noch ein padding notiert.
http://de.selfhtml.org/css/formate/box_modell.htmDanke, habe das Ganze total falsch gesehen. Ich dachte height heißt Gesamthöhe der Box und padding den Wert, um den der Text innerhalb der Box nach unten verschoben wird.
Ich hoffe, dass mir auch noch jemand den Grund des "Flackern" erläutern kann.
Schönen Sonntag
Toni-
Hallo,
ich habe jetzt folgendes festgestellt.
Wenn ich in dem folgenden Code die h1- und b-Tags entferne, ist das Flackern weg, die br-tags stören nicht.
Woran liegt dies?
Wie kann ich den Text dann formatieren?
Gruss
Toni<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Bildwechsel</title> <script type="text/javascript"> var txtBild1 = '<h1>Überschrift<\/h1><br>Text Bild1<b>Zeile 1<\/b><br>Text Zeile 2<br><br><b>und ...<\/b>' var txtBild2 = '<h1>Überschrift<\/h1><br>Text Bild2<b>Zeile 1<\/b><br>Text Zeile 2' function tauschen (BildNr,BildName,Text) {window.document.images[BildNr].src=BildName; document.getElementById('Text').innerHTML = Text; } </script> <style type="text/css"> img#Bild { float: left; width: 515px; height: 372px; margin: 0; padding: 0; border: 1px dashed silver; } div#Text { margin-left: 515px; height: 372px; padding-left: 1em; padding-top: 80px; border: 1px dashed silver; } </style> </head> <body> <div> <img id="Bild" src="Bild1.jpg" width="515" height="372" alt="" onmouseover="tauschen (0, 'Bild2.jpg', txtBild2)" onmouseout="tauschen (0, 'Bild1.jpg', txtBild1)"> <div id="Text" onmouseover="tauschen (0, 'Bild2.jpg', txtBild2)" onmouseout="tauschen (0, 'Bild1.jpg', txtBild1)"> <h1>Überschrift</h1><br>Text Bild1<b>Zeile 1</b><br>Text Zeile2<br><br><b>und ...</b> </div> </div> </body> </html>-
Lieber Toni,
Wie kann ich den Text dann formatieren?
eine Überschrift ist eine Überschrift (bei Dir <h1>) und ein "normaler Text" ist ein Textabsatz. Also verwendest Du <p>, OK?
var txtBild1 = '<h1>Überschrift</h1><br>Text Bild1<b>Zeile 1</b><br>Text Zeile 2<br><br><b>und ...</b>'
Wie wäre es mit dieser Lösung?
var txtBild1 = '<h1>Überschrift</h1>' + '<p>Text Bild1 <strong>Zeile 1</strong></p>' + '<p>Text Zeile 2</p>' + '<p><strong>und ...</strong></p>';Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix
Wie wäre es mit dieser Lösung?
var txtBild1 = '<h1>Überschrift</h1>'
+ '<p>Text Bild1 <strong>Zeile 1</strong></p>'
+ '<p>Text Zeile 2</p>'
+ '<p><strong>und ...</strong></p>';> Das führte zu Warnungen: '<' + '/' + letter not allowed here Nach der Korrektur von jeweils \/ war es fehlerfrei, allerdings ist der Effekt nach wie vor vorhanden. Ich habe das Beispiel weiter vereinfacht (Bild herausgenommen), s.u. Das "Flackern" passiert, wie ich jetzt festgestellt habe im Firefox und Netscape, im Opera ist es wieder ganz anders. Wenn ich da mit dem Cursor in die Box hineinfahre, wechselt der Text auf Text 2, wenn ich dann aber in den Text hineinfahre, kommt wieder Text 1. Hoffentlich ist das ein Anhaltspunkt. Gruß Toni ~~~html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Bildwechsel Test-neu</title> <script type="text/javascript"> var txtBild1 = '<h1>Überschrift 1<\/h1>' + '<p>Text Bild1 <strong>Zeile 1<\/strong><\/p>' + '<p>Text Zeile 2<\/p>' + '<p><strong>und ...<\/strong><\/p>'; var txtBild2 = '<h1>Überschrift 2<\/h1>' + '<p>Text Bild2 <strong>Zeile 1<\/strong><\/p>' + '<p>Text Zeile 2<\/p>' + '<p><strong>und ...<\/strong><\/p>'; function tauschen (Text) { document.getElementById('Text').innerHTML = Text; } </script> <style type="text/css"> div#Text { margin-left: 520px; padding: 3em 1em; border: 1px dashed green; } </style> </head> <body> <div id="Text" onmouseover="tauschen (txtBild2)" onmouseout="tauschen (txtBild1)"> <h1>Überschrift</h1><p>Text Bild1 <strong>Zeile 1</strong></p><p>Text Zeile 2</p><p><strong>und ...</strong></p> </div> </body> </html>-
Lieber Toni,
das "Flackern" beim Überfahren der Textinhalte innerhalb des <div> liegt am sogenannten event bubbling. Der mouseout-Event feuert auch, wenn Du die Maus vom <div>-Element weg auf ein Kindelement des <div>-Elementes fährst. Dabei wird dann der Text wieder ausgetauscht. Da das Event aber die Baumstruktur hinunter und wieder hinauf geht (wie Luftblasen), wird dann doch erkannt, dass sich die Maus innerhalb des <div>s befindet, obwohl sie gerade auf einem Kindelement steht. Daher wird dann erneut der Text getauscht, sodass es "flackert".
Wenn Du das verbessern willst, dann musst Du das im größeren Stil anpacken. Du musst eine Funktion schreiben, die die mouse-Events abfängt, um zu ermitteln, um welches Element es sich gerade genau handelt, um dann erst gegebenenfalls die Tauscherei anzustoßen.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber Felix,
Wenn Du das verbessern willst, dann musst Du das im größeren Stil anpacken. Du musst eine Funktion schreiben, die die mouse-Events abfängt, um zu ermitteln, um welches Element es sich gerade genau handelt, um dann erst gegebenenfalls die Tauscherei anzustoßen.
Du erwartest von einem Asthmatiker, dass er auf den Mount-Everest klettert!
Kennst Du zufällig eine einfache Beschreibung, wie man so etwas anstellt oder ein Beispiel?
Was seltsam ist, ist wiederum, dass die Browser da unterschiedlich reagieren. Ich möchte nicht wissen, wie der IE sich verhält!
Womöglich muss die Funktion dann noch browserspezifisch gestaltet werden?
Danke
Toni
-
-
Ich habe das Beispiel weiter vereinfacht (Bild herausgenommen), s.u.
Das "Flackern" passiert, wie ich jetzt festgestellt habe im Firefox und Netscape, im Opera ist es wieder ganz anders. Wenn ich da mit dem Cursor in die Box hineinfahre, wechselt der Text auf Text 2, wenn ich dann aber in den Text hineinfahre, kommt wieder Text 1.Das Problem an deinem Code ist, das du den HTML Code unter dem Mauszeiger austauschst, d.h. du löst durch das austauschen die Events onmouseout und over aus. Daher das Flackern. Wenn z.b. mal den over Text in einem anderen DIV anzeigst, siehst du das es nicht flackert.
Die Lösung wäre also, wenn du vor dem austauchsen die Events inaktivierst (zumindest den mouseout) und danch wieder aktivierst.
Struppi.
-
Hallo Struppi!
Die Lösung wäre also, wenn du vor dem austauchsen die Events inaktivierst (zumindest den mouseout) und danch wieder aktivierst.
Das Inaktivieren funktioniert (wenn ich das anschl. Aktivieren weglasse)
Wenn ich aber anschließend wieder aktiviere, tut sich gar nichts (kein Textwechsel aber auch keine Fehlermeldung).
Grüße Toni
Hier der Code, die Änderungen markiert <===<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Bildwechsel Test-neu</title> <script type="text/javascript"> var txtBild1 = '<h1>Überschrift 1<\/h1>' + '<p>Text Bild1 <strong>Zeile 1<\/strong><\/p>' + '<p>Text Zeile 2<\/p>' + '<p><strong>und ...<\/strong><\/p>'; var txtBild2 = '<h1>Überschrift 2<\/h1>' + '<p>Text Bild2 <strong>Zeile 1<\/strong><\/p>' + '<p>Text Zeile 2<\/p>' + '<p><strong>und ...<\/strong><\/p>'; function tauschen (Text) { document.getElementById('Text').onmouseout=null; <============== document.getElementById('Text').innerHTML = Text; document.getElementById('Text').onmouseout=tauschen (txtBild1); <===== } </script> <style type="text/css"> div#Text { margin-left: 520px; padding: 3em 1em; border: 1px dashed green; } </style> </head> <body> <div id="Text" onmouseover="tauschen (txtBild2)" onmouseout="tauschen (txtBild1)"> <h1>Überschrift</h1><p>Text Bild1 <strong>Zeile 1</strong></p><p>Text Zeile 2</p><p><strong>und ...</strong></p> </div> </body> </html>-
Die Lösung wäre also, wenn du vor dem austauchsen die Events inaktivierst (zumindest den mouseout) und danch wieder aktivierst.
Das Inaktivieren funktioniert (wenn ich das anschl. Aktivieren weglasse)
Wenn ich aber anschließend wieder aktiviere, tut sich gar nichts (kein Textwechsel aber auch keine Fehlermeldung).Du machst eine Sache falsch, aber meine Schlussfolgerung heute morgen war es auch.
document.getElementById('Text').onmouseout=null; <==============
document.getElementById('Text').innerHTML = Text;
document.getElementById('Text').onmouseout=tauschen (txtBild1); <=====Du musst hier die Referenz auf die Funktion zuweisen, nicht die Funktion aufrufen. Da du den Parameter brauchst musst du eine anonyme Funktion verwenden.
document.getElementById('Text').onmouseout= function() { tauschen (txtBild1); };Aber das funktioniert auch nicht, da das ganze Problem ein MischMasch aus allen ihr genannten Symptomen ist. Auf die schnelle fällt mir nur ein Workaround ein, der allen Elementen innerhalb des DIV ebenfalls einen mousover-Event zufügt. Allerdings musst du noch eine Prüfung einbauen, da ansonsten die Funktion permanent beim überfahren der Unterelemente aufgerufen wirde.
Das ganze sieht bei mir so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Bildwechsel Test-neu</title> <script type="text/javascript"> var txtBild1 = '<h1>Überschrift 1<\/h1>' + '<p>Text Bild1 <strong>Zeile 1<\/strong><\/p>' + '<p>Text Zeile 2<\/p>' + '<p><strong>und ...<\/strong><\/p>'; var txtBild2 = '<h1>Überschrift 2<\/h1>' + '<p>Text Bild2 <strong>Zeile 1<\/strong><\/p>' + '<p>Text Zeile 2<\/p>' + '<p><strong>und ...<\/strong><\/p>'; function tauschen(el, evt, Text) { var evt_el = evt.target || evt.srcElement; if(el != evt_el) return; document.getElementById('Text').innerHTML = Text; var all = document.getElementById('Text').getElementsByTagName('*'); for(var i = 0; i < all.length; i++) { all[i].onmouseover = function(e){ document.getElementById('Text').innerHTML = Text; } } } </script> <style type="text/css"> #Text *{ background-color: #ffe; border:1px solid black; } div#Text { margin-left: 520px; padding: 3em 1em; border: 1px dashed green; } </style> </head> <body> <div id="Text" onmouseover="tauschen (this, event, txtBild2)" onmouseout="tauschen (this, event, txtBild1)"> <h1>Überschrift</h1><p>Text Bild1 <strong>Zeile 1</strong></p><p>Text Zeile 2</p><p><strong>und ...</strong></p> </div> </body> </html>ABER!
Ich stelle grad fest dass der IE 7 her nicht mitspielt, da seltsamerweise srcElement nicht das Gleiche ist wie target, wovon ich bisher immer ausgegangen bin und auf allen Seiten die ich bisher gesehen habe wurde diese Eigenschaften auch synonym eingesetzt.
Im Moment bin ich etwas ratlos.
Struppi.
-
Hallo,
danke für die bisherige Hilfe.Ich stelle grad fest dass der IE 7 her nicht mitspielt, da seltsamerweise srcElement nicht das Gleiche ist wie target, wovon ich bisher immer ausgegangen bin und auf allen Seiten die ich bisher gesehen habe wurde diese Eigenschaften auch synonym eingesetzt.
Im Moment bin ich etwas ratlos.
Ich auch!
Ich hatte zu Beginn gedacht, dies sei eine leichte Aufgabe. Allerdings scheint sie doch eher exotisch zu sein, wenn der IE das nicht packt.
So long
Toni
-
-
-
-
-
-
-
-
-
-