dringende Hiilfe benötigt - Überlappungen auf Website

[medita]

Liebe Leute ich bitte euch inständigst um Hilfe.
Habe erstmals meine Website nicht im HTML direkt erstellt sondern im Photoshop und dann gesliced.
Auf Safari sieht sie super aus, genauso wie ich sie haben wollte, im IE Explorer jedoch eine einzige Katastrophe
ich wollte die seite nun umbauen und ganz normal im dreamweaver noch einmal erstellen doch jetzt weiß ich nicht wie ich solche überlappungen von bildern machen kann

siehe zb auf der seite workshops die beiden damen oben, die würden ja über die tabelle rausstehen (ich weiß tabellen sind nicht geeignet) aber ich hab keine ahnung wie ich die seite in meinem speziellen fall sonst aufziehen soll

würde mich wirklich sehr über helfende tipps freuen
danke

 

[Timmer]

Ich denke, das sollte helfen: CSS 4 You - The Finest in Stylesheets: Workshop: Layouten ohne Tabellen

Ansonsten probiers mal da: Let me google that for you ;)

 

[medita]

vielen dank für den tipp css4you hatte ich bereits gefunden als ich mich diesbezüglich zu tode gegoogelt hab beinahe.
hab viele infos gefunden aber ich weiß nicht wie ich anfangen soll, schritt für schritt mein ich

ich weiß jetzt zwar was stylesheets sind und was container sind ich hab mich auch brav durch diverse geschriebenen tutorials geackert aber uff.....irgendwo hakts ich finde keinen roten faden durch die vielen infos auf dem ich meine seite aufbauen könnte.

vielleicht weiß ja zufällig jemand warum er mir die seite im ie so dämlich darstellt, warum sie so verschoben ist und warum man die ganzen slices sieht?

danke!!!

 

[Cheffchen]

Hallo,

das ist aber nur ein test und damit möchtest nicht richtig online gehen/bleiben.

Die Spalten kommen durch die Links oben zustande bzw den border.

Die Seite ist optisch ja ok aber Programiert wurde da echt nichts.
Ich hoffe mal das es selber bist sonst unterschreibe nichts das es auf dich schließen lässt bevor er dich verklagt :O).

SELFHTML 8.1.2 (HTML-Dateien selbst erstellen) ist auch eine gute seite zum anfang.

Cheffchen

ps: rechtlich ist das auch schlim da kannst zum glück reden das die seite nie vernünftig gefunden werden kann und damit findet das hoffentlich kein abmahner :O)
pps: aber so ein lustiges (c) was egal ist
ppps. usw. x 20 sind noch ein zwei sachen zu machen :O)

 

[Trüffelkrieger]

Also erstmal ist die Slicefunktion von Ps mMn. nicht dafür gedacht, auch die ganzen Texte als Bild einzufügen.

Der IE: Um Die Bilder als Link hat er einen standardmäßigen blauen Rahmen, lässt sich abstellen durch

img{border:none;}

Dadurch dürfte auch die falsche Positionierung resultieren.

Tipp: Fang nochmal neu an. Du hast das Design schon in Photoshop, also blendest du erstmal alle Texte aus, sliced dann nur die wirklichen Bilder (also das Logo, das Bild bei "Willkommen", das vom Anrichten bei "Workshops", das große unter der Nav (volle Breite inklusive Verlauf) und das Bild von dem Fotografen (das wäre als .png mit transparenz gut).
Dann lässt du sämtliche Tabellen aus dem HTML-Code raus, sondern nutzt nur divs etc. Ein div für den Header (das Logo, die Navigation, der Spruch mit Verlauf und das große Bild), eines für den Content und eins für den footer. Dann baust du in den Header das Logo ein (rote "Umrandung" würde ich vlt. weglassen, gibst dem eine id und floatest es links (also float:left). Den Schatten kannst du für moderne Browser mit box-shadow realisieren, vielleicht ist es nicht so schlimm, wenn bei älteren keiner da ist?

Die Nav setzt du mit einer Liste um. In die CSS kommt dann sowas (wenn sie im Code unter dem Logo steht und eine Breite zugewiesen bekommt, die mit der Breite des Logos kleiner ist als die Breite der gesamten Site, schiebt sie sich neben das Logo, sonst mit float:right arbeiten):

#nav li{display:block; float:left;}

(dann noch ein wenig mit padding die Abstände regeln.)
Als list-style-image kannst du dann den Pfeil zuweisen und diesen absolut zu jedem Menüpunkt positionieren, weshalb ein position:relative dem li zugewiesen werden muss. Dann packst du darunter ein div (innerhalb des header-divs), gibst dem die Breite der website und kannst ihm als Hintergrund das weiße mit dem Verlauf und dem Bild des Kochs zuweisen. (evtl. clear:both um float aufzuheben) Dann schreibst du den Text in einem em oder p Tag und schiebst ihn mit padding an die richtige Stelle. Dann kannst du für die Überlappung diesem div einen negativen margin-top zuweisen, dass müsste ihn unter das Logo schieben.

Dann kommt der Content-div. Hier kannst du für jede Spalte ein eigenes div einfügen und lässt die alle links floaten (ausfpassen bei width-Zuweisung, margin und padding müssen hier abgezogen werden, damit die divs nebeneinander stehen. Inhalte rein und bei dem Fotografen mit der Galerie einfach normal mit image-Tag einbinden (overflow:visible sollte dazu führen, dass er ins graue "übersteht")

Denk dran, dass der content ein clear:both benötigt, der Footer dann ein clear:left, damit das float aufgehoben wird.

Und dann mit den anderen Seiten weiter...

Ich hoffe, dass war halbwegs verständlich und richtig, habe das jetzt nur schnell runtergeschrieben, als Anlehnung hilfts vielleicht?

 

[medita]

@ Trüffelkrieger: vielen herzlichen Dank für deine Mühe, super! ich werde das gleich so versuchen! ich glaube das hat mir sehr geholfen als Anhaltspunkt!
@Cheffchen: was meinst du mit rechtlich und c?

 

[Cheffchen]

was meinst du mit rechtlich und c?

(c): der irglaube nur mit (c) hat sie seite ein cobyright.
rechtliches: das halt alles fehlt und das was ist, ist falsch, Daten als Bild.

Cheffchen