Frage Bild Position verändern ohne dabei...

[HTML-Donnie]

Hallo html.de,

das ist mein erster Post in diesem Forum, freut mich ein Teil von euch zu sein!

Hoffe ihr könnt mir helfen, es geht um folgendes:

ich bastel gerade an einer Seite ähnlich wie Imgur, ich will Bilder auf dieser Webseite haben die die Leute zum lachen bringt oder zum Nachdenken anregt. Das Problem das ich gerade habe ist das wenn ich ein Bild an eine Stelle bringen will, also seine Position verändere, die ganzen Buttons bzw die ganze Seite sich mitbewegt und sich dem Bild anpasst (Tut mir leid ich weiß nicht wie ich das sonst erläutern soll). Also im Prinzip möchte ich das eine Bild verschieben ohne dabei die Seite mit zu verschieben.

Ich hänge mal ein Bild an vlt. versteht ihr dadurch was ich brauche..


Ps: Es gibt doch sicher auch besser möglichkeiten (viele) Bilder schön auf eine Seite zu packen, oder? Würde diese Bilder später gern auch mit Links ausstatten die zu einer internen Seite führen.

schaut euch mal <a href="http://www.imgur.com> IMGUR.COM </a> an damit ihr versteht wie ungefähr ich mir das vorstelle :)

 

[MrMurphy]

Hallo

Es ist schwierig dir zu helfen, da weder deine HTML-/CSS-Kenntnisse bekannt sind noch dein bisheriger Quelltext.

Aktuell solltest du HTML5 und CSS3 lernen und anwenden.

Die Navigation und die Bilder kommen dann jeweils in einen Container. Die Navigation zum Beispiel in ein nav-Element, die Bilder in ein section-Element. Dadurch werden sie grundsätzlich untereinander angezeigt.

Damit die Bilder verlinkt werden können kommen sie in a-Elemente.

Das Aussehen und die Anordnung werden dann mittels CSS bestimmt.

Gruss

MrMurphy

 

[Tronjer]

Ps: Es gibt doch sicher auch besser möglichkeiten (viele) Bilder schön auf eine Seite zu packen, oder?

Das ist sogar relativ einfach, weil es dafür fertige Plugins gibt, die im Gegensatz zur hässlichen Tabellenoptik von Tumblr auch Bilder unterschiedlicher Ausmaße abstandsfrei anordnen können.

http://isotope.metafizzy.co/layout-modes.html

 

[HTML-Donnie]

Danke erstmal an euch beide für eure Antworten!

@MrMurphy Kommt Canvas dem nahe was du meinst? Damit könnte ich ja theoretisch auch eine Fläsche nur für ein Bild bestimmen.

Und sorry wegen dem Quellcode war schon ziemlich spät und ich war müde

@Tronjer Sieht sehr interessant aus, ich schau es mir mal an! Danke dir

 

[semmelsamu]

Einfach die Position mit CSS auf absolute setzen:

<style>
#img-absolute {
   position: absolute;
   width: 400;
   height: 300;
}
</style>
<img src="verzeichnis/bild-name.jpg" id="img-absolute" />

Dann kannst du ganz einfach mit margin den Abstand vom oberen linken Bildschirmeck verändern (in das Style-Tag einfügen) :

margin-top: 50px;
margin-left: 30px;