Grafik

[Jersey]

Hallo,
bin gerade dabei mir Html selber beizubringen und stoße dabei immer wieder auf kleine oder große Hindernisse, die ich meistens, nach langem Suchen selber herausfinde, aber jetzt komm ich nicht mehr weiter. Die Sache ist - glaube ich - eigentlich ziemlich simpel, aber nunja, man sagt ja, dass es keine dummen Fragen gibt!
Also, arbeite gerade mit Grafiken. Die sind alle eben nicht gleich groß und laden sich auch nur in ihrer Größe. Ich hätte sie aber gerne alle gleich groß ohne sie dabei vorher bearbeiten zu müssen! Bin auf der Suche nach etwas wie einem "Rahmen", in den ich das Bild reinziehen kann. Wie bekomme ich das hin?
Habe es mit Folgendem versucht:
<div style="float:left; width:3,6cm; heigth:5cm; border:2px solid #FFFFFF;">
...aber klappt nicht.

[EKKi]

Mahlzeit Jersey,

Also, arbeite gerade mit Grafiken. Die sind alle eben nicht gleich groß und laden sich auch nur in ihrer Größe. Ich hätte sie aber gerne alle gleich groß ohne sie dabei vorher bearbeiten zu müssen! Bin auf der Suche nach etwas wie einem "Rahmen", in den ich das Bild reinziehen kann. Wie bekomme ich das hin?

Indem Du http://de.selfhtml.org/html/grafiken/einbinden.htm#breite_hoehe@title=angibst, mit welcher Breite und Höhe der Browser die Grafik anzeigen soll.

Habe es mit Folgendem versucht:
<div style="float:left; width:3,6cm; heigth:5cm; border:2px solid #FFFFFF;">
...aber klappt nicht.

Natürlich nicht:

1.) Divitis ist überflüssig, Du kannst auch das <img> <http://de.selfhtml.org/grafiken/ausrichten.htm#css@title=direkt formatieren>.

