Rahmen passt nicht um Bild

[Arne]

Hallo in die Runde,

ich arbeite derzeit mit einem Team zusammen an einer Website und habe zunächst mal das Problem, dass diese derzeit noch nicht online ist (und ich keine Freigabe zur Freischaltung habe), ich Euch das Problem also nicht vor Ort zeigen kann.

Das Ganze spielt sich in einem CMS ab, worauf ich - ebenfalls leider - keinen Einfluss habe.

Nun habe ich versucht, um ein Bild einen 1px breiten schwarzen Rahmen zu setzen und dabei - hoffentlich - andere existierende CSS-Vorgaben auszuhebeln, ohne möglichst dabei die gesamte Seite zu vermurksen.

Das mit dem Rahmen gelingt mir im Prinzip auch, aber rechts und unten steht immer was über. Entweder zwischen Bild und Rahmen ist noch Luft, oder das Bild steht über den Rand des Rahmens hinaus. Ich habe schon alles Mögliche mit "padding" und "margin" versucht, komme aber nicht so recht weiter.

Hier der Code des entsprechenden Abschnitts:

<div class='content_float'>  
<div class='content_img' style='width: 330px; float: right; border: 1px solid; border-color: #000000;'   >  
<img alt="Bild: Motiv XY" title="Foto: Copyright NN" data-downloadable="false" src="/xy.jpg" width="320" />  
</div>  
</div>

Hat jemand eine Idee für mich?

Vielen Dank schonmal und Gruß,
Arne

[Gunnar Bittersmann]

@@Arne:

nuqneH

<div class='content_float'>

<div class='content_img' style='width: 330px; float: right; border: 1px solid; border-color: #000000;'   >
<img alt="Bild: Motiv XY" title="Foto: Copyright NN" data-downloadable="false" src="/xy.jpg" width="320" />
</div>
</div>

  
Vermeide Inline-Styles! Gib sämtliche Darstellung im Stylesheet an!  
  
Wozu die zwei Container um das Bild? Du kannst das img-Element auch floaten und ihm einen Rahmen verpassen.  
  
Wenn es im div steckt, ist Whitespace mit drin. Außerdem ist es ein Inline-Element, das auf der Grundlinie steht. Darunter ist der Raum für Unterlängen (bspw. für g, p, …). Deshalb ist dein Rahmen nicht am Bild dran.  
  
Das ändert sich mit display: block.  
  
Qapla'

-- 
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

[Arne]

Hallo Gunnar,

vielen Dank für Deine Antwort!

Vermeide Inline-Styles! Gib sämtliche Darstellung im Stylesheet an!

Würde ich ja gerne, aber das Problem ist, dass ich in dem Stylesheet nichts machen kann. Das ist vom Anbieter vorgegeben. Ich kann nur versuchen, irgendwelche Workarounds innerhalb des CMS zu finden.

Wozu die zwei Container um das Bild? Du kannst das img-Element auch floaten und ihm einen Rahmen verpassen.

Wie meinst Du das? Das <div class='content_float'> rausschmeißen?

Wenn es im div steckt, ist Whitespace mit drin. Außerdem ist es ein Inline-Element, das auf der Grundlinie steht. Darunter ist der Raum für Unterlängen (bspw. für g, p, …). Deshalb ist dein Rahmen nicht am Bild dran.

Das ändert sich mit display: block.

Hm... jetzt muss ich erst einmal versuchen, Deinen Telegrammstil zu verstehen... ;-)
Ich habe zwar in der Vergangenheit schon einiges mit html gebastelt, aber so ganz firm bin ich nicht. Falls Du mir das nochmal konkret an meinem Code-Beispiel zeigen könntest, wie Du das nun genau meinst, wäre ich dankbar...

Gruß,
Arne

[misterunknown]

Moin,

Hm... jetzt muss ich erst einmal versuchen, Deinen Telegrammstil zu verstehen... ;-)
Ich habe zwar in der Vergangenheit schon einiges mit html gebastelt, aber so ganz firm bin ich nicht. Falls Du mir das nochmal konkret an meinem Code-Beispiel zeigen könntest, wie Du das nun genau meinst, wäre ich dankbar...

Ein Bild kann man folgendermaßen nach rechts floaten:

<img alt="Bild: Motiv XY" title="Foto: Copyright NN" data-downloadable="false" src="/xy.jpg" width="320" id="motivxy" />  

#motivxy {  
   display: block;  
   border: 1px solid #000;  
   float: right;  
   width: 320px;  
   /* padding: 5px; falls gewünscht, kann man auch einen kleinen Abstand zwischen Bild und Rahmen einbauen*/  
   /* margin: 5px; auch ein Abstand zwischen dem Rahmen und dem anderen Content kann gewünscht sein */  
}

Sollte es mehrere Bilder geben, die du so formatiere willst, würde sich auch eine Klasse statts der ID als Identifikationsmerkmal anbieten. Beispielsweise class="motive" oder class="fotos".

Grüße Marco

[Arne]

Hallo Marco,

vielen Dank auch Dir für Deine Antwort!

Sollte es mehrere Bilder geben, die du so formatiere willst, würde sich auch eine Klasse statts der ID als Identifikationsmerkmal anbieten. Beispielsweise class="motive" oder class="fotos".

Klassen kann ich doch sicherlich nur im CSS definieren, oder? Da komme ich ja leider nicht ran.

Übrigens habe ich zumindest einen Fehler gerade selber entdeckt. Einen von der Sorte, als wenn man verzweifelt versucht rauszukriegen, warum der Computer mal wieder streikt - und nach zwei Stunden Fehlersuche merkt man, dass man hat den Stecker nicht drinhat:

<div class='content_float'>  
<div class='content_img' style='width: 330px; float: right; border: 1px solid; border-color: #000000;'   >  
<img alt="Bild: Motiv XY" title="Foto: Copyright NN" data-downloadable="false" src="/xy.jpg" width="320" />  
</div>  
</div>

Wenn man einmal 330px und einmal 320px hat, muss man sich über einen Zwischenraum ja wohl nicht wundern...

Bleibt nur noch der Zwischenraum unten. Das ist zwar nur ein kleiner weißer Rand, nicht viel, sieht aber nicht schön aus.

Hm. Ich frage mich gerade, ob die im CSS da irgendetwas formatiert haben könnten, was so einen Rand erzwingt. Denn eigentlich ist unten drunter noch eine Textzeile vorgesehen, wo man den Autor oder eine Bildbeschreibung einfügen kann. Das Ding sieht üblicherweise so aus:

  
<div class='img_caption_big'>  
text text text</div>

Ich hatte das einfach weggelöscht. Könnten da noch irgendwelche Restbestände von übrig sein? Oder irgendwas in der Bildformatierung, was sich damit verbindet?

Gruß,
Arne

[Gunnar Bittersmann]

@@Arne:

nuqneH

Bleibt nur noch der Zwischenraum unten. Das ist zwar nur ein kleiner weißer Rand, nicht viel, sieht aber nicht schön aus.

Die dir gegebenen Antworten liest du, oder nicht?

Qapla'

[Arne]

Die dir gegebenen Antworten liest du, oder nicht?

Ja. Warum so vorwurfsvoll?

Ich habe sie nicht nur gelesen, sondern auch geantwortet und zurückgefragt.
Und versucht zu verstehen und anzuwenden.

Ich bin Laie, habe mir einiges html im Selbststudium beigebracht und kämpfe mich nun ehrenamtlich durch ein Website-Projekt durch, in dem ich ein blödes CMS nutzen muss.
Entschuldige bitte, dass ich Deinen Satz...

Außerdem ist es ein Inline-Element, das auf der Grundlinie steht.
Darunter ist der Raum für Unterlängen (bspw. für g, p, …).

... leider nur ansatzweise verstehe.

[Matthias Apsel]

Om nah hoo pez nyeetz, Arne!

Entschuldige bitte, dass ich Deinen Satz...

Außerdem ist es ein Inline-Element, das auf der Grundlinie steht.
Darunter ist der Raum für Unterlängen (bspw. für g, p, …).
... leider nur ansatzweise verstehe.

Deshalb musst du dich nicht entschuldigen. Du hättest es auch in deiner Antwort so konkret schreiben können, statt von Telegrammstil zu schreiben.

Der Raum, der für die Unterlängen (Buchstaben, die bis in den Keller gehen, g beispielsweise im Gegensatz zu e) reserviert wird, ist dein unerwünschter Abstand. Indem du dem Element display: block zuweist, kannst du dieses Verhalten unterbinden.

Matthias

[ChrisB]

Hi,

Vermeide Inline-Styles! Gib sämtliche Darstellung im Stylesheet an!

Würde ich ja gerne, aber das Problem ist, dass ich in dem Stylesheet nichts machen kann. Das ist vom Anbieter vorgegeben. Ich kann nur versuchen, irgendwelche Workarounds innerhalb des CMS zu finden.

*Warum* ist das so?

Jedes ordentliche CMS sollte die Möglichkeit bieten, Stylesheets entweder zu ändern, oder zusätzliche eigene Stylesheets zu nutzen.

Eine solche Einschränkung (so sie denn tatsächlich existiert), wäre ziemlich unsinnig. Also rede mit dem Verantwortlichen, dass er sie beseitigen möge.

MfG ChrisB