zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden div positionierung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.05.2004, 23:43
bw bw ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.05.2004
Beiträge: 22
bw befindet sich auf einem aufstrebenden Ast
Standard div positionierung

hallo, habe ein kleines problem mit der positionierung eines div blocks. Arbeite mich grade in css und weg von tabellen ein und hab noch nicht so viel ahnung.

möchte einen "Hauptdivblock" wo alles andere drin ist mit fester breite und höhe mittig auf der seite positionieren. Zentriert funktioniert, aber der div ist immer oben bündig.

hir mal der code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XXX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="rahmen"></div>
</body>
</html>
css:
Code:
body {
	background-color:#666666;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
	text-align:center;
}


.rahmen {
	text-align:left;
	background-color: #FFFFFF;
	background-repeat: repeat;
	height: 500px;
	width: 850px;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto; 
}
kann mir jemand sagen was ich falsch mache
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.05.2004, 23:48
Neuer Benutzer
neuer user
 
Registriert seit: 09.05.2004
Beiträge: 26
ratterobert befindet sich auf einem aufstrebenden Ast
Standard

nimm mal aus dem dem body-tag die margins raus.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.05.2004, 23:53
bw bw ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.05.2004
Beiträge: 22
bw befindet sich auf einem aufstrebenden Ast
Standard

ausser das der div nun ein paar pixel weiter unten ist bringt es leider nichts die margins aus dem body zu nehmen
Mit Zitat antworten
  #4 (permalink)  
Alt 19.05.2004, 11:54
Benutzer
neuer user
 
Registriert seit: 08.04.2004
Beiträge: 49
cric befindet sich auf einem aufstrebenden Ast
Standard

Versuch es einmal hiermit:

Code:
body {
	background-color: #f00;
	margin: 0;
	padding: 0;
	text-align: center;
	}

.rahmen {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
	width: 850px;
	height: 500px;
	background-color: #000;
}
Wichtig ist, dass die "auto"-Werte richtig berechnet werden koennen. Dies funktioniert nur mit "position: absolute" und den genauen Angaben der anderen Werte (top, height, bottom).
Mit Zitat antworten
  #5 (permalink)  
Alt 19.05.2004, 13:18
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.05.2003
Beiträge: 129
Thomas (css 4 you) befindet sich auf einem aufstrebenden Ast
Standard

Hi,
du positionierst einen div-Container mittig, indem du ihn mit left:50% und top:50% mittig positionierst und dann mit negativem margin um die halbe Breite nach links und die halbe Höhe nach oben verschiebst.
Code:
body {
   background-color:#666666;
}


.rahmen {
 position:absolute;
 left:50%;
 top:50%;
 height: 500px;
 width: 850px; 
 margin-left:-425px;
 margin-top:-250px;
}

Gruß
Thomas
www.css4you.de
Mit Zitat antworten
  #6 (permalink)  
Alt 19.05.2004, 16:11
bw bw ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.05.2004
Beiträge: 22
bw befindet sich auf einem aufstrebenden Ast
Standard

Code:
.rahmen { 
   position: absolute; 
   top: 0px; 
   bottom: 0px; 
   left: 0px; 
   right: 0px; 
   margin: auto; 
   width: 850px; 
   height: 500px; 
   background-color: #000; 
}
geht so leider nicht da nun der div oben links ist. wie angegeben top:0 und left:0 ....


Code:
.rahmen { 
 position:absolute; 
 left:50%; 
 top:50%; 
 height: 500px; 
 width: 850px; 
 margin-left:-425px; 
 margin-top:-250px; 
}
da erscheint bei mir (ie6) gar kein div container. ansonsten klingt die lsg sehr plausibel ....
Mit Zitat antworten
  #7 (permalink)  
Alt 19.05.2004, 17:01
Benutzer
neuer user
 
Registriert seit: 08.04.2004
Beiträge: 49
cric befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von bw
Code:
.rahmen { 
   position: absolute; 
   top: 0px; 
   bottom: 0px; 
   left: 0px; 
   right: 0px; 
   margin: auto; 
   width: 850px; 
   height: 500px; 
   background-color: #000; 
}
geht so leider nicht da nun der div oben links ist. wie angegeben top:0 und left:0 ....
Natürlich ist der div oben links, aber er sollte auch unten rechts sein, d.h. von oben links bis unten rechts aufspannen. Innerhalb dieses gesamten Bereichs werden dann die margins auf auto gestellt und somit gleichmässig verteilt. Dieses Verhalten ist CSS-Standard.
Mit welchem Browser schaust du dir denn die Seite an?
Mit Zitat antworten
  #8 (permalink)  
Alt 19.05.2004, 18:14
bw bw ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.05.2004
Beiträge: 22
bw befindet sich auf einem aufstrebenden Ast
Standard

mit ie6
Mit Zitat antworten
  #9 (permalink)  
Alt 19.05.2004, 22:14
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.05.2003
Beiträge: 129
Thomas (css 4 you) befindet sich auf einem aufstrebenden Ast
Standard

@bw
Füge mal ein
Code:
border:1px solid #f00;
oder

ein
Code:
background-color:#efefef;
ein, dann ist der Container auch zusehen

@cric
Zitat:
Dieses Verhalten ist CSS-Standard.
Das interessiert den IE doch nicht.
Mit welchem Browser hast du das eigentlich getestet?


Gruß
Thomas
www.css4you.de
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 20.05.2004, 12:41
Benutzer
neuer user
 
Registriert seit: 08.04.2004
Beiträge: 49
cric befindet sich auf einem aufstrebenden Ast
Standard

1. Ich habe gar nicht gewusst, dass der IE6 immer noch so schwach in der CSS-Unterstützung ist.
2. Meine Browsertests: Mozilla + Abkömmlinge, Safari, Opera 7.5, Konqueror, OmniWeb. In allen funktioniert dies einwandfrei. Und wenn MS endlich eine bessere CSS Unterstützung bieten wird, wird dies auch da klappen.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Header entfernen tripple CSS 17 15.06.2010 16:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 20:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:13 Uhr.