kostenloser Webspace werbefrei: lima-city


Maßangaben berechnen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    toolz

    Kostenloser Webspace von toolz

    toolz hat kostenlosen Webspace.

    Vorausgesetzt, ich möchte drei DIVs nebeneinander platzieren. Dabei weiß ich, wie breit das erste und letzte DIV sind, aber das mittlere DIV soll dann den restlichen zur Verfügung stehenden Platz ausfüllen. Rein theoretisch würde das ja über eine Anweisung folgender Art funktionieren (leider geht das nicht):
    width: 100% - breiteLinks - breiteRechts;
    Nun versuche ich schon lange Zeit ohne Erfolg, wobei die vielversprechendste Methode folgendes war:
    width: 100%;
    margin: breiteLinks 0 breiteRechts;
    Allerdings wird dadurch die Breite des DIVs nicht beeinfluss, das heißt, dass das linke DIV jetzt zwar angezeigt werden kann, aber das Mittlere ist immernoch zu breit...

    Hat jemand eine Idee, wie ich so ein Problem lösen kann?


    Ach ja: Ich möchte das nicht über JavaScript lösen!

    Beitrag zuletzt geändert: 24.3.2012 14:17:04 von toolz
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Keine Ahnung ob das mit PHP geht aber ich würde versuchen die Fensterbreite auszulesen und es absolut zu berechnen.
  4. sonok

    Moderator Kostenloser Webspace von sonok

    sonok hat kostenlosen Webspace.

    hm, vielleicht die divs ineinander verschachteln?

    <div linksausgerichtet 50px breit></div>
    <div linksausgerichtet padding-links 50 px; 100 % breit><div rechtsausgerichtet padding-rechts 50 px; 100 % breit></div></div>
    <div rechtsausgerichtet 50 px breit></div>

    Aber so würde ich es versuchen, hab's nicht versucht :tongue:
  5. Also mit PHP geht es soweit ich weiß nicht, weil der Browser zu wenige Infos an den Server schickt, außerdem kann sich die Dimension des Fensters verändern, also dürfte die Absolute Berechnung mit JS eigentlich die einzige Möglichkeit sein, die mir einfällt, wobei deaktiviertes JS natürlich zu Problemen führt :/

    aber sonoks Vorschlag sieht vielversprecend aus, wenn man es in nicht-pseudo-Code umwandelt ;)
  6. t*****b

    toolz schrieb:
    [...]
    wobei die vielversprechendste Methode folgendes war:
    width: 100%;
    margin: breiteLinks 0 breiteRechts;
    Allerdings wird dadurch die Breite des DIVs nicht beeinfluss, das heißt, dass das linke DIV jetzt zwar angezeigt werden kann, aber das Mittlere ist immernoch zu breit...


    Kann ja auch nicht, da:
    Gesamtbreite = Width + Padding (Innenabstand) + Border (Rahmen) + Margin (Außenabstand)


    Hat jemand eine Idee, wie ich so ein Problem lösen kann?


    Ich habe jetzt eine halbe Stunde rumprobiert, mein Ergebnis ist folgendes:

    <div style="width:100%;overflow:hidden;">
      <div style="float:left;width:200px;">
        <p style="border:1px solid red;">links</p>
      </div>
      <div style="float:left;width:100%;margin-left:-200px;margin-right:-200px;">
        <div style="width:100%;margin-left:200px;margin-right:200px;">
          <p style="border:1px solid green;">mitte</p>
        </div>
      </div>
      <div style="float:right;width:200px;">
        <p style="border:1px solid blue;">rechts</p>
      </div>
    </div>


    Beim mittleren Div gleichen sich die margin 200px / -200px wieder aus, funktioniert ohne diesen aber nicht.
  7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!