XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Bild unabhängig zentrieren (http://xhtmlforum.de/showthread.php?t=69546)

flexwie 13.06.2013 23:07

Bild unabhängig zentrieren
 
Hallo liebes Forum,

ich erstelle mit einem Freund eine kleine, schlichte Portfoliowebsite namens stuffr.org .
Da ich noch nicht viel Ahnung von CSS hab weil ich eigentlich mehr mit Java und C programmiere, stellt sich mir die Frage:
Wie kann ich die beiden Bilder so wie ich sie festgelegt habe auf jedem anderen Bildschirm, egal welcher Größe und Auflösung (mittig) anzeigen lassen?

Hier mal der Code:

Code:

<html>
<head>
  <title>
      stuffr
  </title>
  <script
      language="JavaScript">
      buttonfelixsw= new Image();
      buttonfelixsw.src = "felixsw.png"
      buttonfelixf= new Image();
      buttonfelixf.src = "felixf.png"
      buttoncedricsw= new Image();
      buttoncedricsw.src = "cedricsw.png"
      buttoncedricf= new Image();
      buttoncedricf.src = "cedricf.png"
  </script>
  <style type="text/css">
      body { margin: 0; padding: 0; height: 900px;}
      div {border: 0px solid #888;}
      #felix { position: absolute; top: 400px; left: 600px; width: 120px; height: 70px; z-index: 1; }
      #cedric { position: absolute; top: 400px; left: 1100px; width: 200px; height: 200px; z-index: 2; }
      #stuffr-logobanner { position: fixed; top: 0px; left: 0px; width: 2000px; height: 70px; }
      #stuffr-logo { position: fixed; top: 10px; left: 10px; width: 2000px; height: 70px;  }
  </style>
</head>
<body>
  <div id= "cedric">
      <a href="/cedric/"
      onmouseover="cedrichead.src='cedricf.png';"
        onmouseout="cedrichead.src='cedricsw.png';">
        <img src="cedricsw.jpg"
        border="0" width="200"height="200"
        name="cedrichead">
        >
      </a>
  </div>
  <div id= "felix">
      <a href="/felix/"
      onmouseover="felixhead.src='felixf.png';"
      onmouseout="felixhead.src='felixsw.png';">
        <img src="felixsw.jpg"
        border="0" width="200"height="200"
        name="felixhead">
      </a>
  </div>
  <div id="stuffr-logobanner">
      <div id= "stuffr-logo">
        <img src="logo.png">
      </div>
  </div>
</body>
</html>

Vielen Dank!

threadi 15.06.2013 17:37

Korrigiere erstmal den HTML-Code. Dort fehlt ein Doctype und Leerzeichen zwischen Attributname und Attributwert sind auch nicht zulässig.

Wenn Du das hast kannst Du 2 Bilder, die nebeneinander stehen, zentrieren indem Du beide mit einem Element umgibst, welches Du zentrierst. Welche CSS-Eigenschaften dafür möglich sind, steht z.B. hier:
CSS: horizontale und vertikale Zentrierung

Übrigens sind Auflösungen für Webseiten völlig irrelevant, da sie in den seltensten Fällen diesen Bereich einnehmen. Den Bereich in dem man sie sieht nennt man Viewport.


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:19 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023