PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : div (XHTML + CSS)



piet
16-11-2003, 15:01
Hallo,

ich möchte einen div Block auf dem Bildschirm zentrieren mit CSS. Ist das überhaupt möglich ?



<body>
<div style="width:90ex">zentriert</div>
</body>


In body habe ich schon folgendes probiert: text-align:center
Aber da zentriert er die Elemente in dem div .

Gruß,
piet

Jana
17-11-2003, 07:06
Du kannst den linken Rand und die Breite der Text-Box in Prozent angeben und
damit die Text-Box zentrieren.


<HTML><HEAD>
<TITLE>Center</TITLE>

<style>

.colCenter {
position: absolute;
overflow:visible;
left:25%; top:auto;
width: 50%; height: auto;
margin: 0%; padding: 0%;

background: green;layer-background-color:green;
}
</style>


<div class="colCenter" style="width: 1em;">
iuiuiuoiuoiuoiuo iuiuoiuoiuoiuoiuiouoiuoiuoiuo
iuiuiuoiuoiuoiuoiuiouoiuoiuoiuoiuiuiuoiuoiuoiuoiui ouoi
</div>

</BODY>
</HTML>

piet
17-11-2003, 10:36
Danke Jana.

Nur leider muss die Breite des div's 90ex sein. Das ist eine Gestaltungskonstante, die mir vorgegeben wurde. Damit ist es leider nicht mehr zentriert

Jana
18-11-2003, 08:41
Na, dann greif doch tiefer in die Trickkiste.
Lade die js-Dateien von http://www.cross-browser.com herunter.



<HTML>
<HEAD>
<TITLE>Center</TITLE>
<script type='text/javascript' src='cbe/cbe_core.js'></script>
<script type='text/javascript' src='cbe/cbe_slide.js'></script>
<script type='text/javascript' src='cbe/cbe_slide2.js'></script>
<script type='text/javascript' src='cbe/cbe_event.js'></script>

<style>
.content {
position: absolute;
left:250px; top:20px;
width: 90px; height:auto;

background: green;layer-background-color:green;
}
</style>

<script type='text/javascript'>
<!--
var content;

function windowOnload() {init()};

function init(){
with (content = cbeGetElementById('content').cbe) {
moveTo(document.cbe.width()/2-90,100);
show();
}

}
</script>


<div id='content' class="content">
iuiuiuoiuoiuoiuo iuiuoiuoiuoiu
oiuiouoiuoiuoiuo
iuiuiuoiuoiuoiuoiuiouoiuoi
uoiuoiuiuiuoiuoiuoiuoiuiouoi
</div>
</BODY>
</HTML>

piet
19-11-2003, 17:53
Leider darf ich auch kein Javascript verwenden. Nur CSS2 und XHTML.

Die Seite ist für einen Lehrstuhl an der Uni und soll für jeden ohne zusätzliche Mittel erreichbar sein.

bockionline
25-11-2003, 12:16
Hallo,

du musst "margin-left" und "margin-right" auf "auto" stellen, dann sollte das Element zentriert angezeigt werden.

MfG
bockionline

ohcibi
27-11-2003, 06:03
Original geschrieben von bockionline
Hallo,

du musst "margin-left" und "margin-right" auf "auto" stellen, dann sollte das Element zentriert angezeigt werden.

MfG
bockionline

das hab ich schon mehrmals probiert und das funktioniert einfach nich.... ich hab n aehnliches problem gehabt und das so geloest dass ich das <div> inne <table align=center> gesteckt hab... aber das is sicherlich ein ziemlich umstaendlicher weg...

-Sensemann-
02-12-2003, 00:48
Css 2 ?

das unterstütz doch nicht jeder Browser oder irre ich mich ?

SeXy~Sas
12-02-2004, 21:55
tja, da bin ich wohl nicht der einzige, der sich an dem problem die zähne ausbeisst ;(

also horizontal ausrichten ist nicht das problem, das geht via margin:auto; oder ner 100% breiten tabelle... aber vertical? das geht nur ohne doctype deklaration, da die browser dann in den quirk mode schalten, aber das kanns ja auch nicht sein...

panzi
13-02-2004, 14:40
Lösung 1:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TITEL</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}

div.center_parent {
width: 100%;
height: 300px;
margin: 0px;
padding: 0px;
text-align: center;
background-color: #FBC8BF;
}

div.center_text {
width: 90ex;
margin: auto;
padding: auto;
text-align: left;
background-color: #BFC8FB;
}
</style>
</head>
<body>
<div class="center_parent">
<div class="center_text">text text text text<br />text text text text<br />text text text text</div>
</div>
</body>
</html>

