www.ikea.de

[Almjodler]

hi ihr,
also ich bin echt voll am verzweifeln wegen der kleinen Tabelle unten rechts auf http://www.ikea.de, die mit dem orangenen Border und den abgerundeten Ecken (Neu! IKEA family Newsletter...steht da drin). Also vom Prinzip her weiß ich schon wie des zu machen is nur ich krieg sowas einfach nich hin, ich hab die richtigen Ecken erstellt und in Dreamweaver mit Tabellen gearbeitet aber ich hab's nie so wie auf der Page hinbekommen.
Ich hab auch schonmal diese kleine Tabelle einzeln ausgeschnitten um se mal genauer anzuschauen aber ich werde da nich draus schlau, da sind noch ziemlch viele kleine unscheinbare Bilder -zum Platz ausfüllen anscheinend- mit drinnen.
Kann mir jemand Tipps geben wie ich sowas einfacher hinkrieg, oder genauer erklären wie die Tabelle bei Ikea da aufgebaut ist?
Vielen Dank schonmal jetzt
mfg

(Im Anhang nochmal ein Bild von dem kleinen Kästchen das ich meine)

 

[Christoph]

Sieh dir den Quelltext an

 

[Almjodler]

vielen dank....

hab ich bereits!
werde leider nicht schlau daraus!

 

[Almjodler]

ich habs jetzt mal probiert...

... aber bei mir wird des immer nichts, da scheint es irgendeinen trick zu geben, hinter den ich einfach nich komme,... hat denn wirklich niemand je sowas auf seiner homepage gehabt oder weis keiner wie des geht?

 

[Lord-Lance]

ich würde das problem mit 2 tabellen machen. Mach eine Grosse als hintergrundtabelle. dann ne kleinere mit dem inhalt und text darübergeben. wichtig ist einfach das du in allen zellen das "No Wrap" anhackst. Auch wichtig ist das du den tabellen die breite und höhe in Pixeln angibst und nicht in %. Denke das könnte helfen....

Gruss
Lord-Lance

 

[Almjodler]

naja, die variante hab ich mir auch schon überlegt aber ich würde es irgendwie trotzdem lieber so wie auf der ikea homepage machen, mit bildern nur für die 4 abgerundeten ecken, is mir irgenwdie sympatischer,... hab sowas ähnliches übrigens auch noch auf der microsoft homepage gefunden, falls ihr mir damit helfen könntet schauts euch mal an vielleicht sagts euch mehr als mir.
ich glaub die arbeiten viel mit leer-bildern um irgendwelche schwierig zu füllende stellen aufzufüllen, aber davon versteh ich nich viel ,
also bin ich weiterhin für jede hilfe dankbar
mfg

 

[Precog]

yo also ich probier ma das zu erklären...

also du erstellst eine tabelle,
mit drei spalten und drei zellen;
dann fügst du in die zellen oben (in der mitte),
unten (in der mitte), rechts und links in der mitte
jeweils eine linie ein, die dann später die ränder werden.
dann machst du oben links und rechts und unten
links und rechts in die ecken jewils einen bogen.
IKEA hat noch clearpixel gifs als platzhalter zwischen
dem inhalt und den linien genommen... die kannst du aber
weglassen.
ich würde dir empfehlen, die ikea seite aufm desktop
zu speichern und dann mit dreamweaver zu öffnen.
dann kannst du dir dass alles noch ma angucken.
ich würde auch am anfang die linien und die bögen nicht
selber machen (viel zu viel fummelei )
sondern die von Ikea nehmen (aus dem ordner, der aufm desktop ist)

hoffe, hab mich verständlich ausgedrückt

greetz,
victork

 

[Almjodler]

ja so hab ich's schon ungefähr 1000 mal probiert aber irgendwie is des echt einfacher gesagt als getan, probierts mal aus, ich kriegs einfach nicht hin (siehe mein dateianhang, paar antworten davor) dass die rundungen mit den linien abschließen und bei ikea is des irgendwie so gemacht dass die linien (wie victork gerade beschrieben hat) keine bilder sind sondern irgendwie von der tabelle erzeugt sind, ich hab mir auch schon den quelltext angeschaut und die ganze seite geladen und mit dw geöffnet, ich habs einfach nich hingekriegt, ich weis langsam echt nichmehr weiter *rumheul*
für weitere hilfe bin ich also immernoch sehr sehr dankbar
mfg

 

[Almjodler]

so ich hab jetzt mal nach ewiger suche ein nettes beispiel von dem gefunden was ich suche, schaut viel unkomplizierter aus als bei ikea (wenn mans in dreamweaver öffnet), aber ich steig immernochnicht so ganz da durch, aber ich denke mal wenn profis wie ihr euch des mal anschaut könnt ihr mir des sicher sofort anschaulich erklären, ich hau des file als zip in den anhang.
Also noch eine Theorie von mir: das kleine Bild, 1 px mal 1 px groß, wird jeweils in den mittleren zellen links und rechts verwendet mit height=8, with=16, dadurch wird der hintergrund auf den nötigen abstand gehalten so dass die "striche" genau mit den rundungen in den ecken abschließen. Aber da sind sicherlich noch 1000 andere tricks drin die man beachten muss weil bei mir is das ja garnix geworden
also, ziehts euch mal, schauts euch an, und helft mir
thx & mfg

 

[Precog]

...aaaaaaahhhhhhhh.......

ahaa,

du erstellst eine tabelle mit 6 zeilen und
5 spalten, fügst die "runden ecken" dann aber so ein,
das nach oben bzw. unten und zur seite immer eine spalte/zeile
frei bleiben. dann machst du in der oberen, in der unteren,
in der linken und in der rechten die hintergrundfarbe:
#FF6500
und machst sie auf=
obere u. untere zeile= höhe 1px
linke und rechte spalte= breite 1px
in deinem beispiel haben sie den clearpixel eingefügt,
der 1px mal 1px ist, und haben ihn oben/unten in die breite,
und links/rechts in die höhe gestreckt.

wenn du es immer noch net hinbekommst,
setz ich mich ma selber hin!!
oder ich such ein tutorial.

greetz,
victork