Anfängerproblem bei divs

[zoomzoom]

Hallo

erstmal ein großes Hallo an die Forengemeinde.
Ich bin neu hier und versuche mich gerade bei divs reinzuarbeiten.


Leider habe ich bisher alles mit Tabellen gemacht, möchte nun aber viel lieber mit div weiterarbeiten.

nun muss ich für einen Kunden für einen Warenkorb ein Layout machen, leider komme ich bei der Umsetzung der Gestaltung nicht weiter.

Ein Bild wie es aussehen soll habe ich angehängt.

Hier nun mein Code:

<div class="orderitem_product">
<div class="orderitem_amount">Titel</div>
<div class="orderitem_amount2">Subtext</div>
<div class="order"><span class="orderbutton">Bestellen</span></div>
</div>

und die dazugehörige css-datei:

.order {
    color: #E6EBFB;
    text-decoration:none;
 /*   text-align:right;*/
/*    overflow:hidden;*/
    margin-right:2px;
    margin-top:1px;
    height:30px;
    width:140px;
    position:absolute;
    top:10px;
    left:360px;
}

.orderitem_product {
    font-size:14px;
    top:85px;
}

.orderitem_amount {
    font-size:16px;
    font-weight:bold;
    color:#000000;
    position:relative;
    top:10px;
    left:85px;
    text-align:left;
    width:300px;
    float:left;
}

.orderitem_amount2 {
    font-size:12px;
    font-weight:bold;
    color:#000000;
    position:relative;
    top:35px;
    left:-165px;
    text-align:left;
    width:300px;
    float:left;
}

.orderbutton {
    background-color:#b84444;
    color:#FCEC95;
    font-size:11px;
    border:1px solid #000000;
    padding:2px 5px;
    margin:0px 4px;
    display:block;
    text-align:center;
}

Ich weiss einfach nicht weiter. weil es eben nicht so aussieht wie der Kunde es sich wünscht. zum Beispiel kann ich die Zeilen Titel und Subtext nicht identisch lang machen da sonst die untere plötzlich nen Umbruch macht etc...

Vielleicht kann mir jemand hier helfen? wenn ich es jetzt schon zu kompliziert gemacht habe dann werde ich damit auch nicht mehr weiterarbeiten können denke ich...


lg Zoomy

 

[SimonRue]

Mh..
steck mal orderitem_amount und orderitem_amount2 in ein div
dann float:left für orderitem_product und für das div in dem orderitem_amount und orderitem_amount2 steckt.

(Habs allerdings nicht getestet)

 

[Efchen]

Hallo!

Leider habe ich bisher alles mit Tabellen gemacht, möchte nun aber viel lieber mit div weiterarbeiten.

Die Absicht hinter Deinem Vorhaben ist löblich, Tabellen zur Layoutgestaltung zu verwenden, ist Unfug und unnötig. Aber wenn Du meinst, jetzt "alles mit divs" machen zu müssen, dann hat Dir entweder jemand Blödsinn erzählt, oder aber Du hast was in den falschen Hals zu bekommen. Eine Seite "mit divs" zu gestalten ist genauso sinnfrei wie Layout-Tabellen.

Der Witz an der Sache, die Du vor hast, ist der, dass man HTML und CSS strikt trennt. HTML benutzt man nur noch dazu, wozu HTML vor einer Ewigkeit entwickelt wurde: Zur Auszeichnung des Inhalts. D.h. Du verwendest für Deinen Inhalts Tags, um den Inhalt zu beschreiben: Handelt es sich um eine Überschrift? Um Fließtext? Um eine Adresse, ein Zitat? Einen wichtigen Text? Für alle das und noch mehr gibt es eigene Tags. An letzter Stelle stehen die Tags <span> (allgemeines Inline-Element) und <div> (allgemeines Block-Element). Als allgemeine Tags haben sie keine weitere beschreibende Bedeutung für den Inhalt, div dient nur dazu, mehrere Elemente zwecks gemeinsamer Formatierung zu gruppieren. D.h. für ein CSS-Layout sind divs ein gutes Hilfsmittel (man kann Layouts auch problemlos ohne divs machen!), aber alles mit divs einzupacken ist nicht im Sinne von HTML und nicht wirklich sinnvoller als Tabellenmissbrauch.

Beschreibe Deinen Inhalt mit HTML (Stichwort: Semantik) und dann mach Layout/Design rein mit CSS. Trennung von Inhalt und Layout.

So funktionierts wirklich. "Mit divs" ist ein Gerücht, das CSS-Anfänger, die es noch nciht wirklich begriffen haben, in die Welt setzen.

Übrigens sind Tabellen weiterhin wichtige Mittel zur Auszeichnung Deines Inhalts, nämlich für tabellarische Daten. Tabellen sind also nicht böse!

Viel Erfolg,
-Efchen