mehrere Bilder mit externer CSS Datei positionieren

[Kowkase]

Hallo Leute,

vielleicht hat jemand einen guten Tip wie man mittels einer externen css Datei mehrere Bilder auf einer Seite definiert und positioniert.
Das einfache Einbinden als Background-image ist hier offentsichtlich keine Lösung, da ich damit:
a) nur ein Bild einbinden kann und
b) die Positionierung irgendwie auf die Grundvarianten wie center, top etc, begrenzt sind. Ich will jedoch bei Garfiken unabhängig voneinander definieren.

Tut sowas gehen tun? Und wenn ja wie?

Dank & Gruß, Kowkase

[webmichl]

#erstesbild { position: absolute; top: 30px; left: 100px; }
#zweitesbild { position: absolute; bottom: 250px; right: 26px; }

...

<img id="erstesbild" src="bild1.jpg">
<img id="zweitesbild" src="bild2.jpg">


So in etwa?

[walter]

Grundsätzlich bindest du erst mal dein Bild mit dem img-Tag ganz normal ein. Dann weist du jedem Bild eine Klasse zu. In der CSS-Datei gibst du dann den einzelnen Klassen die nötigen Attribute mit.

Für die Positionierung selbst gibt es dann mehrere Möglichkeiten. Entweder absolut, relativ, mit Abständen zueinander...

Dazu schaust du dir mal die Links an, die ich unten poste.

Hier noch ein Beispiel wies aussehen könnte mit Abständen zueinander, ohne zu wissen wie du positionieren möchtest:

HTML:
<img class="bild1" src="foto1.jpg" alt="Ich und mein Freund">
<img class="bild2" src="foto2.jpg" alt="Am Meer mit Peter">

CSS:
.bild1{margin-right:30px;}

Links für Grundlagen:
http://de.selfhtml.org/html/grafiken/index.htm
http://de.selfhtml.org/css/eigenscha...tionierung.htm

[Kowkase]

ich werde Dich in mein Abendgebet mit einschliessen und hernach auf Dich ein Bier öffnen (freu)

große Klasse, wusste gar nicht, dass man Styles auch mit Routen beginnen kann. Ich ging immer davon aus, dass diese Klassendefinitionen mit nem Pünktchen anfangen.

1000 Dank jedenfalls

[webmichl]

# = hash = ID-Kennung, darf nur einmal im Dokument auftauchen

. = Punkt = Klassenkennung, darf beliebig oft verwendet werden. Macht bei ner absoluten Positionierung aber wenig Sinn....

[Kowkase]

@ Walter

besten Dank noch für Deine erweiterte Erklärung, ich habs mir rauskopiert. Ich schau zwar ne Menge in Büchern nach und habe auch im Selfhtml schon viel rumgeblättert, aber gerade das Thema der externen CSS-Dateien finde ich besonders spannend und leider zu wenig ausgeführt.

Jemand meinte mal man könne auch div styles in den externen Dateien verwenden. Richtig/Falsch?

[321]

Zitat von Kowkase

Richtig/Falsch?

Richtig!

Du kannst jede Style-Definition Intern und Extern haben.
Für extern spricht die wiederholte Verwendung in mehreren Seiten.

Du kannst auch Inline-Styles definieren, dh. in dem stilisierten Element zB.
<p style="color: red">rote Schrift</span>
und das mit jedem HTML-Element, das mind. eine Eigenschaft hat.

[Kowkase]

erfolgt hier dann die Zuweisung auch über die Klassen- bzw. hash (Dank an Webmichl) definition?

Ich frage das, weil Du in Deinem Beispiel keinen bestimmten Absatz definiert hast! Würde dann nicht jeder Absatz nun in dieser Formatierung dargestellt?

[321]

Zitat von Kowkase

erfolgt hier dann die Zuweisung auch über die Klassen- bzw. hash (Dank an Webmichl) definition?

Ich frage das, weil Du in Deinem Beispiel keinen bestimmten Absatz definiert hast! Würde dann nicht jeder Absatz nun in dieser Formatierung dargestellt?

Intern oder extern werden gleichermassen zugeordnet, es ist nur woanders festgehlten.

Beim Inline betrifft es das Tag (im Beispiel <p ..> ) in welchem der Style=" .." notiert ist und braucht somit keine Class oder Id.

[walter]

Sachen die du öfter brauchst weist du im Endeffekt Klassen zu, "eindeutige" Definitionen für z.B. ein bestimmtes Bild machst du mit id.
Außerdem kannst du auch bestimmten HTML-Tags styles zentral zuweisen.
Z.B. das jede h1-Überschrift Größe 12px hat, rot ist und unterstrichen.

Ziel sollte meiner Meinung nach sein soviel wie möglich style-Definitionen aus dem HTML-Dokument raus zu bekommen.

Gewissermaßen Design und Inhalt zu trennen.