16.02.2010, 16:29
|
|||
|
|||
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>
|
| Sponsored Links |
|
16.02.2010, 16:38
|
|||
|
|||
|
Waagerecht zentriert:
Code:
left: 50%; margin-left: -400px; Code:
top:50%; margin-top:-200px;
|
| Sponsored Links |
|
16.02.2010, 16:40
|
|||
|
|||
|
Zitat:
 Aber was bewirkt dieses margin-left oder margin-top genau bzw was bewirkt es?
|
|
16.02.2010, 16:45
|
|||
|
|||
|
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.
|
|
16.02.2010, 18:04
|
||||
|
||||
|
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
|
|
16.02.2010, 18:36
|
||||
|
||||
|
Zitat:
Das absol. Element wird von den anderen komplett ignoriert. Dieser Link kann dir Erleuchtung bringen. 
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus
|
|
16.02.2010, 21:46
|
|||
|
|||
|
Zitat:
|
|
17.02.2010, 10:03
|
|||
|
|||
|
@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?
|
| Sponsored Links |
|
17.02.2010, 10:06
|
|||
|
|||
|
Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ä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 |
Linear-Darstellung
