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

Flexible Website

T!P-TOP

Mitglied
Hab bisher immer fixe oder nur zu hälfte flexible Websites erstellt und will nun eine schreiben, die sich immer der Browsergröße und Auflösung anspasst.

Würd mal gerne wissen ob meine Grudnstruktur so weit richtig ist:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="design.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nicolas Pecher</title>
</head>
<body><!--Body-->
<div id="container">
</div>
</body><!--Body Ende-->
</html>

CSS:
PHP:
#container {
 width: auto;
 height: auto;
 background-color: black;
}


Was ich nur nicht verstehe ist das mit auto bzw %.
Das passt sich ja immer nach den Inhalt an!?

Also wenn ich in meinen Container Div zB jetzt ein Wort einfüge, schließt sich der div genau um das Wort.

Aber wie mach ich das dann mit sidebar und COntent genau?

Für meine Website bräuchte ich 3 divs, einer der alles beinhaltet (in dem Fall container) und einen für eine linke Sidebar, die Navi und ein paar PHP Funktionen beinhalten soll und den Inhalt/Content Div, wo eben der Inhalt rein kommt.

Wenn ich will, dass das Layout flexibel ist, muss ich ja zB der Sidebar 10% oder 20% geben und dem Content 90% oder 80%. Stimmt das soweit?
Gut, aber wie funktioniert das mit der Höhe? Die passt sich ja dann immer an den Inhalt an, was ich gar net gebrauchen kann, da dann der content zB viel länger aussieht - oder kann ich das verhindern??

Und was passiert den jetzt wenn einer mit einem LCD Monitor meine Website besucht? Dann sieht der doch die Button die druch die 10-20% total übertrieben breit sind!? In dem Fall muss ich dann min und max Werte vergeben!? Aber wie sollten diese Werte ungefähr aussehen? Gibts da so eine Art maximal bzw minimale Grenze, damit man das perfekt eingrenzen kann?


Und wie schaff ich es, das sich die Breite des Contents und die der Sidebar nicht an den Inhalt angepasst werden, ohne jetzt px zu vergeben?

Die Vertikale Navi besteht aus listelementen, denen darf ich ja auch keine fixe breite geben, die sollen so breit sein wie die Sidebar. Wenn ich jetzt den li's keine Breite in px zuweise, dann wird die nicht/viel zu klein angezeigt und die Sidebar dadurch auch!?


Grüße
 
Also wenn ich in meinen Container Div zB jetzt ein Wort einfüge, schließt sich der div genau um das Wort.

Eigentlich nicht. Ein div-Element (gehört zu den Blocklevel-Elementen) mit width und height auf auto (Standardwerte, müssen nicht explizit gesetzt werden) sollte die gesamte zur Verfügung stehende Breite ausfüllen und sich nur in der Höhe dem Inhalt anpassen.

Wenn ich will, dass das Layout flexibel ist, muss ich ja zB der Sidebar 10% oder 20% geben und dem Content 90% oder 80%. Stimmt das soweit?

Prinzipiell schon. Das hängt etwas davon ab, was du unter "flexibel" verstehst. Du könntest auch der Seitenspalte eine feste Breite geben und sie floaten, sodass der Inhalt (Content) den übrigen horizontalen Platz einnimmt.

Gut, aber wie funktioniert das mit der Höhe? Die passt sich ja dann immer an den Inhalt an, was ich gar net gebrauchen kann, da dann der content zB viel länger aussieht - oder kann ich das verhindern??

Der Content sieht viel länger aus als was? Die Seitenspalte? Da könntest du mit Faux Columns arbeiten.

- Faux Columns

Und was passiert den jetzt wenn einer mit einem LCD Monitor meine Website besucht? Dann sieht der doch die Button die druch die 10-20% total übertrieben breit sind!? In dem Fall muss ich dann min und max Werte vergeben!?

Oder wie oben beschrieben der Seitenspalte generell eine feste Breite verleihen.

Und wie schaff ich es, das sich die Breite des Contents und die der Sidebar nicht an den Inhalt angepasst werden, ohne jetzt px zu vergeben?

Die Frage verstehe ich nicht. Blocklevel-Elemente passen sich in der Breite normalerweise nicht an den Inhalt an.

Wenn ich jetzt den li's keine Breite in px zuweise, dann wird die nicht/viel zu klein angezeigt und die Sidebar dadurch auch!?

Auch li-Elemente nutzen standardmäßig den gesamten zur Verfügung stehenden Platz. Das Problem, das du beschreibst, existiert in der Form nicht.

HTML:
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
    </head>

    <body>
        <div style="width: auto; height: auto; background: red;">test</div>

        <ul>
            <li style="background: blue;">test</li>
        </ul>
    </body>

</html>
 
Eigentlich nicht. Ein div-Element (gehört zu den Blocklevel-Elementen) mit width und height auf auto (Standardwerte, müssen nicht explizit gesetzt werden) sollte die gesamte zur Verfügung stehende Breite ausfüllen und sich nur in der Höhe dem Inhalt anpassen.
Stimmt, hab da was durcheinander gebracht!


Prinzipiell schon. Das hängt etwas davon ab, was du unter "flexibel" verstehst. Du könntest auch der Seitenspalte eine feste Breite geben und sie floaten, sodass der Inhalt (Content) den übrigen horizontalen Platz einnimmt.

Floaten tu ich die Sidebar eh, damit sie links aufgebaut wird. Den Content lass ich mit floar right neben der Sidebar aufbauen.
Die Sidebar brauch aber größenangaben in Prozent, da ich einen Stylsheertswitcher für Schriftgröße in die Homepage einbauen möchte. Die Navigationpunkte wachsen mit und sollen schließlich nicht aus der Sidebar rauswachsen.[/QUOTE]

Der Content sieht viel länger aus als was? Die Seitenspalte? Da könntest du mit Faux Columns arbeiten.


Das heißt ich brauch nur nen div der bei mir gleichzeitig auch die Rolle des Footers übernimmt mit clear both versehen und die height der sidebar und des content div geht bis zum footer und somit sind die beiden Elemente in der Höhe gleich, oder wie?





Die Frage verstehe ich nicht. Blocklevel-Elemente passen sich in der Breite normalerweise nicht an den Inhalt an.
.........
Auch li-Elemente nutzen standardmäßig den gesamten zur Verfügung stehenden Platz. Das Problem, das du beschreibst, existiert in der Form nicht.
ja sry, hab mich vertan :?


Wie löse ich das jetzt mit dem Header? Ich will trotzdem nicht so weit von der Semantik abweichen und möglichst wenig divs verwenden. Derzeit benötig ich ja 4.
Wenn ich in den header keinen text reinsetzten möchte, kann ich anstatt nen div einfach die headergrafik als img in den Quelltext einfügen!? Über CSS wieder heigth und width 100% geben und dann müsste ja auch alles noch funktionieren!?
 
Ich würde den Content nicht floaten, sondern mit einem margin-left versehen, dass der Breite der Seitenspalte entspricht.

Bei gefloateten Elementen hast du übrigens Recht: die passen sich in Höhe und Breite an den Inhalt an, wenn sie kein width gesetzt haben.

Die Sidebar brauch aber größenangaben in Prozent, da ich einen Stylsheertswitcher für Schriftgröße in die Homepage einbauen möchte. Die Navigationpunkte wachsen mit und sollen schließlich nicht aus der Sidebar rauswachsen.

Dann könntest du sicherlich auch em als Einheit für die Breite der Seitenspalte verwenden.

Das heißt ich brauch nur nen div der bei mir gleichzeitig auch die Rolle des Footers übernimmt mit clear both versehen und die height der sidebar und des content div geht bis zum footer und somit sind die beiden Elemente in der Höhe gleich, oder wie?

Nein, die Technik nutzt Hintergrundbilder. Aber das dürfte alles in dem Artikel stehen. Mit ein wenig Gebastel bekommt man das auch für die meisten flexiblen Layouts hin. Wenn ich dazu komme, mache ich nachher mal ein Beispiel.

Ich will trotzdem nicht so weit von der Semantik abweichen und möglichst wenig divs verwenden. Derzeit benötig ich ja 4.

Allgemein: Das ist löblich, aber zerbrich dir darüber nicht zu sehr den Kopf und setze lieber den zusätzlichen div, wenn du es nicht anders hinbekommst (und falls sich kein anderes Element anbietet). "Rauskürzen" kannst du die später immer noch, wenn das Layout steht.

Wenn ich in den header keinen text reinsetzten möchte, kann ich anstatt nen div einfach die headergrafik als img in den Quelltext einfügen!?

