[CSS] DIV-Boxen auf gleiche Höhe (dynamisch)

Dieses Thema im Forum "Webdesign" wurde erstellt von leex, 5. August 2010 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
Seite 1 von 2
  1. 5. August 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    DIV-Boxen auf gleiche Höhe (dynamisch)

    Habe ein Problem mit meinem Layout. Und zwar möchte ich dass die boxen immer gleich hoch sind. Also sich dynamisch erweitern.
    Weiß aber nicht wie ich das umsetzen kann.


    Meine Testseite:
    No File | www.xup.in
     
  3. 5. August 2010
    AW: Homepage Layoutproblem

    das wird in der regel gefaket, warum und wie findest du hier:
    FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten - XHTMLforum
    punkt 4 ist das was du brauchst.
     
  4. 5. August 2010
    AW: Homepage Layoutproblem

    diese seite hab ich auch schon gefunden ... jedoch sehe ich da keine erklärung wie das gemacht wrude, sondern nur beispiele. entweder bin ich zu doof oder da steht wirklich nichts
     
  5. 5. August 2010
    AW: Homepage Layoutproblem

    rechtsklick --> quelltext anzeigen:

    PHP:
    <! DOCTYPE HTML  PUBLIC  "-//W3C//DTD HTML 4.0//EN"
            "http://www.w3.org/TR/REC-html40/strict.dtd"     >
    <     html >
     <     head >
      <     title >  Test </ title >
      <     meta http - equiv = "content-type"  content = "text/html; charset=iso-8859-1" >
      <     style type = "text/css" >
    html  {
          height : 100 %;
          background : #0f0 url(kopfunddreispalten1.gif) repeat-y;
    }
    body
    {
          color : #000;
          margin : 0 ;
          padding : 0 ;
          min - height : 100 %;
          background - image :  url ( kopfunddreispalten1 . gif );
          background - repeat : repeat - y ;
          background - position : right ;
    }
    *      html body 
    {
          height : 100 %;
    }
    #oben
    {
          height : 100px ;
          background - color : #f00;
    }
    #links
    {
          float : left ;
          width :  100px ;
    }
    #rechts
    {
          float : right ;
          width :  100px ;
    }
    #content p
    {
          text - align : center ;
          margin : 0 100px
    }
    #foot 
    {
          clear : both ;
    }
      </     style >
     </     head >

     <     body >

      <     div id = "content" >
       <     div id = "oben" >  oben </ div >
       <     div id = "links" >  links  </ div >
       <     div id = "rechts" >  rechts < br >
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
       </     div >

       <     p >
             unten  < br >
             unten  < br >
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
             Und hier noch viel Text ,  damit das Verhalten dabei zu sehen ist . 
       </     p >
       <     div id = "foot" >& nbsp ;</ div >
      </     div >
     </     body >

    </     html >
     
  6. 5. August 2010
    AW: Homepage Layoutproblem

    aso ok ... aber wenn ich dass so mache hab ich doch nicht meine boxen wie ich sie haben will ...
    könntest du mir dass viell kurz anhand meiner seite zeigen wenns nicht zu viel aufwand ist
     
  7. 5. August 2010
    AW: Homepage Layoutproblem

    naja du hast ja 3 spalten und die beispielseite hat 3 spalten --> passt einfach die divs und die klassen an.

    übernimmst die div-formatierung aus der beispiel-datei und passt die klassen mit deinen werten an.
     
  8. 5. August 2010
    AW: Homepage Layoutproblem

    hm und was mach ich mit der hintergrundgrafik?!
     
  9. 5. August 2010
    AW: Homepage Layoutproblem

    naja die musst du ja auch irgendwie mit .css eingebunden haben oder nicht?... so bindest du die halt auch wieder ein...

    oder hast du die beispielseite nicht selber erstellt?
     
  10. 5. August 2010
    AW: Homepage Layoutproblem

    das problem ist folgender. ein container ist immer nur so hoch wie dessen inhalte.
    du kannst einen container nicht einfach sagen du bist jetzt 100% hoch.
    warum genau kannst du ja nachlesen.

    daher wird eine hintergrundgrafik verwendet das in y gekachelt wird.
    dadurch sieht es aus als sei spalte 1, 2 oder 3 100% hoch, ist es aber nicht.
    die hintergurndgrafik könnte z.b. im body oder in einen hauptcontainer, in dem deine 3 spalten drin sind, sein.

    kleiner tipp:
    beim floaten vergiss nicht clear zu verwenden.
     
  11. 5. August 2010
    AW: Homepage Layoutproblem

    danke für die antworten ... aber ich kriegs nicht hin
    hab mir den css teil vom beispiel kopiert aber haut trotzdem nicht hin ...
     
  12. 6. August 2010
    AW: Homepage Layoutproblem

    Ich hab grad keine Zeit mir das genauer durchzulesen bzw. selbst mal zu versuchen, aber es könnte ein alternativer Lösungsweg dabei sein: Equal Height Columns using CSS - Ed Eliot
     
  13. 6. August 2010
    AW: Homepage Layoutproblem

    nutzt doch lieber ein-zwei zeilen js anstatt diese dämlichen workarounds... ab css3 gibts echte spalten-layouts mit div's.

    Code:
    function eqh() {
 var g = function(e) { return document.getElementById(e); };

 for(var i = 0, h = 0, c = 0, l = arguments.length; i < l; ++i)
 h = (h < (c = g(arguments[i]).offsetHeight)) ? c : h;

 h = h + "px";
 for(var i = 0, l = arguments.length; i < l; ++i)
 g(arguments[i]).style.height = h;
}

window.onload = function() {
 eqh('div1', 'div2', 'div3', 'divN');
}
     
  14. 7. August 2010
    AW: Homepage Layoutproblem

    sehr gut ... funktioniert wunderbar mit dem javascript ... vielen dank ... bw haste ...

    aber noch zu css3. wann wird das vorraussichtlich kommen?



    edit: bw haben alle ;-)
     
  15. 7. August 2010
    AW: Homepage Layoutproblem

    es gibt css3 schon... und FF in der aktuellen version unterstützt dies auch teilweise
    es wird halt nur noch nicht 100% oder kaum unterstützt.
    mit der neuer browsergeneration von IE9 und FF4 sollte es dann vorwärts gehen.
     
  16. 7. August 2010
    AW: Homepage Layoutproblem

    ja dass es mit ff schon geht, dass weiß ich. Ich meinte wann es offiziell von allen browsern (die auf neustem stand sind) unterstützt wird.

    noch ne andere frage:
    wie mach ich denn jetzt den maincontent?!
    Habe mir jetzt ein css menü gemacht aber weiß nicht wie ich dass jetzt verlinken soll, bzw nicht wohin.
    iframe?! oder gibts ne andere lösung
     
  17. 8. August 2010
    AW: Homepage Layoutproblem

    mit iframe,ajax oder php. Dazu gibts mehr bei google

    Und css3 kann man erstmal vergessen, da es noch in der entwicklung ist. Alles lässt sich mit css1/2 umsetzen.
     
  18. 8. August 2010
    AW: Homepage Layoutproblem

    ok werds mal mit php versuchen ... danke
     
  19. 8. August 2010
    AW: Homepage Layoutproblem

    habe das mit php jetzt gefunden ... zumindest dass ich dass einfach mit include mache ...
    aber wie muss ich das jetzt mit den links machen, dass die dann im main angezeigt werden

    hier mal die seite: http://www.thirty3-solutions.de

    edit: habe ne möglichkeit gefunden ( http://tut.php-q.net/de/layout.html )
     
  20. 9. August 2010
    AW: Homepage Layoutproblem

    du hast deine verschieden php dateien die du in dein content includest.

    PHP:
    <div style="height: 706px;" id="main">

    <h1>Home</h1>
    <?php  include( $_GET [ 'section' ]. '.php' );  ?>
     </div>
    was passiert da?
    ganz einfach, du ruft ein link z.b. mit index.php?section=home auf.
    die seite wird geladen.
    nun wollen wir wissen was includet werden soll und das passiert mit $_GET['section'].
    die ausgabe ist home und diese datei includest du (home.php)
    was nun in home.php steht ist deine sache.
     
  21. 9. August 2010
    AW: Homepage Layoutproblem

    aber an fehlerquellen denken --> einschränken, was eingeben werden darf von benutzer und falls eine section nicht existiert eine fehlerseite anzeigen oder zur startseite weiterleiten.
     
  22. 9. August 2010
    AW: Homepage Layoutproblem

    da ich etwas zeit habe hier etwas für dich. machste folgendes in deiner index.php
    PHP:
    <? php
    // deine seiten anpassen, am besten sollten die dateinamen aus buchstaben sein
    $navi  = array(
             'home'  =>  'Startseite' ,
             'works'  =>  'Referenzen' ,
             'preise'  =>  'Preisliste'
    );
    // prüfen ob eine seite aufgerufen wurde
    if(isset( $_GET [ 'seite' ]))
    {
             // genauer prüfen -> nur buchstaben
             if( ctype_alpha ( $_GET [ 'seite' ]) ===  true )
        {
                 // wenn die seite nicht in $navi vorhanden ist -> dann errorseite
                 if( array_key_exists ( $_GET [ 'seite' ], $navi ) ===  false )
            {
                     $_GET [ 'seite' ] =  'error' ;    
            }
            else
            {
                     // prüfen ob diese datei auch existiert
                     if( file_exists ( $_GET [ 'seite' ]) ===  false )
                {
                         // meldung für dich
                         exit( $_GET [ 'seite' ]. '.php nicht vorhanden' );
                }
            }
        }
        else
        {
                 // falls eingabe ungültige zeichen enthält
                 $_GET [ 'seite' ] =  'error' ;
        }
    }
    else
    {
             // startseite festlegen -> falls nichts eingegeben wurde
             $_GET [ 'seite' ] =  'home' ;
    }     ?>
    <html>
    <head>
    <title>Meine Homepage</title>
    <style type="text/css">
    a.aktiv { /* aktive seite */
        font-weight: bold;
        color: red;
    }
    a.normal { /* normaler link */
        color: black;
    }
    </style>
    </head>
    <body>

    <div id="menu">
    <?php
    // Seiten ausgeben
    foreach( $navi  as  $file  =>  $name )
    {
    $class  = ( $file  ===  $_GET [ 'seite' ])? 'aktiv' : 'normal' ;
    echo      '<a href="' . $file . '" class="' . $class . '">' . $name . '</a> ' ;
    }
    ?>
    </div>

    <div id="content">
    <?php
             include  $_GET [ 'seite' ]. '.php' ;
    ?>
    </div>
    </body>
    </html>
    so und jetzt die eigentlichen seiten:
    Code:
    // home.php - Startseite
<h1>Willkommen auf meiner Seite</h1>
<p>hiermit begrüße ich Sie u.s.w.</p>

// works.php - Referenzen
<h1>Hier sind meine Referenzen</h1>
<p>bla bla</p>

// preise.php - Preisliste
<h1>Unsere Preise</h1>
<p>bla bla</p>

// error.php - Fehlerseite
<h1>Fehler: Seite nicht gefunden</h1>
<p>Es tut uns leid u.s.w</p>
    müsste eigentlich alles soweit laufen
     
  23. 9. August 2010
    AW: Homepage Layoutproblem

    habe es schon etwas anderst gelöst. passt doch so auch oder?

    Code:
    <?php
session_start();
?>
<!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>thirty3-solutions</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
function eqh() {
 var g = function(e) { return document.getElementById(e); };

 for(var i = 0, h = 0, c = 0, l = arguments.length; i < l; ++i)
 h = (h < (c = g(arguments[i]).offsetHeight)) ? c : h;

 h = h + "px";
 for(var i = 0, l = arguments.length; i < l; ++i)
 g(arguments[i]).style.height = h;
}

window.onload = function() {
 eqh('boxes_right', 'main');
}
</script>
</head>

<body>

<div id="index">

 <div id="banner">
 </div>
 
 <div id="boxes_right">
 <p>test test</p>
 <p>test test</p>
 <p>test test</p>
 </div>
 
 
 <div id="boxes_left">
 <ul id="navi">
 <li>
 <a href="index.php?section=home" title="Startseite" id="startseite" value="site">Startseite</a>
 </li>
 <li>
 <a href="index.php?section=news" title="Neuigkeiten" id="news" value="site">Neuigkeiten</a>
 </li>
 <li>
 <a href="index.php?section=templates" title="Templates" id="templ" value="site">Templates</a>
 </li>
 <li>
 <a href="index.php?section=kontakt" title="Kontakt" id="kontakt" value="site">Kontakt</a>
 </li>
 <li>
 <a href="index.php?section=impressum" title="Impressum" id="impressum" value="site">Impressum</a>
 </li>
 </ul>
 </div>
 
 <div id="login">
 <?php
 if(!session_is_registered(myusername)){
 include ("main_login.php");
 }else include("login_success.php");
 ?> 
 </div>
 
 <div id="main">
 <?php
 error_reporting(E_ALL);
 ini_set('display_errors', 1);

 $section = array();
 $section['news'] = 'news.php';
 $section['home'] = 'home.php';
 $section['templates'] = 'templates.php';
 $section['kontakt'] = 'kontakt.php';
 $section['impressum'] = 'impressum.php';
 $section['loggedin'] = 'logged_in.php';
 $section['logout'] = 'logout.php';

 include 'header.html'; // doctype, <html> und das komplette <head>-element
 echo " <body>\n";

 if (isset($_GET['section'], $section[$_GET['section']])) {
 include $section[$_GET['section']];
 } else {
 include $section['home'];
 }

 echo " </body>\n";
 echo "</html>\n";
 ?>

 </div>
 
 <div id="footer">
 <p>© test.de</p>
 </div>

</div>





</body>
</html>
     
  24. 10. August 2010
    AW: Homepage Layoutproblem

    must du selber entscheiden. Mit meiner methode könntest du die navigation einfach erweitern und die aktuelle seite hervorheben.

    Bei deinen code muss man es dopellt machen 1.array und 2.html ....
     
  25. 10. August 2010
    AW: Homepage Layoutproblem

    ah ok ... dann werd ich wohl doch deins nehmen
     
  26. 31. August 2010
    AW: Homepage Layoutproblem

    habe jetzt noch 2 weitere probleme:

    1. möchte gerne einen "admin"-bereich erstellen wo ich ganz einfach mit tinymce oder derartigem editor meine contents bearbeiten kann. muss nichts großartiges sein.

    2. wie kann ich eine andere seite ... wie in meinem beispiel hier das forum in den div reinladen mit externer internetadresse

    hier die neue seite: http://www.thirty3-solutions.de (mit www)
     
  27. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.

Seite 1 von 2