Photoshop Layout(Ränder) wiederholen! @ tutorials.de: Tutorials, Forum & Hilfe

dobber812 · 21.05.08 19:03

Hy,

ich habe mir ein layout für meine homepage mit photoshop erzeugt und slices gesetzt.
nun habe ich die einzelnen slices durch divs ersetzt und teilweise für die vorlage bearbeitbar gemacht...

habe nun gemerkt das ich doch mehr platz für den text benötige und wenn ich text in den Haupt-teil schreibe, schiebt sich das ganze laypout auseinander (jedenfalls im IE, in FF zeigt er einfah den restlichen text nicht mehr an und das layout bleibt im original)

wie bekomme ich das nun hin, das er mit die Seiten ränder weiter nach unterhin wiederholt?

Gruß
http://img232.imageshack.us/img232/3...nnt3wo5.th.jpg

Maik · 21.05.08 19:06

Hi,

steht die Seite online zur Verfügung, um dort direkt einen Blick drauf werfen zu können?

Ansonsten poste hier mal bitte den HTML- und CSS-Code des Layouts.

dobber812 · 21.05.08 19:21

ne sie ist noch nicht online... ich bin nach dem PSDtutorial von Tutvid.com vorgegangen.... (Falls du meine vorgehensweise genauer wissen möchtest *g*)

habe in den hauptbereich ein Div eingefügt und dort wiederrum ein div mit einer Spry menüleiste... habe grade gesehen das diese sich auch verschiebt wenn ich in dem hauptdiv mit dem text spiele ...

ich habe die zwei ränder des Haupt-elements extra in slices gesetzt ... kann man das nicht bei den css optionen irgendwie einstellen, das diese sich nach unten hin wiederholen oder ähnliches!?

tHx

<html>
<head>

<title>Unbenannt-1</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="big_body_layout.css" rel="stylesheet" type="text/css">
<link href="body_layout.css" rel="stylesheet" type="text/css">

<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="big_body_layout">
<table width="848" height="721" border="0" align="center" cellpadding="0" cellspacing="0" id="Tabelle_01">
<tr>
<td colspan="5">
<img src="../Bilder/Vorlageos_01.jpg" width="848" height="90" alt=""></td>
</tr>
<tr>
<td>
<img src="../Bilder/Vorlageos_02.jpg" width="13" height="574" alt=""></td>
<td colspan="3"><div id="body_layout">
<div id="navigation">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">Startseite</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Beratung</a>
<ul>
<li><a href="#">Steuerberatung</a></li>
<li><a href="#">Wirtschaftsberatung</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Mandanten</a>
<ul>
<li><a href="#">Rundschreiben</a></li>
<li><a href="#">Steuertermine</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Kanzlei</a>
<ul>
<li><a href="#">Adresse</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</li>
</ul>
</div>

<div id="body_center">
<p> </p>
<p> </p>
</div>
</div></td>
<td>
<img src="../Bilder/Vorlageos_04.jpg" width="18" height="574" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="../Bilder/Vorlageos_05.jpg" width="49" height="56" alt=""></td>
<td>
<img src="../Bilder/Vorlageos_06.jpg" width="647" height="38" alt=""></td>
<td colspan="2" rowspan="2">
<img src="../Bilder/Vorlageos_07.jpg" width="152" height="56" alt=""></td>
</tr>
<tr>
<td>
<img src="../Bilder/Vorlageos_08.jpg" width="647" height="18" alt=""></td>
</tr>
<tr>
<td>
<img src="../Bilder/Abstandhalter.gif" width="13" height="1" alt=""></td>
<td>
<img src="../Bilder/Abstandhalter.gif" width="36" height="1" alt=""></td>
<td>
<img src="../Bilder/Abstandhalter.gif" width="647" height="1" alt=""></td>
<td>
<img src="../Bilder/Abstandhalter.gif" width="134" height="1" alt=""></td>
<td>
<img src="../Bilder/Abstandhalter.gif" width="18" height="1" alt=""></td>
</tr>
</table>
</div>

<script type="text/javascript">

</script>
</body>
</html>

Maik · 21.05.08 19:40

Falls von diesen beiden Zellen bzw. Bildern die Rede ist:

Code :

<td>
<img src="../Bilder/Vorlageos_02.jpg" width="13" height="574" alt=""></td>
...
<td>
<img src="../Bilder/Vorlageos_04.jpg" width="18" height="574" alt=""></td>

ersetze die Grafikelemente durch Hintergrundbilder:

Code :

1
2
3

<td style="background:url(../Bilder/Vorlageos_02.jpg) repeat-y; width:13px;">&nbsp;</td>
...
<td style="background:url(../Bilder/Vorlageos_04.jpg) repeat-y; width:18px;">&nbsp;</td>

Bei weiteren Problemen solltest du hier auch, wie von mir eingangs darum gebeten, den Code der eingebundenen Stylesheets big_body_layout.css und body_layout.css zeigen, damit man der Ursache auf den Grund gehen kann.

dobber812 · 21.05.08 20:00

das klappt leide rnicht so ganz

hier kannst du mal das komplette päckchen runterladen wenn du so lieb wärst...

merke grade das ich da ziemlichen bckmist gemacht habe, denn der hintergrund von dem "center" soll sich ja auch weiter nach unten verschieden und die ränder wiederholen wenn ich mehr text eingebe

http://rapidshare.com/files/116576782/t.home2.rar.html

Maik · 21.05.08 20:09

Zitat von dobber812

hier kannst du mal das komplette päckchen runterladen wenn du so lieb wärst...

Würd ich gerne, aber mit diesem Captcha hab ich irgendwie meine Probleme

Photoshop Layout(Ränder) wiederholen!-captcha.jpg

Die ersten drei Versuche, die ersten 4 Zeichen (mehr lassen sich auch nicht eingeben) aus dem Rätsel abzuschicken schlugen fehl

Ein Fehler ist aufgetreten:

Du hast http://rapidshare.com/files/116576782/t.home2.rar (66 KB) angefordert.

dobber812 · 21.05.08 20:16

oh ja die schei** katzen da

....da sollte es besser gehen

am besten du öffnest die vorlage im temp.. ordner

Maik · 21.05.08 20:37

Mein Vorschlag funktioniert im IE einwandfrei, und für die standardkonformen Browsern richtest du für die Boxen eine Mindesthöhe ein, da sie die height-Deklaration als fixe Höhe interpretieren:

Code :

#body_center {
        min-height:500px;
        height:auto !important;
        height: 500px;
        width: 815px;
}

Code :

#body_layout {
        min-height:550px;
        height:auto !important;
        height: 550px;
        width: 816px;
}
 
#body_center {
        min-height:530px;
        height:auto !important;
        height: 530px;
        width: 816px;
}

Welcher der beiden #body_center-Selektor nun gültig ist, wirst du wohl selbst wissen

dobber812 · 21.05.08 20:46

hmm also bei mir klappt das irgendwie nicht

kann ich das auch über die ccs-optionen einestellen

(ja ich weiss das hört man nicht gerne

)

Maik · 21.05.08 20:58

Ich weiss nicht, wo du da ein Problem hast, bei mir funktioniert die Methode einwandfrei - hier repräsentativ für alle Browser der Firefox-Screenshot:

Photoshop Layout(Ränder) wiederholen!-ff_oben.jpg

Photoshop Layout(Ränder) wiederholen!-ff_unten.jpg

Code :

#Vorlageos_02 {
background:url(Bilder/Vorlageos_02.jpg) repeat-y;
width:13px;
}
 
#Vorlageos_04 {
background:url(Bilder/Vorlageos_04.jpg) repeat-y;
width:18px;
}

Code :

<td id="Vorlageos_02">&nbsp;</td>
 
...
 
<td id="Vorlageos_04">&nbsp;</td>

dobber812 · 21.05.08 21:08

ahh jetzt hat geklappt

... besten dank für die super schnelle hilfe

THX

dobber812 · 22.05.08 00:19

wenn ich das nun alles so in meiner vorlage bearbeitet habe und mir eine neue seite daraus erstelle, sind die seitenränder im Firefox nicht mit eingebunden (Werden auch in DV nicht angezeigt aber im IE dargestellt)... wie kann ich das den in der vorlage speicerhn das er es bei den daraus erstellen seiten übernimmt?

so siehts bei der erstellen seite aus einer vorlage aus bei der funktioniert

Code :

1	<td style="background:url(Bilder/Vorlageos_02.jpg) repeat-y; width:13px;"> </td>

und so bei der erstellten seite wo es nicht funktioniert

Code :

1	<td style="background:url(/Bilder/Vorlageos_02.jpg) repeat-y; width:13px;"> </td>

wenn ich aber den "/" bei der vorlage entferne werden die grafiken schon in der vorlage nicht mehr angezeigt...

Maik · 22.05.08 06:57

Hi,

hat sich denn zwischenzeitlich etwas an der Verzeichnisstruktur geändert, oder liegen die "Vorlage"-Seite und die neu erstellten Seiten noch immer in den selben Verzeichnissen, wie in deiner Download-Datei?

Wenn alles beim Alten geblieben ist, wüsste ich jetzt nicht, weshalb die Grafiken nicht mehr angezeigt werden, und neben

Code :

1	<td style="background:url(Bilder/Vorlageos_02.jpg) repeat-y; width:13px;"> </td>

funktioniert auch diese Grafikreferenz:

Code :

1	<td style="background:url(./Bilder/Vorlageos_02.jpg) repeat-y; width:13px;"> </td>

Sollten sich die HTML-Dokumente nun aber in einem Unterverzeichnis des Rootverzeichnisses befinden, lautet der Pfad:

Code :

1	<td style="background:url(../Bilder/Vorlageos_02.jpg) repeat-y; width:13px;"> </td>

Denn so lautet auch der Grafikpfad in der Vorlage-Datei "Vorlagedw.dwt" im Unterverzeichnis "Templates", und würde beispielsweise ebenfalls so lauten, wenn die CSS-Regel anstelle im HTML-Tag in einer CSS-Datei notiert wird (siehe hierzu meinen zuletzt gezeigten Quellcode), und sie in einem Unterverzeichnis (z.B. "css") liegt.

Die beiden Kapitel haben auch für CSS Gültigkeit:

P.S. Das komplette Captcha mit den Katzen ist auf RapidShare verschwunden

dobber812 · 22.05.08 12:35

Hy,
es hat sich in dern unterverzeichnissen garnichtas geändert... die Vorlage liegt weiterhin unter "Tamplates/vorlagedw.dwt"

wenn ich den normalen pfad eingeben :

zeigt er mir die Grafiken in der Vorlage in DW und auch in der vorschau der Vorlage im Brwoser an. Sobald ich aber eine "NEUE DATEI DARAUS" erstelle bekomme ich sie garnicht mehr zu sehen (in der vorschau vom IE ist sie dann wieder da aber im FF nicht). In der neuen erstellten datei sieht der leere platzhalter der bilder dann auch so im code aus (was ja auch eigentlich richtig ist):

und bei dieser Referenz zeigt er die grafiken niergendswo an:

wenn ich diese Referenz verwende, wird es in der worlage noch angezeigt, in der neuen datei auch. ABER dann auch nur in der vorschau vom IE, beim FF bleibts wieder weg

ich komm einfach nicht dahinter...
habe die zwei bilder auch schon direkt ins Root der Page kopiert und den pfad angegeben aber da klappts auch nicht besser... wenn ich nur wieder wüsste was ich da gemacht habe

Maik · 22.05.08 12:43

Der Code bzw. die Zeichen für den bsoluten URI müsste bei dir so lauten:

Code :

1 2	file:///C:/Dokumente%20und%20Einstellungen/Admin/Desktop/t.home2/Bilder/Vorlageos_02.jpg file:///C:/Dokumente%20und%20Einstellungen/Admin/Desktop/t.home2/Bilder/Vorlageos_04.jpg

Ansonsten kann ich dir leider nicht weiterhelfen, denn diese beiden relativen Pfade

Code :

Bilder/Vorlageos_02.jpg
Bilder/Vorlageos_04.jpg
 
./Bilder/Vorlageos_02.jpg
./Bilder/Vorlageos_04.jpg

funktionieren bei mir in den HTML-Dokumenten innerhalb deiner vorgegebenen Verzeichnisstruktur in allen mir zur Verfügung stehenden Browsern einwandfrei, und das sind noch ein paar weitere neben Firefox und IE.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

[Photoshop] Layout gesucht

Layout in Photoshop wie anfangen?

Layout mit Photoshop

Photoshop macht Ränder

Schwarze Ränder/Farbe mit Weissen Ränder/Farbe ersetzen

E-Mail:

Abonnieren Abbestellen