Bild mit Text positionieren

[Cathi001]

Brauch erneut Hiiilllfe :)
Also ich möchte gerne ein Bild neben einen Text setzten. Also ich habe paar spielregel aufgelistet vom handball un möchte gerne rechts daneben ein Bild setzen mit css. in meine spielregeln.html datei habe ich oben diese Zeile eingefügt: <link rel="stylesheet" type="text/css" href="layout.css" media="all" />

das gleiche habe ich aber schon bei meine home seite also die habe ich index.html genannt eingefügt. Woher weiß der pc jetzt wenn ich des bild verrücken will das ich die seite mit den spielregeln meine??? Also ich weiß überhaupt nicht was ich in der css datei schreiben soll. hab auch bei css4you nichts gefunden...

 

[prm]

Also ich möchte gerne ein Bild neben einen Text setzten.

Text zu Bildern anordnen

Wenn sich das Bild immer an der gleichen Stelle befinden soll (z.B. rechts oder Links, dann kannst du zwecks Anordnung sogenannte CSS-Klassen verwenden und diese seitenübergreifend verwenden.

Beispiel:
CSS:

.links {
float: left;
margin-right: 10px;
}

HTML:

<img class="links" src="deinbild.jpg" width="200" height="200" border="0" alt="bildbezeichnung">

 

[Cathi001]

okay dankeschööön hab jetzt diesen link hier genommen

<img style="float: right; margin-left: 10px;" src="logo.jpg" width="350" height="275" border="0" alt="logo">
<p style="margin: 0;">

das bild ist jedoch noch ein bisschen weit am rand wie kann ich das noch ein bisschen rüber schieben?

 

[prm]

indem du den margin-Wert veränderst.
Je nachdem welcher Rand es sein soll gibt es
margin-top
margin-left
margin-right
margin-bottom

 

[Cathi001]

ah okay... ja des hat jetzt eig. geklappt aber hab grad festgestellt das ich irgendwie alles mit html mache und nicht mit css und man soll ja diese ganzen "style" sachen mit css machen. weil wenn ich in meinem css des ganze lösch dann verändert sich auch nix.

 

[prm]

Richtig!
Deshalb definiere für die gesamten Style-Angaben eine CSS-Klasse und weise die dem Image zu (siehe mein Post von 19.24 Uhr)

 

[Cathi001]

jaa sorry des mit denen class versteh ich net un auf dem link den du mitgeschickt hast ist es auch nicht erklärt naja werd mal weiter schauen

 

[prm]

Klick den Link nochmal und aktualisiere deinen Browser.
Ich habe die Anleitung dank deines Hinweises überarbeitet.

 

[Cathi001]

ich kapiers einfach nicht, weil bei denen Erläuterungen sind ja auch immer nur html codes dabei und dann macht man ja immer alles in html nur dieser codes ist für css

.links {
float: left;
margin-right: 10px;
}

aber den kann ich bei mir auch weglassen un es verändert sich nichts...

 

[prm]

Wenn du das Bild links und rechts daneben den Text haben willst:
Dann definierst du in der CSS-Datei

.links {
float: left;
margin-right: 10px;
}

Das ist eine sogenannte CSS-Klasse, erkennbar an dem vorangestellten Punkt. Sie kann je Seite mehrmals verwendet werden.

Im HTML-Teil weist du diese Klasse dann dem image zu mit (Beispiel):

<img class="links" src="banner.png" width="234" height="60" border="0" alt="Banner">
<p> Text rechts neben dem Bild</p>

Wenn das bei dir nicht klappt, dann hast du entweder die CSS-Datei falsch eingebunden oder es liegt irgend ein anderer Fehler vor.
Am besten wäre es, wenn du dann mal einen Link zu deiner Problemseite reinstellst. Falls sie noch nicht online ist, besorg dir kostenlosen Webspace zum Testen, z.B. bei funpic.de oder bplaced.net