10.06.2025, 06:51
Sprache ändern
Registrieren
Anmelden
Sie sind nicht angemeldet.
Lieber Besucher, herzlich willkommen bei: Aqua Computer Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.
Y0Gi
God
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.
Y0Gi
God
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).