Lösung 2:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TITEL</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
}

div.center_text {
width: 90ex;
margin: auto;
padding: auto;
text-align: left;
background-color: #BFC8FB;
}
</style>
</head>
<body>
<div class="center_text">text text text text<br />text text text text<br />text text text text</div>
</body>
</html>

SeXy~Sas
13-02-2004, 16:04
nö, das geht so genausowenig.

panzi
13-02-2004, 20:30
Bei mir mit Mozilla 1.6 geht's. Sprich es ist horizontal zentriert. Oder wills't es auch vertikal zentriert haben?

SeXy~Sas
14-02-2004, 09:38
ja natürlich. dass horizontales zentrieren kein problem darstellt, habe ich doch schon n paar postings weiter oben geschrieben...

aber das geb ich echt so langsam auf. nicht mit gültigem xhtml :/

torben1
14-02-2004, 23:15
nabend,

ic hhatte das prob auch schon öfter, leider.
es giebt keine einfache lösung für das problem, die die ich immer benutze, funst mit ie und ne (ab 6) , aber leider nicht mit opera.
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td>
<div class="egal"></div>
</td>
</tr>
</table>

is zwar nicht schön aber funst halt.


mfg


torben

SeXy~Sas
15-02-2004, 11:43
ja, dass das geht, weiss ich. das nutzt aber dummerweise einen ie-bug aus: und zwar erwartet der die dtd in der ersten zeile. bei xhtml steht da aber die die xml deklaration und der doctype in zeile zwei. deshalb kapiert der ie nicht, dass es xhtml ist und er die seite im standard mode anzeigen müsste. also schaltet er in den quirks/kompatibilitäts modus, so wie auch alte nicht konforme seiten angezeigt werden. und da gibts 100% hohe tabellen und es klappt.

panzi
21-02-2004, 20:34
Original geschrieben von torben1
nabend,

ic hhatte das prob auch schon öfter, leider.
es giebt keine einfache lösung für das problem, die die ich immer benutze, funst mit ie und ne (ab 6) , aber leider nicht mit opera.
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td>
<div class="egal"></div>
</td>
</tr>
</table>

is zwar nicht schön aber funst halt.


mfg


torben

Die Bestrebungen des W3C bezüglich HTML gehen dahin Inhalt und Formatierungen zu trennen. Deswegen gibt's das Attribute height bei Tabellen nciht, und width ist denk ich deprecated. Man sollte leiber css verwenden. Und sowieso Hilft diese Lösung glaub ich net immer, da der body standardm. nicht 100% ist (nur so groß er sein muss) und man sollt ihn auch strecken. Siehe:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TITEL</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
}

table.center_parent {
width: 100%;
height: 100%;
border: 0px;
margin: 0px;
padding: 0px;
text-align: center;
background-color: #FBC8BF;
vertical-align: middle;
}

div.center_text {
width: 90ex;
margin: auto;
text-align: left;
background-color: #BFC8FB;
vertical-align: middle;
}
</style>
</head>
<body>
<table class="center_parent" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="center_text">text text text text<br />text text text text<br />text text text text</div>
</td>
</tr>
</table>
</body>
</html>


Jedoch ist diese Lösung eben semandisch auch falsch, da es hier nicht um ne Tabelle im eigentlichen Sinn geht, sondern nur um ne Formatierung, wozu man besser div verweden sollt. Aber mit ner siv hab ich's auch net zambracht, vieleicht findet noch wer was im Netzt, wär cool...

SeXy~Sas
24-02-2004, 19:24
nee, width für tables is vollkommen ok, siehe http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_tablemodule

aber danke für den tipp, so gehts endlich :)
das text-align in html,body,table kannste übrigens weglassen.

panzi
24-02-2004, 20:48
Original geschrieben von SeXy~Sas
nee, width für tables is vollkommen ok, siehe http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_tablemodule

aber danke für den tipp, so gehts endlich :)
das text-align in html,body,table kannste übrigens weglassen.

ja width, aber nicht height. und darum gehts hier, da vertical zentrieren.

SeXy~Sas
24-02-2004, 21:10
das war auf "[...] und width ist denk ich deprecated." bezogen.

panzi
25-02-2004, 21:28
Original geschrieben von SeXy~Sas
das war auf "[...] und width ist denk ich deprecated." bezogen.

hups. dann eben nur heigth (ist deprecated).