2.) Eine Breitenangabe wie "3,6cm" ist einerseits falsch (CSS erwartet als Dezimaltrenner einen Punkt) und andererseits ungünstig (woher soll der Browser wissen, wie breit 3,6 cm in Pixeln sind?

MfG,
EKKi

[Jersey]

Hi Ekki,

ok, das macht Sinn @2., aber wenn ich die Breite und Höhe im Image <img> angebe und jedem Bild dieselbe Größe zuweise, dann schiebt er das Bild (wenn das nicht die Bildgröße ist und der angegebne Wert z.B. kleiner ist) unproportional zusammen. Gibts keinen Rahmen, den ich erstellen kann um die Bilder dort zu laden?

Grüße, Jersey

[EKKi]

Mahlzeit Jersey,

ok, das macht Sinn @2., aber wenn ich die Breite und Höhe im Image <img> angebe und jedem Bild dieselbe Größe zuweise, dann schiebt er das Bild (wenn das nicht die Bildgröße ist und der angegebne Wert z.B. kleiner ist) unproportional zusammen.

Sicher - Du sagst dem Browser ja, mit welchen Proportionen er das Bild darstellen soll ... wenn es andere hat, muss er es halt "quetschen" oder "ziehen".

Gibts keinen Rahmen, den ich erstellen kann um die Bilder dort zu laden?

Was genau willst Du? Einfach Bilder in eine Seite einbinden? Innerhalb des Fließtextes? Eine Bildergalerie? Ein Album? Was meinst Du mit "Rahmen, in dem man Bilder laden kann"?

Keine Arme - keine Kekse, hellsehen kann hier keiner.

MfG,
EKKi

[Jersey]

Hi EKKI,

also, ich möchte sowas wie ne kleine Gallerie machen und alle Bilder sollen dieselbe Größe haben. Sprich ich hätte gerne einen "Rahmen", in einer bestimmten Größe, den ich mir sooft vervielfältigen kann, wie ich will und dem ich bestimmte Positionen zuordnen kann um mir dann darein meine Bilder zu laden, die dann letztendlich alle dieselbe Größe, das selbe Format, wie auch immer Du dazu sagen willst, haben.
Und verziehen sollen sie sich ja nicht!

Jersey

[EKKi]

Mahlzeit Jersey,

also, ich möchte sowas wie ne kleine Gallerie machen und alle Bilder sollen dieselbe Größe haben.

Hast Du mal nach den Begriffen "galerie", "gallery" oder "lightbox" (käme u.U. für Dich in Frage?) gegooglet oder hier im Forumsarchiv gesucht?

Es gibt haufenweise Lösungen, die genau das können, was Du möchtest. Und zur Not kannst Du Dir bei denen immer noch abschauen, wie es funktioniert und selbst nachbauen ...

Sprich ich hätte gerne einen "Rahmen", in einer bestimmten Größe, den ich mir sooft vervielfältigen kann, wie ich will und dem ich bestimmte Positionen zuordnen kann um mir dann darein meine Bilder zu laden, die dann letztendlich alle dieselbe Größe, das selbe Format, wie auch immer Du dazu sagen willst, haben.
Und verziehen sollen sie sich ja nicht!

Du widersprichst Dir. Wenn Du möchtest, dass Deine Bilder alle dieselbe Größe bzw. dasselbe Format haben, dann werden sich alle Bilder, die nicht die von Dir vorgegebene Größe bzw. das vorgegebene Format (z.B. Hoch- oder Querformat, Seitenverhältnis o.ä.) haben, entsprechend verziehen.

Ausnahme: Du definierst einen quadratischen Rahmen (z.B. mit Hilfe eines <div>s), der als Seitenlänge die größte bei Deinen Bildern vorkommende Breite bzw. Höhe hat. Wenn Du in diesem Rahmen dann horizontal und vertikal zentriert Deine Bilder anzeigst, sollten alle wie z.B. Dias aussehen ...

MfG,
EKKi

[Hi EKKI]

"Ausnahme: Du definierst einen quadratischen Rahmen (z.B. mit Hilfe eines <div>s), der als Seitenlänge die größte bei Deinen Bildern vorkommende Breite bzw. Höhe hat. Wenn Du in diesem Rahmen dann horizontal und vertikal zentriert Deine Bilder anzeigst, sollten alle wie z.B. Dias aussehen ..."

ja, genauso wollte ichs machen, aber es hat nicht geklappt, weil ich irgendetwas falsch mache.
Kannst Du mir vielleicht mal den Div-Tag schreiben, wie der aussieht, wenn mein Bild die Größe 150 px x 200 px haben soll , einen weißen Rahmen mit 2px und mein Bild z.B rot.jgp heißt?

das würde mir total helfen, weil ich bin echt ein Grünling, was Html angeht.

Jersey

[Jersey]

hehe, ups :D

[EKKi]

Mahlzeit Hi EKKI,

Kannst Du mir vielleicht mal den Div-Tag schreiben, wie der aussieht, wenn mein Bild die Größe 150 px x 200 px haben soll , einen weißen Rahmen mit 2px und mein Bild z.B rot.jgp heißt?

Versuch einfach mal, die genannten Anforderungen zu abstrahieren und strukturiert aufzuschreiben:

Du brauchst also ein <div>, das die folgenden Eigenschaften hat:

• es soll 200px hoch sein
• es soll 200px breit sein
• es soll einen weißen, 2 px breiten Rahmen haben
• es soll vermutlich einen weißen Hintergrund haben
• der Inhalt soll horizontal zentriert sein
• der Inhalt soll vertikal zentriert sein

So spontan würde mir dabei z.B. folgende Formatierung einfallen:

<style type="text/css">  
  
[code lang=css]div.dia {  
  height:           200px;  
  width:            200px;  
  border:           2px solid #fff;  
  background-color: #fff;  
  text-align:       center;  
  vertical-align:   middle;  
}

</style>
[...]
<div class="dia"><img src="rot.jpg" alt="Irgendwas Rotes anscheinend"></div>[/code]

Wenn's das noch nicht ist, probier mit Hilfe von http://de.selfhtml.org/css/eigenschaften/index.htm@title=SELFHTML bisschen aus.

das würde mir total helfen, weil ich bin echt ein Grünling, was Html angeht.

Hier hilft Dir auch eher http://de.selfhtml.org/css/eigenschaften/index.htm@title=CSS weiter ...

MfG,
EKKi