Bilder verschieben (Mitte)

Hallo,

Es geht sich um folgendes.
Ich möchte die Bilder meiner Willkommens-Page in die Mitte verschieben.
Also das sie bei egal welcher Auflösung immer in der Mitte sind.

Wie kann ich dies am besten realisieren?
(und z.B. auf meinem iPhone werden die Bilder untereinander dargestellt)

Info : es sind 2 Bilder a 512x768px nebeneinander ( the-x-clan.com/ )

Danke für die antworten =)

Hi,

a) Bei 1024*768 Pixeln verrutscht das zweite Bild nach unten. Ggf. solltest du die Auflösung der Bilder entsprechend reduzieren.

b) Um die Elemente zentriert zu bekommen würde ich sie an deiner Stelle in einen 100% breiten Container (bspw. div) packen und entsprechend das align auf center ändern.

Du solltest zusätzlich bei body margin und padding auf 0 setzen. Ändert zwar nichts an dem Problem, aber vermeidet unschöne Ränder.

Damit du wirklich alles schön zentrieren kannst musst du die Größen teils statisch einprogrammieren.

HTML:

<body>
  <div id="center_container">
    <img src="..."/>
    <img src="..."/>
  </div>
</body>

CSS:

* {
  margin: 0;
  padding: 0;
}

div#center_container img { //die beiden Bilder
  width: 512px;
  height: 768px;
}

div#center_container { //Der Container zum Zentrieren
  width: 1024px;

  margin: 0 auto;
}

Damit sind die Bilder horizontal zentriert und nebeneinander.

Wobei man allerdings bei ner Auflösung von 1024x768 px nicht die gesamte Fläche zur Verfügung hat, was dann bei der Ansicht der Seite wieder suboptimal wäre. Deswegen wäre es schon günstiger, die Bilder zu verkleinern, wie kerbi schon erwähnt hatte.

Ok hat geklappt danke .
Nun gehst ans verkleinern obwohl ich es schon so schön Finde…

Gibt es ne Möglichkeit die Auflösung derjenigen auszulesen ?..

Dan kann ich via PHP das so machen das der der weniger als 1024x768 Pixel hat ein anderes bild bekommt.

Danke für die schnellen antworten =)

das geht nur mit javascript, über umwege (ajax) kannst du diese auflösung dann auch an ein php-script durchgeben, ist aber ne menge aufwand für vergleichsweise wenig nutzen.

mhmm
Also eine neue Seite machen denjenigen darauf leiden dann via header weiterleiten ?

Oder wie muss ich mir das vorstellen ?

Es gibt ne Möglichkeit verschiedene Stylesheets für unterschiedliche Auflösungen einzubinden. Wird wohl bevorzugt bei Smartphones genutzt. Dann musst du natürlich die Bilder via CSS einbinden und nicht im HTML.

und wie mach ich das ?

Hab bisschen gegoogelt und versuch es grade

[code] print ’


       		  			function WelcomeSAMP ()
						{
      						if (screen.width >= 1024)write('<div style="margin: 0% 0% 0% 0%;width: 512px; height: 768px; background-image: url(images/welcome/SAMP.png); float: left;"/>');
      						else write('SAMP side');
						}
       		  			function WelcomeCLAN ()
						{
      						if (screen.width >= 1024)write('<div style="margin: 0% 0% 0% 0%;width: 512px; height: 768px; background-image: url(images/welcome/CLAN.png); float: left;"/>');
      						else write('SAMP side');
						}
					</script>

					<a href="?page=samp">javascript:WelcomeSAMP()</a>
					<a href="?page=clan">javascript:WelcomeCLAN()</a>
				</div>
			</body>
		';

[/code]

Doch er bekommt immer nen Error dort wo er der Javascript den ersten HTML Code ausgeben soll

Geht auch ohne Javascript :wink:

z.B. so:

Eine aufschlussreiche Seite über das Thema: http://lessframework.com/

MfG
iTeam

Glaube dafür muss ich was installiren oder so ?

Probire es nacher mal aus bin grad nicht zuhaus.

Wird das dan einfach in eine if abfrage gepackt oder mit ins div ? Und wen es ins div kommt dan kommt das Bild oder garkeins oder ?

Nen richtiges beispiel wäre nicht schlecht.

Im CSS File:

#random{ width: 800px; padding: 10px; } @media only screen and (min-width: 768px) and (max-width: 991px) { #random{ width: 500px; padding: 5px; } }

Einbinden der CSS Datei:

Nein, dafür musst du nichts installieren :wink:

Das verkleinert aber nicht das bild oder wie funktioniert das?

Nein, das würde das div #random verkleinern.

so zum Beispiel ein Bild

#img { width: 400px; height: 400px; } @media only screen and (max-width: 600px) { #img { width: 300px; height: 300px; } }

wenn dein Fenster dann schmaler als 600px ist, übernimmt es die neue Breite und Höhe für das Bild…

dankööööööööööööööööööö