Ich bin sicher, darüber könnte man diskutieren, aber: Warum nicht.

Edit:

HTML:
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
        <style type="text/css">

            #wrapper {
                background: #9f9;
            }

            #header {
                background: #fcc;
                padding: 0.5em;
            }

            #sidebar {
                background: #cfc;
                width: 15em;
                float: left;
                padding: 0.5em;
            }

            #content {
                background: #ccf;
                margin-left: 16em;
                padding: 0.5em;
            }

            #footer {
                clear: both;
                background: #ffc;
                padding: 0.5em;
            }

        </style>
    </head>

    <body>
        <div id="wrapper">
            <div id="header">
                #header
            </div>

            <div id="sidebar">
                #sidebar
                <p style="height: 400px; border: 1px dashed #f00;"></p>
            </div>

            <div id="content">
                #content
                <p style="height: 600px; border: 1px dashed #f00;"></p>
            </div>

            <div id="footer">
                #footer
            </div>
        </div>
    </body>

</html>

Ich gebe zu, mit einer Nicht-Pixel-Breite für die Seitenspalte ist die Anwendung von Faux Columns etwas schwierig. Da müsstest du verschiedene Dinge abwägen, die bei Designentscheidungen anfangen und bei Textzoom vs. Pagezoom aufhören.

- http://www.html.de/css/34277-px-vs-em-entweder-oder-nicht-nur-fonts-sondern-margin-etc-em.html
 
Zuletzt bearbeitet:
Ach das mit deinem Footer seh ich erst jetzt.

Naja hab in der Zwischenzeit mal das ungefähre grundgerüst fertig.

Nicolas Pecher

Der Footer muss halt noch rein.

Könntest du mir sagen, was ich bei meinem CSS verbessern & ändern muss damit es mehr flexibel wird, aber trotzdem noch gut angezeigt wird?
Hier das CSS

HTML:
body {
 margin: 0;
 font-family: "Arial";
}

/* LAYOUT-FORMATIERUNG */
#container {
 width: auto;
 height: auto;
 background-color: #FFFFFF;
 min-width: 900px;
 
}
#header {
 width: auto;
 height: auto;
 background-color: gray;
}
#sidebar {
    float: left;
 width: 14%;
 height: 100%;
 border-right: 1px solid gray;
 background-color: #FFFFFF;
 min-width: 11em;
}
#content {
    margin-left:15%;
 width: 85%;
 height: 100%;
}
/* NAVIGATION-FORMATIERUNG */
#navigation {
 padding-left: 0;
 margin-left: 0;
 list-style: none;
}
#navigation li {
    height: 1.5em;
}
#navigation a {
    width: auto;
 height: 1.5em;
 text-decoration: none;
 border-top: 1px gray dashed;
 display: block;
 background-color: #F1F1F1;
}
#navigation a:hover {
    width: auto;
 height: 1.5em;
 text-decoration: none;
 border-top: 1px gray dashed;
 display: block;
 background-color: #E5E5E5;
}
#borderbottom {
 border-bottom: 1px gray dashed;
}
 
/* TEXT-FORMATIERUNG */
p {
 font-size: 0.9em;
 padding: 3%;
}
h2 {
    margin: 0;
 padding: 10%;
}
h1 {
    margin: 0;
 padding-left: 3%;
 padding-top: 2%;
 padding-right: 0;
 padding-bottom: 0;
}
a {
 color: #353535;
 
}
 
Hallo.

Dein flexibles Layout in allen Ehren, aber man kann es auch übertreiben.

Deine margin und padding Angaben solltest du schon in Pixel machen.

Gruss
Elroy
 
Hallo.

Dein flexibles Layout in allen Ehren, aber man kann es auch übertreiben.

Deine margin und padding Angaben solltest du schon in Pixel machen.

Gruss
Elroy

Okay, das margin und padding der Textformatierung werd ich in px gestalten, aber das margin-left des Contents brauch ich ja!? Sonst bekomm ich ja die positionierung nicht hin.

Wie weiß ich denn, ob mein Layout flexibel ist und in den Browsern richtig angezeigt wird? Ich mein, ich kann beim Vista grad mal IE 8 haben, wie kann ich testen ob mein Layout auch wirklich flexibel ist?
Kennt ihr da vielleicht so was ähnliches wie Browser Emulator, nur mit moderneren Browsern?
 
HTML:
<!DOCTYPE html>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New</title>
<style type="text/css">

#wrapper {
background: #9f9;
}

#header {
background: #fcc;
padding: 0.5em;
}

#sidebar {
background: #cfc;
width: 15em;
float: left;
padding: 0.5em;
}

#content {
background: #ccf;
margin-left: 16em;
padding: 0.5em;
}

#footer {
clear: both;
background: #ffc;
padding: 0.5em;
}

</style>
</head>

<body>
<div id="wrapper">
<div id="header">
#header
</div>

<div id="sidebar">
#sidebar
<p style="height: 400px; border: 1px dashed #f00;"></p>
</div>

<div id="content">
#content
<p style="height: 600px; border: 1px dashed #f00;"></p>
</div>

<div id="footer">
#footer
</div>
</div>
</body>

</html>

Also wieso klappt das mit dem Footer bei mir nicht?? Bei deinem Beispiel gehts einwandfrei!?
 
Wie weiß ich denn, ob mein Layout flexibel ist und in den Browsern richtig angezeigt wird? Ich mein, ich kann beim Vista grad mal IE 8 haben, wie kann ich testen ob mein Layout auch wirklich flexibel ist?
Kennt ihr da vielleicht so was ähnliches wie Browser Emulator, nur mit moderneren Browsern?

Die alten IE's kannst du wunderbar mit IE-Tester testen. Sonst ist Adobe's BrowserLab sehr cool, aber auch nicht ganz umsonst.
Browsershots.org macht das ganze nach dem selben Prinzip (Screenshots erstellen), jedoch wesentlich langsamer und wesentlich unkomfortabler. Jeden einzeln anklicken ist doof. BrowserLab legt alle Screenshots übereinander.
 
..., da ich einen Stylsheertswitcher für Schriftgröße in die Homepage einbauen möchte. Die Navigationpunkte wachsen mit und sollen schließlich nicht aus der Sidebar rauswachsen.
Sowas ist heutzutage Zeitverschwendung. Alle Browser machen das viel besser, z.b. wachsen Grafiken ebenfalls mit. Firefox merkt sich sogar auf welchen Seiten du gezoomt hast.

Das ist das alte leidige "meine Oma kennt das nicht Problem" - wobei das Unsinn ist, jeder, der Probleme hat beim lesen und das habe ich schon mit einer relativ normalen Kurzsichtigkeit, kennt die zoom Funktion des Browsers. wer es nicht braucht eben nicht. Aber beide werden deine Aufwändig erzeugten Styleswitcher zoom nicht benutzen.
 
Hallo,

Sowas ist heutzutage Zeitverschwendung. Alle Browser machen das viel besser, z.b. wachsen Grafiken ebenfalls mit. Firefox merkt sich sogar auf welchen Seiten du gezoomt hast.
Das sehe ich genau so. Nur beim Firefox benötigt man wohl ein Add-on. Oder ist das inzwischen integriert?

da ich einen Stylsheertswitcher für Schriftgröße
Mach die Schrift einfach etwas größer als üblich, das reicht den meisten schon.

Wie weiß ich denn, ob mein Layout flexibel ist und in den Browsern richtig angezeigt wird?
Das wirst du schon ausprobieren müssen. Ich habe z. B. neben dem IE noch Firefox, Opera und Chrome, jeweils als Portable-Version, auf meinem Rechner. Wobei der Firefox mein Standardbrowser ist.

Die unterschiedlichen IE-Versionen kann man ja nicht zusammen auf einem Rechner installieren, außer man benutzt virtuelle Rechner wie Virtual PC oder Virtual Box. Aber es gibt dafür auch Online-Ansichten oder Programme, die den IE in verschiedenen Versionen auf einen Rechner bringen. Mit denen habe ich aber schlechte Erfahrungen gesammelt, die "müllen" den Rechner zu und liefen bei mir nicht stabil.

Allerdings solltest du vorher klären, wie flexibel dein Layout überhaupt sein soll. Im Moment übertreibst du es da wohl etwas.

Für mich ist ein Layout flexibel, wenn es bei Bildschirmauflösungen von ca. 700px bis ca 1200px Breite angezeigt wird, ohne das man seitlich scrollen muss. Außerdem sollten Verkleinerungen / Vergrößerungen durch den Browser von ca. 70% bis ca. 200% möglich sein, ohne das einem das Layout um die Ohren fliegt. Das sich die Inhalte bei extremen Verkleinerungen und / oder extremen Zoomstufen kontrolliert verschieben läßt sich eh' nicht vermeiden. Auch gehe ich nicht über Breiten von über ca. 1100px hinaus, da die daraus resultierenden langen Zeilen wohl niemand gerne liest.

Innerhalb des Layouts können bestimmte Bereiche natürlich starr sein. Manche Aufgaben lassen sich sonst z. B. überhaupt nicht lösen.

Weiterhin ist entscheidend und hilft viele Fehler zu vermeiden, wenn html und css korrekt und wie vorgegeben eingesetzt werden.

Außerdem bin ich von dem Zug abgesprungen, alles selbst machen zu müssen und greife lieber auf vorhandene Layouts bzw. Frameworks zurück, die bereits an die unterschiedlichen Browser angepasst sind. Wieso soll ich das Rad neu erfinden, wenn andere Leute mit mehr Ahnung als ich so freundlich sind, Lösungen zu erarbeiten und allgemein zur Verfügung zu stellen?

Gruss

MrMurphy
 
Hallo,

Das sehe ich genau so. Nur beim Firefox benötigt man wohl ein Add-on. Oder ist das inzwischen integriert?

Mach die Schrift einfach etwas größer als üblich, das reicht den meisten schon.

Das wirst du schon ausprobieren müssen. Ich habe z. B. neben dem IE noch Firefox, Opera und Chrome, jeweils als Portable-Version, auf meinem Rechner. Wobei der Firefox mein Standardbrowser ist.

Die unterschiedlichen IE-Versionen kann man ja nicht zusammen auf einem Rechner installieren, außer man benutzt virtuelle Rechner wie Virtual PC oder Virtual Box. Aber es gibt dafür auch Online-Ansichten oder Programme, die den IE in verschiedenen Versionen auf einen Rechner bringen. Mit denen habe ich aber schlechte Erfahrungen gesammelt, die "müllen" den Rechner zu und liefen bei mir nicht stabil.

Allerdings solltest du vorher klären, wie flexibel dein Layout überhaupt sein soll. Im Moment übertreibst du es da wohl etwas.

Für mich ist ein Layout flexibel, wenn es bei Bildschirmauflösungen von ca. 700px bis ca 1200px Breite angezeigt wird, ohne das man seitlich scrollen muss. Außerdem sollten Verkleinerungen / Vergrößerungen durch den Browser von ca. 70% bis ca. 200% möglich sein, ohne das einem das Layout um die Ohren fliegt. Das sich die Inhalte bei extremen Verkleinerungen und / oder extremen Zoomstufen kontrolliert verschieben läßt sich eh' nicht vermeiden. Auch gehe ich nicht über Breiten von über ca. 1100px hinaus, da die daraus resultierenden langen Zeilen wohl niemand gerne liest.

Innerhalb des Layouts können bestimmte Bereiche natürlich starr sein. Manche Aufgaben lassen sich sonst z. B. überhaupt nicht lösen.

Weiterhin ist entscheidend und hilft viele Fehler zu vermeiden, wenn html und css korrekt und wie vorgegeben eingesetzt werden.

Außerdem bin ich von dem Zug abgesprungen, alles selbst machen zu müssen und greife lieber auf vorhandene Layouts bzw. Frameworks zurück, die bereits an die unterschiedlichen Browser angepasst sind.
Der Seitenzoom zoomt die gesamte Website, die Grafiken beginnen daduch teilweise zu pixeln und Oft entsteht dann auch gleich ein scrollbalken -> wozu das Layout verunstalten, wenn ich die Schrift mit ein Wenig php wachsen lassen kann?

Ich hab mir jetzt mal den IETester geholt bin vollkommen zufrieden mit ihm - zeigt mir bis IE Version 5.5 alles prima an.

Wieso soll ich das Rad neu erfinden, wenn andere Leute mit mehr Ahnung als ich so freundlich sind, Lösungen zu erarbeiten und allgemein zur Verfügung zu stellen?
....weil man was dazu lernen will? Ich will nicht von irgendwelchen Frameworks abhängig sein.
 
Der Seitenzoom zoomt die gesamte Website, die Grafiken beginnen daduch teilweise zu pixeln und Oft entsteht dann auch gleich ein scrollbalken -> wozu das Layout verunstalten, wenn ich die Schrift mit ein Wenig php wachsen lassen kann?
Dann ist deine Seite nicht flexibel. Wie schon gesagt wurde, eine flexible Seite verträgt auch einige Schritte im Browserzoom ohne Scrollbalken zu zeigen.
Und das Vergrößern der Bilder kannst du auch verhindern (zumindest im Firefox).

Und wie gesagt, selbst das wenige PHP ist unnötig. Da die, die diese Funktion nützen würden, mit Sicherheit lieber den Browserzoom nutzen, weil sie den kennen.
 
Ich kann meine Website zB bis 200% zoomen, ab 200% ensteht bei mir ein Horizontaler
Scrollbalken (bzw hab ichs bei 400% getestet und da tauchte er auf).

Der Browserzoom zommt eben alles. Mein eingebauter Zoom ist für Leute, die den Text schwer lesen können und es vergrößert/verkleinert sich im gegensatz zum Seitenzoom auch nur der Text und nicht das ganze Layout.

Und selbst den Browserzoom kennen mit Sicherheit einige Leute nicht . zB einige Verwandte von mir haben keinen Plan was einem der Browser anbietet an Funktionen. Schriftgröße Kleiner / größer kann man wohl kaum miss verstehen.
 
Hallo

Der Seitenzoom zoomt die gesamte Website, die Grafiken beginnen daduch teilweise zu pixeln
Du wirst dich wundern - den Besuchern, die eine Seite vergrößern ist das bekannt und das stört sie nicht. Das Thema Grafik wird von Webdesignern in der Regel viel zu wichtig genommen, obwohl es keinen Besucher interessiert.

und Oft entsteht dann auch gleich ein scrollbalken
Nur wenn die Bilder zu groß sind. Bilder von über 700px-Breite sind in der Regel zu groß und unnötig. Dann sollte man die Bilder lieber etwas kleiner machen und die, bei denen es wirklich notwendig ist, nach Mouseklick groß öffnen.

-> wozu das Layout verunstalten, wenn ich die Schrift mit ein Wenig php wachsen lassen kann?
Ob das Design verunstaltet wird liegt ausschließlich beim Webseitenersteller.

....weil man was dazu lernen will? Ich will nicht von irgendwelchen Frameworks abhängig sein.
Genau das Gegenteil ist der Fall. Man muss ich mit html und css gut auskennen und zusätzlich den Aufbau des Frameworks lernen, um damit vernünftige Seiten erstellen zu können. Frameworks sind alles andere als Fertiglayouts, sondern nur sehr stabile, aber auch flexible, Grundgerüste, auf die aufgebaut werden muss.

Gruss

MrMurphy
 
Welches Framework wäre da zum empfehlen? Sind die flexiblen frameworks von anfang an flexibel oder muss man da das html oder css selbst schreiben? Sind sie ganzseitig aufgebaut oder muss man das selber erledigen?
 
Der Browserzoom zommt eben alles.
Nein, es kommt auf den Browser und die Einstellung an.

Mein eingebauter Zoom ist für Leute, die den Text schwer lesen können [...]

Und selbst den Browserzoom kennen mit Sicherheit einige Leute nicht . zB einige Verwandte von mir [..]
Einiga ja, aber die Leute die den Text schwer lesen können, haben das Problem bei tausenden anderer Seiten auch (und ich gehe mal davon aus, dass du die Schriftgröße nicht auf 70% runtergedreht hast, wie es viele machen), d.h. sie müssen sich mit dieser Funktion auseinandersetzen und kennen sie. Die anderen benutzen sie nicht.
 
Okay, das margin und padding der Textformatierung werd ich in px gestalten, aber das margin-left des Contents brauch ich ja!? Sonst bekomm ich ja die positionierung nicht hin.

Code:
#sidebar {
    float: left;
 width: 14%;
 height: 100%;
 border-right: 1px solid gray;
 background-color: #FFFFFF;
 min-width: 11em;
}
#content {
    margin-left:15%;
 width: 85%;
 height: 100%;
Was passiert wohl wenn die margin-left: 15%; des content weniger sind als die min-width: 11em; der sidebar.

Gib deiner sidebar eine feste Größe in em und dem content einen festen margin-left in em und dein Layout ist trotzdem noch flexibel.

Gruss
Elroy
 
Zurück
Oben