26.04.2025, 01:26
Sprache ändern
Registrieren
Anmelden
Sie sind nicht angemeldet.
Re: Html Bilder nebeneinander anordnen
Montag, 12. September 2005, 12:18
das line bild soll ne feste und das andere bild ne variable breite haben?
in css bietet sich das an, um mehrere bilder nebeneinander anzuordnen (tabellen sind nicht mehr empfehlenswert):
mit folgendem im stylesheet:
dadurch werden so viele bilder wie möglich zentriert nebeneinander dargestellt, was nicht passt, kommt in eine neue zeile.
in css bietet sich das an, um mehrere bilder nebeneinander anzuordnen (tabellen sind nicht mehr empfehlenswert):
|
Quellcode |
1 2 3 4 5 |
<div class="imagerow"> <img ... /> <img ... /> <img ... /> </div> |
mit folgendem im stylesheet:
|
|
Quellcode |
1 2 3 4 |
div.imagerow {
margin: 1em 0; /* je nach wunsch */
text-align: center;
}
|
dadurch werden so viele bilder wie möglich zentriert nebeneinander dargestellt, was nicht passt, kommt in eine neue zeile.
Re: Html Bilder nebeneinander anordnen
Montag, 12. September 2005, 13:06
jo, das ist auch der falsche anstatz. das bild zum auffüllen schneidest du erstmal auf eine breite von einem pixel zu, denn das wiederholt sich ohnehin. dann verwendest du es als hintergrundbild mit wiederholung in horizontaler richtung. das zweite bild kannst du dann innerhalb dieses bereichs platzieren, entweder als normales bild oder als hintergrundbild. letzteres ist mein favorit, da man dessen namen und platzierung in das stylesheet auslagern kann, und es gehört ja zum style und nicht zum inhalt. so kann man auch mehrere stylesheets zum tauschen anbieten und dann etwa ein anderes kopfbild verwenden.
xhtml
css
du kannst das bild auch etwas vom linken rand abrücken, etwa um die ladezeit durch abschneiden des ohnehin wiederholten randes vom logo zu verkürzen und wieder ein padding zu schaffen. wie das geht, verrät selfhtml zu background-position (was man auch in background: einfügen kann).
xhtml
|
|
Quellcode |
1 |
<div id="header"><div></div></div> |
css
|
|
Quellcode |
1 2 3 4 5 6 7 8 |
#header {
background: url('header-back.png') repeat-x;
width: 100%;
height: 100px;
}
#header div {
background: url('header-logo.png') no-repeat;
}
|
du kannst das bild auch etwas vom linken rand abrücken, etwa um die ladezeit durch abschneiden des ohnehin wiederholten randes vom logo zu verkürzen und wieder ein padding zu schaffen. wie das geht, verrät selfhtml zu background-position (was man auch in background: einfügen kann).