XHTML 1.1 wie zentrieren?

R

RETRAX

Hallo,

wenn ich mein HTML 4.01 Dokument in ein XHTML 1.1 transformiere kann ich den Befehl <div align=center> nicht mehr verwenden. (wenn ich XHTML 1.1 valide sein möchte)

Das hab ich aber dazu gebraucht um mein Layout mittig zu zentrieren. Wenn ich das also rausschmeisse hängt mein Layout links oben usw...

Wie kann ich unter XHTML 1.1 die Tabelle in der Bildschirmmitte zentrieren?
 
Tolle Tags

Also zum einen könnte man in dem Stylesheet rumwerkeln und mit den Tags (ich kann mich auch irren) vertical-align und horizontal-align die tabelle positionieren oder man stellt den margin überall auf 50%, die tabelle nimmt sich dann schon ihren platz.
table { margin: 50% 50% 50% 50%; }

Kann aber auch sein das es nicht so geht, also Prozent verwenden. Dann halt irgendeine grosse Zahl, die sollte es auch tun.

MfG, T.Eisenhammer.

Nachtrag:
Irgendwer hat sich damals mal den Tag <center> ausgedacht, der sollte das <div align="center"> ersetzen.
 
vorausgesetzt <div id="?"></div> beinhaltet die website … und keine weiteren absolute positionierung …

die lösung ist einfach - javascript. ;) code habe ich leider nicht zuhand …

vielleicht schaffst du es selbst … hier die idee:
js &nbsp;&nbsp;div_height / 2
css &nbsp;&nbsp;position: absolute; top: 50% - (div_height / 2);
js &nbsp;&nbsp;div_width / 2
css &nbsp;&nbsp;position: absolute; left: 50% - (div_width / 2);
 
Hey. Also Du könntest z.B. eine eigene class in css für deinen div container definieren und diesem dann align=center sagen, oder du positionierst in mit tables im div die eine absolute größe haben, ebenfalls absolut mit marginwidth und marginheight ..... wenn ich mich jetzt nicht irre, oder du probierst zuerst das einfachste ..... setze deinen div container einfach in einen center container:

<center>
<div>
</div>
</center>

...... für Infos: http://selfhtml.teamone.de/


hoffe ich konnte helfen
Grüße
 
Hi!

Ich habs jetzt CSS mässig wie folgt aufgebaut:

