Robert Kabinger: Relative, zentrierte DIVs mit Border

SELF-Forum

Relative, zentrierte DIVs mit Border

Robert Kabinger Homepage des Autors
– Informationen zu den Bewertungsregeln

Guten Morgen!

Es heisst ja immer man solle Tabellen nicht für das Design verwenden, sondern viel eher DIVs.

Aber wie wandle ich eine so einfache Struktur effektiv in genau das selbe nur mit DIVs um?

  
<?xml version="1.0" encoding="iso-8859-15" ?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
   <head>  
      <title>SC Howodo</title>  
   </head>  
   <style type="text/css">  
[code lang=css]  
      table, td { border: 1px solid #000; }  
      #main { width: 100%; }  
      #left, #right { width: 15%; }  
      #center { width: 70%; }  
      #main2 { width: 100%; }  
      #navi { width: 25%; }  
      #content { width: 75%; }

</style>
   <body>
      <table id="main">
         <tr>
            <td id="left">left</td>
            <td id="center">
               <table id="main2">
                  <tr>
                     <td id="navi">navi</td>
                     <td id="content">content</td>
                  </tr>
               </table>
            </td>
            <td id="right">right</td>
         </tr>
      </table>
   </body>
</html>
[/code]

Die einfachste Umwandlung wäre theoretisch:

  
<?xml version="1.0" encoding="iso-8859-15" ?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
   <head>  
      <title>SC Howodo</title>  
   </head>  
   <style type="text/css">  
[code lang=css]  
      div { border: 1px solid #000; }  
      #main { width: 70%; margin: auto; }  
      #navi { width: 25%; float: left; }  
      #content { width: 75%; float: right; }  
      #footer { clear: both; }

</style>
   <body>
      <div id="main">
         <div id="navi">navi</div>
         <div id="content">content</div>
         <div id="footer">footer</div>
      </div>
   </body>
</html>
[/code]

Allerdings verschiebt sich durch den Rahmen das content-div unter das navi-div, aufgrund von float.

Wie kann man dieses Problem am elegantesten umgehen?

Kein Border: Das ist keine Lösung
(Hintergrund-)Bild statt Border: Das ist auch keine Lösung
Fixe Grössen: Das ist auch keine Lösung

Mfg kawinga

--
ie:% fl:| br:^ va:} ls:& fo:| rl:( n4:( ss:| de:] js:| ch:? sh:( mo:| zu:)
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Relative, zentrierte DIVs mit Border

    Beat Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Es heisst ja immer man solle Tabellen nicht für das Design verwenden, sondern viel eher DIVs.

    Nein:
    Du sollst dir mit Tabellen deinen Code nicht unleserlich gestalten.
    ;)

    Aber wie wandle ich eine so einfache Struktur effektiv in genau das selbe nur mit DIVs um?

    ...

    Die einfachste Umwandlung wäre theoretisch:
    ....
    Allerdings verschiebt sich durch den Rahmen das content-div unter das navi-div, aufgrund von float.
    Wie kann man dieses Problem am elegantesten umgehen?
    Kein Border: Das ist keine Lösung
    (Hintergrund-)Bild statt Border: Das ist auch keine Lösung
    Fixe Grössen: Das ist auch keine Lösung

    sidebar{ float:left; width: 20%; padding:0; border:0;}  
content {margin-left:20%;}

    sidebar ist jetzt der Container für deine Navigation.
    Relative Breiten

    Das Gleiche mit em Breiten:

    sidebar{ float:left; width: 10em; padding:0; border:0;}  
content {margin-left: 10em;}

    Und wenn man dem sidebar eine feste Breite geben will:
    Das Gleiche mit em Breiten:

    sidebar{ float:left; width: 150px; padding:0; border:0;}  
content {margin-left: 150px;}

    Wenn du jetzt noch per se willst, dass der sidebar immer die gleiche Höhe wie der Content habe, so ist "Faux Column" dein Suchstichwort.

    mfg Beat

    --
    Woran ich arbeite:
    X-Torah
    ><o(((°>      ><o(((°>
       <°)))o><                      ><o(((°>o
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Relative, zentrierte DIVs mit Border

      Robert Kabinger Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Kein Border: Das ist keine Lösung

      sidebar{ float:left; width: 20%; padding:0; >> border:0; <<}

      content {margin-left:20%;}

      Das Problem ist, sobald man einen border angibt für eines der beiden inneren Elemente, werden diese nicht mehr \_neben\_einander dargestellt, sondern \_unter\_einander.  
  

> Relative Breiten  

Sorry falls ich das falsch formuliert habe, ich meinte mit Relativen Breiten Prozent-Angaben.  
  
Ich danke dir für deine Antwort, allerdings dürftest du mein Problem falsch verstanden haben.  
  
Falls du mir noch helfen willst, schau dir die 2 Beispiele bitte in einem Browser an, dann weist du bestimmt was ich meine.

-- 
ie:% fl:| br:^ va:} ls:& fo:| rl:( n4:( ss:| de:] js:| ch:? sh:( mo:| zu:)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Relative, zentrierte DIVs mit Border

        Beat Homepage des Autors
        +1 Informationen zu den Bewertungsregeln

        Ich danke dir für deine Antwort, allerdings dürftest du mein Problem falsch verstanden haben.

        Dein Problme ist, dass du das BOX-Modell missverstehst.
        width bezeichnet nur die content box ohne padding und border.
        CSS kann keine Mathematik.
        Ergo darfst du bei Elementen, deren Dimension du zum Layouten Pixel/Prozent-genau her nimmst, kein Border verwenden, weil Border nie prozentual definiert werden kann.

        Wenn du im Content also einen Rahmen wünscht, musst du ein weiteres Element einfügen.

        Dein Verzicht auf Tabellen führt zu mehr Code.
        Aber ich bin der Meinung, dass du immerhin auf die äussere Tabelle verzichten könntest.

        Entscheide dich zwischen Tabellen-Missbrauch und Float-Missbrauch.

        mfg Beat

        --
        Woran ich arbeite:
        X-Torah
        ><o(((°>       ><o(((°>
           <°)))o><                      ><o(((°>o
        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

        1. Relative, zentrierte DIVs mit Border

          Robert Kabinger Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Dein Problme ist, dass du das BOX-Modell missverstehst.

          Mehr oder weniger.

          width bezeichnet nur die content box ohne padding und border.

          Stimmt natürlich.

          CSS kann keine Mathematik.

          Stimmt natürlich auch.

          Ergo darfst du bei Elementen, deren Dimension du zum Layouten Pixel/Prozent-genau her nimmst, kein Border verwenden, weil Border nie prozentual definiert werden kann.

          Deshalb hätte mich interessiert ob es hierfür irgendeinen Workaround gibt, der mir nicht bekannt ist.

          Entscheide dich zwischen Tabellen-Missbrauch und Float-Missbrauch.

          Das heist folgendes wäre deiner Meinung nach Optimal für meine Zwecke:

            
<?xml version="1.0" encoding="iso-8859-15" ?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
   <head>  
      <title>SC Howodo</title>  
   </head>  
   <style type="text/css">  
[code lang=css]      div, table, td { border: 1px solid #000; }  
      body > div { width: 70%; margin: auto; }  
      body > div > table { width: 100%; }  
      #navi { width: 25%; }  
      #content { width: 75%; }

          </style>
             <body>
                <div>
                   <table>
                      <tr>
                         <td id="navi">navi</td>
                         <td id="content">content</td>
                      </tr>
                   </table>
                </div>
             </body>
          </html>
          [/code]

          Dankeschön für die raschen und guten Antworten!

          --
          ie:% fl:| br:^ va:} ls:& fo:| rl:( n4:( ss:| de:] js:| ch:? sh:( mo:| zu:)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Relative, zentrierte DIVs mit Border

            Beat Homepage des Autors
            – Informationen zu den Bewertungsregeln

            <?xml version="1.0" encoding="iso-8859-15" ?>
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
               <head>
                  <title>SC Howodo</title>
               </head>
               <style type="text/css">
            [code lang=css]      div, table, td { border: 1px solid #000; }
                  body > div { width: 70%; margin: auto; }
                  body > div > table { width: 100%; }
                  #navi { width: 25%; }
                  #content { width: 75%; }

            
>    </style>  
>    <body>  
>       <div>  
>          <table>  
>             <tr>  
>                <td id="navi">navi</td>  
>                <td id="content">content</td>  
>             </tr>  
>          </table>  
>       </div>  
>    </body>  
> </html>  
> [/code]  
>   
> Dankeschön für die raschen und guten Antworten!  
  
Wenn ich deinen ursprünglichen Code betrachte, sehe ich, dass du künstlich Abstand geschaffen hat.  
Diesen kannst du nun (in Rücksicht auf MSIE6) mit einem Wrapper kombinieren.  
  
~~~html
  
<body>  
 <div id="wrapper">  
  <table id="layout" ... />  
 </div>  
</body>

              
#layout { margin: 0 auto; padding:0  
          width: 90%; max-width:50em;  
          text-align:left;  
         }  
#wrapper { margin:0; padding:0;  
          text-align: center;  
         } /*für MSIE*/

            Die Tabelle sollte nun einen Rand aufweisen, aber nicht beliebig ausdehnbar sein.

            mfg Beat

            --
            Woran ich arbeite:
            X-Torah
            ><o(((°>      ><o(((°>
               <°)))o><                      ><o(((°>o
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln