Layout mit Grafik, aber wie?

[Der nette Mann]

Hallo,

ich habe bis zum heutigen Tage alle meine Layouts, die ich jemals entworfen habe mit Tabellen realisiert, welche ich mit CSS formatiert habe. Jetzt habe ich mich heute durch sehr viele Websites gewühlt um mich von den Vorteilen von CSS basierten Layouts überzeugen zu lassen (für mich als eigentlicher Programmierer nicht besonders schwer, da ich ungern Layout Anweisungen in meinem Code stehen habe). Jetzt möchte ich mein Design, was ich dabei bin zu entwerfen mit CSS umsetzen, um einen ersten Eindruck (quasi Prototyp) zu haben.

Allerdings bin ich in meiner Denkweise immer noch durch das Tabellendesign blockiert und habe keine Idee, wie ich folgendes mit CSS umsetzen kann.

hier

Ist das äußere Design vllt. doch in einem Tabellelayout einfacher. Dann würde ich mich um den Rest mit CSS kümmern.

Grüße

Der nette Mann

 

[Jan-Frederik Stieler]

Hi,
sowas habe ich bei meiner Seitze auch umgesetzt.du solltest einfachmal hier im Forum nach Divs mit runder Ecke und Divs mit Schatten suchen da werden dann ein paar Links von Seiten gepostet die sich intensiv mit dem Realisieren solcher Grafiken befassen.

Gruß

 

[Der nette Mann]

Ich hab mich jetzt mal ran gemacht und versucht das ganze umzusetzen, was mir auch ganz gut gelungen ist. Hab einfach ein Hauptcontainer gemacht, in diesen dann drei weitere gelegt (für die obere Rundung, den Content un die untere Rundung)...

Also vom Design her hat's auf jeden Fall funktioniert. Ist schon eine Umstellung, aber der HTML Code sieht sehr sauber aus

Das einzige Problem, was ich jetzt noch habe ist der Internet Explorer. Der macht mal wieder was er will. Keine Zentrierung und das floaten funtzt auch nicht.

Grüße

 

[Jan-Frederik Stieler]

Poste doch mal den Quellcode villeicht können wir dir ja helfen.

Gruß

 

[Inspector]

Hi,

ich würde das vorläufig noch nicht machen, das mit den Rundungen. Ab CSS3 ist das mit drin im Sprachumfang. Dann kann man das sehr schön ohne Verrenkungen machen.

Zur Zeit unterstützt der Mozilla Firefox so eine Art proprietären Vorläufer dieser Rundungen. Auf meiner Homepage habe ich damit mal ein bisschen experimentiert. Um das zu sehen, muß man unter Ansicht - Webseiten-Stil den Stil "Luft" einstellen. Da kann man dann sehen, inwieweit es schon funktioniert, und inwieweit noch nicht. Derzeit kriegt der Firefox den Ramen um den div-Container abgerundet hin, aber der Hintergrund ist immer noch eckig.

Angeblich soll man mit CSS3 sogar Ramen aus beliebigen Grafiken per css angeben können.

 

[Jan-Frederik Stieler]

Also du kannst dir ja auchmal diesen beitrag durchlessen, da gibt es einen Link bei dem so ein paar Tricks zu runden Ecken mit CSS2 stehen.
Bis CSS3 veröffentlicht wird und auch funktioniert dauert es bestimmt noch mindestens 1-2 Jahre und was soll ich mit ner webseite die auf dem neuen IE nicht dargestellt werden kann, weil M$ meint es müße sich keinem Standart unterortnenweil sie eben M$ sind.

Gruß

 

[Inspector]

Hi,

1. Nix dagegen. Es ist schlicht nur meine ganz private und bescheidene Meinung, daß ich keine Sondertricks verwende, um bestimmte Features zu erreichen. Zumindest nicht, wenn dann die Seite davon abhängt. Natürlich hast Du Recht, daß CSS3 bestimmt noch eine ganze Weile brauchen wird. Und ob M$ das dann auch umsetzt oder vielleicht erst wiederum ein paar Jahre später, das ist auch noch die Frage. Insofern steht das natürlich absolut Jedem frei, bis dahin nach Wegen zu suchen, die Unvollkommenheiten dieser Welt zu umgehen

2. Ich bin ziemlich neu in diesem Forum und kenne mich damit noch nicht so besonders aus. Wo und wie muß ich nach diesen Artikeln suchen? Selbst, wenn ich das so wohl nicht übernehmen werde, bin ich trotzdem interessiert. Man kann nur dazulernen.

 

[Jan-Frederik Stieler]

Also eigentlich wollte ich den link ja Posten, habs dann aber als ich fertig geschrieben hatte vergessen. Sorry.
Hier nochn Link für wirklich gewitzte Methoden um andersartige Ecken zu realisieren:
http://www.cssplay.co.uk/boxes/krazy.html
auf der Seite gibts noch mehr von denen einfach mal rumsurfen.

Zum Suchen einfach oben „in Themen suchen“ oder auf den link„Suchen & Finden“ den Suchbegriff eingeben wie bei Google.

Gruß

 

[Der nette Mann]

Hi,

danke für den Link. Stehen echt ein paar nette Sachen drin. Hab das ganze schon mit einer Grafik gelöst, aber das werde ich garantiert noch benötigen.

Also ich tippe, dass M$ mit seinem IE 7 sich vllt etwas mehr an den Standard hält. Sie haben ja durch den Firefox ernsthafte Konkurrenz bekommen (der sich an den Standard hält). Und die Umgewöhnung (für nicht PC Experten) ist ja auch nicht so schwer. Das hat Mozilla sich schon einige Gedanken gemacht, wie sie M$ ein paar Kunden abjagen kann. Wenn M$ meint, dass sie sich an keinen Standard halten müssen sollen sie das tun. Bleibt nur zu hoffen, dass dann einige Windows User sich die Mühe machen und einen ordentlichen Browser zulegen.

So, dass musste jetzt mal gesagt werden

hier mal ein Eindruck... wie es bisher geworden ist. die Navi gefällt mir noch nicht ganz...

Grüße

Der nette Mann

P.S: Der Text iss relativ sinnlos... nur zu Testzwecken gedacht

 

[Inspector]

Hi,

ebenfalls danke für den Link (und die Aufklärung). Stimmt, sieht interessant aus. Das ist was fürs Wochenende. Vielleicht baue ich sogar Sowas ein. Zumindest in einem meiner Stile. Und sei es auch nur vorübergehend.