Autor |
Nachricht |
isarabz
Threadersteller
Dabei seit: 14.08.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 04.07.2008 12:32
Titel CSS - Textabstand zu Bild |
|
|
Hallo allerseits,
zunächst einmal möchte ich vorausschicken, dass ich in Sachen CSS nicht mehr als eine ambitionierte Anfängerin bin. Ich hoffe, peu á peu mehr zu lernen - aber das geht nur mit Hilfe von außen. Daher hoffe ich auf Hilfe - ohne Kommentare á là "Wer keine Ahnung hat, sollte die Finger davon lassen...".
Ich kämpfe jetzt schon seit einiger Zeit mit folgendem Problem, ohne dass sich ein Lösungsansatz zeigt: Ich habe kleine Bildchen, um die ein Anlauftext fließen soll. Klappt ja auch soweit schon ganz gut. Nur steht der Text bislang ohne Abstand direkt an der rechten Bildkante - was einfach nur total doof aussieht. Vielleicht guckt ihr erst einmal hier unter www.asg-ramsdorf.de, damit ihr wisst, was ich meine.
Ich habe bereits versucht, im Stylesheet der Klasse "bilder" margin 0 0 0 10px zuzuweisen. Aber dann rutschen sowohl Text als auch das Bild um 10 Pixel nach rechts. Die Richtung stimmt zwar, aber es soll halt nur der Text einen Abstand von 10px zum rechten Bildrand haben. (Da ich mir sicher bin, dass letztendlich über eine "p class" steuern zu müssen, habe ich im CSS die Klasse ".bilder" erst einmal mit "margin 0" stehen gelassen. Sonst müsste ich bei JEDEM Anlaufbild mit umfließendem Text in der gesamten Webseite im HTML alles ändern - also nicht wundern!)
Bislang sieht's im HTML ja so aus:
Code: | <h1>Stauwehr bei Trepmann renaturiert</h1>
<p class="bilder"><a href="images/stauwehr0608/wehr_0708_00_gr.jpg" rel="lytebox" ><img src="images/stauwehr0608/wehr_0708_00_kl.jpg" width="120" height="134" border="0" align="left"/></a>
Oberhauptbauingenieur Arved Holtwick und sein Stellvertreter Torge Holtwick
inspizieren auf ihrer Suche nach geeigneten Arbeitsgerät Baggerschaufeln
für die Umbaumaßnahmen am Stauwehr bei Trepmann. Dort wurde
von Mitarbeitern des Kreises in den vergangenen Woche das alte Wehr abgerissen
und dafür eine naturnahe Strecke angelegt. Wieso, weshalb, warum?
Das lest ihr <strong><a href="verein__stauwehr.htm">hier </a></strong></p> |
Ich habe mal versucht, nach der h1 dem Bild einfach nur <p> zuzuweisen und ab dem eigentlichen Text mit <p class="bilder> zu beginnen. Aber da fing der Text plötzlich erst in der 2. Zeile an - immer noch ohne Abstand zum Bild. Dann habe ich versucht, dem Bild gar keine Schrift zuzuweisen und wie beim 1. Versuch mit <p class="bilder"> erst ab dem Text zu beginnen - erneute Fehlanzeige! Selbstredend, dass das Ergebnis mit einfach nur <p> anstatt <p class...> das selbe ist. Hier der Code für <p>: Code: | p {
font-size: 13px;
font-family : "Myraid Pro", "Trebuchet", "Trebuchet MS", Arial, Verdana, sans-serif;
color: #000066;
text-align: left;
vertical-align: top;
padding: 0px 20px 0px 30px;
} |
Kann mir jemand sagen, wo da der (Denk)-Fehler liegt - und wie ich es richtig machen muss? Verhindert ein vorheriger Margin- oder Padding-Wert das Umlaufen? Was mich irritiert, ist die Tatsache, dass ich den Fließtext nicht einzeln mit <p> (oder eine Klasse) ansteuern kann. Immer wird auch das Bild mit eingezogen...
Schon mal viiiiiiiiiiiiiielen Dank für legliche Hilfe!
[edit by Nimroy]
Keine Eyecatcher im Titel verwenden.
Zuletzt bearbeitet von Nimroy am Mo 07.07.2008 13:38, insgesamt 1-mal bearbeitet
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Fr 04.07.2008 13:33
Titel
|
|
|
Trenne Dich am besten allmählich von (veralteten) Attributen wie align und nutze hier float: left; für img. margin-right für img hält den Text auf Abstand.
Siehe auch http://www.complexspiral.com/publications/containing-floats/
Zuletzt bearbeitet von heiko_rs am Fr 04.07.2008 13:34, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
Zeithase
Dabei seit: 09.05.2005
Ort: Erfurt
Alter: 39
Geschlecht:
|
Verfasst Fr 04.07.2008 13:36
Titel
|
|
|
heiko_rs hat geschrieben: | Trenne Dich am besten allmählich von (veralteten) Attributen wie align und nutze hier float: left; für img. margin-right für img hält den Text auf Abstand. |
Und ein margin-bottom je nach Textlaenge noch dazu, sonst sieht's seltsam aus.
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Fr 04.07.2008 13:41
Titel
|
|
|
Ja, ist ebenfalls meist sinnvoll, vor allem wenn die line-height eines Textes nicht sonderlich hoch ist.
Zuletzt bearbeitet von heiko_rs am Fr 04.07.2008 13:42, insgesamt 1-mal bearbeitet
|
|
|
|
|
Star_Scream
Dabei seit: 26.08.2005
Ort: -
Alter: 41
Geschlecht:
|
Verfasst Fr 04.07.2008 15:37
Titel
|
|
|
Die Font nennt sich außerdem "Myriad Pro" und nicht Myraid Pro
Zuletzt bearbeitet von Star_Scream am Fr 04.07.2008 15:38, insgesamt 1-mal bearbeitet
|
|
|
|
|
isarabz
Threadersteller
Dabei seit: 14.08.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 07.07.2008 11:07
Titel
|
|
|
Ups! Hast' recht! Danke dir für den Hinweis.
Da sieht man mal wieder, dass man manchmal den Wald vor lauter Bäumen nicht sieht...
|
|
|
|
|
Zim
Dabei seit: 05.12.2006
Ort: Earth Rocks
Alter: -
Geschlecht:
|
Verfasst Mo 07.07.2008 11:11
Titel
|
|
|
… und du weist auch hoffentlich das die Myriad Pro vielleicht 1% der Seitenbesucher auf dem Rechner haben
… oder isses irgendwann ne Windows/Mac Systemschrift geworden?
|
|
|
|
|
isarabz
Threadersteller
Dabei seit: 14.08.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 07.07.2008 11:18
Titel
|
|
|
Hm... ehrlich gesagt habe ich keine Ahnung, ob Myriad Pro eine Systemschrift ist... Aber schadet's etwas, die Schrift anzugeben? Ich habe das immer so verstanden, dass ansonsten die nächste Schrift in der Liste benutzt wird. Oder?
|
|
|
|
|
|
|
|
Ähnliche Themen |
Rechts , Textabstand von BILD
Bild auf Webseite per Drag&Drop mit lokalem Bild ersetzen?
CSS - Hover / Link / Bild - Bild verschwindet nach Klick
[Frage] Verlinkung in ein Bild nicht auf ein Bild?
Bild hinter Bild in Photoshop
Bild in Bild faden via javascript
|
|