• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder beliebig platzieren?

Niklas

Niklas

Neues Mitglied
Nabend,

Hab da nochmal ne Frage,ich glaube ich habe sowas ähnliches schönmal gefragt aber ich habe es immernoch nicht geschafft ein Bild belibig auf meiner Seite zu platzieren.Wusst nicht ob man das mit HTML oder CSS macht habs mal bei CSS gepostet.

MFG Niklas
 
Ein Bild, das Inhalt enthält, bindest du über den <img />-Tag ein.
Hintergrundbilder über background-image: ; über CSS.


Durch Positions oder margin-Angaben kannst du das Bild dann positionieren, dort wo du es hinhaben möchtest.

Wenn du z.B. noch Text drumherum haben willst, brauchst du noch float o.Ä.

Hilft dir das?
 
Damit definierst du für alle imgs deiner Seite einen Abstand zu anderen Elementen von 0 :)

Überleg dir erst, wo du dein Bild platzieren möchtest. Erst Inhalt, dann Design.

Mit margin bestimmst du den Abstand von Elementen zu anderen Elementen.
 
Nein, padding ist der Abstand vom Bild zum Rahmen.

Gib doch mal deinen Code, sonst kann man dir schlecht helfen, wenn man gar nciht genau weiß, was du meinst :)
 
HTML Code

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Welt der Browsergames</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<img src="WeltderBrowsergames.png" alt="Welt der Browsergames" />
</body>
</html>

CSS Code

Code: 
body {
background-color: #000000;
background-repeat: no-repeat
}
 
Um das Bild zu platzieren solltest du ihm eine id zuordnen, an der du es für css identifizieren kannst.
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Welt der Browsergames</title>
<style type="text/css">
img#Bild
{
    position: absolute; oder relative; (je nach dem ob mans am Browserrand oder an den umliegenden Elementen ausrichten will)
    top: angabe wie weit es weg sein soll;
    left: ebenso;
}

</script>
</head>
<body>
<img id="Bild" src="WeltderBrowsergames.png" alt="Welt der Browsergames" />
</body>
</html>
 
Zuletzt bearbeitet:
sag das doch gleich
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Welt der Browsergames</title>
<style type="text/css">
body
{
    backround-image: url(DEIN BILD)
    position: center center;

}

</style>
</head>
<body>

</body>
</html>
 
Niklas schrieb:
HTML Code

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Welt der Browsergames</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<img src="WeltderBrowsergames.png" alt="Welt der Browsergames" />
</body>
</html>
Zum Vergrößern anklicken....

Hallo Niklas,

ich gehe nicht davon aus, dass das Deine komplette Website sein soll?

Schreib erstmal Deine Inhalte, zeichne sie sinnvoll aus - und mach Dir
dann Gedanken um Layout und Positionierungen...

Und, noch ein Tipp: wenn Du durch das große WWW surfst, schau ab und
zu mal in den Quelltext von Seiten und ins CSS - da siehst Du zwar viele
Grausamkeiten, ab und zu aber auch etwas richtig gutes, aus dem Du das
ein oder andere lernen kannst...
Abschreiben ist verboten, aber Anregungen holen darfst Du Dir...;-)

Grüße
Bernhard

Imbericle schrieb:
Code: 
{
    position: absolute;
}
Zum Vergrößern anklicken....

Tut mir leid, wenn ich es heute schon wieder sage: position:absolute;
sollte immer nur die letzte aller infrage kommenden Möglichkeiten sein!

Grüße
Bernhard
 
Imbericle schrieb:
Um das Bild zu platzieren solltest du ihm eine id zuordnen, an der du es für css identifizieren kannst.
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Welt der Browsergames</title>
<style type="text/css">
img#bild
{
    position: absolute;
    top: angabe wie weit es weg sein soll;
    left: ebenso;
}

</script>
</head>
<body>
<img id="Bild" src="WeltderBrowsergames.png" alt="Welt der Browsergames" />
</body>
</html>
Zum Vergrößern anklicken....


ID und CLASS sind case-sensitiv. D.h. es kommt auf die Groß- und Kleinschreibung an, bitte drauf achten ;)


Wenn du Inhalt im Bild hast nimmst du einen img tag, gibst dem bild eine klasse und machst dann das gleiche :)
 
Danke Toastbroat, ist mir bewusst, hab mich da dann vertippt, ich änders gleich.

Bernhard schrieb:
Tut mir leid, wenn ich es heute schon wieder sage: position:absolute;
sollte immer nur die letzte aller infrage kommenden Möglichkeiten sein!
Zum Vergrößern anklicken....

Naja allerletzte Möglichkeit ist übertrieben, man muss sich über die Risiken und Nebenwirkungen im Klaren sein, dann geht das schon, wenn es im Falle des Falles Sinn macht ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben