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

Wie krieg ich das umgesetzt?

L

Lotus

Mitglied
Hallo, ich tu mich immer wieder schwer mit CSS, darum wollte ich euch um Hilfe bitten.

Ich möchte folgendes umsetzen:
warenkorb_ausschnitt.jpg

Der untere Teil würde ich mit einer Tablle versuchen umzusetzen, also ne colgroup festlegen und dann die ne Breite für die 3 Spalten angeben.. Aber ich krieg den Teil oben nicht wirklich hin... Der Strich, wie soll ich den umsetzen? Ich hab schon probiert mit bearbeiteten <p> Tags, allerdings habe ich die dann nicht so weit auseinander bekommen, die width hat er einfach immer wieder ignoriert, ich musste den display style da auch noch auf inline setzen etc.. ich wäre für Ideen oder Code sehr dankbar..

lg
 
Ja danke, das weiß ich soweit ja, aber ich bekomme die beiden Tabellekäpfe "Artikel" und "Preis" nicht soweit auseinander. Das ist als ob der die width von meinen <p> - Tags ignoriert. Ich will natürlich nicht mit &nbsp; arbeiten ;)
 
So kompletter Code:

HTML: 
<style type="text/css">
div.oben {
width: 100px;
height: 20px;
background-color: grey;
color: white;
font-family:"Arial Black";
}

div.unten {
width: 100px;
height: 50px;
background-color: grey;
color: white;
position:relative;
top: 3px;
font-family:"Arial Black";
}

div.obenlinks {
float: left;
}

div.obenrechts {
float: right;
}

div.untenlinks {
float: left;
}

div.untenrechts {
float: right;
}
</style>

<div class="oben">
<div class="obenlinks">
Artikel
</div>
<div class="obenrechts">
Preis
</div>
</div>
<div class="unten">
<div class="untenrechts">
Produkt<br>
</div>
<div class="untenlinks">
1€
</div>
</div>
 
So besser?

HTML: 
<style type="text/css">
div.oben {
width: 210px;
height: 20px;
background-color: grey;
color: white;
font-family:"Arial Black";
position:relative;
}

div.unten {
width: 210px;
height: 50px;
background-color: grey;
color: white;
position:relative;
top: 3px;
font-family:"Arial Black";
}

div.obenlinks {
float: left;
left:3px;
}

div.obenrechts {
float: right;
right:3px;
}


</style>

<div class="oben">
<div class="obenlinks">
Artikel
</div>
<div class="obenrechts">
Preis
</div>
</div>
<div class="unten">

</div>
 
So schaut das schon viel besser aus... ich denke damit kann ich weiterarbeiten. vielen vielen herzlichen Dank! Wobei ich aber denke das er die div.obenrechts und div.obenlinks jeweils die left und right ignoriert, ist ziemlich an den rand gequetscht, aber das bekomme ich hin denke ich :)
 
Das ist eine Tabelle, somit kannst Du auch alles als Tabelle umsetzen:

HTML: 
<table>
<thead>
 <tr><th>Artikel</th><th>Preis</th><th>&nbsp;</th></tr>
</thead>
<tbody>
 <tr><td>Der König in seinem Exil</td><td>12,99 €</td><td>&nbsp;</td></tr>
</tbody>
</table>

Das lässt sich dann dank Trennung in thead und tbody auch ganz leicht stylen.
 
Danke schonmal, aber wie kann ich sagen, dass lediglich die untere Linie/Rand der Tablle nen Border haben soll? Ich dachte ich kann das nur für die gesamte Tabelle festlegen?
 
Nein, das kannst Du auch an thead oder die th's in thead hängen.

Code: 
thead tr { border-bottom: 3px solid #fff; }
 
Tut mir leid aber der Code funktioniert so nicht o.O
Er zeigt mir gar keine Border an..
auch wenn ich die farbe von weiß auf eine andere ändere ^^
 
Zuletzt bearbeitet:
Ich habe jetzt nochmal so wie du es haben wolltest,
und zwar genau so ^^ hier der HTML-Code:
HTML: 
<html> <head> <title> </title> <style type="text/css"> table tr td {width: 180px;} #u {position: relative;top: 3px;} #m {width: 40px;} </style> </head> <body> <div id="table"> <table bgcolor="grey">
<tr > <td>Produkt</td> <td id="m">Preis</td> </tr> </table> <table bgcolor="grey" id="u"> <tr> <td>Der König in seinem Exil</td>
<td id="m">12&euro;</td>
</tr> <tr> <td>Produkt</td> <td id="m">0 &euro;</td> </tr> <tr>
<td>Produkt</td> <td id="m">0 &euro;</td> </tr> </table> </div> </body> </html>
 
NetAktiv schrieb:
*flüster* Dort, wo ich mit div&co nur das gleiche Layout erhalte wie mit einer Tabelle, da mache ich das auch noch immer gnadenlos, ich sage es nur nicht mehr laut :mrgreen:
Zum Vergrößern anklicken....

Dann hast du wahrscheinlich noch immer nicht begriffen das es bei HTML um die Semantische Auszeichnung und nicht um das Aussehen geht.
Das heisst du benutzt zwar HTML hast aber eigentlich nicht die geringste Ahnung wofür es da ist.

Gruss
Elroy
 
Elroy schrieb:
geringste Ahnung wofür es da ist.
Zum Vergrößern anklicken....
In erster Linie ist die Technik da, das zu erreichen, was ich will. Ob ich nun künstliche irgendwelche Listen-Elemente zur Block-Ansicht zwinge, den Listenmarkierer unterbinde und alles noch nebeneinander anordne, jedem <li> noch ein Bildchen zuordne und dann das Menü nenne oder ob ich eine natürlich vorkommende und aus Block-Elementen bestehende Zeile verwende. Da klingt das zweite doch eher natürlich. Ich finde die Verdammung der Tabellen hier schon fast paranoid, fehlt nur noch, dass man die nach einem SQL Select auch nicht mehr verwenden soll.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben