smarty19: mehrere divs passend horizontal ausrichten

Hallo! :)

ich bin momentan dabei, etwas in css zu bauen. Dabei bin ich bei weitem kein CSS Profi, komme aber trotzdem ganz gut klar.

Leider habe ich jetzt ein Problem, welches ich nicht alleine lösen kann.

Es geht um die horizontale Ausrichtung von div- Containern. In der Mitte habe ich einen zentrierten Cotainer mit fester Breite. Links und rechts davon soll jeweils ein container genau bis zum mittleren Container reichen, allerdings nicht überlappen.

Hier mein Beispiel:

http://ev-kirche-neckarsteinach.de/jos2/index.php

Wie kriege ich es hin, diese beiden äußeren Containern die korrekte Breite zuzuweisen, sodass sie sich je nach Viewport- Breite anpassen?

Vielen Dank für eure Hilfe!!

  1. Om nah hoo pez nyeetz, smarty19!

    Wie kriege ich es hin, diese beiden äußeren Containern die korrekte Breite zuzuweisen, sodass sie sich je nach Viewport- Breite anpassen?

    Du suchst mehrspaltiges Layout.

    Matthias

    --
    Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
  2. @@smarty19:

    nuqneH

    Wie kriege ich es hin, diese beiden äußeren Containern die korrekte Breite zuzuweisen, sodass sie sich je nach Viewport- Breite anpassen?

    #oben_links, #oben_mitte, #oben_rechts  
    {  
    	height: 42px;  
    	position: absolute;  
    	top: 0;  
    }  
      
    #oben_mitte  
    {  
    	background: #25335A;  
    	left: -moz-calc(50% - 465px);  
    	width: 970px;  
    }  
      
    #oben_links, #oben_rechts  
    {  
    	width: -moz-calc(50% - 465px);  
    }  
      
    #oben_links  
    {  
    	background: #B57700;  
    	left: 0;  
    }  
      
    #oben_rechts  
    {  
    	background: #51618C;  
    	right: 0;  
    }
    

    Hehe. ;-)

    Beachte:

    (1) Der Viewport vieler Nutzer ist schmaler als 970 Pixel. Nicht nur, dass die Nutzer dann horizontal scrollen müssen, von #oben_links und  #oben_rechts wäre dann gar nichts zu sehen. Auch sonst können die ziemlich schmal sein. Was soll denn für Inhalt rein? Oder dienen sie nur zu Darstellungszwecken (und sind damit überflüssig)?

    (2) Benenne IDs und Klassen nicht nach der gegenwärtig gewünschten Darstellung! Also nicht "oben_links", "oben_mitte", "oben_rechts".

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. @@smarty19:

      nuqneH

      ....

      Beachte:

      (1) Der Viewport vieler Nutzer ist schmaler als 970 Pixel. Nicht nur, dass die Nutzer dann horizontal scrollen müssen, von #oben_links und  #oben_rechts wäre dann gar nichts zu sehen. Auch sonst können die ziemlich schmal sein. Was soll denn für Inhalt rein? Oder dienen sie nur zu Darstellungszwecken (und sind damit überflüssig)?

      (2) Benenne IDs und Klassen nicht nach der gegenwärtig gewünschten Darstellung! Also nicht "oben_links", "oben_mitte", "oben_rechts".

      Qapla'

      Wunderbard. Funktioniert hervorragend, vielen vielen Dank für deine Hilfe und auch für deine Tipps am Schluss, werde die Breite wohl etwas reduzieren!

      1. @@smarty19:

        nuqneH

        Funktioniert hervorragend

        Nein. Du weißt, was '-moz-' bedeutet?

        werde die Breite wohl etwas reduzieren!

        Mit „etwas“ ist es nicht getan. Besser ist es, gar keine feste Breite anzugeben, sondern max-width.

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        1. @@smarty19:

          nuqneH

          Funktioniert hervorragend

          Nein. Du weißt, was '-moz-' bedeutet?

          werde die Breite wohl etwas reduzieren!

          Mit „etwas“ ist es nicht getan. Besser ist es, gar keine feste Breite anzugeben, sondern max-width.

          Qapla'

          Hi,

          hatte erst jetzt wieder Zeit mich damit zu beschäftigen. "-moz" ist also Mozilla- spezifisch, also kann ich es damit (alleine zumindest) nicht machen.

          Versuche mich mal weiter mit Suchmaschinen schlau zu machen.

          1. Hi,

            Problem ist mittlerweile gelöst. Mozilla- spezifische Lösungswege helfen ja alleine leider nicht gerade viel.

            Meine Grafik zeigt meine Lösung, die auch gut funktioniert:

            Vielleicht hilft es jemand anderem...