Elemente positionieren

[Ingo Siemon]

Guten Tach

Ich bin gerade debei meine Webseite auf einen aktuelleren Stand
zu bringen bezüglich CSS und W3C-Validität (heisst das so ?).

Ich bin da nun schon ne ganze Weile schon auf SelfHTML am lesen.
Aber welche nun die perfeckt Lösung für mein Anliegen ist,
weiss ich leider immer noch nicht.

Es ist eine ganz einfache HTML-Seite.
Da sind 4 Quadtradische Elemente (hier Bilder),
welche ich einfach im Quadrat anordnen will mit 10 Pixel Abstand.
Und mittig (oben-unten und rechts-links) soll es auch noch sein.

Bisher habe ich so etwas immer mit blinden Tabellen gemacht.
Ich habe mir aber hier im Forum sagen lassen, dass das nicht so angesagt ist.

Darum würde ich das gerne nun mit den modernen und vor allem
Browser-kompatiblen Möglichkeiten (CSS usw.) umsetzen.

Tja, bloss wie ?
Kann mir da von Euch mal jemand einen "Denkanstoss" geben?
Würde mich wirklich sehr freuen :)

Gruß
Ingo

[xdream1328]

Guten Tach

hallo

Es ist eine ganz einfache HTML-Seite.
Da sind 4 Quadtradische Elemente (hier Bilder),
welche ich einfach im Quadrat anordnen will mit 10 Pixel Abstand.
Und mittig (oben-unten und rechts-links) soll es auch noch sein.

zum zentrieren:
http://d-graff.de/selfhtml/center1.html
und mit float nebeneinander anorden
und über margin und padding den abstand herstellen

hoffe, dass ich dir helfen konnte

Gruß
Ingo

danke und greetz

xdream1328

[Ingo Siemon]

Hallo

zum zentrieren:
http://d-graff.de/selfhtml/center1.html
und mit float nebeneinander anorden
und über margin und padding den abstand herstellen

Vielen lieben Dank erstmal für Deine Hilfe.
Aber leider bekomme ich es noch nicht hin.

Ich habe es nun folgendermassen versucht:
---------------------------------------------------------------
Im Head

<style type="text/css">
     #centered { background-color: #080A0A; margin-left: -98px; margin-top: -48px; position: absolute; top: 50%; left: 50%; width: 196px; height: 96px; visibility: visible }
</style>

Im Body

<div id="centered">

<img src="logo.gif" style="border-color:#FFFFFF; border-width:1px; border-style:solid; padding:0px; float:left" width=218 height=218 alt="">

<img src="logo.gif" style="border-color:#FFFFFF; border-width:1px; border-style:solid; padding:0px" width=218 height=218 alt="">

<img src="logo.gif" style="border-color:#FFFFFF; border-width:1px; border-style:solid; padding:0px" width=218 height=218 alt="">

<img src="logo.gif" style="border-color:#FFFFFF; border-width:1px; border-style:solid; padding:0px" width=218 height=218 alt="">

</div>
---------------------------------------------------------------

Eigentlich sollten doch die ersten beiden Logs nun nebeneinander stehen ...
oder?

Kannst Du mir nochmal helfen bitte?
Gruß
Ingo

[Ingo Siemon]

Sorry, das war Blödsinn gerade.

[Ingo Siemon]

Tach nochmal

So, nun habe ich folgendes gemacht:

CSS
------------------------------------------------------------------
<style type="text/css">
<!--
body {text-align:center;}
#inhalt  {position:absolute;
  width:450px;
  height:570px;
  margin-top:-285px;
  margin-left:-225px;
  top:50%;left:50%;
          background-color:#ccc;}
-->
</style>
------------------------------------------------------------------

HTML
------------------------------------------------------------------
<div id="inhalt">
   Hier kommt der Inhalt
</div>
------------------------------------------------------------------

Das klappt auch gut im IE und Firefox.
Da bleibt der graue Kasten auch schön zentral (h/v),
auch wenn man die größe des Browserfensters vergrößert/verkleinert.

Im Opera Browser bleibt die horizontale Zentrierung auch bestehen.
Nur die Vertikale Zentrierung bleibt nicht bestehen.
Bei Größenänderung des Browser-Fensters bleibt der Abstand
zwischen oberer Fensterkante und grauem Kasen immer gleich.

Wie kann man das denn noch abstellen?

Gruß
Ingo

[Detlef G.]

Hallo Ingo

Nur die Vertikale Zentrierung bleibt nicht bestehen.
Bei Größenänderung des Browser-Fensters bleibt der Abstand
zwischen oberer Fensterkante und grauem Kasen immer gleich.

