Wie kann ich bilder in einer Reihe anzeigen (waagrecht).
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bereich
bild
boxen
code
container
element
frage
guru
header
http
lernen
list
liste
packen
plazieren
tabelle
tag
type
url
versuchen
-
Wie kann ich tag/bild">bilder in einer Reihe anzeigen (waagrecht). Bitte Quelltext
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
benediktk schrieb:
quelltext gibts überall (google), oder aber willst dazu lernen. dann:
Wie kann ich bilder in einer Reihe anzeigen (waagrecht). Bitte Quelltext
floatutorial oder w3schools ...
Beitrag zuletzt geändert: 25.3.2012 10:49:47 von hemiolos -
Ich glaube (ich bin nicht so der HTML/CSS Guru) das einfachste wäre sie in eine Box zu packen, und diese zu strecken, oder zu platzieren:
<div> <img src="blah1.jpg"/> <img src="blah2.jpg"/> <img src="blah3.jpg"/> <img src="blah4.jpg"/> <img src="blah5.jpg"/> </div>
Dann sollte es in der Box entsprechend sein. Ansonsten kannst du das auch mit einer Tabelle machen, ist aber nicht so optimal glaube ich, aber funktional:
<table> <tr> <td><img src="blah1.jpg"/></td> <td><img src="blah2.jpg"/></td> <td><img src="blah3.jpg"/></td> <td><img src="blah4.jpg"/></td> <td><img src="blah5.jpg"/></td> </tr> </table>
Ein Link um sowas einfach zu lernen: http://de.html.net/
Hoffe es hilft.
Liebe Grüße -
ggamee schrieb:
und genau dadurch entsteht das sogenannte 'divitis' was nach genauem betrachten nur schlecht ist.
Ich glaube (ich bin nicht so der HTML/CSS Guru) das einfachste wäre sie in eine Box zu packen, und diese zu strecken, oder zu platzieren:
<div> <img src="blah1.jpg"/> ... </div>
und das ist seit css (also seit jahren) sowieso indiskutabel!
Dann sollte es in der Box entsprechend sein. Ansonsten kannst du das auch mit einer Tabelle machen, ist aber nicht so optimal glaube ich, aber funktional:
<table> <tr> <td><img src="blah1.jpg"/></td> ... </tr> </table>
(man sollte es zu mindest versuchen, leuten richtig zu beraten ;) -
Hallo
ich würde auch CSS anstatt Tabelle verwenden
im <head> Bereich:
<style type="text/css"> <!-- #content { text-align:center; margin:0px; padding:0px; } .bilder { margin:0 auto; padding:10px; width:600px; } .bilder img { float:left; margin:0px 10px 0px 0px; padding:0px; } --> </style>
im Content-Bereich:
<div id="content"> <div class="bilder"> <img src="blah1.jpg"/> <img src="blah2.jpg"/> <img src="blah3.jpg"/> <img src="blah4.jpg"/> </div> <div class="bilder"> <img src="blah5.jpg"/> <img src="blah6.jpg"/> <img src="blah7.jpg"/> <img src="blah8.jpg"/> </div> </div>
Die Anzahl der Bilder und in der Klasse .bilder musst Du halt die Breite anpassen
beachte auch, dass in diesem Beispiel
bei .bilder img jedes Bild 10 Pixel (Außen-) Abstand (rechts) hat
-
kreditwunsch schrieb:
womit wir schon wieder dort angekommen sind wo es dann heißt: 'divitis' und richtig beraten. (ja lesbares zu deuten ist nicht jedermanns sache ;)
...im Content-Bereich:
<div id="content"> <div class="bilder"> <img src="blah1.jpg"/> <img src="blah2.jpg"/> ... </div>
kleiner tipp von mir: bilder aneinader gereiht ist nichts anders, als eine liste (vorzüglicher weise <ul>) und das kannst dann stylen. -
tillpro schrieb:
und du zeigst uns hier gleich, wie du das nach belieben!! stylen kannst. wir lernen gerne alles mögliche dazu ;)
Warum nicht einfach so?...
und überhaupt: ist es dir klar wo du <img> haben darfst, aber auch, wo nicht? und was, wenn du justament dort <img> brauchst, wo du's nicht darfst?¿
fragen, fragen, fragen ... -
Bilder sind (normalerweise) Inline-Block-Elemente. Dadurch erzeugen sie keinen Zeilenumbruch. Und mehr war nicht gefragt! Wo schreibt der Fragestellende denn, dass er noch mehr mit dem Bild anfangen möchte?
Den <img />-Tag nutzt man normalerweise, wenn man Bilder/Grafiken darstellen möchte…
Mit freundlichen Grüßen
tillpro
Beitrag zuletzt geändert: 26.3.2012 13:11:57 von tillpro -
hemiolos schrieb:
kleiner tipp von mir: bilder aneinader gereiht ist nichts anders, als eine liste (vorzüglicher weise <ul>) und das kannst dann stylen.
ist es nich relativ egal, ob es im DIV oder LISTE steht ?
... LISTE braucht ja sogar noch eine Ebene mehr (<ul> und <li>)
und um ul / li für die Bilder zu "stylen" braucht es auch einen Container drum herum, (oder?)
CSS:
#content { text-align:center; margin:0px; padding:0px; } .bilderliste { width:600px; margin: 0 auto; padding:0px; } .bilderliste ul { list-tyle-type:none; margin:0px; padding:0px; } .bilderliste li { float:left; margin:0px 0px 0px 10px; padding:0px; }
<div id="content"> ... <div class="bilderliste"> <ul> <li> <img src="blah1.jpg"/> </li> <li> <img src="blah2.jpg"/> </li> <li> <img src="blah3.jpg"/> </li> <li> <img src="blah4.jpg"/> </li> </ul> </div> <div class="bilderliste"> <ul> <li> <img src="blah5.jpg"/> </li> <li> <img src="blah6.jpg"/> </li> <li> <img src="blah7.jpg"/> </li> <li> <img src="blah8.jpg"/> </li> </ul> </div> ... </div>
ich sehe da keinen Vorteil zu direkt IMG in DIV stylen ?!
PS:
wenn ich <ul.bilderliste> versuche, dann bekomme ich für ul den list-style-type nicht weg ?
... bin allerdings auch kein CSS Profi :)
-
sparsuche schrieb:
Weil das ja auch bedeuten würe, dass du eine Liste mit der Klasse bilderliste hättest. (Womit man sich übrigens den umschließenden Container sparen könnte).
wenn ich <ul.bilderliste> versuche, dann bekomme ich für ul den list-style-type nicht weg ?
... bin allerdings auch kein CSS Profi :)
Ob man hier jetzt eine Liste nimmt oder nicht kommt, denke ich, jetzt darauf an, ob es wirklich Sinn macht. Und das kann man so pauschal bestimmt nicht beantworten! -
tillpro schrieb:
keine ahnung, aber es freut mich dass du's weißt ;) ich möchte ihm aber sicher keine - noch so - verrükte ideeen verbieten.
Wo schreibt der Fragestellende denn, dass er noch mehr mit dem Bild anfangen möchte?
Den <img />-Tag nutzt man normalerweise, wenn man Bilder/Grafiken darstellen möchte…
diesen satz muss ich mir notieren, so dass ich ihn immer vor den augen habe!
ah ja! normalerweise:
- viele leute ziehen schnee von der straße durch die nase rein - normalerweise
- ich forme daraus handliche kügelchen, um sie normalerweise anderen an den kopp zu schmeißen
... normalerweise¿¿ normalerweise ein gefährlicher ausdruck.
Ob man hier jetzt eine Liste nimmt oder nicht kommt, denke ich, jetzt darauf an, ob es wirklich Sinn macht. Und das kann man so pauschal bestimmt nicht beantworten!
das ist richtig. richtig ist aber auch, dass man dafür bestimmt kein <div> braucht.
sparsuche schrieb:
es ist relativ egal, nur es ist relativ sinnfrei überall für alles einen eigenen section-container zu nehmen. (man braucht [normalerweise¿] für den heiligen gral, für einen dreispalter mit header und footer 5 <divs>, wenn fixe breite hat dann eben 6 [zum zentrieren] und kein stück mehr.)
ist es nich relativ egal, ob es im DIV oder LISTE steht ?
... LISTE braucht ja sogar noch eine Ebene mehr (<ul> und <li>)
genau!! oder!!. du brauchst für (ein) bild(er) keinen section-container um es/sie zu stylen.
und um ul / li für die Bilder zu "stylen" braucht es auch einen Container drum herum, (oder?)
z.b. html5 hat da genug andere sectionierende elemente: section, nav, article, aside;
aber auch flow-elemente wie: hgroup, header, footer ja und figure + figcaption (was ich in kombination auch empfehlen würde für seine bilder, bei bedarf natürlich), &c. ...
wenn man all das hier in betracht zieht, dann brauchst du für den ferflixten 3-spalter keine 5 o. 6 divs mehr!
und wenn jemand jetzt sagt 'das geht aber mit ie nicht', ja dann können wir auch - schon wieder einmal wegen M$ - paar jahrzehnte mützchen machen (gut für die schönheit ;)
und also nochmals zum schluss (meinerseits) darf ich an den ausdruck divitis aufmerksam machen und gleich ein beispielchen zum thema (normalerweise¿ ;) zum reinziehen. (google kennt noch ~700k seiten dazu.) -
@hemiolos: Toll, was Du hier für Romane startest! Ich bin beeindruckt!
Fakt ist, daß tillpro die Frage des TE richtig beantwortet hat. Niemand weiß, welche Umstände sonst noch interessant sind. Ergo kann man sich, gerade, weil sich der TE seitdem nicht mehr zur Problematik geäußert hat, jegliche Vermutungen und weiterführenden Diskussionen sparen. Wenn Du das nicht kannst, ist das ausschließlich dein Problem! Also pinkel hier bitte niemandem ans Bein.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
