• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[vertical-align:middle] Probleme

C

creative

Neues Mitglied
Mein Anliegen: Ich möchte, dass jeder Text rechts von der entsprechenden Grafik vertikal zentriert wird. Das ist ja kein Problem.

<html>
<head>
<title>Beispiel</title>
<style type="text/css">
<!--
* { vertical-align:middle }
-->
</style>
</head>
<body>

<br><img src=grafik1.png
alt="" title=""
width="300" height="60"> Dieser Text soll vertikal zentriert werden

<br><img src=grafik2.png
alt="" title=""
width="300" height="60" Dieser Text soll vertikal zentriert werden>
Zum Vergrößern anklicken....

Jetzt entstehen aber 2 Probleme:

Wenn Text eine Überlänge hat, gibt es einen Zeilenumbruch und der Rest vom Text erscheint UNTER der Grafik. Ich hätte aber gern beide Zeilen neben der Grafik zentriert.

Zweites Problem: Wenn ich den kompletten <style> Befehl nicht drinhabe, dann ist zwischen den beiden Grafiken ein Abstand von 5px. Wenn der Befehl drin ist, kleben sie direkt aneinander. Wie schaff ich es, dass ein Abstand (max. 6px) dazwischen ist?

Anmerkung: Bei diesem Beispiel sind es nur 2 Grafiken, im richtigen Quellcode jedoch über 300. Dies bitte brücksichtigen.

Danke schonmal an alle Antworten :)
 
Werbung:
Wenn Text eine Überlänge hat, gibt es einen Zeilenumbruch und der Rest vom Text erscheint UNTER der Grafik. Ich hätte aber gern beide Zeilen neben der Grafik zentriert.
Zum Vergrößern anklicken....
In diesem Fall musst du mit float arbeiten.
Befehl nicht drinhabe, dann ist zwischen den beiden Grafiken ein Abstand von 5px
Zum Vergrößern anklicken....
Definiere Abstände mit margin und padding
Bei diesem Beispiel sind es nur 2 Grafiken, im richtigen Quellcode jedoch über 300. Dies bitte brücksichtigen.
Zum Vergrößern anklicken....
Das Spielt für CSS keine Rolle, allerdings wirst du wahrscheinlich nicht darum herumkommen, deine semantische Auszeichnung abzuändern.
 
Wo liegt der Fehler?
<style type="text/css">
<!--
* {vertical-align:middle;}
* {margin-bottom:6px;}
* {float:left;}
-->
</style>
Zum Vergrößern anklicken....

Grafiken werden jetzt schräg versetzt nebeneinander angezeigt. :-?


semantische Auszeichnung? Sagt mir leider nichts, bin noch nicht so tief in der Materie ;)
 
Werbung:
Wieso der Fehler, frag lieber wo die Fehler sind.

1. Hör auf deine Elemente mit * zu selektieren.
2. Was denn nun? float oder vertical-align?
3. Wo ein float ist muss ein clear sein.

Semantische Auszeichnung = Betroffener HTML Code und seine eigentliche Bedeutung [=Auszeichnung]
 
Werbung:
Hallo.

Höre auf deine Elemente mit * zu selektieren.
Lies dir den Link von Frank durch.

Das müsste eigentlich alle deine Fragen beantworten.

Gruss
Elroy
 
Ich verzweifle langsam. Habe den kompletten gestrigen Abend damit verbracht, eine Lösung zu finden - jedoch ohne Erfolg.

Ich habe hier mal ein Beispiel erstellt, wie es am Ende aussehen soll. Ich vermute, dass ihr mich (aufgrund meiner schlechten Beschreibung) missversteht.

Beispiel1488959d6png.png
 
Werbung:
Das machst du genau so wie wir es beschrieben habe, wir haben dich nicht missverstanden
HTML: 
<div>
  <img>
  <p> <--- floaten nach links mit margin nach links
   float clearen
</div>
<div>
  <img>
  <p> <--- floaten nach links mit margin nach links
   float clearen
</div>
usw....
 
irgendwo hab ich nen gewaltigen Denkfehler drin!
Der Text fängt jetzt unter der ersten Grafik an. (margin hab ich noch bewusst rausgelassen)

HTML: 
<style type="text/css">
p {float:left; clear:left;}
 </style>

<div>
<img width="300" height="60" src="images/1.png">
<p>Beispieltext</p>
</div>
 
HTML: 
div.bildlist {
    margin-bottom : 6px;
}

div.bildliste img {
    width : 300px;
    height : 60px;
}
div.bildliste p {
    float : left;
    margin-left : 310px;
    height : 60px;
}
HTML: 
<div class="bildliste">
    <img src="images/1.png" />
    <p>Text</p>
    <br style="clear : left;" />
</div>
<div class="bildliste">
    <img src="images/1.png" />
    <p>Text</p>
    <br style="clear : left;" />
</div>
 
Werbung:
Jo sry das float war an der falschen stelle....

HTML: 
div.bildliste {
    margin-bottom : 6px;
}

div.bildliste img {
    width : 300px;
    height : 60px;
	display : block;
    float : left;
}
div.bildliste p {
    height : 60px;
	margin : 0;
}
 
Wunderbar, es funktioniert! Großes DANKE für deine Hilfe und Geduld! :)


/e: zu früh gefreut! Lediglich der Text neben der ersten Grafik ist zentriert, die folgenden befinden sich auf Höhe vom oberen Grafikrand.
 
Werbung:
Frank schrieb:
HTML: 
<div>
  <img>
  <p> <--- floaten nach links mit margin nach links
   float clearen
</div>
Zum Vergrößern anklicken....
Wenn es sich bei den Texten um eine Bildbeschreibung handelt, wäre eine Definitionsliste angebrachter.

creative schrieb:
irgendwo hab ich nen gewaltigen Denkfehler drin!
Der Text fängt jetzt unter der ersten Grafik an.
Zum Vergrößern anklicken....
Nein, keinen Denkfehler, nur überhaupt kein Verständnis von der Materie.
Du versuchst eine Farbe zu mischen, ohne zu wissen, aus welchen Farben. Also schüttest Du irgendwelche zusammen und bist enttäuscht, wenn nicht die richtige am Ende rauskommt.

Wenn Du ein Element floatest und so zwei Elemente nebeneinander haben willst, dann muss das gefloatete im HTML-Code als erstes kommen, sonst ist das Ergebnis wie bei Dir.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben