Antworten zum Thema „photoshop layout und html“

shareware · 21.08.2008

hallo, meine frage ist bestimmt recht einfach für euch

also ich hab mal in ps bissel rumgespielt und wollt danach ne html datei ausgeben lassen. soweit sogut nun habe ich die html datei in meinem editor geöffnet und wollte in die tabellen nen text einfügen. nun kommt schon das problem: sobald ich zuviel text eingebe verschiebt sich alles. ich möchte aber nur das der bereich content sich dem text anpasst.so schaut es aus:

und hier mal der quelltext:

Code:

<html>
<head>
<title>Unbenannt-1</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 (Unbenannt-1.psd) -->
<table id="Tabelle_01" width="800" height="750" border="0" cellpadding="0" cellspacing="0">
        <tr>
                <td colspan="2">
                        <img src="Bilder/Unbenannt-1_01.gif" width="800" height="86" alt=""></td>
        </tr>
        <tr>
                <td background="Bilder/Unbenannt-1_02.gif" width="260" height="664" alt="">
                        </td>
              [COLOR=Red] <td background="Bilder/Unbenannt-1_03.gif" width="566" height="664" alt="">[/COLOR]


               wenn ich hier viel text reinschreibe verschiebt sich das design!
                       </td>
        </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

hoffe ihr könnt was mit anfangen. vorab schonmal thx

waterwebdesign · 21.08.2008

AW: photoshop layout und html

In den ersten 5 Tutorials ist alles wichtige für den Anfang erklärt.

shareware · 21.08.2008

AW: photoshop layout und html

ok, aber des löst mein problem nicht wirklich :mad:

tiroler · 21.08.2008

AW: photoshop layout und html

schau dir mal das hier an:
CSS 4 You - The Finest in Stylesheets: Workshop: Layouten ohne Tabellen

stb_87 · 22.08.2008

AW: photoshop layout und html

Benutz mal die Foren-Suche!

Genau das selbe Problem wurde hier in den letzten Wochen/Monaten sehr oft angesprochen.

Dort findest du dann auch diverse Lösungen für

shareware · 22.08.2008

AW: photoshop layout und html

danke

was glaubst du was ich schon seit tagen suche? wenn ich wüsste wie das heißt bzw. nach was ich suchen muss tabellengrößen? oder designverschiebung? oder oder oder ich hab keine ahnung:'(

stb_87 · 23.08.2008

AW: photoshop layout und html

Such mal nach:
Text auf Grafik
Text über Grafik

shareware · 24.08.2008

AW: photoshop layout und html

super, viele postings drüber aber ne wirkliche lösung scheint es nicht zu geben

in jedem zweiten beitrag steht lerne html und css - ja toll des hilft mir so net weiter. ich dachte ja in meinem jugendliche leichtsinn da gibbet einen befehl der dies verhindert das des design nach unten verschiebt. scheint aber net so einfach zu sein diese geschichte. gruß shareware

saint44 · 24.08.2008

AW: photoshop layout und html

<td background="pfad" height="" width="">
text über grafik
</td>

shareware · 24.08.2008

AW: photoshop layout und html

nee, wenns in den quelltext schaust siehste das des schon so drinne steht. wenn ich die größe des hintergrundbildes veränder passiert nix. trotzdem danke

Herr_D · 24.08.2008

AW: photoshop layout und html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Unbenannt-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
* { margin: 0; padding:0; }

body {background-color:#ffffff; }

[B]td {vertical-align:top; }[/B]
-->
</style>

</head>
<body>

<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><img src="Bilder/Unbenannt-1_01.gif" width="800" height="86" alt=""></td>
</tr>
<tr>
<td background="Bilder/Unbenannt-1_02.gif" width="260" height="664"></td>
<td background="Bilder/Unbenannt-1_03.gif" width="566">
wenn ich hier viel text reinschreibe verschiebt sich das design nicht mehr, eber der Code ist trotzdem Müll</td>
</tr>
</table>

</body>
</html>

wahlweise ordentlich:

style.css im Ordner css

Code:

* { margin: 0; padding:0; }

html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}

body {
background-color:#ffffff;
margin:0;
padding:0;
text-align:center; /* zentrierung ie<7 */
font-family: sans-serif;
font-size: 100.01%;
color: #000000;
}

#wrapper {
width:800px;
background-color:#dedede;
text-align:left; /* hebt textausrichtung body auf */
margin:auto; /* zentrierung moderne browser */
}

#head {
width:800px;
height:86px;
background-color:#000000;
}

#head img {
border:0;
width:800px;
height:86px;
}


#linke_seite {
width:260px;
height:664px;
float:left;
background-color:#ff0000;
background-image:url(Bilder/Unbenannt-1_02.gif);
}
#linke_seite ul {
margin:1em;
padding: 1em;
}

#rechte_seite {
*height:664px;
min-height:664px;
background-image:url(Bilder/Unbenannt-1_03.gif);
background-color:#ff00ff;
}

#klare_suppe {
clear:both;
}

Dokument

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Unbenannt-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>

<div id="wrapper">
        <div id="head"><img src="Bilder/Unbenannt-1_01.gif" alt=""></div>
        <div id="linke_seite"><ul>Navigantion
        <li>Punkt 1</li>
        <li>Punkt 2</li></ul></div>
        <div id="rechte_seite">Hier kann man jetzt so viel schreiben, wie man will</div>
        <div id="klare_suppe"></div>
        <p>Fußnote</p>
</div>

</body>
</html>

shareware · 24.08.2008

AW: photoshop layout und html

oh yeah des iss es. nur werden die bilder nichtmehr angezeigt trotz richtiger verlinkung in der css datei mit

background-image:url(Bilder/Unbenannt-1_02.gif);

Herr_D · 24.08.2008

AW: photoshop layout und html

shareware schrieb:
oh yeah des iss es. nur werden die bilder nichtmehr angezeigt trotz richtiger verlinkung in der css datei mit

oh sorry

hatte die css vorher ins Dokument eingebunden

../Bilder/name

muß das natürlich heißen im css