✔ Photoshop Layout(Ränder) wiederholen!

Status
Nicht offen für weitere Antworten.
D

dobber812

Mitglied
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ß
unbenannt3wo5.th.jpg
 
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.
 
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>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Unbenannt-1</title>
<!-- TemplateEndEditable -->
<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">
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<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">
<!-- ImageReady Slices (Unbenannt-1) -->
<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>
<!-- TemplateBeginEditable name="body_center" -->
<div id="body_center">
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<!-- TemplateEndEditable --></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>
<!-- End ImageReady Slices -->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
 
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: 
<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.
 
oh ja die schei** katzen da :)

....da sollte es besser gehen ;)
am besten du öffnest die vorlage im temp.. ordner
 
Zuletzt bearbeitet:
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 :)
 
hmm also bei mir klappt das irgendwie nicht :(

kann ich das auch über die ccs-optionen einestellen :rolleyes: (ja ich weiss das hört man nicht gerne :))
 
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:

ff_oben.jpg

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>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück