mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 19.03.2024 10:32 Benutzername: Passwort: Auto-Login

Thema: CSS - Textabstand zu Bild vom 04.07.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS - Textabstand zu Bild
Seite: 1, 2  Weiter
Autor Nachricht
isarabz
Threadersteller

Dabei seit: 14.08.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 04.07.2008 12:32
Titel

CSS - Textabstand zu Bild

Antworten mit Zitat Zum Seitenanfang

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...". Menno!
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&auml;t Baggerschaufeln
        f&uuml;r die Umbauma&szlig;nahmen am Stauwehr bei Trepmann. Dort wurde
        von Mitarbeitern des Kreises in den vergangenen Woche das alte Wehr abgerissen
        und daf&uuml;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! * Keine Ahnung... * 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! * Ich bin unwürdig *

[edit by Nimroy]
Keine Eyecatcher im Titel verwenden.


Zuletzt bearbeitet von Nimroy am Mo 07.07.2008 13:38, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Fr 04.07.2008 13:33
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Zeithase

Dabei seit: 09.05.2005
Ort: Erfurt
Alter: 39
Geschlecht: Männlich
Verfasst Fr 04.07.2008 13:36
Titel

Antworten mit Zitat Zum Seitenanfang

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. *zwinker*
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Fr 04.07.2008 13:41
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Star_Scream

Dabei seit: 26.08.2005
Ort: -
Alter: 41
Geschlecht: Männlich
Verfasst Fr 04.07.2008 15:37
Titel

Antworten mit Zitat Zum Seitenanfang

Die Font nennt sich außerdem "Myriad Pro" und nicht Myraid Pro Grins

Zuletzt bearbeitet von Star_Scream am Fr 04.07.2008 15:38, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
isarabz
Threadersteller

Dabei seit: 14.08.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 07.07.2008 11:07
Titel

Antworten mit Zitat Zum Seitenanfang

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... Hmm...?!
  View user's profile Private Nachricht senden
Zim

Dabei seit: 05.12.2006
Ort: Earth Rocks
Alter: -
Geschlecht: Männlich
Verfasst Mo 07.07.2008 11:11
Titel

Antworten mit Zitat Zum Seitenanfang

… und du weist auch hoffentlich das die Myriad Pro vielleicht 1% der Seitenbesucher auf dem Rechner haben *zwinker*

… oder isses irgendwann ne Windows/Mac Systemschrift geworden?
  View user's profile Private Nachricht senden
isarabz
Threadersteller

Dabei seit: 14.08.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 07.07.2008 11:18
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.