Ja, Opera hält es wohl nicht für nötig, die Seite bei einer Größenänderung
des Fensters wirklich neu zu rendern.

Wie kann man das denn noch abstellen?

Wahrscheinlich nicht, ohne einen Reload der Seite.

Mache nach der Fenstergrößenänderung einen Reload und bedenke:
Du hast das Browserfenster vergrößert und verkleinert, um es zu testen.
Wie viele Seitenbesucher mit Opera werden das tun?
Wie viele Seitebesucher mit Opera wird es stören, wenn sich der Inhalt dann
nicht sofort wieder zentriert?

Übrigens, wenn der Inhalt nicht sehr klein ist, würde ich eher
http://d-graff.de/selfhtml/center2.html oder
http://d-graff.de/selfhtml/center3.html emfehlen.

Auf Wiederlesen
Detlef

[Ingo Siemon]

Lieber Detlef

Ja, Opera hält es wohl nicht für nötig, die Seite bei einer Größenänderung
des Fensters wirklich neu zu rendern.

Oh, ja, das habe ich garnicht bemerkt,
dass es nur am nicht-neu-rendern liegt.
Dann klappts mit der Zentrierung ja doch ... prima.
Danke für den Hinweis!

Übrigens, wenn der Inhalt nicht sehr klein ist, würde ich eher
http://d-graff.de/selfhtml/center2.html oder
http://d-graff.de/selfhtml/center3.html emfehlen.

Ich bin nicht sicher, ob ich das nun richtig gemacht habe.
Hier mal der neue Code:
---------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta http-equiv="expires" content="43200">
<meta http-equiv="imagetoolbar" content="no">

<link rel=stylesheet type="text/css" href="css.css">

<style type="text/css">
<!--
html, body{
  height:100%;
  margin:0;
  padding:0;
}
#spacer, #center {
  position:absolute;
  margin:0;
  padding:0;
}
#spacer {
  min-width:600px;
  min-height:550px;
  height:100%;
  width:100%;
}
#center{
  width:600px;
  min-height:550px;
  top:50%;
  left:50%;
  margin:-225px 0 0 -300px;
  border:1px solid #0f0;
}
* html #IEspacer {
  width:600px;
  height:550px;
}
* html #center {
  height:220px;
}
p {
  padding:0.5em;
  margin:0;
}
-->
</style>

</head>

<body class="hell">

<div id="spacer">
<div id="IEspacer">
</div>

<div id="center">
<img src="logo.gif" style="border-color:#FFFFFF; border-width:1px; border-style:solid; padding:0px;" width="218" height="218" alt="">

<img src="logo.gif" style="border-color:#FFFFFF; border-width:1px; border-style:solid; padding:0px;" width="218" height="218" alt="">

<img src="logo.gif" style="border-color:#FFFFFF; border-width:1px; border-style:solid; padding:0px;" width="218" height="218" alt="">

<img src="logo.gif" style="border-color:#FFFFFF; border-width:1px; border-style:solid; padding:0px;" width="218" height="218" alt="">

</div>
</div>

</body>
</html>
---------------------------------------------------------------

Gruß
Ingo

[Detlef G.]

Hallo Ingo

Ich bin nicht sicher, ob ich das nun richtig gemacht habe.

Wenn du keinen Text sondern ausschließlich Grafiken verwendest, dessen
Größe du kennst, kannst du noch etwas vereinfachen:

  
  
html, body{  
  height:100%;  
  margin:0;  
  padding:0;  
}  
#spacer, #center {  
  position:absolute;  
  margin:0;  
  padding:0;  
}  
#spacer {  
  min-width:482px;  /* Höhe von #center */  
  min-height:482px; /* Breite von #center */  
  height:100%;  
  width:100%;  
}  
#center, #IEspacer {  
  width:482px;      /* Höhe von #center */  
  height:482px;     /* Breite von #center */  
}  
#center{  
  top:50%;  
  left:50%;  
  margin:-241px 0 0 -241px; /* halbe Höhe und Breite von #center */  
  border:1px solid #0f0;  
  text-align:center;        /* falls die Grafiken nicht vollständig ausfüllen */  
}  
#center img {               /* auch die Grafikeigenschaften hierhin */  
  border:1px solid #f00;  
  padding:0px;  
  width:218px;  
  height:218px;  
  margin:10px;  
}  

Je nach Größe der Grafiken musst du die Maße eventuell anpassen.

Achtung:
Lasse alle Leerzeichen, Zeilenumbrüche usw. zwischen den Grafiken weg.
(der IE zeigt sonst ein Leerzeichen dazwischen)

Auf Wiederlesen
Detlef