• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Website zoomen (Orientierung am Rand links oben)

Gokar

Neues Mitglied
Hallo Community,

ich bin Neueinsteiger mit Grundkenntnissen auf dem Gebiet html/ css/ php/ js und gerade dabei ein Projekt zu bearbeiten.
Da mir das Layout meiner Arbeit bisher noch nicht gefällt, habe ich mir vorgenommen es noch mal von Null auf zu bearbeiten.
Ein Problem besteht momentan noch: die Zoom-Funktion der Browser gefällt mir noch nicht.

Weshalb? Wenn ich jetzt die Seite vergrößere, wird immer (konstant) in die Mitte des Fensters gezoomt. Dabei geht alles links der Mitte, das nicht mehr vom Fenster erfasst wird, 'verloren', da die Scroll-Leiste des Browsers nur nach rechts bewegbar ist.

Wo möchte ich hin?
Ich hätte gerne eine Lösung dieser Art: News Zürich: Stadt Zürich - tagesanzeiger.ch
Hierbei wird solange in die Mitte des Fensters gezoomt bis der linke Rand kurz davor ist aus dem Fenster zu treten.
Ab diesem Zeitpunkt wird immer so weiter gezoomt, dass die obere linke Ecke stets im Bild bleibt.
Das ganze funktioniert dann auch rauswärts.


Habe etwas gegoogelt und hier mal kurz die Suchfunktion in Betracht gezogen, aber nichts gefunden das mir geholfen hätte. Bin leider total ratlos wie man diese Einstellung vornimmt. Bitte helft mir ein wenig ;Jump


Vielen Dank,


Liebe Grüße,
Gokar
 
Werbung:
Willkommen im Forum.

Es wäre toll, wenn du eine kleine Beispielseite anfertigen könntest, die das Problem zeigt.

Auf der Seite über die Stadt Zürich sehe ich zumindest nichts, was vom „Standardverhalten“ bei Zoom abweichen würde. Ich vermute deshalb, dass du irgendeine besondere Art der Positionierung nutzt.
 
Also, auf die Schnelle das Grundgerüst:


<!doctype html>
<html>
<head>
<title>divtest</title>
<style type="text/css">
<!--
DIV#content {
position:relative;
width:900px;
min-height:500px;
border:1px solid red;
text-align:center;
margin:0 auto;
margin-top:250px;
}

DIV#header {
width:1200px;
height:50px;
position:absolute;
background:white;
border:1px solid blue;
top:0px;
left:50%;
margin-left:-600px;
text-align:center;
}

DIV#menue {
width:1000px;
height:150px;
position:absolute;
border:1px solid grey;
top:60px;
left:50%;
margin-left:-500px;
text-align:center;
}

DIV#footer {
width:1000px;
height:50px;
position:absolute;
border:1px solid blue;
left:50%;
margin-left:-500px;
margin-top:50px;
text-align:center;
}
-->
</style>
</head>
<body bgcolor="white">
<div id="header">
<p>header</p>
</div>
<div id="menue">
<p>menue</p>
</div>
<div id="content">
<p>111</p><p>...</p><p>999</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</body>
</html>


Vielleicht hilfts..

Der div der Klasse content verhält sich wie erwünscht. Der 'header' und der 'menue' div verschwinden beim Zoom allerdings teilsweise. Die beiden haben 'position:absolute;', der content div 'position:relative;' ..
 
Zuletzt bearbeitet:
Werbung:
Das hängt an der absoluten Positionierung. Probier es so:

Code:
            DIV#header {
                width:1200px;
                height:50px;
                margin: 0 auto;
                background:white;
                border:1px solid blue;
                text-align:center;
            }
 
Das funktioniert wunderbar. Vielen Dank!

Leider sind meine Kenntnisse auf diesem Bereich wie gesagt noch sehr gering und ich habe den vorherigen Aufbau der div-Container mir so durch zusammensammeln und ausprobieren hingedreht..

- 'margin: 0 auto' hat dann wohl eine automatische Zentrierung zur Folge, richtig?
- Würdest Du dann generell eher von der absoluten Positionierung abraten und das mit 'margin: 0 auto' lösen?
 
Ja, würde ich. Absolute Positionierung ist pauschal gesagt nie die erste Wahl. Aufgaben, die mit vergleichbarem Aufwand ohne lösbar sind, sollten ohne bewältigt werden.

margin: 0 auto; besagt: „Setze den Außenabstand dieses Elements vertikal (oben und unten) auf 0 und horizontal (links und rechts) auf auto.“ Und auto bewirkt horizontal die Zentrierung, da die Angabe dort in etwa bedeutet: „Nutze den maximalen zur Verfügung stehenden Abstand.“ Wenn das auf beiden Seiten geschieht, wird das Element „als Kompromiss“ im Elternelement zentriert.

- SELFHTML: Stylesheets / CSS-Eigenschaften / Auenrand und Abstand
 
Werbung:
Super! Vielen lieben Dank für die nette und erfolgreiche Hilfe!

Wenn ich darf, werf ich hier gerne mal wieder eine Frage in den Raum.


Schönes We dann ;)
 
Zurück
Oben