XHTML 1.1 wie zentrieren?

Öhm!? ...

Also nach intensiver Quelltextstudie :D
Du hast kein Fehler gemacht. Der Browser zeigt genau das an, was da steht.
Das Problem sind die width:700px.
Dadurch wird zwar links der rand von 25% eingehalten, aber da die tabelle 700 pixel gross sein muss, hat der rechte rand nichts mehr. leider gleicht der browser das nicht gleichmässig an.
Ein Versuch wäre jetzt noch das ganze mal mit
margin-left:auto und margin-right:auto
zu versuchen, da er hier einen ausgleich zwischen linkem und rechtem rand schafft.

dazu: muss die tabelle gerade 700 pixel breit sein? (was machen da die armen 640x480 leute *g*)

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

Original geschrieben von T.Eisenhammer
Also nach intensiver Quelltextstudie :D
Du hast kein Fehler gemacht. Der Browser zeigt genau das an, was da steht.
Das Problem sind die width:700px.
Dadurch wird zwar links der rand von 25% eingehalten, aber da die tabelle 700 pixel gross sein muss, hat der rechte rand nichts mehr. leider gleicht der browser das nicht gleichmässig an.
Ein Versuch wäre jetzt noch das ganze mal mit
margin-left:auto und margin-right:auto
zu versuchen, da er hier einen ausgleich zwischen linkem und rechtem rand schafft.

dazu: muss die tabelle gerade 700 pixel breit sein? (was machen da die armen 640x480 leute *g*)

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

die margin-right/left zusätzlich zu "left/right" oder anstelle dieser?

mhm...ja die navi leisten müssen halt jeweils 100 sein und die "mitte" 500 damit die fotoalben dargestellt werden...die haben von haus aus eine mind. grösse von 500 breite...

P.S.: Die Seite schaut für 640x480 Leute fast perfekt aus :)
 
Öhm!? ...

ok. dann ist das mit den 700 also fix. stoert ja auch nicht weiter.
im moment sieht es komisch aus, den fehler hab ich auch gefunden:
marginright: auto > fehlt ein bindestrich.
und ja, das left und right, durch margin-left und right komplett ersetzen.
dann sollte es klappen.

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

Original geschrieben von T.Eisenhammer
ok. dann ist das mit den 700 also fix. stoert ja auch nicht weiter.
im moment sieht es komisch aus, den fehler hab ich auch gefunden:
marginright: auto > fehlt ein bindestrich.
und ja, das left und right, durch margin-left und right komplett ersetzen.
dann sollte es klappen.

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

leider nicht, jetzt ist es wieder oben links angesiedelt..

was kann das sein?
 
schritt für schritt

hier ein versuch einer "schritt für schritt lösung" :)

1)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Zum Vergrößern anklicken....

besser:
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1-transitional.dtd">

2)


warum absolute pfad-angabe?

3)
versuch mal ohne tabellen …

<head>
#links {
width: 100px;
float: left;
background-color: grey
}

#mitte {
width: 500px;
float: left
}

#rechts {
width: 100px;
background-color: grey
}

a.menu {
margin: 2px;
display: block;
}
</head>
<body>
&nbsp;<div id="links">
&nbsp;&nbsp;<a href="" class="menu">menu</a>
&nbsp;&nbsp;<a href="" class="menu">menu</a>
&nbsp;&nbsp;...
&nbsp;</div>
&nbsp;<div id="mitte">
&nbsp;&nbsp;...
&nbsp;</div>
&nbsp;<div id="rechts">
&nbsp;&nbsp;<a href="" class="menu">menu</a>
&nbsp;&nbsp;<a href="" class="menu">menu</a>
&nbsp;&nbsp;...
&nbsp;</div>
</body>

bis dahin verstanden?
 
Dicke Idee

Find ich ist ne gute Idee.
Mit ein paar kleinen Modifizierungen kann man dadurch sogar noch das Menu erhalten bleiben lassen, auch wenn man weit nach unten scrollt, z.b. in einer Bildergalerie.

Absolut ist wirklich nicht gut. Überall relativ wäre besser. Aber ich denke das war wohl nur ein versehen.

MfG, T.Eisenhammer.
 
schritt für schritt

hm … keine antwort von retrax? :(

hier ist jedenfalls der code zum horizontal-vertikal-zentrieren von containern … der übung wegen zusammen im header …

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<!-- metatags -->

<style type="text/css">
#dummy {
position: absolute;
width: 700px;
height: 480px;
background-color: grey
}
</style>

<script language="javascript" type="text/javascript">
var ie5 = (document.getElementById && document.all);
var ie6 = (document.getElementById && !document.all);

function center() {
if(ie5) {
innerWidth = document.body.clientWidth;
innerHeight = document.body.clientHeight;
}
div = document.getElementsByTagName("div");

div['dummy'].style.left = innerWidth/2 - div['dummy'].offsetWidth/2;
div['dummy'].style.top = innerHeight/2 - div['dummy'].offsetHeight/2;

}
</script>
</head>
<body onload="center();" onresize="center();" scroll="no">
<div id="dummy">hello world</div>
</body>
</html>

funktioniert im jeden browser.
 
Re: schritt für schritt

Original geschrieben von aresius
hier ein versuch einer "schritt für schritt lösung" :)
RETRAX: bis dahin verstanden?
Zum Vergrößern anklicken....

jep, :) aber wird dass dann nicht wieder eine DIV-Suppe?
 
ICH GLAUBE ES NICHT!!!

So einfach war das:


.Tabelle {
text-allign: center;
margin: auto
}


*freuuuuuuuu*
 
Zuletzt bearbeitet von einem Moderator:
Öhm!? ...

und wir machen hier so einen aufstand :)
naja,dann herzlichen glückwunsch, das wir das endlich gelöst haben.
Aber sowas ähnliches hab ichauf den 2 Seiten davor irgendwo schonmal gesehen :)
Naja, die Kombination machts :)

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

Original geschrieben von T.Eisenhammer
und wir machen hier so einen aufstand :)
naja,dann herzlichen glückwunsch, das wir das endlich gelöst haben.
Aber sowas ähnliches hab ichauf den 2 Seiten davor irgendwo schonmal gesehen :)
Naja, die Kombination machts :)

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

Danke Euch beiden trotzdem! Hat sehr viel Spass gemacht und ich hab viel dabei gelernt :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten