Antworten auf deine Fragen:
Neues Thema erstellen

Problem design aus Photoshop in Html

S

Stormiiii

Guest

Hallo,

Hab folgendes Problem hab mir mit Psd eine Grafik erstellt die auf der Webseite als Linkliste gelten soll.

Mein Problem ist aber das es jetzt nicht mehr auf der Homepage eine Grafik ist sonder total verschoben alles weil ich es ja zuschneiden musste.

Wie bekomm ich das hin das alles wieder zusammen ist ohne die abstände ?? ich hänge ein screen des Bildes auf der HP an und denn quelltext bitte um Hilfe.

HTML:
<html>
<head>
<title>haus sicherung</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (haus sicherung.psd) -->
<table id="Tabelle_01" width="425" height="426" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td colspan="5">
   <img src="images/stories/haus-sicherung_01.gif" width="425" height="112" alt=""></td>
 </tr>
 <tr>
  <td>
   <img src="images/stories/haus-sicherung_02.gif" width="2" height="141" alt=""></td>
  <td>
   <a href="index.php?option=com_content&view=article&layout=form"><img src="images/stories/haus-sicherung_03.gif" width="150" height="141" alt="" border="0"></a></td>
  <td colspan="2">
   <a href="index.php?option=com_content&view=article&layout=form"><img src="images/stories/haus-sicherung_04.gif" width="139" height="141" alt="" border="0"></a></td>
  <td>
   <a href="index.php?option=com_content&view=article&layout=form"><img src="images/stories/haus-sicherung_05.gif" width="134" height="141" alt="" border="0"></a></td>
 </tr>
 <tr>
  <td colspan="2">
   <a href="index.php?option=com_content&view=article&layout=form"><img src="images/stories/haus-sicherung_06.gif" width="152" height="172" alt="" border="0"></a></td>
  <td>
   <a href="index.php?option=com_content&view=frontpage"><img src="images/stories/haus-sicherung_07.gif" width="123" height="172" alt="" border="0"></a></td>
  <td colspan="2">
   <a href="index.php?option=com_content&view=article&layout=form"><img src="images/stories/haus-sicherung_08.gif" width="150" height="172" alt="" border="0"></a></td>
 </tr>
 <tr>
  <td>
   <img src="images/stories/Abstandhalter.gif" width="2" height="1" alt=""></td>
  <td>
   <img src="images/stories/Abstandhalter.gif" width="150" height="1" alt=""></td>
  <td>
   <img src="images/stories/Abstandhalter.gif" width="123" height="1" alt=""></td>
  <td>
   <img src="images/stories/Abstandhalter.gif" width="16" height="1" alt=""></td>
  <td>
   <img src="images/stories/Abstandhalter.gif" width="134" height="1" alt=""></td>
 </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
 

MainAngler

Excel (SVERWEIS...)

AW: Problem design aus Photoshop in Html

Hmm, so ganz verstehe ich dein Problem auch nicht.:rolleyes:
Warum extra zuschneiden? So wie es aus PS kommt, sollte es passen - mal abgesehen davon, dass es ein Tabellenlayout ist.
 

toxictoon

Pixelpatriot

AW: Problem design aus Photoshop in Html

hab jetzt nichht genau gekuckt, aber schau dir mal deine ganzen verschiedenen "width" weiten der bilder an...

desweiteren könntest du für deine "abstadhalter" eine einfach hintergrundfarbe nehmen anstelle der bilder! ... da es ja eh einfarbig ist, sie ich vermute?
 
S

Stormiiii

Guest

AW: Problem design aus Photoshop in Html

Also nochmal sorry wenn ich mich falsch ausgedrückt habe :(

Ich habe über Photoshop eine grafik erstellt und geschnitten dann für web gespeichert.

jetzt hab ich das Problem das die Grafik total verschoben ist wie auf dem screen zu sehen ist.

und ich leider nicht mehr auf die Lösung komme wie ich die lerr räume zwischen denn einzelnen Bildern wieder weg bekomme :'(

Kann mir da einer sagen wie ich das jetzt machen muss verzweifel gerade ein bisschen.
 

Chickenshooter

Alter Mann

AW: Problem design aus Photoshop in Html

Soweit ich das noch weis ist das mit dem Slicen unter Photoshop

richtig gut gelöst.

Da sind dann auch keine "Freiräume"

räume zwischen denn einzelnen Bildern

Wenn wieder erwarten doch Platz zwischen den Grafiken sein sollte

cellpadding und cellspacing auf 0 border auf 0 und dafür sorgen das

nicht in einem verknüpften css-file eine Formatierung statt findet.

MfG Chick
 
S

Stormiiii

Guest

AW: Problem design aus Photoshop in Html

Ist leider alles schon auf 0 gestellt also werd ich mir was anderes einfallen lassen müssen :'( trotzdem danke.
 

MainAngler

Excel (SVERWEIS...)

AW: Problem design aus Photoshop in Html

Also als ich mal das Problem hatte:uhm::rot: half:
Code:
a img { display:block; }
html,body {
margin:0;
padding:0;}
 
S

Stormiiii

Guest

AW: Problem design aus Photoshop in Html

Wenn du mir jetzt noch erklärst wo ich das einfügen soll bitte denn code hab ich noch nie gesehen :(
 

MainAngler

Excel (SVERWEIS...)

AW: Problem design aus Photoshop in Html

Falls du eine *.css verlinkt hast dann da rein, falls du css-code direkt in der html verwendest, dann zw. <style> und </style> da wo normal css-code rein kommt.:)
 
S

Stormiiii

Guest

AW: Problem design aus Photoshop in Html

Also erstmal dank an MainAngler leider haben wir keine Lösung für das Problem gefunden daher wieder zum Ursprung.

Also um es nochmal ganz klar darzustellen,

Ich habe über adobe eine Grafik erstellt die geschnitten und dann denn Html Code eingefügt und weitgehend bearbeitet.

Jetzt zum Problem ich habe die Grafik im Editor der Homepage in einem stück allerdings wird es auf der Seite zerpflückt.

Habe mit MainAngler auch schon die css datei bearbeitet allerdings auch das ohne Ergebniss.

Wenn noch wer eine Idee hätte immer raus damit.
 

Chickenshooter

Alter Mann

AW: Problem design aus Photoshop in Html

Moin,

mit Slices??
und dann denn Html Code eingefügt
mit DreamWeaver??

Eine Ausgabe mit PS als HTML mit einem "gesliceten" Bild erstellt automatisch

HTML!!

weitgehend bearbeitet.
und wieso das???

Editor der Homepage
Dreamweaver???

Grafik in einem stück
also doch nicht "gesliced"???

Also Du siehst Fragen über Fragen drück Dich bitte klarer aus oder zeig

Deine Seite mal wenn Sie on line ist.
 
S

Stormiiii

Guest

AW: Problem design aus Photoshop in Html

ok ich mach es jetzt ganz einfach hier der Link zur seite die ich meine schaut es euch an.

Spielzeuge

ich dreh durch überalle sind die abstände weg (Private webspace) nur da eben nicht :'(
 

JayPi

Noch nicht viel geschrieben

AW: Problem design aus Photoshop in Html

Du solltest dir auf jeden Fall mal im CSS die folgenden beiden Klassen anschauen (bzw. gleich löschen):
Code:
.contentpaneopen img {
    margin: 5px;
}
.contentpane img {
    margin: 5px;
}
Wenn du das machst werden die Kästen schonmal ein wenig zusammengeschoben, es stimmt aber trotzdem noch irgendwo etwas nicht.
 
S

Stormiiii

Guest

AW: Problem design aus Photoshop in Html

Die letze idee hab ich gemacht mit dem raus löschen und siehe da wir kommen der sache ein bisschen näher.

Spielzeuge

bis dahin schonmal tausend dank an alle die mir helfen bei meinem Problem.
 

JayPi

Noch nicht viel geschrieben

AW: Problem design aus Photoshop in Html

Wenn du jetzt noch die Höhe der Tabelle um einen Pixel korrigierst isses fast perfekt:
Code:
<table border="0" cellspacing="0" cellpadding="0" width="425" height="[B]425[/B]" id="Tabelle_01">

Ich hab keine Ahnung was du da gemacht hast, aber irgendwas ist da beim Slicen schiefgelaufen. Deswegen ist der letzte Kasten noch verschoben. Die Tabellenzellen sehen nämlich so aus:



Wenn du da noch ein bisschen an den Grafiken rumbastelst, müsste alles so aussehen wie du es dir vorstellst.

Noch ein Tipp: Füge folgende CSS-Regel in die CSS-Datei ein, dann verschwinden die unschönen Aufzählungszeichen bei der Navigation ;):
Code:
#left ul {
   list-style-type:none;
}
 
S

Stormiiii

Guest

AW: Problem design aus Photoshop in Html

So tausend dank Leute es passt ich hab selber noch was gefunden womit es dann auch endlich alles passt ;)

Die Abstandhalter waren eingestellt auf

height="1" und ich hab die umgeschrieben auf "0" damit ist alles passend naja die kleinsten fehler sieht man eben nicht wenn sie vor einem sind :(

trotzdem danke.
 

MIKNE

Nicht mehr ganz neu hier

AW: Problem design aus Photoshop in Html

Da kommt mir etwas mit dem splitten komisch vor

laut deinem html Code ist dein Bild im obersten Layout 425 px breit
im der Mitte setzt es sich aus 3 Bildern mit 150px 139px 134px = 423px
und unten aus 3 Bildern mit 152px 123 px 150px = 425px

das kann doch nie zusammenstimmen, die Pixel in der Breite müssen immer gleich sein
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.526
Neuestes Mitglied
Winfriedtesmer
Oben