Ergebnis 1 bis 8 von 8

Thema: div%

  1. #1
    HTML Newbie
    Registriert seit
    23.01.2008
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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;">

    [img]Bild.jpg[/img]

    </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;">

    [img]menüpunkt1.jpg[/img]


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

    </html>
    kann mir da jemand weiterhelfen?
    ciao,jonas
    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 !!!!!

  2. #2
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    - 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 ?
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    23.01.2008
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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;">

    [img]Bild.jpg[/img]

    </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;">

    [img]menüpunkt1.jpg[/img]


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

    </html>

  4. #4
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    23.01.2008
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    23.01.2008
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  7. #7
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi Josef,

    Zitat 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

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    23.01.2008
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

Stichworte

Berechtigungen

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