Layout auf Browserzooms vorbereiten?

Tach Zusammen!

Ich hab mal eine erste Aufteilung für eine Webseite gebastelt (ist noch erkennbar unfertig). Nun hab ich den Ehrgeiz, das Layout so zu bauen, dass es durch Veränderungen der browserseitigen Zoomfunktionen (STRG+ +/-) nicht - wie momentan - zerschossen wird.

Habt ihr Erfahrung damit, wie ich das Layout so fixieren kann, dass sich Änderungen der Zoomeinstellungen nicht so böse auswirken? (Bitte einfach mal ausprobieren, dann seht ihr, was ich meine)

http://www.pinales.de/groupsites/

Hier die CSS-Definitionen dazu:

html,body {
margin:0;
padding:0;
}


body {
font: 0.9em verdana,arial,sans-serif;
}


p {
margin: 0 10px 10px;
}


a {
display: block;
color: #981793;
padding: 10px;
}


div#header h1 {
height: 120px;
font-weight: normal;
line-height: 120px;
margin: 0;
padding-left: 65px;
color: #fff;
background: url("pics/head_hint.jpg");
background-repeat: x-repeat;
clear: both;
}


#logo {
height: 120px;
background-color: #fff;
}


#logo img {
float: left;
border: 0;
width: 260px;
height: 120px;
margin-left: 50px;
}


#login {
float: right;
width: 284px;
height: 90px;
padding: 2px 105px 0 13px;
background: url("pics/login_hint.jpg") no-repeat;
}


/* beginn login-feld ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


#benutzer,#kennwort {
border: 1px;
display: block;
font-size: 10px;
width: 180px;
color: #1fa22e;
border: 1px solid #aaa;
background:url("pics/inputbg.gif") no-repeat;
}


#loginform tr td {
font-size: 10px;
color: #aaa;
}


#submit {
width: 50px;
height: 50px;
margin-left: 15px;
}


#pw_einr {
margin-left: 42px;
}


/* ende login-feld ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


div#wrapper {
float: left;
width: 100%;
}


div#content {
height: 400px; /*nur zur Verdeutlichung (wird wieder entfernt)*/
border: 1px dotted lightgrey; /*nur zur Verdeutlichung (wird wieder entfernt)*/
margin-right: 400px;
padding: 40px 50px;
}


div#content p {
line-height: 1.2;
}


div#navigation {
float: left;
width: 198px; /*200px*/
min-height: 200px;  /*nur zur Verdeutlichung (wird wieder entfernt)*/
margin: 40px 0 0 -400px;
border: 1px dotted lightgrey;  /*nur zur Verdeutlichung (wird wieder entfernt)*/
}


div#info {
float: left;
width: 198px; /*200px*/
min-height: 300px; /*nur zur Verdeutlichung (wird wieder entfernt)*/
margin: 40px 0 0 -200px;
border: 1px dotted lightgrey; /*nur zur Verdeutlichung (wird wieder entfernt)*/
}


div#footer {
clear: left;
width: 100%;
background: #a2e512;
border-top: 3px solid #1fa22e;
}


div#footer p {
margin: 0;
padding: 5px 65px;
color: #fff;
font-size: 10px;
}

Tach sejuma!

Ich hab das anhand des Footers bereits mal ausprobiert. Die Höhe des enthaltenen Textes hatte ich in em vorgegeben; die Höhe des Footers ergab sich lediglich aus einem Padding nach oben und unten. Soweit ich also die Textgröße verändert habe, hat sich die Höhe des Footer-DIV angepasst. Nicht so allerdings bei der Nutzung der Zoomfunktionen: Da änderte sich lediglich die Textgröße. Die Höhe des umgebenden Footer-DIV blieb unverändert?!

hmmm, na ja, den Hinweis auf %-Angaben versteh ich schon. Für Container mag das funktionieren. Was Was mach ich aber mit meinen Grafiken?! Da kann ich ja kaum mit %-Größen hantieren?

Tach!

Anders herum: Ignoriert ihr das, was Browserzooms aus euren Seiten machen? Ich meine kann (sollte) man das besser vernachlässigen?

Zitat von Greg10

schriftgröße hoch, ok

STRG+ + macht ja die "Schriftgröße hoch"?! Browser handhaben die Funktion wohl unterschiedlich: IE rendert die Ansicht insgesamt (Grafik und Text) größer. Das ist kein Problem. Opera vergrößert alle Elemente. Das bringt das Layout zwar zum Überlaufen, was aber noch erträglich bleibt, weil Text, Grafik und Container zumindest im gleichen Größenverhältnis verändert werden. Safari und Firefox vergrößern indes lediglich die Schrift, sodass die Texte aus ihren Elementen "herauslaufen". Das sieht dann leider wirklich schlimm aus...

Tach!

Zitat von Macrosdesign

also bei ff3 läuft nix i wo hin?!? wird halt alles etwas größer auch wenn ich den sinn davon net so verstehe ...........

[off topic]willst du deine navigation wirklich rechts haben???weil das sieht find ich i wie komisch aus[/offtopic]

Na ja, ich teste mit FF2, der Version also, die wohl nicht wenige nutzen werden. Da gerät, mit der Vergrößerung der Schrift, alles außer Rand und Band?!

Ich mach die Navigation nun erstmal fertig. Ich denke, dass das gut aussehen wird. Wenn nicht, ist der Container ja fix nach links verschoben...