Homepage mit Photoshop + Dreamweaver !?

Godspeed · 29.01.2009

Hallo !
Ich habe mir ein Layout einer Seite in Photoshop gebastelt.
Nun habe ich dieses Layout in kleine Bilder zerschnitten und diese gespeichert.
Ich wollte diese nun bei Dreamweaver wieder einfügen, allerdings entstehen dort zwischen den Teilen immer kleine Spalten. In Photoshop war es eine komplette Grafik, die ich halt zum Test in mehrere Streifen geschnitten habe. Diese Streifen können aber nicht wieder zu einem Gesamten zusammengefügt werden ohne das dort diese Zwischenräume entstehen.
Kann man dieses mit HTML bewerkstelligen oder ist für eine pixelgenaue Darstellung CSS von nöten ?
Kann ich auch ohne groß in HTMl etwas einzugeben es so formatieren, das je nachdem wie groß die Auflösung des jeweiligen PC´s ist, wo die Seite geöffnet wird, die Grafik immer mittig angezeigt wird ?
Also wenn meine Grafik nun 400px breit ist und jemand mit einer Auflösung von z.B. 800x600 diese Seite aufruft, dass die Grafik mittig ist und links und rechts jeweils der Bereich in einer Farbe dargestellt wird die von mir definiert wird ?

stb_87 · 29.01.2009

AW: Homepage mit Photoshop + Dreamweaver !?

Vorweg wäre einmal der Quelltext ganz hilfreich.

Um die Website immer Mittig anzuzeigen packst du hinter <body> ein <div id="middle"> und fügst im CSS ein:
#middle {
width: 400px;
margin: 0 auto;
}

und vor </body> musst du dieses <div> natürlich wieder schließen.

Godspeed · 29.01.2009

AW: Homepage mit Photoshop + Dreamweaver !?

Quelltext habe ich ja noch nicht richtig, da es erstmal nur ein Testen in Photoshop und Dreamweaver ist.
Ich weiß zwar nicht warum, aber ich habe es nochmal in der Entwurfansicht hinzuschieben, so dass die Spalten verschwinden und es hat geklappt. Vorher hatte ich dieses auch versucht....
War wohl mal wieder der Anwender vor dem Gerät schuld.

Zu dem Anderen Problem: Danke !
Ich muß aber immer die Breite der Seite mit angeben !?
Aber bezieht sich das nun auf die ganze Seite oder nur auf die Grafik ?
Die Hintergrundfarbe kann ich trotzdem definieren und stellt das restliche Fenster z.B. in schwarz dar ?

wolfish · 29.01.2009

AW: Homepage mit Photoshop + Dreamweaver !?

Hi,

gib die Breite des Bildes an, dann hast du einen Container, der so breit ist wie das Bild und in der Mitte steht.

Den Hintergrund kannst du in der CSS-Datei einstellen mit:
body {
background-color:#000000;
}

Greetz
wolfish

sokie · 29.01.2009

AW: Homepage mit Photoshop + Dreamweaver !?

um die Seite zu zentrieren ist es sicherlich am besten, die Breite der Ganzen seite anzugeben, und dann wie in #2 vorzugehen. Den Hintergrund de gesamten Brwoserfensters kannst du über den body festlegen (Farbe und/oder Hintergrundbild).

stb_87 · 29.01.2009

AW: Homepage mit Photoshop + Dreamweaver !?

Die Zentrierung bezieht sich auf alles, was innerhalb diesem div steht.

Um den Hintergrund schwarz einzufärben gibst du einfach im CSS ein:
body {
background: #000;
weitere Angaben
...
}

sfischer · 29.01.2009

AW: Homepage mit Photoshop + Dreamweaver !?

stb_87 schrieb:
Vorweg wäre einmal der Quelltext ganz hilfreich.

Um die Website immer Mittig anzuzeigen packst du hinter <body> ein <div id="middle"> und fügst im CSS ein:
#middle {
width: 400px;
margin: 0 auto;
}

und vor </body> musst du dieses <div> natürlich wieder schließen.

damit der ie 5 mit abgedeckt ist sollte noch dem body {text-align:center;} mitgegeben werden.
nicht vergessen wieder dem inhalt wieder auf left setzen!

nein du brauchst nur dem #middle die breite geben und allen anderen width: 100%;

gruß sfischer

Godspeed · 29.01.2009

AW: Homepage mit Photoshop + Dreamweaver !?

So, nun habe ich wieder das Problem mit dem Spalt zwischen den Zeilen.
Habe nun wie gesagt einfach mal mein Layout in Photoshop erstellt. Das ganze ist 795px breit.
Nun habe ich es wie folgt zerteilt:
Erstes Stück - 795x148px
Zweites Stück - 795x328px
Dann kommt eine Zeile aus vier Stücken. Alle sind 55px hoch, haben erstmal unterschiedliche Breiten, was ja wohl nichts machen sollte.
Das ist der Quelltext:

<body bgcolor="#ffffff">
<img src="Bilder/Bilder/Unbenannt-9_01.gif" width="795" height="148" /><img src="Bilder/Bilder/Unbenannt-9_02.gif" width="795" height="328" />
<br><img src="Bilder/Bilder/Unbenannt-9_03.gif" width="218" height="55" /><img src="Bilder/Bilder/Unbenannt-9_04.gif" width="180" height="55" /><img src="Bilder/Bilder/Unbenannt-9_05.gif" width="180" height="55" /><img src="Bilder/Bilder/Unbenannt-9_06.gif" width="217" height="55" /></p>
</body>

Dabei sind die ersten beiden img-Container hintereinander weggeschrieben ohen "Enter"-Taste. Drücke ich zwischen den beiden die "Enter"-Taste habe ich auch dort einen Spalt.
Nach den ersten beiden Containern habe ich die Enter-Taste gedrückt, denn wenn ich das nicht mache fügt sich das erste Image noch rechts an das Zweite "Unbenannt-9_02.gif" und die anderen drei sind zwar bündig darunter, aber halt das Erste ist rechts angebracht.
Drücke ich also die Enter Taste und schreibe die vier Images in eine Zeile werden sie in einer Zeile nebeneinander richtig dargestellt, aber ich bekomme sie nicht nach oben, so das sie bündig an das zweite Image anschliessen. Es entsteht immer ein kleiner Spalt dazwischen.

Wie muß denn eigentlich so eine CSS-Datei ausschauen und diese muß ich ja auch in meiner Seite irgendwie noch laden ?!

tomtom · 29.01.2009

AW: Homepage mit Photoshop + Dreamweaver !?

hier ein link den jeder der html und css lernt haben sollte.
SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)
CSS 4 You - The Finest in Stylesheets

ich kann mir diesen kleinen spalt nur sehr schwer vorstellen, aber ich hatte auch mal ein kleines problem vor langer zeit, dass ich einen pixel abstand zwischen zwei objekten hatte. ich glaube das habe ich damals mit cellspacing=0 und cellpadding=0 hinbekommen.

wenn ich mich nicht irre. kannst ja mal auf den o.g. links nach den beiden begriffen suchen. vielleicht hilft es dir weiter.

edit: vergiss das mit cellspacing und cellpadding, habe mir deinen code nochmal angesehen. sorry.