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

Warum zeigt der Browser nicht den ganzen Inhalt an?

P

PeterUstinox

Guest
War gerad am Homepage gestalten, als ich dann irgendwie auf dieses Problem getroffen bin:

Beim verkleinern des Browsers dieser Homepage: http://www.wsmk.de/substanz
wird der ober Teil der Seite zunehmend abgeschnitten...
Liegt das an der allgemeinen zentrierten Positionierung? Der Inhalt nach unten bleibt sichtbar. Nach oben wird aber immer mehr abgeschnitten je kleiner das Browserfenster wird und das obwohl ich kein relatives Positioning oder anderen Schmu verwendet habe...

Lösungsansätze sind herzlich willkommen!
Dank im vorraus.
Gruß PeterUstinox
 
Werbung:
ja, sicherlich. Aber nicht die Überschrift. die wird irgendwann abgeschnitten und die kannst du nicht mehr sehen. die wird aus dem "viewport" entfernt. Aus welchen Gründen auch immer... Wenn ich die zentrierung entferne (position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;) ist das Problem übrigens auch mit verschwunden.

Um es in den Worten eines Laien auszudrücken: "Man kann das Fenster nicht mehr ganz nach oben scrollen (um z.B. die Überschrift zu lesen), wenn es kleiner gemacht wird."

Dieses Problem stellt sich natürlich meistens nicht in unserer hochaufgelösten Computerbildschirmwelt... Ganz anders sieht das aber auf mobilen Endgeräten usw aus...

Allein wenn ich Firebug geöffnet habe, kann ich den gesamten Seiteninhalt nicht mehr sehen
 
Werbung:
Hallo,

ich musste erst mehrere Browser ausprobieren, um das Problem nachvollziehen zu können.

Der Firefox und der IE zeigen alles an, beim Opera wird wie beschrieben bei höheren Zoom-Stufen die obere Überschrift nach oben außerhalb des Viewpoints verschoben.

Das Problem sind wahrscheinlich die absolut positionierten Divs. Absolut positionierte Elemente sollten eine Ausnahme sein und nur dann verwendet werden, wenn man sich des Ergebnisses bewußt ist.

Gruss

MrMurphy
 
Ja, schon gut... der Zeichensatzfehler war übrigens ein kryptisches "i" von "id", naja.
Die absolute Positionierung ist natürlich auch nur Mittel zum Zweck das ganze Ding halt mittig zu zentrieren...
Wünschte mir auch ne bessere Lösung, aber da kommt man doch um JavaScript nicht drum herum, oder?
Firefox macht es ja wenigstens so wie ich es mir wünsche...
 
Werbung:
Zentrierung geht ohne position mittels "margin".

Code: 
#zentriermich {
 margin: 0 auto;
 width: 800px;
}

Bei dir sehe ich (FF 3.6) aber momentan nicht mal eine Zentrierung wenn ich mir das anschaue, nur Verschiebungen nach Rechts, nach außerhalb meines Viewports.
 
Ja ne.
Horizontale Zentrierung.
das ist ja was für Neulinge.
es geht mir um die Vertikale...
und da muss man den wrap aus dem kontext heben mittels position:absolute.
nachzulesen auf meiner Seite, wie auch bei meinem Beitrag. Dafür wünsche ich eine Erköärung Herr HTML-Guru

Ich weiß, dass das ganze für den Laien-Webseiten-Betrachter, der keine 1080p Auflösung hat Schmu is.
Die Größe ist aber auch nicht von Belang.
 
Ich sehe dort nicht mal den Ansatz einer vertikalen Zentrierung. Du hast lediglich:

Code: 
div#container,#all_container{
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    margin: auto;
}

was aus 3 Gründen widersprüchlich ist:
- absolute Positonierung ohne jegliche Werteänderung bei left/bottom/right/top von 0
- absolute Positionierung mit Angaben für alle Richtungen left/bottom/right/top
- ein automatischer Außenabstand der bei absolt positionierten Elementen nicht wirkt

Wenn Du eine vertikale Zentrierung erreichen willst, müsste dort stehen:
Code: 
div#container,#all_container{
    position: absolute;
    top: 50%;
    left: 0;
    height: [gewünschte Breite]px;
    margin-top: -[Hälfte von width-Wert]px;
}

Abgesehen davon sieht die Seite bei mir in jedem Browser auch weiterhin unansehnlich aus. Ich sehe selbst bei mehr als 1200px Viewport nur ganz rechts die Andeutung von farblichen Balken. Wenn ich mittels Firebug mal für div#container die Breitenangabe weglassen, dann sehe ich scheinbar alles - aber weder vertikal noch horizontal zentriert.
 
Werbung:
Ok. deine Methode zu vertikalen Zentrierung ist selbstverständlich auch möglich.
Jedoch nicht sehr praktikabel. Denn bei Größenänderung müsstest du ja auch jedes Mal deine Werte korrigieren.

Zu meiner Variante: Sie ist 1. nicht widersprüchlich. Die absolute Positionierung ist nämlich lediglich dafür da, den content-div aus dem Webseitenfluss zu heben (wie es bei absolut positionierten Dingen halt so ist.), um dann mit einem simplen margin : auto; das ganze ganz zentriert darzustellen und zwar bei jeder Größe. Warum das bei deinem Browser nicht hinhaut ist mir ein Rätsel, denn ich gebe ja zu, diese gute Idee stammt nicht von mir sondern aus dem besten CSS-Buch, dass es auf dem freien Markt gibt (Das Meisterwerk von Ingo Chao und Corina Rudel meine ich selbstverständlich).

Daraus zitiere ich mal zum Thema Zentrierung ein wenig:

 

und nun muss ich zugeben, dass ich ein wenig voreilig mit meinen Posts hier war... denn gleich ein paar Seiten liefert Ingo selbst die Lösung...
Wen es interessiert: es ist ein simples min-height.
Nachlesen kann man das denn auch hier:

 
 
Code: 
div#container,#all_container{
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    margin: auto;
}

Ich könnte wetten, dass das im IE6 nicht funktioniert.

Ok. deine Methode zu vertikalen Zentrierung ist selbstverständlich auch möglich.
Jedoch nicht sehr praktikabel. Denn bei Größenänderung müsstest du ja auch jedes Mal deine Werte korrigieren.
Zum Vergrößern anklicken....

Das muss man bei der von dir zuletzt verlinkten Lösung auch, oder?

(Hat jedenfalls mein Firebug-Test gerade ergeben. Besonders intensiv in den Code geschaut habe ich nicht, gebe ich zu.)
 
Werbung:
Das nutzt auch eine explizite Höhenangabe. Ich sag's nur, weil das sozusagen der Punkt/Einwand war, auf den ich mich bezog. Ich glaube nicht, dass es eine browserübergreifende Lösung ohne JavaScript gibt, die ohne explizite Höhenangabe oder Tabellen auskommt.
 
mermshaus schrieb:
Das nutzt auch eine explizite Höhenangabe. Ich sag's nur, weil das sozusagen der Punkt/Einwand war, auf den ich mich bezog. Ich glaube nicht, dass es eine browserübergreifende Lösung ohne JavaScript gibt, die ohne explizite Höhenangabe oder Tabellen auskommt.
Zum Vergrößern anklicken....

da hast du vollkommen recht. :)

In dem geposteten Link geht es ja auch nicht ohne Höhenangabe, allerdings ohne pos. absol..
 
du liegst richtig, im IE6 wird bekanntlicherweise min-height nicht unterstützt.

Dafür hab ich hier mal die Lösung parat:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>&nbsp;</title> 
 
  <style type="text/css"> 
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      position: relative;
      min-height: 300px;
      min-width: 400px;
    }
    #container {
      position: absolute;
      background: #9ccd3e;
      border: 2px solid #577923;
      height: 300px;
      width: 400px;
      left: 50%;
      top: 50%;
      margin-top: -150px; /* halbe Boxhöhe */
      margin-left: -200px; /* halbe Boxbreite */
    }
  </style> 
  <!--[if lte IE 7]><style type="text/css">
    * html #platzhalter {
      height: 300px;
      width: 400px;
    }
  </style><![endif]--> 
</head> 
<body> 
 
  <div id="platzhalter"><!-- --></div> 
  <div id="container"> 
    <h1>Lorem ipsum</h1> 
    <p> 
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p> 
  </div> 
 
</body> 
</html>
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben