Matthias: div breite

Hi

Ist es möglich eine div zB von left: 120px; immer zum untern und rechten Browserrand reichen zu lassen. Mit 100% hat er Probleme, dann endstehen leere Bereiche.

Danke

  1. Hallo Matthias.

    Ist es möglich eine div zB von left: 120px; immer zum untern und rechten Browserrand reichen zu lassen. Mit 100% hat er Probleme, dann endstehen leere Bereiche.

    Deine Beschreibung ist sehr schwer zu verstehen.

    Du möchtest also, dass ein Blockelement eine Höhe von 100% hat, die Breite jedoch nicht 100% beträgt sondern erst ab 120 Pixel vom linken Rand beginnt?

    Die Höhe von 100% musst du nur für das betroffene Element selbst, sowie html und body festlegen (margin und padding möglichst auf 0 setzen)

    Für die 120 Pixel brauchst du dann nur noch margin-left.

    Einen schönen Sonntag noch.

    Gruß, Ashura

    --
    Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
    30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
    Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
    [Deshalb frei! - Argumente pro freie Software]
    1. Hab noch folgendes Problem.
      Wenn der Untergeordnete layer die Breite 100% hat sollte er 100% so breit sein wie das übergeordnete. Aber leider ist das hier nicht der Fall. Und Firefox zeigt mir die Grafiken nicht richtig an.

      Danke

      <div id="main">
      <div style="background-image:url(img/maineck.gif); background-repeat: no-repeat; background-position: top left; height: 39px; width: 35px; position: absolute;"></div>
      <div style="background-image:url(img/graypoint.gif); background-repeat: repeat-x; height: 1; width: 100%; position: absolute;"></div>
      <div style="background-image:url(img/graypoint.gif); background-repeat: repeat-y; height: 100%; width: 1px; position: absolute;"></div>
      </div>

      #main{
       position: absolute;
       background-color:#FFFFFF;
       height: 100%;
       width: 100%;
       margin-left: 150px;
       margin-top: 100px;
      }

      1. Hallo Matthias.

        Hab noch folgendes Problem.
        Wenn der Untergeordnete layer die Breite 100% hat sollte er 100% so breit sein wie das übergeordnete. Aber leider ist das hier nicht der Fall. Und Firefox zeigt mir die Grafiken nicht richtig an.

        Danke

        OK, gern geschehen. Und was ist nun deine Frage?
        Ich zitiere mich einmal selbst:

        Deine Beschreibung ist sehr schwer zu verstehen.

        Stelle am Besten eine Beispielseite online und beschreibe _präzise_ und _verständlich_ was du bewirken möchtest.

        Einen schönen Sonntag noch.

        Gruß, Ashura

        --
        Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
        30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
        Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
        [Deshalb frei! - Argumente pro freie Software]
        1. Der Quellcode.
          Die Divs sollen aber nur maximal 100% des Browsers ausmachen

          Vielen Dank

          <html>
          <head>
          </head>
          <body style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; ">
          <div id="main" style="position: absolute;background-color:#FFFFFF;height: 100%;width: 100%;margin-left: 150px;margin-top: 100px; ">
          <!-- Layout Main divs -->
           <div style="background-image:url(img/maineck.gif); background-repeat: no-repeat; background-position: top left; height: 39px; width: 35px; position: absolute;"></div>
           <div style="background-image:url(img/graypoint.gif); background-repeat: repeat-x; height: 1; width: 100%; position: absolute;"></div>
           <div style="background-image:url(img/graypoint.gif); background-repeat: repeat-y; height: 100%; width: 1px; position: absolute;"></div>
          <!-- Layout divs Main ende -->
           asdasd
          </div>
          </body>
          </html>

          1. Hallo Matthias.

            Der Quellcode.
            Die Divs sollen aber nur maximal 100% des Browsers ausmachen

            100% des Browsers? Ich zitiere mich nun nicht mehr, sondern verweise dich direkt auf die FAQ.

            <html>

            Gib bitte einen passenden DOCTYPE an.

            <head>

            </head>
            <body style="[code lang=css]margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;

              
            Verzichte am Besten auf das style-Attribut und lagere dein CSS [zentral](http://de.selfhtml.org/css/formate/einbinden.htm#zentral) bzw. in einer [externen Datei](http://de.selfhtml.org/css/formate/einbinden.htm#separat). (Ich hoffe, dass du das [title](http://de.selfhtml.org/html/kopfdaten/titel.htm)-Element hier nur aus Testzwecken weggelassen hast.)  
              
            
            > `<div id="main" style="[code lang=css]position: absolute;background-color:#FFFFFF;height: 100%;width: 100%;margin-left: 150px;margin-top: 100px; `{:.language-html}">[/code]  
              
            Verzichte auf absolute Positionierung, da damit weitaus mehr Probleme einher gehen, als damit beseitigt werden könnten.  
            Zudem hast du nirgends angegeben, worauf sich die 100% hier beziehen sollen.  
            Lies dir hierzu noch einmal [mein Posting](https://forum.selfhtml.org/?t=111979&m=706498) durch.  
              
            
            > ~~~html
            
            <!-- Layout Main divs -->  
            
            >  <div style="background-image:url(img/maineck.gif); background-repeat: no-repeat; background-position: top left; height: 39px; width: 35px; position: absolute;"></div>  
            >  <div style="background-image:url(img/graypoint.gif); background-repeat: repeat-x; height: 1; width: 100%; position: absolute;"></div>  
            >  <div style="background-image:url(img/graypoint.gif); background-repeat: repeat-y; height: 100%; width: 1px; position: absolute;"></div>  
            > <!-- Layout divs Main ende -->  
            >  asdasd  
            > </div>  
            > </body>  
            > </html>
            
            

            Ist es möglich, dass du unter Divitis leidest?

            Bitte bessere deinen Code aus und berücksichtige meine Hinweise.
            Was zu tun ist, um das von dir Gewünschte zu erzielen, habe ich dir bereits geschrieben.

            Einen schönen Sonntag noch.

            Gruß, Ashura

            --
            Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
            30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
            Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
            [Deshalb frei! - Argumente pro freie Software]
            1. Kann sein das ich mich unpreziese ausgedrückt habe. Aber ich meine FF 1.0.4 stellt es bei mir noch falsch dar, IE nicht.
              P.S ich habe einfach einige Tags rausgestrichen gehabt, kann man sich ja denken.

              P.S.S Ich geh gleich zum Arzt hab meinen Fehler erkannt. Normal hab ich ne css datei wäre aber umständlich für testzwecke.

              Kannste die Probleme mit absolute weiter erläutern oder einen Link dazu.

              Danke

              1. Hallo Matthias.

                Kann sein das ich mich unpreziese ausgedrückt habe. Aber ich meine FF 1.0.4 stellt es bei mir noch falsch dar, IE nicht.

                Das sollte dir auf jeden Fall zu denken geben.
                Im Zweifelsfalle liegt die korrekte Umsetzung _immer_ bei den Geckos.

                Verlasse dich _niemals_ auf die Darstellung im IE. Erarbeite dir die gewünschte Darstellung zuerst in Browsern und bessere erst danach für den IE nach.

                P.S ich habe einfach einige Tags rausgestrichen gehabt, kann man sich ja denken.

                Es spricht nichts dagegen, dass du deinen Code auf den relevanten Inhalt herunterkürzt, doch wenn relevante Teile fehlen, kann ich nur davon ausgehen, dass dies auch im betroffenen Dokument der Fall ist.

                Darum wäre es wirklich enorm wichtig, wenn du eine Beispielseite online stellen könntest.

                P.S.S Ich geh gleich zum Arzt hab meinen Fehler erkannt. Normal hab ich ne css datei wäre aber umständlich für testzwecke.

                Und die zentrale Auslagerung?

                Kannste die Probleme mit absolute weiter erläutern oder einen Link dazu.

                Die Einführung in CSS-basierte Layouts sollte dir genügend Lektüre sein.

                Einen schönen Sonntag noch.

                Gruß, Ashura

                --
                Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
                30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
                Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
                [Deshalb frei! - Argumente pro freie Software]
                1. Also nun hab ichs online, da ich fast verzweifel.
                  http://www.huckschenhof.de/test/templates/main.tpl.html
                  das is nur ein kleiner Entwurf, du siehst sicher was da falsch läuft.
                  Und hätteste evtl Verbesserungensvorschläge des Codes?

                  Danke

                  1. Hallo Matthias.

                    Also nun hab ichs online, da ich fast verzweifel.
                    http://www.huckschenhof.de/test/templates/main.tpl.html

                    -> </faq/#Q-19>

                    das is nur ein kleiner Entwurf, du siehst sicher was da falsch läuft.
                    Und hätteste evtl Verbesserungensvorschläge des Codes?

                    Ja: Bitte (bitte) verzichte auf absolute Positionierung und wirf einen Blick auf die von mir verlinkten Alternativen.

                    Einen schönen Sonntag noch.

                    Gruß, Ashura

                    --
                    Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
                    30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
                    Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
                    [Deshalb frei! - Argumente pro freie Software]
                2. Das sollte dir auf jeden Fall zu denken geben.
                  Im Zweifelsfalle liegt die korrekte Umsetzung _immer_ bei den Geckos.

                  Ashura,
                  Pauschalisiere _nie_!

                  Wie was das doch gleich mit writing-mode: tb-rl?

                  „Das sollte dir auf jeden Fall zu denken geben.“

                  Live long and prosper,
                  Gunnar

                  --
                  „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
                  1. Hallo Gunnar.

                    Das sollte dir auf jeden Fall zu denken geben.
                    Im Zweifelsfalle liegt die korrekte Umsetzung _immer_ bei den Geckos.

                    Ashura,
                    Pauschalisiere _nie_!

                    Hey, das ist mein Text! ;-)

                    Wie was das doch gleich mit writing-mode: tb-rl?

                    Jeder Browser greift voraus und schmückt sich mit etwas CSS3. Und?

                    Wie war das mit opacity? Mit border-radius?

                    „Das sollte dir auf jeden Fall zu denken geben.“

                    Nö. Erst wenn es soweit ist.

                    Einen schönen Sonntag noch.

                    Gruß, Ashura

                    --
                    Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
                    30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
                    Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
                    [Deshalb frei! - Argumente pro freie Software]