body, td {
margin-top: 25px;
margin-right: auto;
margin-left: auto;
position: relative;
width: 700px;
height: auto;
color: #696969;
font-size: 9pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

Mir ist jetzt nur noch nicht ganz klar wieso ich da auch eine width von 700 px angeben muss wo doch meine Tabelle im XHTML schon mit 700px definiert ist:

<table width="700" border="0" cellspacing="2" cellpadding="0">
 
Jetzt hab ich es

danke aresius ist mir wieder die lösung eingefallen.
wenn also alles in der bildmitte (sowohl vertikal als auch horizontal) zentriert sein soll geht das mit dem absoluten positionieren.
und OHNE javascript: (ich nenn das jetzt mal so)
table.haupt {
position:absolute;
left:50%;
right:50%;
top:50%;
bottom:50%;
}

so. sollte klappen. problem: alte browser die mit den neuen css sachen nicht klar komman zicken rum.

MfG, T.Eisenhammer.
 
nachtrag

nach dem tollen xhtml baut mal keine styles mehr in tags rein sondern macht das alles über ein tolles stylesheet.
also nix mit <table width="X">
sondern
table { width = Xpx; }

MfG, T.Eisenhammer.
 
Re: Jetzt hab ich es

Original geschrieben von T.Eisenhammer
danke aresius ist mir wieder die lösung eingefallen.
wenn also alles in der bildmitte (sowohl vertikal als auch horizontal) zentriert sein soll geht das mit dem absoluten positionieren.
und OHNE javascript: (ich nenn das jetzt mal so)
table.haupt {
position:absolute;
left:50%;
right:50%;
top:50%;
bottom:50%;
}

so. sollte klappen. problem: alte browser die mit den neuen css sachen nicht klar komman zicken rum.

MfG, T.Eisenhammer.
Zum Vergrößern anklicken....
&nbsp;

hmm so funktionierts hier nicht... da hängt meine Tabelle irgendwo ganz unten...
 
Original geschrieben von RETRAX

body, td {
margin-top: 25px;
margin-right: auto;
margin-left: auto;
position: relative;
width: 700px;
height: auto;
color: #696969;
font-size: 9pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

Mir ist jetzt nur noch nicht ganz klar wieso ich da auch eine width von 700 px angeben muss wo doch meine Tabelle im XHTML schon mit 700px definiert ist:

<table width="700" border="0" cellspacing="2" cellpadding="0">
Zum Vergrößern anklicken....

ähem … im code sind viele fehler. :(
beispiel: das stylesheet sagt, dass eine tabellenzelle 700px breit ist. hat die tabelle 2 spalten, wäre diese 1400px breit …
 
Re: nachtrag

Original geschrieben von T.Eisenhammer
nach dem tollen xhtml baut mal keine styles mehr in tags rein sondern macht das alles über ein tolles stylesheet.
also nix mit <table width="X">
sondern
table { width = Xpx; }

MfG, T.Eisenhammer.
Zum Vergrößern anklicken....
&nbsp;

aha cool! und wie mache ich die:

cellspacing="2" cellpadding="0"

in CSS?

in HTML war der befehl:

table width 700px cellspacing="2" cellpadding="0" ...
 
Original geschrieben von aresius
ähem … im code sind viele fehler. :(
beispiel: das stylesheet sagt, dass eine tabellenzelle 700px breit ist. hat die tabelle 2 spalten, wäre diese 1400px breit …
Zum Vergrößern anklicken....
&nbsp;

hmm wie muss ich das dann machen?

Die linke und die rechte Tabellenzelle sollen jeweils 100 px breit sein, höhe auto, und die obere tabellenzelle soll 53 hoch sein...
 
pn

@retrax pn
 
Muh!?

Original geschrieben von aresius
mit margin: 50% 50% 50% 50%; geht das nicht. wenn man sowohl horizental als auch vertikal mittig will, muss man javascript verwenden. zuhause hab ich auch code …
Zum Vergrößern anklicken....

Will ja nich stänkern, aber erst lesen dann schreiben. Hab mich da oben schon berichtigt.
Mit absoluter positionierung klappt es. man braucht kein Javascript. Das mag eh keiner :D.

@ retrax.
man koennte der tabelle width=50% verpassen , also im style und dann meine version mit der absoluten positionierung und dann left und right jeweils auf 25% und top dann halt auch nur 25% und bottom weglassen falls die seite mal länger wird.
Sie muss ja nicht seitenmittig sein, du willst ja nur das sie nicht so am rand klebt, oder? :)

MfG, T.Eisenhammer.
 
Re: Muh!?

Original geschrieben von T.Eisenhammer
@ retrax.
man koennte der tabelle width=50% verpassen , also im style und dann meine version mit der absoluten positionierung und dann left und right jeweils auf 25% und top dann halt auch nur 25% und bottom weglassen falls die seite mal länger wird.
Sie muss ja nicht seitenmittig sein, du willst ja nur das sie nicht so am rand klebt, oder? :)

MfG, T.Eisenhammer.
Zum Vergrößern anklicken....
&nbsp;

hmm...also muss das dann so aussehen:

<table width=50% border=0 cellspacing=2 cellpadding=0>

und im CSS dann:

Body {
position:absolute;
left:25%;
right:25%;
}


???
 
Öhm!? ...

fast.
das width von der <table> mal noch in das style sheet. und das nicht in den body sondern auch alles in die table.
und das top: X% wär nicht schlecht, wenn das alles nicht so oben an der browserkante kleben soll.

MfG, T.Eisenhammer.
 
Re: Öhm!? ...

Original geschrieben von T.Eisenhammer
fast.
das width von der <table> mal noch in das style sheet. und das nicht in den body sondern auch alles in die table.
und das top: X% wär nicht schlecht, wenn das alles nicht so oben an der browserkante kleben soll.

MfG, T.Eisenhammer.
Zum Vergrößern anklicken....
&nbsp;

das schaut leider nicht so gut aus wie mit dem alten align-center...

mhm..dass das so schwierig wird hätte ich nicht gedacht. Und JAVA möchte ich nicht nehmen...
 
Öhm!? ...

man könnte es aber so hinbiegen das es so aussieht.
Ein paar werte umändern und so weiter.
und wenn es nur um das <div align=center> geht, wie gesagt kann man durch den einfachen <center> tag ersetzen.
und wenn dir das alte doch gefällt, wieso willst es dann überhaupt überarbeiten? nur wegen dem xhtml strict ...

MfG, T.Eisenhammer.
 
Re: Öhm!? ...

Original geschrieben von T.Eisenhammer
man könnte es aber so hinbiegen das es so aussieht.
Ein paar werte umändern und so weiter.
und wenn es nur um das <div align=center> geht, wie gesagt kann man durch den einfachen <center> tag ersetzen.
und wenn dir das alte doch gefällt, wieso willst es dann überhaupt überarbeiten? nur wegen dem xhtml strict ...

MfG, T.Eisenhammer.
Zum Vergrößern anklicken....
&nbsp;

ja mit <center> wärs geil...allerdings auch nicht XHTML 1.1 (strict) valide...
 
Öhm!? ...

nochmal zum nachfragen:
was gefällt dir an der sache mit margin-left und right auto nicht? ich habs grad mal selber ausprobiert, und es sitzt mittig.
und die andere sache mit der absoluten positionierung.
wär gut wenn ich es mal selber sehen könnte.
Dann könnte man vielleicht noch einen kleinen Feinschliff vornehmen.

MfG, T.Eisenhammer.
 
Re: Öhm!? ...

Original geschrieben von T.Eisenhammer
nochmal zum nachfragen:
was gefällt dir an der sache mit margin-left und right auto nicht? ich habs grad mal selber ausprobiert, und es sitzt mittig.
und die andere sache mit der absoluten positionierung.
wär gut wenn ich es mal selber sehen könnte.
Dann könnte man vielleicht noch einen kleinen Feinschliff vornehmen.

MfG, T.Eisenhammer.
Zum Vergrößern anklicken....

ich bin mir nicht sicher ob ich das jetzt richtig gemacht habe:

im CSS:

.Tabelle {
position: absolute;
width: 700px;
left: 25%;
right: 25%
}


und im Quellcode:

<table class="Tabelle">

aber irgendwie hakts da noch mit dem verkleinern usw...
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten