Problem mit Anzeigen der Website beim Minimieren im IE

[Jens-Glob]

Hallo!

Nachdem meine neue Website www.globiator.at nun eigentlich recht gut funktioniert (auch 2-sprachig ohne Probleme) habe ich ein Problem, wenn ich die Seite im Internet Explorer minimiere. Der gesamte Content rutscht dann einfach nach unten weg. Bekannte haben mir gesagt, dass auch die News bei kleinen Monitoren nach unten rutschen.

Selbiges passiert auch, wenn ich die Seite ausdrucke...Die erste Seite ist leer, auf der zweiten erscheint dann der jeweilige Content.

Im Firefox funktioniert hingegen alles problemlos...

Ich habe bereits alles Mögliche im Stylesheet versucht, finde aber keine Lösung 

Bin über alle Tips echt dankbar!

Liebe Grüße!

[cyberman]

Du musst nur die Breiten der divs (#content & co) relativ (in %) angeben und nicht in festen Pixelgrößen .

Den Ausdruck würde ich über ein separates Print-Stylesheet (hab ich bei bei nicht gefunden) oder über das Print-Modul realisieren. Da kannst du ganz genau festlegen, was in welcher Breite ausgedruckt werden soll - ist meines Erachtens auch kundenfreundlicher ...

PS: Schöne Seite (referenzverdächtig), leider nicht xhtml-valid. Allerdings würde ich im laufenden Text mehr mit Absätzen arbeiten - bei mehr als 5 Zeilen hat das menschliche Auge Probleme, den Text zu erfassen/verfolgen. Auch den würde ich etwas mehr Abstand gönnen ...

[Jens-Glob]

Danke - habs grad versucht, aber das will nciht so, wie ich wil

Wie würdest Du Folgendes in % darstellen?

}

#content-container {
margin-left:171px;

}

#content {
min-height:600px;
padding: 20px;
width:700px;
float:left;

Die Seite war schon mal xhtml-valid aber zum Beispiel google-analytics macht die Seite wieder invalid...obwohl die das eigentlich können sollten

[cyberman]

Wie würdest Du Folgendes in % darstellen?

Schau doch einfach mal in die mitgelieferten Standard-Templates - da siehst du, wie es gemacht wird .

aber zum Beispiel google-analytics macht die Seite wieder invalid

Bei mir nich  ...

[FlA]

Hallo,

ich habe dasselbe Problem, aber ich denke eher dass das Problem im JAVA-Script liegt. Zumindest funktioniert es bei mir wenn der Content schmäler als die im Script angegebene Breite ist.

{literal}

=b){nw=b+"px";}if(w



#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}


{/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Left sidebar + 1 column" *}

Hat vl jemand eine Idee wie man das Problem lösen könnte?

[NaN]

Das JavaScript ist bei Jens-Globs Seite ja überhaupt nicht im Template drin.
Daran kann es also in diesem Fall nicht liegen.

Zunächsteinmal fällt mir auf, dass Deine Seite nicht für kleinere Auflösungen geignet ist.
Auf einem 19" TFT Monitor mit einer Auflösung von 1280x1024 ist im Vollbild das gesamte Browserfenster von Deiner Seite gefüllt.
Schon bei einer Auslösung von 1024x768 (was man heute schon fast als minimum Standard ansehen kann) gibt es da Probleme bei Deiner Seite.
Im Firefox gibt es einen horizontalen Rollbalken, was einfach nicht hübsch ist und zumindest solange, wie man sich die Seite mit einer "Standard-Auflösung" anschaut vermieden werden sollte...
Moment! Gerade fällt mir auf, dass es im Firefox KEINEN horizontalen Rollbalken gibt. Der Inhalt läuft einfach rechts aus dem Fenster und ist ... weg! Auf kleineren Bildschrimen (z.B. bei Notebooks) bekommt man im Firefox also nur die Hälfte des Angebots zu sehen.
In Deinem Stylesheet steht:

Code: Select all

#wrapper {
	overflow: hidden;
}

D.h. also Du "versteckst" den Inhalt, wenn er nicht in den Wrapper passt.
Fataler Fehler!
Da würde ich lieber mit einem Rollbalken leben.
Nimm das da bloß weg.

Außerdem gibst Du dem Wrapper überhaupt keine Breite.
Der Wrapper ist ein DIV.
DIV's sind von Natur aus Blockelemente.
Diese gehen - sofern nichts anderes im Stylesheet steht - über die gesamte zur Verfügung stehenden Breite.
Der Wrapper passt sich also dem Browserfenster an.
Du kannst das alles sehen, wenn Du dem Wrapper mal einen Rahmen gibst.

Und jetzt kommen zwei unterschiedliche Browserverhalten ins Spiel was die Inhalte in Blockelementen angeht, die über die Breite des übergeordneten Blockelements hinausgehen.
Beim IE wird einfach die "Zeile" umgebrochen. Die DIVs Content, News etc. rutschen somit nach unten.
Beim Firefox bleiben sie stehen und laufen aus dem Wrapper rechts heraus.
Das hat unter anderem auch was mit den Float-Eigenschaften zu tun.
Die DIVs Content und News etc. haben "float:left".
Wenn man mit Float arbeitet muss man den Elementen eine korrekte Größe geben (Höhe und Breite) sonst "kollabieren" sie.
Das gilt sowohl für die Float-Elemente als auch für deren Übergeordnetes Element.
Geht in diesem Falle aber nicht, da sich die Höhe ja an den Inhalt anpassen soll.
Da gibts nen kleinen Trick.
Setz mal ganz unten bevor du den Wrapper wieder mit schließt noch ein hin. somit zwingst Du den Browser, den Wrapper in voller Höhe darzustellen.

Ich würde die News nicht rechts neben dem Inhalt plazieren.
Das wird alles einfach zu breit.
Du müsstest dem Wrapper quasi eine Breite von 1280px geben.
Und das im Web (!!!).
Eine von diesen drei Spalten würde ich woanders plazieren oder alles etwas schmaler machen.

Cyberman hat schon recht mit den relativen Größen.
Ich habe heute leider keine Zeit, die ganzen Stylesheets durchzugehen.
Aber ich hoffe, ich konnte Dir zumindest einen Ansatz bieten.
Falls nicht, einfach weiterfragen.
Ab Montag sind bestimmt alle wieder da 

[NaN]

Du lieber Himmel! Wer schreibt den Text?

Hab grad versucht die Stylesheets zu überarbeiten.
Das Hauptproblem ist z.B. die Tabelle im Content.
Die hat eine feste Breite von 700px.
Das steht direkt im Quellcode.
Somit kannst Du mit den relativen Breitenangaben nichts erreichen.
Wie kommt das da rein?
Das solltest Du evtl. ändern.

Und vielleicht auch nochmal in den Content Schauen.
Sowas ist z.B. vollkommen unnötig:


 
     
       
           
               
...

Und das alles nur, um eine Überschrift der 3. Ordnung zu formatieren.
Das geht auch einfacher.
Aus Gründen der Einheitlichkeit würde ich schon im Vorfeld klären, wie welche Überschrift auszusehen hat.
Dann braucht man nämlich im Stylesheet nur noch

h1 {
  ...
}
h2 {
  ...
}
h3 {
  ...
}

usw.

zu notieren und im Editor den Text lediglich als Überschrift auszuweisen.
Ergo: keine - oder -Tags mehr um Schriftart, -größe etc. festzulegen.
(Font-Tags gehören ohnehin nicht in einen XHTML-Validen Quellcode.)
Das gleiche gilt auch für den Fließtext, Hyperlinks, evtl. Bilder usw.

Die Linkliste unter der Überschrift "Globiator.com Sprachreisen" ist auch nicht als Liste definiert sondern mit grauenhaft vielen -, - und -Tags versehen.
Letztere sind zudem im gesamten Dokument alle nicht valide, da der Schrägstrich zur Kennzeichnung inhaltsleerer Elemente am Ende fehlt:
.
Einige Bilder werden doppelt formatiert. D.h. es steht im -Tag einmal style="width:..." und width="..."
So kann man bei den Stylesheets formatieren wie man will.

Noch ein kleiner Trick bei relativen Breiten:
Margin und Padding werden zu der Breite hinzuaddiert. (Ausnahme ist hier wiedermal der Explorer. Stichwort Box-Modell-Fehler.)
D.h. wenn Du zwei Bereiche nebeneinander mit je einer Breite von 50% und einem Innenabstand von 20px darstellst, passen die Dinger natürlich nicht mehr nebeneinander, weil sie die Breite von 100% überschreiten.
Wenn man da zumindest die Abstände links und rechts auch noch in % angibt passt sich die Seite perfekt der Fenstergröße an.
Hab das gerade mal bei Deiner Seite probiert.

So, jetzt mal was konkretes.
Folgende Änderungen würde ich vornehmen:

#wrapper {
overflow: visible;                  /* nix verstecken! wir wollen alles sehen. */
width:100%;
min-width:750px;                /* irgendwann soll das ja auch mal aufhören mit dem Anpassen */
}

#content {
min-height:600px;
padding: 20px 2% 20px 2%; /* oben und unten bleibts bei 20px; links und rechts 2% */
width:70%;                        /* relative Breite */
float:left;
}

#colright {
float:right;                        /* richtet die News am rechten Rand aus */
padding: 20px 2% 20px 2%;
width:20%;                     
      /* relative Breite; content und colright haben zusammen 90% vom content-container + 4 x 2% padding; macht 98% also nicht zu breit und nichts rutscht nach unten */
}

/*------------------------ NEWS ---------------------*/
.NewsSummary {
border-bottom:1px solid #F3F37C;
padding-bottom:5px;
margin-bottom:5px;
width:100%;                            /* relative Breite; 100% vom colright */
}

Und im Template würde ich noch



einmal bevor der Wrapper und einmal bevor der Content-Conainer geschlossen wird hinzufügen.
So haut es im Firefox und Explorer hin. Andere Browser hab ich grad nicht zur Hand.
Ich hoffe, ich habe nichts übersehen und das Resultat entspricht Deinen Wünschen.