Abgerundete Boxen in ebay Auktionen

[shajan92]

Guten Tag liebe html Community,

ich ärgere mich schon den ganzen tag mit html bzw. css codes rum und bin absoluter neuling.
mein ziel ist es eine vernünftige angebotsvorlage für ebay zu erstellen.
Dazu möchte ich mehrere abgerundete boxen in die angebotsvorlage integrieren um so ein übersichtliches angebot gestalten zu können.

im prinzip sollte das wie folgt aussehen:

Silikon Case Samsung I9100 Galaxy S2 black Hülle Cover | eBay


wie man bilder einfügt, sachen verlinkt etc. weis ich alles schon. es geht mir wirklich nur um das erstellen dieser abgerundeten boxen und wie ich diese dan richtig platziere und anpasse. des weiteren haben diese boxen im angebot alle eine überschrift bzw. eine obere leiste mit einer anderen hintergrundfabre.

ich hoffe wirklich ihr könnt mir helfen!

mfg.

 

[threadi]

Für das was Du willst, brauchst Du CSS. Denn HTML dient nicht zur Gestaltung.

In CSS gibt es die Eigenschaft border-radius mit der man Ecken abrunden kann, genau so wie Du es willst. Siehe:
CSS Rounded Corners - border-radius

Aber: diese Eigenschaft wird von allen Browsern außer IE<=8 unterstützt. Wenn Du auch diese Browser berücksichtigen möchtest, dann kannst Du entweder diese Datei als Hilfe für den IE einbinden: CSS3 PIE: CSS3 decorations for IE - ODER Du baust auf "altmodische" Weise die runden Ecken der Boxen als Grafiken und bindest sie als Hintergrundbild ein.

Moderation: Verschoben von HTML zu CSS.

 

[shajan92]

vielen dank für die rasche antwort! und was hat es mit der farbigen headline (überschrift-hintergrundfarbe) der boxen auf sich?

 

[threadi]

Das kann man ebenfalls per CSS lösen (background-color, wenn es ein Verlauf sein soll mit gradient), aber in deinem Beispiel ist alles eine Grafik:
http://pics.csl-computer.com/ebay/design2011/bilder/nav_links_unten.png

 

[shajan92]

okey nochmals vielen dank. das heist diese überschrift hintergrundfarbe ist eine grafik. wie schafft er es jedoch das er über die grafik beliebig buchstaben schreiben kann? die buchstaben scheinen nemlich nicht bestandteil der grafik zu sein. ich hoffe sie können mir folgen.

 

[threadi]

Das ist eine Hintergrundgrafik die per

background-image: url(/bilder/nav_links_unten.png);

an ein HTML-Element gebunden wurde. Dadurch steht der Text im HTML-Element über dem Hintergrundbild.