| Autor |
Nachricht |
Carl Carlson
Threadersteller
Dabei seit: 19.04.2009
Ort: -
Alter: -
Geschlecht: 
|
Verfasst So 14.02.2010 15:08
Titel CSS: Div mit Infotext über Bild |
  |
|
Hi,
ich habe auf meiner Website Bilder (hier blau und rot), über die ich am unteren Rand eine Box mit Informationen legen will. Die Box soll also den unteren Teil des Bildes überdecken (und dann später vielleicht transparent werden):
Ich habe allerdings noch nicht viel Erfahrung mit CSS und schaffe es nicht, dass die Box die richige Breite hat (bzw. nur mit der Angabe von "452px") und an der richtigen Stelle sitzt. So sieht das Ganze bisher aus (die Box sitzt über dem falschen Bild):
| Code: | HTML:
<img src="/img1.jpg" width="500" height="707" />
<div class="pic_info">
<h2>Name des Bildes</h2>
Hier soll später eine beschreibung für das entsprechende Bild stehen.
</div><br class="spacer" />
<img src="/img2.jpg" width="500" height="707" /><br class="spacer" />
CSS:
.pic_info {
color:#fff;
background-color: #000;
padding: 2em;
position: absolute;
width: 452px;
} |
Ich habe auch schon andere CSS-Angaben ausprobiert, allerdings ist die Box dann irgendwo im Dokument rumgeflogen...
|
|
| |
  |
 |
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst So 14.02.2010 15:49
Titel
|
|
|
1. einen div-conatainer um bild und beschreibung mit position: relative
2. dann bild in den container
3. dann beschreibung in einen wiederum eigenen container unters bild mit position: absolute; bottom: 0px; left: 0px;
das ist dein ansatz 
|
|
| |
 |
|
|
Anzeige
|
|
|
Carl Carlson
Threadersteller
Dabei seit: 19.04.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 14.02.2010 15:52
Titel
|
|
|
| pixelpapst303 hat geschrieben: | 1. einen div-conatainer um bild und beschreibung mit position: relative
2. dann bild in den container
3. dann beschreibung in einen wiederum eigenen container unters bild mit position: absolute; bottom: 0px; left: 0px;
das ist dein ansatz |
Merci beaucoup. Werde ich direkt mal ausprobieren...
|
|
| |
|
|
Carl Carlson
Threadersteller
Dabei seit: 19.04.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 14.02.2010 16:42
Titel
|
|
|
Ich habe das jetzt so gemacht:
| Code: | HTML:
<div class="pic_info">
<img src="/img1.jpg" width="500" height="707" />
<div class="pic_text">
<h2>Name des Bildes</h2>
Hier soll später eine beschreibung für das entsprechende Bild stehen.
</div>
</div><br class="spacer" />
<img src="/img2.jpg" width="500" height="707" /><br class="spacer" />
CSS:
.pix_info {
position: relative;
}
.pic_text {
color:#fff;
background-color: #aa1919;
padding: 2em;
position: absolute;
bottom: 0px;
left: 0px;
} |
Jetzt habe ich aber zwei weitere Probleme:
1. Die Bilder (und Infotexte) befinden sich in einem weiteren Container content (position: relative). Die Box mit dem Infotext richtet sich jetzt nicht an pic_info aus, sondern an content.
2. Um Platz zwischen die Bilder zu bekommen, habe ich bisher ein "<br class="spacer" />" mit margin-bottom: 10px benutzt. Allerdings ändert sich durch Einfügen der Infobox der so zwischen den Bildern erzielte Abstand merkwürdigerweise. Aber da dieser Abstandhalter sowieso nur in Firefox und nicht im IE funktioniert hat, frage ich mal so: Gibt es eine bessere Variante um Platz zwischen die einzelnen Bilder zubekommen als ein <br />??
|
|
| |
|
|
easteregg
Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst So 14.02.2010 17:17
Titel
|
|
|
Dein CSS-Selektor sollte auch pic_info heißen, nicht pix_info.
| Carl Carlson hat geschrieben: | | 2. Um Platz zwischen die Bilder zu bekommen, habe ich bisher ein "<br class="spacer" />" mit margin-bottom: 10px benutzt. Allerdings ändert sich durch Einfügen der Infobox der so zwischen den Bildern erzielte Abstand merkwürdigerweise. Aber da dieser Abstandhalter sowieso nur in Firefox und nicht im IE funktioniert hat, frage ich mal so: Gibt es eine bessere Variante um Platz zwischen die einzelnen Bilder zubekommen als ein <br />?? |
Beim Bild direkt style einfügen. Beispiel: | Code: | | <img src="/img2.jpg" style="width: 500px; height: 707px; margin-top: 10px;" /> |
|
|
| |
|
|
Carl Carlson
Threadersteller
Dabei seit: 19.04.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 14.02.2010 21:51
Titel
|
|
|
Verdammt...auf die Idee, nach Rechtschreibfehlern zu suchen, hätte ich auch selber drauf kommen können 
In Firefox klappts jetzt. (Mitlerweile auch die JavaScript-Ergänzung, dass die Infobox nur beim Mit-Der-Maus-Übers-Bild-Fahren sichtbar ist.)
Nur im IE6 (dem einzigen anderen, zZ auf meinem Rechner installierten Browser) wird die Infobox erst am Ende der Seite gezeigt, also erst nach dem restlichen Inhalt...
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Suche script für Infotext bei mouseover Bild. Der Text...
Einen Infotext am Link einblenden
Infotext bei Mouseover über Text
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?
|
|
Willkommen auf dem Portal für Mediengestalter
