div%

    DIV+Inhalt+skalieren
    Huhu,

    seit einer Woche sitze ich an einem wahrscheinlich relativ einfachen Thema, komme aber auf keinen grünen Zweig.

    - Ich habe eine Site erstellt und ich möchte, das sich der #Container, der alle
    anderen #Inhaltsdivs beinhaltet von der Höhe an dem Viewport orientiert(skaliert) und
    auch seine Inhaltsdivs sich abhängig von dem Container skalieren und relativ positionieren.

    -Die hier dargestellten beispielinhaltsdivs haben natürlich in der originalseite
    unterschiedliche Poitionen und Größen.
    hier der Code:

    css:
    html, body { height: 100%;
    margin: 0px;
    }

    #container {
    position: relative;
    margin: 0 auto;
    width: auto;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    background: #eee;
    }
    ------------------------
    html:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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">
    <title>beispiel</title>
    <meta **********="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="../css/basic.css" type="text/css" rel="stylesheet" media="all" />
    </head>


    <div id="container">

    <div id="inhalt1">
    <div style="position:relative;width:623px;height:403px; ">
    <div style="position:absolute;top:0px;left:0px;width:62 3px;height:403px;">

    </div>
    <div id="inhalt2">
    <div style="position:relative;width:623px;height:403px; ">
    <div style="position:absolute;top:0px;left:0px;width:62 3px;height:403px;">


    </div></div>
    </body>

    </html>
    kann mir da jemand weiterhelfen?
    ciao,jonas

    - für mal ein start body-tag und start head-tag ein.
    - bei einem div ist ein leerzeichen zuviel (width:62 3px)
    - height:auto; height:100% geht nicht, gibt nur 1 wert
    - wie sind die css angaben für inhalt1 und inhalt2 ?

    Hi Driver,
    hoppala,natürlich so:

    css:
    html, body { height: 100%;
    margin: 0px;
    }

    #container {
    position: relative;
    margin: 0 auto;
    width: auto;
    min-height: 100%;
    height: 100%;
    background: #eee;
    }

    #inhalt1{ height: 403px; width: 623px; left: 159px; top: 86px; position: absolute; z-index: 4; visibility: visible}

    #inhalt2{ height: 403px; width: 623px; left: 159px; top: 86px; position: absolute; z-index: 5; visibility: visible}


    etc..

    ------------------------
    html:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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>
    <title>beispiel</title>
    <meta **********="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="../css/basic.css" type="text/css" rel="stylesheet" media="all" />
    </head>

    <body>
    <div id="container">

    <div id="inhalt1">
    <div style="position:relative;width:623px;height:403px; ">
    <div style="position:absolute;top:0px;left:0px;width:62 3px;height:403px;">

    </div>
    <div id="inhalt2">
    <div style="position:relative;width:623px;height:403px; ">
    <div style="position:absolute;top:0px;left:0px;width:623px;height:403px;">


    </div></div>
    </body>

    </html>

    Hi josef,

    wenn du willst das sich restlos alles gleichmäßig vergrößert oder verkleinert (auch bei Schriftvergrößerung!) mußt du dir ein elastisches Layout basteln.

    Elastisches Layout = alle Maßeinheiten in em angeben.
    Einziger Nachteil: Hintergrundbilder wachsen nicht mit.

    Damit Bilder auch gleichmäßig mitzoomen gibts einen kleinen Trick:

    Code
    [img]bild.jpg[/img]

    Normal wird ein Bild wie in Zeile 1 in den Quelltext geschrieben.
    Die zweite fettgedruckte Zeile ergänzt du.

    Durch font-size:77%; erreichst du das 10px genau 1em sind, das erleichtert das umrechnen.

    So zoomen auch deine Bilder mit.

    Styleangaben gehören normal nicht ins Markup, aber der Einfachheit halber hab ichs reingeschrieben.

    Es gibt auch eine andere Lösung (Definition in der CSS) aber die ist etwas komplizierter.

    Gruß
    koslowski

    edit: ups, ich seh gerade er hat den Fettdruck im Code nicht genommen, [b] mußt du dir wegdenken

    Hallo Koslowski,

    dann kann ich doch einfach im HTML Editor alle Einheiten auf em umstellen, oder?Das wäre wohl das einfachste, oder?
    Was bedeutet em denn ausgesprochen?
    Gruß,Josef

    Kanst Du mir auch nochmal sagen, wie die LÖsung in CSS aussieht, wenn das möglich ist Koslowski?Würd´ mich auch interessieren...
    Gruß,
    Josef

    Hi Josef,

    Zitat von josef

    Hallo Koslowski,
    dann kann ich doch einfach im HTML Editor alle Einheiten auf em umstellen, oder?Das wäre wohl das einfachste, oder?
    Was bedeutet em denn ausgesprochen?
    Gruß,Josef

    em ausgesprochen weiß ich nicht, aber es ist eine relative Größenangabe relativ zur Schriftgröße. Deshalb wächst und schrumpft auch alles gleichmäßig mit wenn alles in em definiert ist.

    Einfach alles auf em umstelle würde ich dir nicht raten. Du mußt mit den Größenangaben experimentieren.
    Hier ein kleiner Link zum Umrechnen von px in em:
    EM-Calculator.

    Wenn du nicht besonders fit in HTML/CSS bist solltest du elastische Layout mit Vorsicht genießen, da passiert nicht immer das was man gerade erwartet.
    Px-Layout sind einfacher zu basteln.

    Aber es ist einfach klasse zu sehen das, egal wie du zoomst, alles intakt bleibt.

    Gruß
    koslowski

    OK, dann probier ich jetzt noch mal, was sich so mit em so tut.Vielen Dank schonmal, Koslowski. Werde die Tage berichten, wie es geklappt hat , ich hoffe du findest mich dann noch hier.
    bis dann,
    Jo