Zur Navigation

Div zentrieren

Habe ein Problem

1 teenboy

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content="Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, three column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS Frames, CSS menu, CSS menus" />
<meta name="Description" content="CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS" />
<title> stu nicholls | CSS PLaY | emulating position fixed for Internet Explorer </title>
<style type="text/css">
body {margin: 0px;}
.oben {display:block; top:10px; z-index: 1; height: 50px; margin: auto; position:fixed; background: #a00000; color:#fff; }
.unten {display:block; height: 50px; bottom: 0px; position:fixed; background: #a00000;}
.mitte {display: block; overflow: show; position: relative; margin: 90px 0px 50px 0px; width: 680px; background: #0000a0;}
</style>

</head>

<body>
<div style="display: block; position: fixed; z-index: 1; width: 100%; background: #ffffff; height: 10px; top: 0px;"></div>
<div class="oben" style="margin: auto;">

<div style="float: left; background: url(slice_01.jpg); width: 680px; height: 80px;">Test</div><div style="width: 302px; height: 80px; float: right; background: url(slice_02.jpg);">Test</div><div style="clear: both;"></div>
</div>
<div class="mitte" style="background: url(slice_03.jpg);">
Test<br>
Test<br>
Test<br>
Test<br>

Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>

Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>

Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>

Test<br>
Test<br>
Test<br>
Test<br>
Test<br>
Test<br>

</div>
<div style="position: fixed; top: 90px; left: 680px; background: url(slice_04.jpg); width: 302px; height: 351px;">Test</div><div style="clear: both;"></div>
<div style="position: fixed; top: 441px; left: 680px; background: url(slice_05.jpg); width: 302px; height: 100%;">Test</div><div style="clear: both;"></div>
<div class="unten">
<div style="float: left; background: url(slice_06.jpg); width: 680px; height: 40px;">Test</div><div style="height: 40px; width: 302px; float: right; background: url(slice_07.jpg);">Test</div>
</div>
<div style="display: block; position: fixed; z-index: 1; width: 100%; background: #ffffff; height: 10px; bottom: 0px;"></div>
</body>
</html>





wie kann ich diesen Div Tag zentrieren! Gibt es da überhaupt ein Befehl?

14.04.2009 19:38

2 Jörg Kruse

Welches Div meinst du - dein Code enthält mehrere.

Ganz allgemein kannst du ein Blockelement mit margin:auto und einer festen Breitenangabe zentrieren.

14.04.2009 20:00

3 teenboy

wie kann ich das ganze Zentrieren!

Alles möchte ich in die Mitte und nicht am rand

14.04.2009 20:07

4 Jörg Kruse

Wie ich bereits beschrieben habe:

<body>
<div style="width:680px; margin:auto">
<!-- Inhalt der zentriert werden soll -->
</div>
</body>

Das funktioniert allerings nicht mit Divs, die eine absolute oder fixe Positionierung haben.

14.04.2009 22:13

5 teenboy (Gast)

wie kann man denn so etwas lösen, wie oben, damit es zentriert! Habe viele Absolute werte

15.04.2009 13:06

6 Jörg Kruse

Indem du auf absolute Positionierung verzichtest. Man kann Divs auch ohne dem positionieren: nebeneinander mithilfe von float und die Abstände untereinander kann man mit margin regeln

15.04.2009 13:15

7 uknow (Gast)

sitze vorm selben problem^^ ... und ich MUSS position:absolute;z-index:1; verwenden!! da ich somit ein hintergrund platzieren muss, anders geht es nicht habe schon über 2 Wochen daran gearbeitet, es gibt keinen anderen weg.

wie kann ich nun eine absolute div zentrieren, dass muss möglich sein, wäre ja gelacht, wenn das nicht, wo es doch mittlerweile alles gibt!

bin für jede antwort sehr dankbar :-)

05.05.2009 18:10

8 teenboy

http://www.hase.ch/

Kann man die Homepage umbauen von frame mit layers?

05.05.2009 18:15

9 Jörg Kruse

Ja natürlich kannt du das Frame durch ein div ersetzen und wie man dieses zentriert, ist im Beitrag 4 erklärt.

06.05.2009 10:37 | geändert: 06.05.2009 10:37

... 2 Monate später ...

10 Ruthi (Gast)

hey

ich habe auch so ein problem.
wenn ich das so schreibe funktioniert zwar alles, aber nur im firefox ist die seite zentriert, im internet explorer ist der inhalt zwar in sich zentriert, liegt aber am rechten rand..

kann mir jemand helfen? wäre super...
da wo text steht is normalerweise was anderes ;)

html:
<!DOCTYPE HTML SYSTEM>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>test</title>
</head>
<body>
<div id='bg'>
<img src="bg.jpg" id='bg'>
</div>
<center>
<div style='position:absolute; z-index:2;'>
<center>
<h1>
text<br>
<font id='kleiner'> text</font><br>
text <font id='kleiner2'>text</font><br>
<font id='kleiner'>text</font><br>
Familientherapie <font id='kleiner2'>text</font><br>
<font id='kleiner'>text</font> <br>
text<br>
</h1>
<p><br><p><br></center>
<center>
<table width="40%" border="0" align="center">
<tr>
<td width='25%'>
<table>
<tr>
<td>
text
</td>
</tr>
</table>
</td>
<td width='25%'>
bild
</td>
</tr>
<tr>
<td colspan='3'>
<p><br><p><br><br><p>
<font id='gross'>text</font><br>
teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext<p><br>
<font id='gross'>text</font><br>
will mit dem sowohl systemischen wie psychoanalytischen Blick auf die Familiendynamik dabei helfen, Konflikte zu erkennen und Ressourcen zu ihrer Minderung oder
Beseitigung zu entdecken.<p><br>
</td>
</tr>
</table>
</center>
</div>
</center>
</body>
</html>

CSS:
*
{
padding:0px;
margin:0px;
}

img
{
border:0px;
}

img#bg
{
position:absolute;
left:0px;
top:0px;
border:0px;
width:100%;
height:100%;
z-index:1;
}

body
{
margin-top:9%;
font-family: Calibri;
font-weight:bold;
font-size:17pt;
text-align:center;
}

table
{
font-family: Calibri;
font-weight:bold;
line-height:18pt;
font-size:14pt;
text-align:center;
}


#gross
{
font-size:19pt;
}

#kleiner
{
font-size:10pt;
}

#kleiner2
{
font-size:13pt;
}

h1
{
font-size:20pt;
}

14.07.2009 17:29