Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „photoshop layout und html“

S

shareware

Guest

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 :)
 
Zuletzt bearbeitet von einem Moderator:
W

waterwebdesign

Guest

AW: photoshop layout und html



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

stb_87

Web-Sheriff - ohne Bild

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
 
S

shareware

Guest

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:'(
 
S

shareware

Guest

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
 
S

shareware

Guest

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

offline

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>
 
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

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
174.468
Beiträge
2.577.910
Mitglieder
65.948
Neuestes Mitglied
Loki33
Oben