Viele haben den Wunsch das Design Phi auf dem Bildschirm zu zentrieren, das ist nicht ganz so einfach aber lösbar:
Demoseite:
http://www.snurl.de
Die style_content.css ersetzen mit diesem Code:
HTML-Code:
BODY {
background: #E4E3E3 ;
width:954px;
margin: 0 auto;
}
#zentrieren {
background: #E4E3E3 url(../images/<cc:print value="&pic.back.filename">) repeat-y;
width: 954px
}
#fusszeile {
clear: both;
text-align: center;
margin-left: 50px;
}
#logo {
margin-left: 50px;
top: 0px;
width: 900px;
height: 80px;
background: url(../images/<cc:print value="&pic.logo.filename">) no-repeat;
}
#maintopic {
margin-left: 50px;
width: 900px;
height: 30px;
border-top: 1px solid #cdcdcd;
background: url(../images/<cc:print value="&pic.maintopic.filename">) repeat-x;
overflow: hidden;
}
#plaintext {
margin-left: 750px;
top: 86px;
width: 195px;
height: 30px;
text-align: right;
z-index: 100;
}
#plaintext a {
color: #888888;
text-decoration: none;
}
#youarehere {
margin-left: 50px;
top: 111px;
width: 900px;
height: 30px;
}
#youarehere a {
display: block;
float: left;
height: 30px;
padding: 0px 10px 0px 23px;
line-height: 30px;
color: #888888;
text-decoration: none;
font-size: 11px;
background : url(../images/<cc:print value="&pic.more.filename">) no-repeat;
}
#youarehere a:hover {
color: <cc:print value="&usercolor.medium">;
background : url(../images/<cc:print value="&pic.morea.filename">) no-repeat;
}
#maintopic a {
display: block;
float: left;
height: 30px;
padding: 0px 10px 0px 10px;
line-height: 30px;
color: #888888;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
letter-spacing : 2px;
background : url(../images/<cc:print value="&pic.line.filename">) no-repeat right;
}
#maintopic a:hover {
background: url(../images/<cc:print value="&pic.maintopica.filename">) repeat-x;
color: #333333;
}
#maintopic a.active {
background: url(../images/<cc:print value="&pic.maintopica.filename">) repeat-x;
color: #333333;
font-weight: bold !important;
font-size: 11px;
}
#topic {
float: left;
width: 199px;
background-color: <cc:print value="&usercolor.medium">;
}
#topic a {
display: block;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid <cc:print value="&usercolor.bright">;
padding: 0px;
margin: 3px 20px 3px 20px;
text-transform: uppercase;
font-size: 10px;
}
#topic p {
text-align: center;
}
#topic p a {
border-bottom: none !important;
}
#topic a:hover, #topic a.active {
color: <cc:print value="&usercolor.bright">;
}
#topic h1 {
padding: 9px 20px 9px 20px;
background-color: <cc:print value="&usercolor.dark">;
font-size: 100%;
font-weight: bold;
color: #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0px;
}
#eyecatcher {
margin-left: 50px;
width: 900px;
height: 160px;
background: url(../images/<cc:print value="&pic.eyecatcher.filename">) ;
background-repeat:no-repeat;
background-position:top right;
}
#content {
float: left;
margin-top: 160px;
margin-left: 15px;
width: 460px;
padding: 0px;
}
#sidebar {
float: right;
width: 200px;
margin-top: 151px;
background-color: <cc:print value="&usercolor.medium">;
color: #fffff;
}
form.search {
float: right;
margin-top: 28px;
margin-right: 10px;
}
form.search input {
margin: 0px;
vertical-align : middle;
}
input.search {
border : 1px solid #cdcdcd;
color: #333333;
width: 118px;
padding: 2px;
background: url(../images/<cc:print value="&pic.maintopic.filename">) repeat-x;
font-size: 10px;
}
Dann in der Navigation.ccml den CCML-Code zwischen <BODY> und </BODY> ersetzen:
HTML-Code:
<div id="zentrieren">
<cc:if cond="&site.googleanalytics.accountnumber"><cc:include src="google_analytics.ccml" common="1"></cc:if>
<cc:if cond="&site.plaintextfile">
<div id="plaintext">
<a href="<cc:print value="&site.plaintextfile">"><cc:print value="&site.ressource.plaintext"></a>
</div>
</cc:if>
<div id="logo"><cc:print value="&site.htmlheader">
<cc:if cond="&site.ftsfile">
<form class="search" action="<cc:print value="&site.ftsfile">" method="get">
<input class="search" type="text" name="criteria" maxlength="30" />
<input type="image" src="<cc:printpictureurl obj="pic.search">" />
</form>
</cc:if>
</div>
<div id="maintopic">
<cc:loop type="maintopic" obj="mymaintopic">
<a <cc:if cond="&mymaintopic.ispagemaintopic">class="active"</cc:if> href="<cc:print value="&mymaintopic.url">"><cc:print value="&mymaintopic.caption"></a>
</cc:loop>
</div>
<div id="youarehere">
<a href="<cc:print value="&home.url">"><cc:print value="&site.ressource.home"></a>
<cc:if cond="&page.maintopic.number">
<a href="<cc:print value="&page.maintopic.url">"><cc:print value="&page.maintopic.caption"></a>
</cc:if>
<cc:if cond="&page.topic.number">
<a href="<cc:print value="&page.topic.url">"><cc:print value="&page.topic.caption"></a>
</cc:if>
<cc:if cond="&page.subtopic.number">
<a href="<cc:print value="&page.subtopic.url">"><cc:print value="&page.subtopic.caption"></a>
</cc:if>
</div>
<div id="eyecatcher">
<div id="topic"><cc:if cond="&page.ishome"><h1><cc:print value="&site.ressource.home"></h1><br>
<cc:loop type="maintopic" obj="mymaintopic">
<a <cc:if cond="&mymaintopic.ispagemaintopic">class="active"</cc:if> href="<cc:print value="&mymaintopic.url">"><cc:print value="&mymaintopic.caption"></a>
</cc:loop>
<br><br>
<cc:else><h1><cc:print value="&page.maintopic.caption"></h1><br>
<cc:if cond="&page.topiccount gt 0">
<cc:loop type="topic" obj="mytopic" maintopic="&page.maintopic.number">
<a <cc:if cond="&mytopic.ispagetopic">class="active"</cc:if> href="<cc:print value="&mytopic.url">"><cc:print value="&mytopic.caption"></a>
</cc:loop>
<br><br>
</cc:if>
<cc:if cond="&page.topic.number">
<cc:loop type="subtopic" obj="mysubtopic" maintopic="&page.maintopic.number" topic="&page.topic.number">
<a <cc:if cond="&mysubtopic.ispagesubtopic">class="active"</cc:if> href="<cc:print value="&mysubtopic.url">"><cc:print value="&mysubtopic.caption"></a>
</cc:loop>
<cc:if cond="&page.subtopiccount gt 0">
<br><br>
</cc:if>
</cc:if>
</cc:if>
<cc:loop type="commonpages" obj="mycommonpage">
<a href="<cc:print value="&mycommonpage.url">"><cc:print value="&mycommonpage.caption"></a>
</cc:loop>
<br><br>
<cc:if cond="&topic.isshop">
<cc:if cond="&site.showmemo">
<a href="<cc:print value="&site.basketfile">#memo"><cc:print value="&site.ressource.memoshow"></a>
</cc:if>
<a href="<cc:print value="&site.basketfile">"><cc:print value="&site.ressource.showbasket"></a>
<a <cc:include src="link_checkout.ccml" common="1">><cc:print value="&site.ressource.basketcheckout"></a>
<cc:if cond="&site.showuseraccount"><a <cc:include src="link_account.ccml" common="1">><cc:print value="&site.ressource.shop.user"></a></cc:if>
<cc:if cond="&site.tsid">
<p>
<form name="formSiegel" method="post" action="https://www.trustedshops.de/de/tshops/seal_de.php3" target="_blank">
<input name="shop_id" type="hidden" value="<cc:print value="&site.tsid">">
<input type="image" border="0" src="<cc:printpictureurl obj="pic.tslogo">" alt="<cc:print value="&site.ressource.tslogo">" name="Seal" align="middle" width="90" height="90">
<a target="_blank" href="http://www.trustedshops.de/"><br /><cc:print value="&site.ressource.tslink"><br /><br /></a>
</form>
</p>
</cc:if>
<br><br>
</cc:if>
</div>
<cc:if cond="&sidebar.count gt 0">
<div id="sidebar">
<cc:loop type="sidebar" obj="mysidebar">
<cc:if cond="&mysidebar.caption">
<h1><cc:print value="&mysidebar.caption"></h1>
</cc:if>
<div class="sb">
<cc:print value="&mysidebar.text"><br/>
</div>
</cc:loop>
</div>
</cc:if>
<div id="content">
<cc:print value="&page.content.text">
</div>
</div>
<div id="fusszeile">fusszeile</div>
</div>