nicht angemeldet
Ausrichtung von Elementen
0 0 
Gunnar Bittersmann
0 0 0 0 0 0 0
0 Gunnar Bittersmann
Ausrichtung von Elementen
Hallo,
eine Frage zu diesem Code:
<html>
<body>
<img src="1.jpg" width="100" height="100">
<img style="margin-top: 170px" src="2.jpg" width="100" height="100">
</body>
</html>
Das zweite Bild soll durch das Erhöhen von margin-top von 0px auf 170px weiter unten als das erste Bild dargestellt werden. Das klappt auch. Das Problem ist, dass das erste Bild auch mit nach unten rutscht. Dies soll aber nicht passieren.
Woran liegt das denn?
-
Hi Anton!
Woran liegt das denn?
Erstens ist der Code nicht valide und
zweitens schafft ein display:block für das erste Bild Abhilfe.MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:) -
@@Anton:
Das zweite Bild soll durch das Erhöhen von margin-top von 0px auf 170px weiter unten als das erste Bild dargestellt werden. […] Das Problem ist, dass das erste Bild auch mit nach unten rutscht. […]
Woran liegt das denn?
Daran, dass Bilder Inline-Elemente sind und als solche auf der Grundlinie (des eventuell vorhandenen Fließtextes) stehen. Bei dir narürlich beide auf derselben Grundlinie.
Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau) -
Ich hab das jetzt so gemacht:
<img style="display:block" src="1.jpg" width="100" height="100">
<img style="margin-top:170px" src="2.jpg" width="100" height="100">das klappt auch soweit. Was ist denn wenn ich margin-top von 170 auf 50 Pixel ändere. Dann komme ich mit display:block auch nicht weiter. Es wird ein Versatz von 100 Pixel statt wie gewünscht 50 angezeigt. So z.B.:
<img style="disply:block" src="1.jpg" width="100" height="100">
<img style="margin-top:50px" src="2.jpg" width="100" height="100">Warum das so ist ist mir klar. Was wäre denn die beste Lösung um das zweite Bild um die Hälfte der Höhe des ersten Bildes nach unten versetzt anzuzeigen?
-
Hi Anton!
<img style="disply:block" src="1.jpg" width="100" height="100">
Die Eigenschaft heißt "display".
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)-
Klappt trotzdem nicht so wie ich mir das vorstelle. Ich habe jetzt folgendes geschrieben:
<img style="display:block" src="1.jpg" width="100" height="100">
<img style="margin-top:-50px" src="2.jpg" width="100" height="100">Sowohl die erste als auch die zweite Grafik sind 100x100 Pixel groß. Die zweite soll um 50 Pixel weiter unten stehen als die erste. Sie wird allerdings 100 Pixel weiter unten angezeigt. Ist ja eigentlich logisch, da die erste Grafik durch "disply:block" ein Inline-Element wird und die zweite Grafik dadurch in die nächste Zeile rutscht. Durch das "margin-top:-50px" müßte die Grafik aber doch eigentlich wieder um 50px nach oben geschoben werden. Klappt aber nicht.
Was kann ich denn tun, damit die zweite Grafik nicht um 100 sondern nur um 50 Pixel weiter unten als die erste Grafik angezeigt wird? Verfolge ich überhaupt den richtigen Ansatz?
-
Hi Anton!
Was kann ich denn tun, damit die zweite Grafik nicht um 100 sondern nur um 50 Pixel weiter unten als die erste Grafik angezeigt wird? Verfolge ich überhaupt den richtigen Ansatz?
Nein. So wie ich dich verstehe, möchtest du ein Element teilweise über oder unter einem anderen Element anzeigen. Das geht aber nicht. Schließlich kann (normalerweise) ein Element nicht den Platz eines anderen einnehmen.
Was sind das für Bilder? Eventuell könntest du mit Hintergrundbildern arbeiten.
Beschreibe mal, was du eigentlich vorhast?MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)-
Die Bilder haben das Format jpg. Die liegen in einem DIV-Container auf der Startseite der Webseite. Mit einem Klick kann man zu den entsprechenden Unterseiten der Webseite gelangen. Was Hintergrundbilder angeht... damit habe ich noch nicht gearbeitet. Denkst du unter dieser Konstellation wären Hintergrundbilder sinnvoll für mich? Falls ja, wäre es nett wenn du mir kurz erläutern könntest wie ich das mit den Hintergrundbildern hinbekommen könnte?
-
Hi Anton!
Und wie sollen die Bilder angeordnet werden?
So?
┌────────┐
│ Bild 1 │
│┌───────┴┐
└┤ Bild 2 │
│ │
└────────┘Wenn ja, warum?
Es wäre doch sinnvoll, die Verweise in einer Liste zu halten und dann entsprechend mit CSS gestalten.
<ul id="navigation"> <li id="nav_produkte"><a href="">Produkte</a></li> <li id="nav_philosophie"><a href="">Philosophie</a></li> <li id="nav_kontakt"><a href=""></a>Kontakt</li> </ul>Mit CSS kannst du nun die Links so darstellen, wie du das möchtest, auch übereinander. Obwohl ich nicht verstehe, warum übereinander...
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)-
Die Bilder sollen nicht übereinander angeordnet werden. Die vertikale Position von Bild 2 ist in deiner Zeichnung korrekt. Die horizontale Position hingegen nicht. Das zweite Bild muss so weit nach rechts gerückt werden, dass es nichtmehr das erste Bild überlappt.
Ich würde es ja so zeichnen wie du... weiß aber nicht wie. Wie bekommt man das mit den Zeichnungen hin?
-
@@Anton:
Ich würde es ja so zeichnen wie du... weiß aber nicht wie. Wie bekommt man das mit den Zeichnungen hin?
http://forum.de.selfhtml.org/archiv/2008/9/t176789/#m1163713 ff.
Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau) -
Hi Anton!
Die Bilder sollen nicht übereinander angeordnet werden. Die vertikale Position von Bild 2 ist in deiner Zeichnung korrekt. Die horizontale Position hingegen nicht. Das zweite Bild muss so weit nach rechts gerückt werden, dass es nichtmehr das erste Bild überlappt.
Also:
┌────────┐
│ │
│ Bild 1 ├────────┐
│ │ │
└────────┤ Bild 2 │
│ │
└────────┘Das ist ein Spezialfall für horizontale Navigationslisten. Du musst einfach einen entsprechenden Abstand nach oben definieren. Einzelne Elemente kannst du in CSS über ihre ID ansprechen.
Ich würde es ja so zeichnen wie du... weiß aber nicht wie. Wie bekommt man das mit den Zeichnungen hin?
Die Zeichen sind aus dem ASCII-Zeichensatz mit DOS-Erweiterung.
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)-
Perfekt damit komme ich jetzt weiter. Vielen Dank...
-
-
-
-
@@Anton:
Die Bilder haben das Format jpg.
BTW, das Format heißt JPEG.
Die liegen in einem DIV-Container auf der Startseite der Webseite.
??
Mit einem Klick kann man zu den entsprechenden Unterseiten der Webseite gelangen.
Also liegen sie in 'a'-Elementen.
Denkst du unter dieser Konstellation wären Hintergrundbilder sinnvoll für mich?
Vermutlich nicht.
Wenn ein Bild lediglich der Verzierung der Seite dient, dann gehört es in den Hintergrund.
Wenn ein Bild zum Inhalt gehört, dann gehört es nicht in den Hintergrund, sondern als 'img' eingebunden. Dann braucht es unbedingt einen Alternativtext.
[…] wenn du mir kurz erläutern könntest wie ich das mit den Hintergrundbildern hinbekommen könnte?
FYI: <http://de.selfhtml.org/css/eigenschaften/hintergrund.htm@title=Hintergrundfarben und -bilder>
Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
-
-
-
-
-