• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabellen erstellung bzw per div

W

webistefan

Neues Mitglied
Hallo

ich möchte eine Tabelle bauen (siehe Bild), aus html bzw div.

nun hänge ich daran das Box 1 nur so lang ist wie Box 2, ich will bei box 1 die ganze breite von Box 2 und 3 haben. Ich hab es mal rotmarkiert wo er die Box 1 enden lässt.

Hat jemand eine Idee wie man es umsetzen kann?



So das Tabellen Bild tabelle.jpg
 
Eine Tabelle, div's?

Das alles hört sich etwas komisch an. Kannst du mal den Code posten?
Generell macht man das Design mit CSS.

Da ich nicht weiß, wie du gearbeitet hast kann ich dir nicht weiterhelfen.

Gruß
 
Zuletzt bearbeitet:
Willkommen im Forum.

Vielleicht so:

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
        <style type="text/css">
/**
 * new clearfix
 *
 * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
 */
.clear:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clear             { zoom: 1; } /* IE6 */
*:first-child+html .clear { zoom: 1; } /* IE7 */

.wrapper-outer {
    width: 600px;
    border: 3px solid #000;
}

.row {
    margin-left: 200px;
    background: red;
}

.col {
    width: 50%;
    float: left;
}

        </style>
    </head>

    <body>
        <div class="wrapper-outer clear">
            <div class="wrapper-inner">
                <div class="row">
                    row1
                </div>
                <div class="row">
                    <div class="col">.col</div>
                    <div class="col">.col</div>
                </div>
                <div class="row">
                    <div class="col">.col</div>
                    <div class="col">.col</div>
                </div>
            </div>
        </div>
    </body>

</html>
 
Zuletzt bearbeitet:
Danke, genau so stell ich es mir vor,

nein ich weiß nicht zwecks suchmaschinen optimierung sind ja divs besser als Tabellen.
daher war nur die Frage ob es mit divs bzw... css schwerer ist als mit tabellen.

meine tabelle sieht so aus, wie auf dem Bild im ersten Post (halt das Problem ist das ich Zeile 1 nicht über die gesamte Breite von 2 und 3 bekomme) hier der Code:

HTML: 
<table border="1">
  <tr>
    <th colspan="3" rowspan="3">Bild mittig zentriert</th>
    <td>1</td>

  </tr>
  <tr>
    <td>2</td>
     <td>3</td>
  </tr>
  <tr>
    <td>4</td>
        <td>5</td>
  </tr>
</table>
Wie wäre es da umzusetzen? (wo liegt der Fehler?) Die Div Lösung werd ich mir auch mal anschauen sehr schön auf den ersten Blick wie ich es wollte von der Aufteilung. Eine Frage dazu hätte ich an welcher Stelle setzt man da im vorderen Stück das Bild ein an hinter :
HTML: 
<div class="wrapper-inner">
????
 
Zuletzt bearbeitet:
.wrapper-inner ist offenbar sogar überflüssig. Ich weiß nicht mehr, was ich ursprünglich damit wollte.

Lösung von oben mit Raum für Bild:

(Habe es nur im IE6 und im Firefox getestet.)

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
        <style type="text/css">
/**
 * new clearfix
 *
 * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
 */
.clear:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clear             { zoom: 1; } /* IE6 */
*:first-child+html .clear { zoom: 1; } /* IE7 */

.wrapper-outer {
    width: 600px;
    border: 3px solid #000;
    position: relative;
}

.row {
    margin-left: 200px;
}

.row1 {
    background-color: #f00;
    border-bottom: 10px solid #0f0;
}

.col {
    width: 50%;
    float: left;
}

div.image-placeholder {
    width: 80px;
    height: 150px;
    background-color: #00f;
    position: absolute;
    top: 50%;
    left: 60px;        /* (200px - Breite) / 2 */
    margin-top: -75px; /* Hälfte der Höhe */
}

        </style>
    </head>

    <body>
        <div class="wrapper-outer clear">

            <div class="image-placeholder">IMG</div>
            
            <div class="row row1 clear">
                row1<br/><br/><br/><br/>
            </div>
            <div class="row clear">
                <div class="col">.col<br/><br/><br/><br/></div>
                <div class="col">.col<br/><br/><br/><br/></div>
            </div>
            <div class="row clear">
                <div class="col">.col<br/><br/><br/><br/></div>
                <div class="col">.col<br/><br/><br/><br/></div>
            </div>
            
        </div>
    </body>

</html>
 
danke, ich werd es mal versuchen ;-)

Sieht erstmal sehr gut aus, mit den wrappern das hab ich irgendwie noch nicht ganz verstanden, aber wird langsam klarer wie er es zusammenbaut
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben