Herzlich Willkommen, lieber Gast!
  Sie befinden sich hier:

  Forum » HTML / XML / XHTML » CSS - divs mit gleicher höhe

Forum | Hilfe | Team | Links | Impressum | > Suche < | Mitglieder | Registrieren | Einloggen
  Quicklinks: MSDN-Online || STL || clib Reference Grundlagen || Literatur || E-Books || Zubehör || > F.A.Q. < || Downloads   

Autor Thread - Seiten: > 1 <
000
14.08.2011, 00:50 Uhr
Arzi



Guten Tag,

ich designe gerade meine Homepage und habe 2 divs die nebeneinander sind. Jetzt möchte ich gerne, dass div1 die selbe höhe hat, wie div2 , egal wie lange div 1 bzw. div 2 ist, es kommt manchmal vor, dass div 1 länger ist und manchmal, dass div 2 länger ist. Ich verzweifel langsam und ich habe keine Ahnung wie man das geschickt lösen könnte.
Hat jemand von euch eine Ahnung, wie das gehen könnte?

mfg
Arzi
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
001
14.08.2011, 01:14 Uhr
0xdeadbeef
Gott
(Operator)


display:table wäre eine einfache Möglichkeit. Beispiel:

Code:
<html>
  <head>
    <style type="text/css">
      div { border: 1px solid gray; }
      
      #tabelle {
      display:table;
      }

      #tabelle > * {
      display:table-cell;
      width: 50%;
      }
    </style>
  </head>
  <body>
    <div id="tabelle">
      <div>
        test
      </div>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
        do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.
      </div>
    </div>
  </body>
</html>


--
Einfachheit ist Voraussetzung für Zuverlässigkeit.
-- Edsger Wybe Dijkstra
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
002
14.08.2011, 01:37 Uhr
Arzi



Das funktioniert bei meiner Homepage nicht so richtig :(
Damit du es dir besser vorstellen kannst: http://m-arzberger.de
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
003
14.08.2011, 10:49 Uhr
0xdeadbeef
Gott
(Operator)


Etwa so?

Code:
<html>
  <head>
    <style type="text/css">
      #tabelle {
      display:table;
      border-spacing: 20px;
      }

      #tabelle > * {
      display:table-cell;
      border: 1px solid grey;

      /* border-radius ist css3, wenn mich nicht alles täuscht. Bis auf
       * weiteres braucht man da für ältere Browser wohl eine Menge
       * Sonderfälle. */
      border-radius: 15px;
      -moz-border-radius: 15px;
      /* ... */

      padding: 20px;
      width: 50%;
      }
    </style>
  </head>
  <body>
    <div id="tabelle">
      <div>
        test
      </div>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
        do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
        aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.
      </div>
    </div>
  </body>
</html>


--
Einfachheit ist Voraussetzung für Zuverlässigkeit.
-- Edsger Wybe Dijkstra

Dieser Post wurde am 14.08.2011 um 10:53 Uhr von 0xdeadbeef editiert.
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
004
14.08.2011, 13:00 Uhr
Arzi



ok, ich hab meine seite nun so umgeändert, dass es geht, jetzt brauch ich nur noch eine alternative zu einem div, bei dem man höhe und breite festlegen kann. Das ist für das Bild auf der rechten Seite, weil das Div auf der linken seite sich dann unter dem bild ausrichtet, wenn das bild in einem div ist...
was kann man den da nehmen?
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
005
14.08.2011, 13:43 Uhr
0xdeadbeef
Gott
(Operator)


Ich glaube, du willst etwa so etwas:

Code:
<html>
  <head>
    <style type="text/css">
      #content {
      display:table;
      border-spacing: 20px;
      width: 100%;
      }

      #content > * {
      display:table-cell;

      border: 1px solid grey;
      padding: 20px;

      /* CSS3 */
      border-radius: 15px;
      }

      #text {
      vertical-align: top;
      }
      
      #impressum {
      /* Echte Breite wird durch margin-left und margin-right in
       * #autor_bild festgelegt */
      width: 0;
      }

      #autor_bild {
      width: auto;

      margin-top:    10px;
      margin-bottom: 20px;
      margin-left:  100px;
      margin-right: 100px;


      text-align: center;

      /* CSS3 */
      border-radius: 15px;
      box-shadow: 0px 0px 10px black;
      }

      #autor_bild > img {
      /* CSS3 */
      border-radius: 15px 15px 0 0;
      }

      #autor_name {
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div id="text">
        test
      </div>
      <div id="impressum">
        <div id="autor_bild">
          <img src="http://m-arzberger.de/images/manuel.png"></img>
          <div id="autor_name">Bildunterschrift hier</div>
        </div>

        <div>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
          do eiusmod tempor incididunt ut labore et dolore magna
          aliqua. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
          aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint
          occaecat cupidatat non proident, sunt in culpa qui officia
          deserunt mollit anim id est laborum.
        </div>
      </div>
    </div>
  </body>
</html>


Sag mal, bist du sicher, dass du mit dem Kenntnisstand professionelles Webdesign anbieten solltest? Normalerweise lernt man solche Dinge, bevor man sie anderen Leuten als seine Fähigkeiten verkaufen will.
--
Einfachheit ist Voraussetzung für Zuverlässigkeit.
-- Edsger Wybe Dijkstra
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
006
14.08.2011, 21:38 Uhr
Arzi



Danke, erstmal
ja ich stand gerade nur aufm Schlauch...
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
Seiten: > 1 <     [ HTML / XML / XHTML ]  


ThWBoard 2.73 FloSoft-Edition
© by Paul Baecher & Felix Gonschorek (www.thwboard.de)

Anpassungen des Forums
© by Flo-Soft (www.flo-soft.de)

Sie sind Besucher: