nicht angemeldet
Probleme (evtl. mit float)
0 0 
MudGuard
0 0 0 0 0 
Der Martin
Probleme (evtl. mit float)
Hallo!
Ich habe einen Link. Wenn jemand auf diesen Link klickt, dann sollten 3 Grafiken (100px - 600px - 100px) in einem 800px großen div erscheinen. Ich mache das mit Display:none. Damit die Grafiken nebeneinander bleiben habe ich ihnen jeweils das entsprechende float: gegeben.
Aber jedesmal, wenn auf diesen Link geklickt wird rutscht die rechte Grafik nach unten und bleibt nicht neben der mittleren. Ich habe keine Ahnung woran das liegt.
Hier noch der Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Image Map</title>
<link rel="STYLESHEET" type="text/css" href="css.css">
<script type="text/javascript">
function Berge_show() {
document.getElementById("border_left").style.display = "block";
document.getElementById("border_right").style.display = "block";
document.getElementById("middle").style.display = "block";
}
</script>
</head>
<body>
<p id="galerie">
<div id="nav"><a href="#" onclick="Berge_show()"><img src="berge.png" alt="Berge" width="98" height="40" style="border-style:none;" id="Berge"></a></div>
<div id="content">
<span style="float:left;"><img src="border.png" id="border_left" width="100" height="544" alt="border_left" style="border:none; display:none;"></span>
<span style="float:none;"><img src="middle.png" id="middle" width="601" height="544" alt="middle" style="border:none; display:none;"></span>
<span style="float:right;"><img src="border.png" id="border_right" width="99" height="544" alt="border_right" style="border:none; display:none;"></span>
</div>
</p>
</body>
</html>
-
Sorry!
Hab noch vergessen mich für eure Antworten im Vorraus zu bedanken.
ciao, hubschraubaer -
Hi,
Ich habe einen Link. Wenn jemand auf diesen Link klickt, dann sollten 3 Grafiken (100px - 600px - 100px) in einem 800px großen div erscheinen. Ich mache das mit Display:none. Damit die Grafiken nebeneinander bleiben habe ich ihnen jeweils das entsprechende float: gegeben.
Da Bilder inline Elemente sind, bleiben sie auch ohne float (und ohne zusätzliche überflüssige spans) nebeneinander, wenn der Platz ausreicht.
Whitespace dazwischen führt selbstverständlich dazu, daß ein Leerzeichen dargestellt wird - also ist der Whitespace zu vermeiden.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo!
Zuerst einmal vielen Dank für deine Antwort!Da Bilder inline Elemente sind, bleiben sie auch ohne float (und ohne zusätzliche überflüssige spans) nebeneinander, wenn der Platz ausreicht.
Dann läuft bei mir irgendetwas schief. Weil bei mir werden ohne spans die Bilder untereinander dargestellt.
Whitespace dazwischen führt selbstverständlich dazu, daß ein Leerzeichen dargestellt wird - also ist der Whitespace zu vermeiden.
Würde das dann so aussehen?:
<img src="border.png" id="border_left" width="100" height="544" alt="border_left" style="border:none; display:none; white-space: nowrap;">Weil so passiert nichts oder genauergesagt eben genau das, was ich nicht will.
Und wenn ich das mittlere Bild um 100px verkleinere, dann rutscht das rechte wieder nach unten, obwohl es eigentlich genug Platz hat.
Nochmals vielen Dank für dein Bemühen!
ciao, hubschraubaer-
habe d'ehre hubschraubaer
Dann läuft bei mir irgendetwas schief. Weil bei mir werden ohne spans die Bilder untereinander dargestellt.
Du sagst es ja dem Browser mit style.display = "block";
man liest sich
Wilhelm-
Hallo!
Ok, vielen Dank! Das war das Problem. Jetzt habe ich das "block" durch "inline" ersetzt und es geht. Aber ein kleines Problem gibt es noch. Zwischen den Bildern gibt es einen kleinen Abstand. Wie kann ich diesen entfernen?
Danke für eure Antworten!
ciao, hubschraubaer-
habe d'ehre hubschraubaer
Aber ein kleines Problem gibt es noch. Zwischen den Bildern gibt es einen kleinen Abstand. Wie kann ich diesen entfernen?
margin,padding,border mal auf 0 bzw. none setzen?
man liest sich
Wilhelm-
Hallo!
Habe bei allen drei Bildern es so gemacht:<img src="border.png" id="border_left" width="100" height="544" alt="border_left" style="display:none; border:none; margin:0; padding:0;">
Aber ohne Erfolg :-( Woran könnte es liegen?
Danke für deine Antworten!
ciao, hubschraubaer
-
-
Moin,
Aber ein kleines Problem gibt es noch. Zwischen den Bildern gibt es einen kleinen Abstand. Wie kann ich diesen entfernen?
das hat MudGuard dir auch schon verraten: Indem du die Whitespaces zwischen den Bildern weglässt.
So long,
Martin--
Man gewöhnt sich an allem, sogar am Dativ.-
Hallo Martin!
Meinst du es so?<img src="border.png" id="border_right" width="100" height="544" alt="border_right" style="display:none; border:none; margin:0; padding:0; white-space:nowrap;">
Danke!
ciao, hubschraubaer-
Hallo hubschraubaer!
Meinst du es so?
Nein er meinte es so:
<img src="..." ...><img src="..." ...><img src="..." ...>
In deinem Code ist nämlich nach jedem <img> ein Zeilenumbruch und der wird vom Browser als Leerzeichen dargestellt.Servus
--
flowh .
Es ist nicht deine Schuld, dass die Welt ist, wie sie ist, es wär nur deine Schuld, wenn sie so bleibt.
- Die Ärzte-
Hi!
Achsooooo! Ok Danke! Jetzt geht es!
Danke schön!
ciao, hubschraubaerEs ist nicht deine Schuld, dass die Welt ist, wie sie ist, es wär nur deine Schuld, wenn sie so bleibt.
- Die Ärzte
Aha! Noch ein Ärzte-Fan! :-)
-
Hallo hubschraubaer!
Aha! Noch ein Ärzte-Fan! :-)
Natürlich! Die Ärzte sind ja (fast) die beste Band der Welt. :-)
Servus
--
flowh .
Es ist nicht deine Schuld, dass die Welt ist, wie sie ist, es wär nur deine Schuld, wenn sie so bleibt.
- Die Ärzte
-
-
-
-
-
-
-
-