SoSo: Bilder in der Mitte positionieren

SELF-Forum

Bilder in der Mitte positionieren

SoSo
– Informationen zu den Bewertungsregeln

Guten Morgen,

ich arbeite seit gestern mit HTML/CSS ;) und habe jetzt ein paar Probleme mit der Positionierung einiger
Bilder und zwar sieht meine css so aus:

background: url(../LockBackground.png) no-repeat center;  
display: inline-block;  
position: center;  
left: 40px;  
top: 40px;  
height: 300px;  
width: 300px;  
-webkit-transition: all 1s ease;  
     -moz-transition: all 1s ease;  
       -o-transition: all 1s ease;  
      -ms-transition: all 1s ease;  
          transition: all 1s ease;

Ich wurde gern zwei bilder mittig in jeweils eine Bildschirmhalfte setzen, ich hab soviel schon ausprobiert aber ich bekomme es einfach nicht hin. Ich hab euch mal ne kleine Skizze gemalt, wie das ganze aussehen sollte.
Bin euch dankbar fur jede kleine Hilfe :).
Skizze: http://cl.ly/VwwF

Schonen Samstag :).

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bilder in der Mitte positionieren

    MrMurphy
    – Informationen zu den Bewertungsregeln

    Hallo

    du solltest auf feste Werte verzichten, also

    left: 40px;
    top: 40px;
    height: 300px;
    width: 300px;

    ich hab soviel schon ausprobiert aber ich bekomme es einfach nicht hin

    Das sagt nun überhaupt nichts aus. Was hast du genau versucht? Hast du ein paar Beispiele?

    Und wie soll das ganze auf unterschiedliche Fenstergrößen reagieren? Um was für Bilder handelt es sich und wie groß sind die?

    Um dir helfen zu könnne benötigen wir auch deinen bisherigen Quelltext. Ansonsten können wir nur Zeit in Lösungen investieren, die du entweder nicht haben willst oder die deinen Wissensstand übersteigen.

    Gruss

    MrMurphy

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bilder in der Mitte positionieren

      SoSo
      – Informationen zu den Bewertungsregeln

      Hallo Mr.Murphy,

      ok sorry.

      HTML:

      <!DOCTYPE html>  
<html lang="en">  
<head>  
	<meta charset="utf-8">  
	<title>Startpage</title>  
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">  
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
	<a id="yo" href="http://google.de"></a>  
	<!--[if lt IE 9]>  
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
	<![endif]-->  
	  
</head>  
<body>  
</body>  
</html>

      background: url(../LockBackground.png) no-repeat center;  
display: inline-block;  
position: absolute;  
top: 0; bottom:0; left: 0; right:0;  
margin: auto;  
height: 150px;  
width: 150px;

      Mein Problem liegt halt darin jetzt ein zweites Bild in der entsprechenden Bildschirmhalfte (siehe Skizze)zu zentrieren. Habe versucht mittels left und right anzupassen, aber sobald ich die werte andere, wird's halt nur ganz rechts oder ganz links angezeigt. Wenn ich nicht mit festen Werten arbeiten soll, mit was dann ? :)

      Das Bild ist 150 x 150, ist halt ne normale Bilddatei (*.png). Die Bilder sollten sich der Fenstergrosse anpassen und zentriert bleiben.

      Wie gesagt, hab erst gestern begonnen mich in html/css einzulesen...ich bitte dies zu berücksichtigen.

      Danke.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln