Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.
Seiten: 1
#1 27. März 2011 19:05
- mörml
- Server-Pate
- Registriert: 23. Januar 2011
- Beiträge: 443
*GELÖST* Browserstabile Website
Hallo ihr Lieben,
wie konfiguriere ich meine Website browserstabil?
Je nach Browser oder aber Zoomeinstellung verzerrt sie sich. Kein Zeichen von Qualität....
VG mörml
Beitrag geändert von mörml (28. März 2011 11:55)
kann CMSms buchstabieren...
CMSms 1.11.12
PHP 5.5.14
Offline
#2 27. März 2011 19:29
- owr_web
- Server-Pate
- Registriert: 16. Dezember 2010
- Beiträge: 543
Re: *GELÖST* Browserstabile Website
#header h1 {
color:transparent;
FF und Safari haben damit kein Problem, aber der IE - warum transparent? Wenn du es unsichtbar machen willst auf weißem Hintergrund, dann mach es einfach mit weißer Schrift.
Ansonsten hab ich auf die Schnelle keine gravierenden Unterschiede erkannt.
Offline
#3 27. März 2011 19:35
- mörml
- Server-Pate
- Registriert: 23. Januar 2011
- Beiträge: 443
Re: *GELÖST* Browserstabile Website
Gerade der Safari zerroppt mir die Ansicht. (?) Und ganz olle/kleine Bildschirme.
Und beim Zoomen steht mein Content irgendwann unter "Info" und "News" - doof!
kann CMSms buchstabieren...
CMSms 1.11.12
PHP 5.5.14
Offline
#4 27. März 2011 20:04
- NaN
- Moderator
- Ort: Halle (Saale)
- Registriert: 09. November 2010
- Beiträge: 4.437
Re: *GELÖST* Browserstabile Website
Gib mal dem #pagewrapper im CSS eine konkrete minimale Breite.
80.01% ergibt da keinen Sinn. Nimm mal z.B. 980px.
Die Sache mit dem Menu und dem Header würde ich komplett anders aufbauen.
Wenn Du dem Header links einen Abstand von 500px gibst, dann ist klar, dass das bei kleineren Bildschirmen nicht mehr passen kann.
Hier mal ein Beispiel wie ich es machen würde...
Template:
<div id="header-wrapper">
<div id="header">
<h1>Katzenhilfe Katzenherzen e.V.</h1>
<hr class="accessibility">
</div>
<div id="navmenu1">
{menu ... }
</div>
<div id="navmenu2">
{menu ...}
</div>
</div>
CSS:
#header-wrapper {
min-width: 980px;
height: 320px;
position: relative;
}
#header {
background: url("uploads/images/header_lila.png") no-repeat scroll 0 0 transparent;
height: 320px;
position: absolute;
right: 0;
width: 690px;
}
#navmenu1 {
left: 175px;
position: absolute;
text-align: right;
top: 100px;
}
#navmenu2 {
left: 360px;
position: absolute;
top: 100px;
}
Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)
Offline
#5 27. März 2011 21:25
- mörml
- Server-Pate
- Registriert: 23. Januar 2011
- Beiträge: 443
Re: *GELÖST* Browserstabile Website
1000 Dank NaN für deine Mühe.
Die Veränderung des page-wrappers führt jedoch wieder zu einer Kollision insoweit, als der Header-Bereich exrem auseinandergezogen wird.
Das Zoom-Problem ist auch geblieben (wobei, das ist vielleicht normal bei extremem Zoom??)
kann CMSms buchstabieren...
CMSms 1.11.12
PHP 5.5.14
Offline
#6 27. März 2011 21:31
- mörml
- Server-Pate
- Registriert: 23. Januar 2011
- Beiträge: 443
Re: *GELÖST* Browserstabile Website
Nachtrag: Hab schnell mal in Safari geschaut: Jetzt sieht es noch schlimmer aus, liegt vermutlich an dem noch ursprünglichen Page-wrapper. (?)
kann CMSms buchstabieren...
CMSms 1.11.12
PHP 5.5.14
Offline
#7 28. März 2011 22:13
- NaN
- Moderator
- Ort: Halle (Saale)
- Registriert: 09. November 2010
- Beiträge: 4.437
Re: *GELÖST* Browserstabile Website
Dem Pagewrapper musst Du auf jeden Fall eine Absolute Größe für min-width geben.
width:90% und min-width:80% ergibt keinen Sinn.
Ich weiß nicht genau was Du erreichen willst, aber Seiten kann man nunmal nicht endlos zoomen. Irgendwann passt es nicht mehr ins Bild oder etwas verschiebt sich. Aber das ist bei dem Layout normal.*
Außerdem kommt es darauf an, ob nur Schriftgröße, oder die gesamte Seite gezoomt werden soll. Das liegt an den Fähigkeiten bzw. Einstellungen des Browsers.
Ich weiß nicht welchen Safari Du verwendest, aber im FF 4 und Safari 5 kann ich da keinen Unterschied erkennen. Die Seite sieht bei beiden sowohl normal als auch gezoomt gleich aus.
Ich kann im FF 4 viermal Zoomen (komplette Seite gezoomt), bevor dann ein horizontaler Scrollbalken erscheint. Im Safari 5 zweimal. Das liegt daran, dass die Browser in unterschiedlichen Schritten vergrößern. Ich denke das ist okay. Ich habe hier eine Auflösung von 1680 x 1050 und größer braucht die Seite keiner. Ich kann die jetzt gut aus 1,5 Meter Entfernung lesen
* Da Du für die Breite Deiner Seite eine relative Größe (%) und für die maximale Breite eine Absolute Größe verwendest, wird sich beim Zoom irgendwann immer etwas verschieben oder etwas nicht mehr richtig ins Layout passen. Die einzige Möglichkeit, die ich kenne, eine Seite beim Zoom (sowohl bei nur Schriftgröße ändern als auch bei kompletter Seitenvergrößerung) immer gleich anzeigen zu lassen ist, em Größen zu verwenden. em Größen passen sich immer der Schriftgröße an. Ein Beispiel hab ich hier: http://www.rae-km.de
Ein bescheidenes Layout, welches beim Zoom aber immer das Seitenverhältnis beibehält. Egal ob nur Text oder die ganze Seite gezoomt wird.
Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)
Offline
#8 28. März 2011 09:40
- mörml
- Server-Pate
- Registriert: 23. Januar 2011
- Beiträge: 443
Re: *GELÖST* Browserstabile Website
Das kommt dir jetzt womöglich naiv vor, aber ich hielt es für einen (von mir verursachten) Fehler, dass ab einer bestimmten Zoomgröße mein Inhaltsblock unter die Blöcke "Info" und "News" rutscht. Damit hast du zumindest "mein Zoom-Problem" gelöst (ich gehe davon aus, dass jedwede Einheit in em umformuliert werden muss? Herzlichen Dank auch für den Weblink, das guck ich mir mit FireBug an).
Beim Safari handelt es sich um die Version 5.0.3 mit einem IMac-Bildschirm, und dort wird der Headerbereich zusammengeschoben. (?)
Konkret erreichen möchte ich, dass sich der Header nicht von Bildschirm zu Bildschirm bzw. Browser zu Browser so stark verändert, dass er einmal auseinandergezogen ist, ein anderes Mal das Navi-Menü in das Headerbild hineinrutscht oder der Schriftzug unter dem Headerbild abgeschnitten ist. Das meinte ich mit Browserstabilität. Oder andersherum: Ich möchte, dass, egal, welchen Browser oder Bildschirm man verwendet, die Elemente genau dort bleiben, wo sie sind.
Darf ich doof fragen, warum width:90% und min-width:80% keinen Sinn ergibt? Ich interpretierte dies so, dass die Standardgröße 90% sein soll, mindestens aber 80% (und nicht darunter). Das ist doch beides eine relative Größe?
kann CMSms buchstabieren...
CMSms 1.11.12
PHP 5.5.14
Offline
#9 28. März 2011 10:01
- owr_web
- Server-Pate
- Registriert: 16. Dezember 2010
- Beiträge: 543
Re: *GELÖST* Browserstabile Website
Darf ich doof fragen, warum width:90% und min-width:80% keinen Sinn ergibt?
ganz einfach: Wenn ich den Browser auf (ich nehm mal gerade Zahlen) auf 1000px Breite eingestellt habe, sind 80% 800px.
Wenn ich aber das Browserfenster auf 500px Breite verkleinere, sind 80% nur mehr 400px.
Wenn du dann die ganzen Bereiche auch noch relativ (z.B.%) positioniert hast verkleinern sich diese auch anteilsmäßig. Jedoch machen sie das nur soweit wie möglich. Wenn du also eine Grafik mit 100px Breite drinnen hast, wird das Fenster nicht kleiner.
Also in deinem Beispiel:
Grafik zooplus -> 155px, also wird der Bereich nicht schmäler als 155px (eventuelle Randeinstellungen kommen noch dazu)
Grafik Katze News -> 170px, also wird auch der Bereich nicht schmäler als 170px (auch hier + Randeinstellungen)
Grafik Welt verändern -> 468px, also Bereich mindestens 468px (+ Randeinstellungen)
Wenn also das Browserfenster nur 400px hat werden die Bereiche breiter als die 80% Mindestbreite und ein div rutscht nach unten. Das Browserfenster wird aber trotzdem nach rechts weitergemacht, da der nach unten gerutschte Bereich die lange Grafik (468px) hat.
Also muss die mindestbreite in Pixel angegeben sein.
Entweder du hast div's mit fixen Breiten, dann arbeitest du aber sowieso mit fixen Größen im pagewrapper anstatt %en.
Oder 155px + margin/padding PLUS 170px + margin/padding PLUS 468px +margin/padding
Also wenn du kein margin/padding eingestellt hast wäre die Mindestbreite 793px.
margin/padding kommt dazu.
Wenn du einer Box eine fixe Breite zugeordnet hast, dann musst du anstatt der breitesten Grafik in dieser Box die Boxbreite nehmen.
Also wenn z.B. die ganz linke Box eine fixe Breite von 250px hätte wäre die Berechnung so:
250px + margin/padding PLUS 170px + margin/padding PLUS 468px +margin/padding
Padding ist hier durchgestrichen, da du ja die Breite fixiert hast und der innenAbstand ja nur nach innen den Abstand macht.
Offline
#10 28. März 2011 10:08
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.018
- Webseite
Re: *GELÖST* Browserstabile Website
ich gehe davon aus, dass jedwede Einheit in em umformuliert werden muss?
http://calculator.tobani.com/convert/px-to-em
Offline
#11 28. März 2011 11:08
- NaN
- Moderator
- Ort: Halle (Saale)
- Registriert: 09. November 2010
- Beiträge: 4.437
Re: *GELÖST* Browserstabile Website
Darf ich doof fragen, warum width:90% und min-width:80% keinen Sinn ergibt? Ich interpretierte dies so, dass die Standardgröße 90% sein soll, mindestens aber 80% (und nicht darunter). Das ist doch beides eine relative Größe?
Das ist 'ne Milchmädchenrechnung.
80% wovon?
Von der Fensterbreite.
Und wenn die sich ändert?
Genau.
Dann ändert sich auch die minimale Breite.
80% von der Fensterbreite sind immer 80% von der Fensterbreite. Egal wie groß das Fenster ist.
Das Browserfenster bzw. der Pagewrapper werden diese Minimale Breite nie erreichen sondern immer kleiner werden, weil auch die minimale Breite proportional dazu immer kleiner wird.
Das Fenster kann nicht 80% von sich selbst breit sein.
Und der Pagewrapper hat eine Größe von 90% Fensterbreite.
Also kann er nie 80% des Fensters breit sein, wenn das Fenster sich ebenfalls ändert.
Und dadurch, dass Du drei Spalten mit float:left hast, und diese irgendwann nicht mehr in den Pagewrapper passen, rutschen sie in die nächste "Zeile" unter das vorhergehende Element.
Der Header wird nicht immer gleich aussehen können.
Entweder wird das Logo rechts abgeschnitten (bzw. Du hast einen horizontalen Scrollbalken) oder es liegt hinter dem Menü.
Für eines von beiden musst Du Dich entscheiden.
Letzteres halte ich für okay.
(Lösch mal beim Safari den Cache, denn hier sieht alles okay aus.)
Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)
Offline
#12 28. März 2011 11:22
- mörml
- Server-Pate
- Registriert: 23. Januar 2011
- Beiträge: 443
Re: *GELÖST* Browserstabile Website
@owr: Recht schönen Dank für deine Ausführungen.
@NaN: Jetzt ist der Groschen gefallen, herzlichen Dank!
@Cyberman: Super, werde ich austesten.
Letzte Frage(n), dann nerv ich nicht mehr weiter:
Schaue mir auch gerade die von NaN gepostete Website an. Dort gibt das CSS u. a. vor:
body {
height: 100%; >>relative Größe
margin: 0 0.5em >>rechter Rand = relative Größe 1px >>unterer Rand dagegen = fixe Größe 0;
padding: 0;
}
Welchen Hintergrund hat es, Größeneinheiten bei den Bodyrändern zu mixen?
#sitecontainer {
background: url("../....gif") no-repeat scroll left top transparent;
margin: 0 auto;
max-width: 75em;
min-width: 58em;
padding: 5px 0 0;
width: 80%;
}
Wie verhält sich das Zusammenspiel von max-width, min-width und width?
kann CMSms buchstabieren...
CMSms 1.11.12
PHP 5.5.14
Offline
#13 28. März 2011 11:41
- NaN
- Moderator
- Ort: Halle (Saale)
- Registriert: 09. November 2010
- Beiträge: 4.437
Re: *GELÖST* Browserstabile Website
Den unteren Rand von 1px habe ich nur verwendet, damit der Scrollbalken immer sichtbar ist.
Je nach Höhe der Seite und je nach Browser wird der Scrollbalken auch mal ausgeblendet, wenn nicht gescrollt werden muss. Das führt aber dazu, dass die Seite immer mal hin und her springt. Hier ist also exakt nur ein Pixel gemeint. Eine relative Größe hätte hier nicht viel Sinn. (Sonst wird der Rand nach unten beim Zoom ja immer größer, und das ist unnötig)
Wie verhält sich das Zusammenspiel von max-width, min-width und width?
Ganz einfach.
width:80% bedeutet, dass der sitecontainer nur 80% der zur Verfügung stehenden Breite hat (in dem Falle die Fensterbreite).
Maximal/minmal darf er aber nur einen ganz bestimmten Wert haben.
D.h. ab diesem Wert passt er sich nicht mehr der zur Verfügung stehenden Breite an, sondern bleibt so.
Zum Thema em etc. gibt es hier noch ein paar gute Erklärungen: http://1ngo.de/web/em.html
Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)
Offline
#14 28. März 2011 11:55
- mörml
- Server-Pate
- Registriert: 23. Januar 2011
- Beiträge: 443
Re: *GELÖST* Browserstabile Website
Klasse NaN, danke.
Ihr seid Bombe!
kann CMSms buchstabieren...
CMSms 1.11.12
PHP 5.5.14
Offline
#15 02. April 2011 21:11
- mörml
- Server-Pate
- Registriert: 23. Januar 2011
- Beiträge: 443
Re: *GELÖST* Browserstabile Website
kleiner Nachtrag:
Ich habe jetzt bzgl. des Menüs mit Klassen gearbeitet (NaN, ich glaube, du hattest mir den Tipp in einem anderen Faden gegeben) und bzgl. des Headers mit absoluten Werten, und nun bleibt auch beim Zoomen alles an seinem Platz.
Dieses Forum ist wirklich goldwert, recht schönen Dank.
kann CMSms buchstabieren...
CMSms 1.11.12
PHP 5.5.14
Offline
#16 03. April 2011 22:46
- mike-r
- arbeitet mit CMS/ms
- Registriert: 21. Dezember 2010
- Beiträge: 898
- Webseite
Re: *GELÖST* Browserstabile Website
Mit absoluter Positionierung wirst Du immer Probleme bekommen, wenn ein User text-zoom oder minimale Schriftgrössen verwendet. Vor allem, wo Du teilweise auch so kleine Schrift oder so schwierige Kontraste wie im Header verwendest.
Speziell der Header sollte egtl. mit etwas Verschachtelung eine leichte Übung sein, relativ zusammenzustricken mit links floatenden Menüs.
Mal grob:
[== html ==]
<div id="header">CSS background=lila + Schattengrafik oben
<div id="inner">CSS: background=mit schatten unten
<div id="logo">CSS: background=das Logo rechts</h1>
<ul id="menu1">CSS: float:left ... </ul>
<ul id="menu2">CSS: float:left ... </ul>
<br class="clear">
</div>
</div>
</div>
Den ganzen Kram mit margin und padding zurechtgeschoben und die ganzen festen Höhen weggelassen is das eine runde Sache.
Beitrag geändert von mike-r (03. April 2011 22:48)
Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz
Offline
#17 03. April 2011 17:00
- mörml
- Server-Pate
- Registriert: 23. Januar 2011
- Beiträge: 443
Re: *GELÖST* Browserstabile Website
Hallo Mike,
das ist sehr nett von dir. Ich habe die CSSs nun mit den Attributen position und left/top angepasst. Andernfalls hab ich die Menücontainer nicht in dem lila Balken. Das Zooming ist einwandfrei, bleibt alles wie gehabt an seinem Platz, auch, wenn man sehr schlechte Augen hat und maximal vergrößern muss. Würde mir gerne so ein Barrierefreiheit-Ding einbauen (A A+ A++).
Ui, findest du den Kontrast unleserlich im Header? Mmmh. Ich denk drüber nach.
Herzliche Grüße
mörml
kann CMSms buchstabieren...
CMSms 1.11.12
PHP 5.5.14
Offline
#18 03. April 2011 17:19
- owr_web
- Server-Pate
- Registriert: 16. Dezember 2010
- Beiträge: 543
Re: *GELÖST* Browserstabile Website
Würde mir gerne so ein Barrierefreiheit-Ding einbauen (A A+ A++).
Wer größere Schrift haben will, stellt sichs ohnehin im Browser ein. Und ansonsten musst du es entweder über verschiedene CSSTemplates realisieren (hat das überhaupt schon wer versucht?) oder mittels JS - nur JS und Barrierefreiheit widerspricht sich auch wieder
Offline
Seiten: 1