Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 11

Thema: Layout auf Browserzooms vorbereiten?

  1. #1
    Samurai Avatar von pinales
    Registriert seit
    12.12.2007
    Ort
    Mittelfranken
    Beiträge
    218
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Layout auf Browserzooms vorbereiten?

    Tach Zusammen!

    Ich hab mal eine erste Aufteilung für eine Webseite gebastelt (ist noch erkennbar unfertig). Nun hab ich den Ehrgeiz, das Layout so zu bauen, dass es durch Veränderungen der browserseitigen Zoomfunktionen (STRG+ +/-) nicht - wie momentan - zerschossen wird.

    Habt ihr Erfahrung damit, wie ich das Layout so fixieren kann, dass sich Änderungen der Zoomeinstellungen nicht so böse auswirken? (Bitte einfach mal ausprobieren, dann seht ihr, was ich meine)

    http://www.pinales.de/groupsites/

    Hier die CSS-Definitionen dazu:

    Code:
    html,body {
    margin:0;
    padding:0;
    }
    
    body {
    font: 0.9em verdana,arial,sans-serif;
    }
    
    p {
    margin: 0 10px 10px;
    }
    
    a {
    display: block;
    color: #981793;
    padding: 10px;
    }
    
    div#header h1 {
    height: 120px;
    font-weight: normal;
    line-height: 120px;
    margin: 0;
    padding-left: 65px;
    color: #fff;
    background: url("pics/head_hint.jpg");
    background-repeat: x-repeat;
    clear: both;
    }
    
    #logo {
    height: 120px;
    background-color: #fff;
    }
    
    #logo img {
    float: left;
    border: 0;
    width: 260px;
    height: 120px;
    margin-left: 50px;
    }
    
    #login {
    float: right;
    width: 284px;
    height: 90px;
    padding: 2px 105px 0 13px;
    background: url("pics/login_hint.jpg") no-repeat;
    }
    
    /* beginn login-feld ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    
    #benutzer,#kennwort {
    border: 1px;
    display: block;
    font-size: 10px;
    width: 180px;
    color: #1fa22e;
    border: 1px solid #aaa;
    background:url("pics/inputbg.gif") no-repeat;
    }
    
    #loginform tr td {
    font-size: 10px;
    color: #aaa;
    }
    
    #submit {
    width: 50px;
    height: 50px;
    margin-left: 15px;
    }
    
    #pw_einr {
    margin-left: 42px;
    }
    
    /* ende login-feld ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    
    div#wrapper {
    float: left;
    width: 100%;
    }
    
    div#content {
    height: 400px; /*nur zur Verdeutlichung (wird wieder entfernt)*/
    border: 1px dotted lightgrey; /*nur zur Verdeutlichung (wird wieder entfernt)*/
    margin-right: 400px;
    padding: 40px 50px;
    }
    
    div#content p {
    line-height: 1.2;
    }
    
    div#navigation {
    float: left;
    width: 198px; /*200px*/
    min-height: 200px;  /*nur zur Verdeutlichung (wird wieder entfernt)*/
    margin: 40px 0 0 -400px;
    border: 1px dotted lightgrey;  /*nur zur Verdeutlichung (wird wieder entfernt)*/
    }
    
    div#info {
    float: left;
    width: 198px; /*200px*/
    min-height: 300px; /*nur zur Verdeutlichung (wird wieder entfernt)*/
    margin: 40px 0 0 -200px;
    border: 1px dotted lightgrey; /*nur zur Verdeutlichung (wird wieder entfernt)*/
    }
    
    div#footer {
    clear: left;
    width: 100%;
    background: #a2e512;
    border-top: 3px solid #1fa22e;
    }
    
    div#footer p {
    margin: 0;
    padding: 5px 65px;
    color: #fff;
    font-size: 10px;
    }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Viele Grüße!
    PINALES

    Rechtschreibung für alle!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    So ganz wirst du das wohl nicht hinbekommen.
    Aber sieh dir mal diese Seite an: http://www.parterremedia.de/kompeten...rierefrei.html
    Da sind ziemlich alle Einheiten in "em".
    Vielleicht ist das die Lösung ?

  3. #3
    Samurai
    Themenstarter
    Avatar von pinales
    Registriert seit
    12.12.2007
    Ort
    Mittelfranken
    Beiträge
    218
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Tach sejuma!

    Ich hab das anhand des Footers bereits mal ausprobiert. Die Höhe des enthaltenen Textes hatte ich in em vorgegeben; die Höhe des Footers ergab sich lediglich aus einem Padding nach oben und unten. Soweit ich also die Textgröße verändert habe, hat sich die Höhe des Footer-DIV angepasst. Nicht so allerdings bei der Nutzung der Zoomfunktionen: Da änderte sich lediglich die Textgröße. Die Höhe des umgebenden Footer-DIV blieb unverändert?!
    Viele Grüße!
    PINALES

    Rechtschreibung für alle!

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Da gibt es evtl. auch noch Unterschiede zwischen den verschiedenen Browsern.
    Ich habe dieses Thema noch nicht selbst untersucht und kann somit keine konkrete Hilfe geben.
    Möglicherweise hilft dir das (ab gestern 19.42 Uhr) weiter?

  5. #5
    Samurai
    Themenstarter
    Avatar von pinales
    Registriert seit
    12.12.2007
    Ort
    Mittelfranken
    Beiträge
    218
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    hmmm, na ja, den Hinweis auf %-Angaben versteh ich schon. Für Container mag das funktionieren. Was Was mach ich aber mit meinen Grafiken?! Da kann ich ja kaum mit %-Größen hantieren?
    Viele Grüße!
    PINALES

    Rechtschreibung für alle!

  6. #6
    Samurai
    Themenstarter
    Avatar von pinales
    Registriert seit
    12.12.2007
    Ort
    Mittelfranken
    Beiträge
    218
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Tach!

    Anders herum: Ignoriert ihr das, was Browserzooms aus euren Seiten machen? Ich meine kann (sollte) man das besser vernachlässigen?
    Viele Grüße!
    PINALES

    Rechtschreibung für alle!

  7. #7
    Prinz(essin) Avatar von Greg10
    Registriert seit
    12.05.2007
    Beiträge
    825
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    warum sollte jemand zoomen wollen?
    schriftgröße hoch, ok
    damit muss man rechnen aber einfach in die seite reinzoomen wir wohl kein user
    Orthografie und Grammatik in diesem Beitrag sind frei erfunden und eine eventuell gefundene Übereinstimmung mit einer lebenden oder toten Sprache sollte von allen Beteiligten unverzüglich ignoriert werden.

    K-Progs (In bearbeitung)
    Der inoffizielle Forum-hilfe IRC-Channel
    (Server: irc.freenode.net ; Channel: #forum-hilfe) (Client für FF)
    Ich hab auch 'n Jabber-Account beim CCC

  8. #8
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Der Knackpunkt sind die Grafiken, die nun mal eine feste Pixelbreite und -höhe haben. Das kann man bei den images zwar auch etwas dynamisch gestalten, führt dann aber zu Verpixelungen.

    Hinzu kommt, dass heutzutage die Bildschirmgrößen und damit die Viewports sehr variieren, so dass man bei einem flüssigen Layout kaum noch vorhersehen kann, wie die Seite bei den unterschiedlichen Besuchern angezeigt wird.

    Gerade aus diesem Grund tendiere ich in letzter Zeit zu fixen Layouts.
    Ich achte allerdings auf eine (vermeintlich) ausreichend große Schrift (meist 0.9em), so dass ich zumindest vermute, dass sich das Vergrößerungsbedürfnis in Grenzen hält.
    Wer dennoch zoomt, muss damit rechnen, dass nicht mehr alles perfekt angezeigt wird. Irgendwo müssen sich die Elemente ja ihren Platz suchen.
    Ich meine mich aber zu erinnern, irgendwo mal gelesen zu haben, dass dies für manche Browser kein Problem mehr darstellt und mit der Zoomfunktion alles porportional vergrößert oder verkleinert wird. Möglicherweise gibt es da auch Zusatztools, die man installieren kann. bin mir aber nicht ganz sicher.

  9. #9
    Samurai
    Themenstarter
    Avatar von pinales
    Registriert seit
    12.12.2007
    Ort
    Mittelfranken
    Beiträge
    218
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von Greg10
    schriftgröße hoch, ok
    STRG+ + macht ja die "Schriftgröße hoch"?! Browser handhaben die Funktion wohl unterschiedlich: IE rendert die Ansicht insgesamt (Grafik und Text) größer. Das ist kein Problem. Opera vergrößert alle Elemente. Das bringt das Layout zwar zum Überlaufen, was aber noch erträglich bleibt, weil Text, Grafik und Container zumindest im gleichen Größenverhältnis verändert werden. Safari und Firefox vergrößern indes lediglich die Schrift, sodass die Texte aus ihren Elementen "herauslaufen". Das sieht dann leider wirklich schlimm aus...
    Viele Grüße!
    PINALES

    Rechtschreibung für alle!

  10. #10
    Macrosdesign
    Gast

    Standard

    also bei ff3 läuft nix i wo hin?!? wird halt alles etwas größer auch wenn ich den sinn davon net so verstehe ...........

    [off topic]willst du deine navigation wirklich rechts haben???weil das sieht find ich i wie komisch aus[/offtopic]

Ähnliche Themen

  1. Layout
    Von NurIch im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 09.08.2007, 16:40
  2. CSS: Div Layout
    Von eriza im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 06.08.2007, 12:35
  3. Tabellen-Layout in DIV-Layout umändern...
    Von Peter_Pan im Forum HTML & CSS Forum
    Antworten: 16
    Letzter Beitrag: 22.03.2007, 21:29
  4. Layout
    Von Help_me-lol im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 23.01.2005, 00:29
  5. Layout
    Von McMetzger im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 15.08.2004, 23:17

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •