• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Komplettes Gebilde zentrieren

M

Myriel

New member
Hallo zusammen,

ich bastel gerade an einer HP herum und dabei bin ich auf folgendes Problem gestossen: Wie schaff ich es ein ganzes CSS Gebilde möglichst einfach zu zentrieren?. Mit Gebilde mein ich halt viele verschiedene DIV´s.
zu sehen ist das ganze hier: http://www.imperia-rpg.de/temp/ver2_kachel.html
Irgendwie klebt das links oben in der Ecke, egal was wir auch versucht haben, nichts funktioniert.
Weiß von Euch vielleicht jemand einen Rat?

Gruß
Myriel
 
Bitte...
Dann werdet ihr aber auch was an den absoluten Positionierungen in eurer css was ändern müssen...
 
Beides probiert, bei Version 2 hängt das Bild rechts in der Ecke, Version 1 ist jetzt drin - Effekt gleich 0 , das Bild ist nach wie vor links oben rangeklatscht. *verzweifel* Bestimmt ist da irgendwo ein Fehler oder sowas drin ich glaub langsam wir sehen den Wald vor lauter Bäumen nicht :whacky:

edit: ok dann wird es an den absoluten Werten liegen. Was ist den die Alternative zu den absoluten Werten? - Die seite sollte aber schon wieder so aussehen wie jetzt, das ist irgendwie das Problem
 
Zuletzt bearbeitet:
Hallo Myriel!

Ich hab mal ein bisschen rumgefummelt und die Werte von left geändert.
Wolltest du das sooo?
Habs jetzt aber nur im Firefox getestet.

HTML: 
<html><head><title>ver2_kachel</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><!-- ImageReady Styles (ver2_kachel.psd) -->

<style type="text/css">
<!--

#Tabelle_01 {

	width:950px;
	height:608px;
	margin: 0 auto 0 auto;
}

#ver2-kachel-01 {
	position:absolute;
	left:30px;
	top:0px;
	width:950px;
	height:128px;
}

#ver2-kachel-02 {
	position:absolute;
	left:30px;
	top:128px;
	width:45px;
	height:431px;
}

#ver2-kachel-03 {
	position:absolute;
	left:75px;
	top:128px;
	width:101px;
	height:431px;
}

#ver2-kachel-04 {
	position:absolute;
	left:176px;
	top:128px;
	width:45px;
	height:431px;
}

#ver2-kachel-05 {
	position:absolute;
	left:222px;
	top:128px;
	width:708px;
	height:469px;
	overflow: scroll;
	visibility: visible;
}

#ver2-kachel-06 {
	position:absolute;
	left:929px;
	top:128px;
	width:51px;
	height:431px;
}

#ver2-kachel-07 {
	position:absolute;
	left:30px;
	top:559px;
	width:192px;
	height:49px;
}

#ver2-kachel-08 {
	position:absolute;
	left:222px;
	top:559px;
	width:707px;
	height:24px;
}

#ver2-kachel-09 {
	position:absolute;
	left:929px;
	top:559px;
	width:51px;
	height:49px;
}

#ver2-kachel-10 {
  	position:absolute;
	left:222px;
	top:583px;
	width:707px;
	height:25px;
}

-->
</style><!-- End ImageReady Styles --></head>
<body style="background-color: rgb(255, 255, 255);">
<!-- ImageReady Slices (ver2_kachel.psd) -->

<div id="Tabelle_01">
	<div id="ver2-kachel-01">
		<img src="ver2_kachel_dateien/ver2_kachel_01.jpg" alt="" height="128" width="950">
	</div>
	<div id="ver2-kachel-02">
		<img src="ver2_kachel_dateien/ver2_kachel_02.jpg" alt="" height="431" width="45">
	</div>
	<div id="ver2-kachel-03">
		<img src="ver2_kachel_dateien/ver2_kachel_03.jpg" alt="" height="431" width="101">
	</div>
	<div id="ver2-kachel-04">
		<img src="ver2_kachel_dateien/ver2_kachel_04.jpg" alt="" height="431" width="45">
	</div>
	<div id="ver2-kachel-05">
	  <p>f</p>
	  <p>f</p>
	  <p>f</p>
	  <p>f</p>
	  <p>f</p>
	  <p>f</p>
	  <p>f</p>
	  <p>f</p>
	  <p>f</p>
	  <p>f</p>
	  <p>f</p>
	  <p>f</p>
	  <p>f</p>
	  <p>f</p>
	  <p>f</p>
	  <p>f</p>
	  <p>f	    </p>
	</div>
	<div id="ver2-kachel-06">
		<img src="ver2_kachel_dateien/ver2_kachel_06.jpg" alt="" height="431" width="51">
	</div>
	<div id="ver2-kachel-07">
      <img src="ver2_kachel_dateien/ver2_kachel_07.jpg" alt="" height="49" width="192">	</div>
	<div id="ver2-kachel-09">
		<img src="ver2_kachel_dateien/ver2_kachel_09.jpg" alt="" height="49" width="51">
	</div>
	<div id="ver2-kachel-10">
		<img src="ver2_kachel_dateien/ver2_kachel_10.jpg" alt="" height="25" width="707">
	</div>
</div>


<!-- End ImageReady Slices -->
</body></html>
Liebe Grüße
Liz

[EDIT=RoyalKnight]HTML-Tags hinzugefügt[/EDIT]
 
Also bei meiner Auflösung funzt das prima, bei der von meinem Freund (der hat einen Laptop) ist das Bild zwar nicht mehr ganz in der Ecke sondern 30 pix vom Rand weg, aber immer noch nicht mittig sondern viel zu weit links. Aber vom Prinzip her soll es schon so sein das das Bild einfach in der Mitte plaziert wird, so wie Du das versucht hast.
 
Dann liegt das wahrscheinlich doch an der Positionierung.
Da habe ich aber so gut wie keine Erfahrung.

Ich verwende dazu margins. Damit sich alles dem Bildschirm, wie bei deinem Freund, anpasst, arbeite ich für die Abstände mit relativen Einheiten - also em für die Container mit <img src= width: height:> oder %-Angaben.

Habe versucht, den Tabelle_01 Container mit margin: 0 auto 0 auto zu zentrieren, aber ich weiß nicht, ob die Positionierung dazwischen funkt.

Kann auch was mit deiner fehlenden Doctype-Deklaration zu tun haben.

Liebe Grüße
Liz
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben