zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Element zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.02.2010, 16:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.02.2010
Beiträge: 3
Exilas befindet sich auf einem aufstrebenden Ast
Standard Element zentrieren

Hallo zusammen

Ich versuche mich derzeitig an meiner ersten hp mit Dreamweacer CS4.

Nun hab ich folgendes Problem:

Ich hab einen Hintergrund und darauf so eine Art "Box" welche nun zentriert werden soll. Nur leider hab ich keinen Plan wie ich das hinkriegen soll. Es würde mir bereits reichen wenn jemand mir den dazugehörigen Code schreiben könnte.
http://s8b.directupload.net/images/100216/eonbzcsq.png

Die weisse Box soll zentriert werden(vom Hintergrund)

Der Code dazu:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
.box {
	background-color: #FFF;
	height: 400px;
	width: 800px;
	position: absolute;
	left: 100px;
	top: 100px;
}
-->
</style>
</head>

<body bgcolor="#CCCCCC">
<div class="box">Raum für den Inhalt von  class "box"</div>
</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.02.2010, 16:38
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.02.2010
Beiträge: 162
Duderinho befindet sich auf einem aufstrebenden Ast
Standard

Waagerecht zentriert:
Code:
left: 50%;
margin-left: -400px;
Vertikal zentriert:
Code:
top:50%;
margin-top:-200px;
Ergänze das in .box, kannst auch beides reinschreiben. Dafür wird position:absolute gebraucht, das also nicht rauslöschen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.02.2010, 16:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.02.2010
Beiträge: 3
Exilas befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Duderinho Beitrag anzeigen
Waagerecht zentriert:
Code:
left: 50%;
margin-left: -400px;
Vertikal zentriert:
Code:
top:50%;
margin-top:-200px;
Ergänze das in .box, kannst auch beides reinschreiben. Dafür wird position:absolute gebraucht, das also nicht rauslöschen.
Hat perfekt funktioniert dankeschön

Aber was bewirkt dieses margin-left oder margin-top genau bzw was bewirkt es?
Mit Zitat antworten
  #4 (permalink)  
Alt 16.02.2010, 16:45
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.02.2010
Beiträge: 162
Duderinho befindet sich auf einem aufstrebenden Ast
Standard

Das ist schwer, ohne Stift zu erklären ^^

position:absolute --> Der Kasten klebt links oben im Eck
left:50% --> Vom linken Rand hat der Kasten jetzt 50% Abstand. Heißt, der linke Rand des Kastens ist nun in der Bildschirmmitte positioniert. Da du das nicht willst...
margin-left:-400px --> ... und die Kastenmitte auch der Mittelpunkt der Seite sein soll, rückst du ihn nun um die negative Hälfte der Kastenbreite nach links

Hoffe das war verständlich, kannst ja mal position, left und margin-left nacheinander eingeben und schauen was passiert, dann kannst es vlt. besser nachvollziehen.

Für die vertikale Zentrierung funktioniert das ganze entsprechend.
Mit Zitat antworten
  #5 (permalink)  
Alt 16.02.2010, 18:04
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

was willst du genau?
Soll nur waagerecht oder waagerecht und senkrecht zentriert werden?

Zum waagerecht Zentrieren braucht man sicher kein position:absolute.

Einfach eine Breite in Verbindung mit margin:0 auto; vergeben.

Wenn du z.B. eine Seite zentrieren willst brauchst du auch kein posit. abs..
Da hält die CSS-FAQ einen Artikel bereit.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #6 (permalink)  
Alt 16.02.2010, 18:10
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.02.2010
Beiträge: 162
Duderinho befindet sich auf einem aufstrebenden Ast
Standard

Da ich selbst noch recht neu bin frag ich einfach mal, was gegen "meine" Variante spricht. Vorteile? Nachteile?
Mit Zitat antworten
  #7 (permalink)  
Alt 16.02.2010, 18:36
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Duderinho Beitrag anzeigen
Da ich selbst noch recht neu bin frag ich einfach mal, was gegen "meine" Variante spricht. Vorteile? Nachteile?
Mit pos.Absol. nimmst du Elemente komplett aus dem Textfluß.
Das absol. Element wird von den anderen komplett ignoriert.

Dieser Link kann dir Erleuchtung bringen.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #8 (permalink)  
Alt 16.02.2010, 21:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.02.2010
Beiträge: 3
Exilas befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von hubspe Beitrag anzeigen
Mit pos.Absol. nimmst du Elemente komplett aus dem Textfluß.
Das absol. Element wird von den anderen komplett ignoriert.

Dieser Link kann dir Erleuchtung bringen.
Das mit dem Ignorieren ist mir grad aufgefallen, aber spielt derzeitig bei meinem Projket keine Rolle. Trotzedem gwwöhn ich mir lieber deine Methode an, falls mal Probleme auftreten.
Mit Zitat antworten
  #9 (permalink)  
Alt 17.02.2010, 10:03
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.02.2010
Beiträge: 162
Duderinho befindet sich auf einem aufstrebenden Ast
Standard

@hubspe
Danke für den Link, hab mir das zu Gemüte geführt. Glaube, soweit auch alles verstanden zu haben.
Allerdings verstehe ich immer noch nicht, was gegen die hier von mir beschriebene Methode spricht, wenn ich doch die komplette Seite und nicht einzelne Inhalte absolut positionieren möchte.

Die Klasse .box beinhaltet ja die ganze Website, sprich die Inhalte können relative positioniert werden, je nach Wunsch des Gestalters/der Gestalterin. Ob .box nun absolute positioniert ist oder nicht ist doch nicht von Belang, oder?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 17.02.2010, 10:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Duderinho Beitrag anzeigen
Allerdings verstehe ich immer noch nicht, was gegen die hier von mir beschriebene Methode spricht,
Die Inhalte verschwinden bei kleinem Viewport unerreichbar nach links und oben.
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
Element horizontal zentrieren FortyTwo CSS 9 06.05.2010 13:13
element zentrieren lechufer CSS 2 06.12.2009 16:19
a und img in einem li element vertikal zentrieren monran CSS 11 27.09.2009 13:14
Festanstellung bei der Xing AG als Web Developer (HTML/CSS) NEOX Offtopic 10 17.07.2008 18:11
Liste im IE StarSt0rm CSS 3 22.08.2007 21:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:17 Uhr.