Design Phi zentrieren

***blue*** · 18.06.2009, 10:22

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>

peter · 22.06.2009, 11:45

Hallo blue,

reicht zur Zentrierung nicht einfach in der Navigations.ccml direkt nach dem <body> ein <center /> und am Ende wieder ein </ center> ?

Was spräche dagegen?

Gruß, Peter

***blue*** · 22.06.2009, 12:02

Denke nicht ;-) Du kannst es ja mal ausprobieren. Das <center> Element ist als deprecated eingestuft. Es ist mittlerweile eigentlich überflüssig und sollte nur noch in begründeten Ausnahmefällen z.B. Abwärtskompatibilität zu Netscape 1.1 benutzt werden.

repri · 23.06.2009, 23:58

Hallo blue,

geht das auch für das Template Rho? Nicht zentriert ist heute nicht mehr so Zeitgemäss. Dank dir für eine Antwort.

Gruss repri

***blue*** · 24.06.2009, 15:09

Das geht mit Sicherheit... Wenn ich ein wenig Zeit habe mache ich das mal fertig..

xanax · 09.07.2009, 23:57

hallo!

ist der o.a. code nur für Design Phi oder geht der code für alle anderen Designs auch?

hat das etwas zu bedeuten dass einige textstellen gelb sind?

danke, xanax

***blue*** · 10.07.2009, 05:40

Im Prinzip ist das immer gleich... aber nur in der Funktionsweise...

xanax · 10.07.2009, 10:01

Zitat:

Zitat von blue

Im Prinzip ist das immer gleich... aber nur in der Funktionsweise...

das heisst?

danke, xanax

RalfT · 02.09.2009, 19:28

Hallo blue,

habe die beiden Programme wie vorgegeben ersetzt, es funktioniert aber leider nicht. Die Formatierung der Texte verschwindet und das was noch zu sehen ist steht auch ist auch nicht zentriert.

Muss man da noch weitere Änderungen vornehmen?

Danke für eine Antwort.

RalfT

naeg-computer.com · 03.09.2009, 08:17

Hallo Zusammen

Falls Euch der Aufwand zu gross ist um die Designs selber zu zentrieren oder Ihr es Euch einfach nicht zu traut, auf meiner Webseite gibt es die meisten Design fixfertig zentriert plus mit zahlreichen anderen Optimierungen versehen.

Für alle die Interesse daran haben, schaut einfach mal rein unter:
Design für webtodate & shoptodate 5.0: Designshop für web to date & shop to date 5.0
Design für webtodate & shoptodate 6.0: Designshop für web to date & shop to date 6.0

Da ist übrigens auch Phi & Rho darunter.

Grüsse

Oliver

22.06.2009, 11:45	#2 (permalink)
peter Neuer Benutzer Registriert seit: 27.04.2009 Ort: Bayern Beiträge: 5	AW: Design Phi zentrieren Hallo blue, reicht zur Zentrierung nicht einfach in der Navigations.ccml direkt nach dem <body> ein <center /> und am Ende wieder ein </ center> ? Was spräche dagegen? Gruß, Peter

22.06.2009, 12:02	#3 (permalink)
*blue* Administrator Registriert seit: 19.03.2009 Ort: Heide Holstein Beiträge: 1.887	AW: Design Phi zentrieren Denke nicht ;-) Du kannst es ja mal ausprobieren. Das <center> Element ist als deprecated eingestuft. Es ist mittlerweile eigentlich überflüssig und sollte nur noch in begründeten Ausnahmefällen z.B. Abwärtskompatibilität zu Netscape 1.1 benutzt werden.

23.06.2009, 23:58	#4 (permalink)
repri Benutzer Registriert seit: 23.06.2009 Ort: Schweiz Beiträge: 51	AW: Design Phi zentrieren Hallo blue, geht das auch für das Template Rho? Nicht zentriert ist heute nicht mehr so Zeitgemäss. Dank dir für eine Antwort. Gruss repri

24.06.2009, 15:09	#5 (permalink)
*blue* Administrator Registriert seit: 19.03.2009 Ort: Heide Holstein Beiträge: 1.887	AW: Design Phi zentrieren Das geht mit Sicherheit... Wenn ich ein wenig Zeit habe mache ich das mal fertig..

09.07.2009, 23:57	#6 (permalink)
xanax Erfahrener Benutzer Registriert seit: 09.07.2009 Ort: München Beiträge: 112	AW: Design Phi zentrieren hallo! ist der o.a. code nur für Design Phi oder geht der code für alle anderen Designs auch? hat das etwas zu bedeuten dass einige textstellen gelb sind? danke, xanax

10.07.2009, 05:40	#7 (permalink)
*blue* Administrator Registriert seit: 19.03.2009 Ort: Heide Holstein Beiträge: 1.887	AW: Design Phi zentrieren Im Prinzip ist das immer gleich... aber nur in der Funktionsweise...

02.09.2009, 19:28	#9 (permalink)
RalfT Neuer Benutzer Registriert seit: 09.08.2009 Ort: Aachen Beiträge: 6	AW: Design Phi zentrieren Hallo blue, habe die beiden Programme wie vorgegeben ersetzt, es funktioniert aber leider nicht. Die Formatierung der Texte verschwindet und das was noch zu sehen ist steht auch ist auch nicht zentriert. Muss man da noch weitere Änderungen vornehmen? Danke für eine Antwort. RalfT

03.09.2009, 08:17	#10 (permalink)
naeg-computer.com Benutzer Registriert seit: 21.07.2009 Ort: St. Gallen Beiträge: 30	AW: Design Phi zentrieren Hallo Zusammen Falls Euch der Aufwand zu gross ist um die Designs selber zu zentrieren oder Ihr es Euch einfach nicht zu traut, auf meiner Webseite gibt es die meisten Design fixfertig zentriert plus mit zahlreichen anderen Optimierungen versehen. Für alle die Interesse daran haben, schaut einfach mal rein unter: Design für webtodate & shoptodate 5.0: Designshop für web to date & shop to date 5.0 Design für webtodate & shoptodate 6.0: Designshop für web to date & shop to date 6.0 Da ist übrigens auch Phi & Rho darunter. Grüsse Oliver

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Seite im Browser zentrieren	webler	Web to Date 5.0	1	18.06.2009 10:24