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

Dynamische Höhe ~ Auflösung

Status
Für weitere Antworten geschlossen.
L

Lolaskater31337

Neues Mitglied
Hallo.
Ich habe ein Horizontales Design und möchte, dass es in jeder Auflösung ab 1024x768px aufwärts vertikal zentriert ist und nicht am oberen Rand klebt. Allerdings habe ich Probleme damit, Platzhalter oben und unten hinzukriegen die immer so hoch sind, dass weder eine Bildlaufleiste erscheint, noch Asymmetrie entsteht.

Ich kam auf die Idee, die Gesamthöhe des sichtbaren Raums zu ermitteln, Höhe des zu zentrierenden Inhalts abzuziehen und durch 2 zu teilen um die Höhe für die benötigten Platzhalter oben und unten zu kriegen. Per Javascript.

Das schaut bisher so aus:

HTML: 
<head>
<link rel="stylesheet" href="style.css" type="text/css">

<script type="text/javascript">
onload=function() {
var pageh = document.getElementById('blindimg').offsetHeight;
overall.style.height = ( pageh - 572 ) + "px";
}
</script>

</head>


<body>

<div><img class="blindimg" border="0" src="data/blind2.gif" />
</div>

<div id="overall"></div>

<div class="content">
</div>

<div id="overall"></div>

</body>
</html>
css dazu:

HTML: 
body {
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
}

.blindimg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100%;
    width: 1px;
}

.overall {
}

.content {
    width: 100%;
    height: 200x;
}
Die DIVs mit der id "overall" sollen die dynamische Höhe bekommen. Blindimg ist dazu da die Höhe zu ermitteln.
Ich kenne mich leider nicht allzugut mit Javasccript aus. Jemand ne Ahnung wo der Fehler liegt oder ob es überhaupt so geht? ^^
Ich benötige eventuell noch die Funktionen zur Abfrage in anderen Browsern.
 
Lolaskater31337 schrieb:
Ich habe ein Horizontales Design
Zum Vergrößern anklicken....
Was ist ein "horizontales Design"?

möchte, dass es in jeder Auflösung ab 1024x768px aufwärts vertikal zentriert ist und nicht am oberen Rand klebt.
Zum Vergrößern anklicken....
Wieso Auflösung? Es macht eigentlich keinen Sinn, eine Website an der Auflösung zu zentrieren. Wenn der Viewport des Browserfensters zu klein wird, sieht man Deine Website dann ja gar nicht mehr vollständig, sondern muss scrollen.

Zentrieren sollte man immer nur im Viewport. Und außerdem nicht mit JavaScript (obwohl das zugegeben die einzige Möglichkeit wäre, das an der Auflösung festzumachen - was aber, wie eben festgestellt, sinnfrei ist), sondern mit CSS. Alles, was die Darstellung angeht, Layout und Design, macht man mit CSS.

Ich kam auf die Idee, die Gesamthöhe des sichtbaren Raums zu ermitteln, Höhe des zu zentrierenden Inhalts abzuziehen und durch 2 zu teilen um die Höhe für die benötigten Platzhalter oben und unten zu kriegen. Per Javascript.
Zum Vergrößern anklicken....
Der Gedanke ist ja gut, aber wieso brauchst Du dazu JavaScript?
Außerdem, wenn das abgeschaltet ist, ists Essig mit der Zentrierung.
Genau so, wie Du das beschrieben hast, kannst Du das mit CSS machen. Natürlich musst Du dazu nicht rechnen.
 
Bilder Fokus
dieses javascript besitzt eine funktion die, ein element immer mittig positioniert. funktion setPosition();

eine lösung mit height:100%;v-align:center;algin:center; sollte man bei der zentrierung einer webseite vorziehen.
 
Nur geht halt vertical-align nur mit Tabellenzellen. Die eher gebräuchliche Lösung ist die der Positionierung bei 50% und dem negativen margin-top in halber Elementhöhe. Das geht allerdings immer dann schief, wenn das zu zentrierende Element höher ist, als der Viewport hoch ist.
 
thx, efechen

eine lösung mit height:100%;v-align:center;algin:center; sollte man bei der zentrierung einer webseite vorziehen.
Zum Vergrößern anklicken....
so ganz stimmt das nicht :oops:

es heißt vertical-align:middle;
es funktioniert in diesem sinn nur bei <td>
um eine tabelle mit der höhe 100% zu bekommen müssen alle parent nodes height:100% haben.

html 100% > body 100% > table 100% > tr > td vertical-align:middle;align:center;

es sollte keine probleme geben, wenn man seine komplette seite in eine tabelle mit einer zelle packt.
 
Zuletzt bearbeitet von einem Moderator:
FoXMorayn schrieb:
es funktioniert in diesem sinn nur bei <td>
Zum Vergrößern anklicken....
Wenn Du schon beim Verbessern bist:
Es funktioniert natürlich nicht nur in <td>, sondern so wie ich es sagte, nämlich in Tabellenzellen. Aber in CSS gibts ja noch eine andere Methode, aus einem beliebigen Element eine Tabellenzelle zu machen:
display:table-cell;

um eine tabelle mit der höhe 100% zu bekommen müssen alle parent nodes height:100% haben.
Zum Vergrößern anklicken....
Was natürlich so für alle Elemente gilt, denn height:100% bezieht sich immer auf die Größe des Elternelements.

es sollte keine probleme geben, wenn man seine komplette seite in eine tabelle mit einer zelle packt.
Zum Vergrößern anklicken....
Aber es ist sinnfrei :-)
 
display:table-cell;
Zum Vergrößern anklicken....
mindestes der IE6 kann das nicht.

EDIT:
da fällt mir grad ein, dass ich keine ahnung hab wie der IE6 tabellen erstellt.
besitzt er eine einsehbare default.css oder ähnliches?
 
Zuletzt bearbeitet von einem Moderator:
Für den muss man an der Stelle display: block; verwenden - so sinnfrei das auch klingt.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben