forum.ahadesign.eu

[acky]

Hallo erstmal, ich habe das Template ein wenig geändert ( Farbe und Header ) sezte die Module Ponyscroller und Produktscroller ein. Die ganze Sache läuft auf IE 6 einwnandfrei nur nicht auf IE7 u. FF. benötige dringend ein wenig Hife. Herzlichen Dank im voraus. Acky
http://www.englischestilmoebelmanufaktur.com
hier mal die css:
/*CSS-File AHADesign.eu*/
*+html #rightout{/* IE7 */margin-top:-62px;}
* html #rightout{/* IEs 4 - 6 */margin-top:-63px;}
h\tml:f\irst-child>body #rightout{/*Opera Safari*/margin-top:-60px;}
.clr {
clear: both;
}
body {
margin: 0;
padding: 0;
border: none;
background-color: #fef5d8;
font-family: tahoma, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #green;
text-align: center;
}
#mainbg {
margin: 0;
padding: 0;
width: 980px;
background-color: #b2bbc5;
background: url(../images/mainbgm.jpg);
overflow: hidden;
}
#mainhead {
width: 980px;
margin: 0;
padding: 0;
}
#header {
width: 989px;
height: 254px;
background-color: #green;
background: url(../images/header.png) no-repeat;
}
#sitename {
color: #B2BBC5;
font-size: 50px;
font-weight: bold;
padding: 26px 0 0 340px;
white-space: nowrap;

#maintab {
width: 989px;
height: 37px;
margin: 0;
}
#navtab {
float: right;
padding-right: 24px;
width: 760px;
height: 37px;
overflow: hidden;
}
ul#mainlevel-nav {
text-decoration: none;
list-style: none;
padding: 0;
margin: 0;
float: right;
}
ul#mainlevel-nav li {
width: 115px;
float: left;
font-size: 14px;
height: 37px;
line-height: 37px;
background-image: none;
margin: 0;
padding: 0;
display: inline;
}
ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited {
font-weight: bold;
text-align: center;
height: 37px;
display: block;
text-decoration: none;
color: #green;
background: url(../images/hornav.png) repeat-y;
margin: 0;
padding: 0;
overflow: hidden;
}
ul#mainlevel-nav li a:hover {
background-position: -115px 0;
color: #green;
margin: 0;
padding: 0;
overflow: hidden;
}
#search {
float: left;
width: 192px;
height: 34px;
overflow: hidden;
}
#search .inputbox {
width: 192px;
height: 80px;
line-height: 18px;
margin-left: 7px;
padding-left: 38px;
padding-top: 2px;
font-size: 14px;
background-color: #b2bbc5;
background: url(../images/search.png) no-repeat;
border: none;
background-repeat: no-repeat;
background-position: center
}

#mainbread {
width: 980px;
height: 35px;
}
#breadleft {
float: left;
width: 28px;
height: 35px;
background: url(../images/breadl.png);
margin-top: -35px;
margin-left: 7px;
}
#breadcenter {
height: 35px;
background: url(../images/breadc.png) repeat-x 268px;
margin: 1px 34px 0 33px;

}

#breadright {
float: right;
width: 28px;
height: 35px;
background: url(../images/breadr.png);
margin-top: -35px;
margin-right: 7px;
}
#path {
height: 14px;
margin-top: -25px;
margin-left: 36px;
float: left;
}
.pathway {
font-size: 14px;
line-height: 14px;
color: #green;
font-weight: bold;
text-decoration: none;
}
a.pathway:link, a.pathway:visited {
color: #800000;
font-weight: bold;
font-size: 14px;
}
a.pathway:hover {
color: #green;
font-weight: bold;
font-size: 14px;
}
#leftout {
float: left;
width: 216px;
}

#leftcenter {
width: 216px;
background: url(../images/leftcenter.png) repeat-y;
overflow: hidden;
}

table.moduletable {
width: 168px;
}
table.moduletable th {
background: url(../images/mtablehele.png) no-repeat;
color: #800000;
height: 39px;
width: 168px;
font-weight: bold;
font-size: 12px;
line-height: 39px;
text-transform: uppercase;
}
table.moduletable td {
font-size: 12px;
color: #green;
text-align: center;
}
.poll {
width: 168px;
font-size: 12px;
text-align: center;
}
a:link, a:visited {
color: #800000; text-decoration: none;
font-weight: bold;
font-size: 12px;
}
a:hover {
color: #006600; text-decoration: none;
font-weight: bold;
}
a.category:link, a.category:visited {
font-weight: bold;
font-size: 12px;
text-align: center;
}
.categorytitle {
font-weight: bold;
font-size: 14px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
line-height: 14px;
padding-left: 15px;
margin: 0;
background: url(../images/arrow.png) 0 2px no-repeat;
}
.button {
color: #green;
text-align: center;
font-size: 12px;
font-weight: bold;
width: 74px;
background: url(../images/button.png) no-repeat;
line-height: 21px;
height: 21px;
margin: 0px;
border: none;
}
.button:hover {
color: #green;
}
.back_button a:link, .back_button a:visited {
color: #green;
text-align: center;
font-size: 12px;
font-weight: bold;
width: 74px;
background: url(../images/button.png) no-repeat;
line-height: 21px;
height: 21px;
margin: 2px;
}
.back_button a:hover {
color: #green;
}
.inputbox {
font-size: 12px;
border: 1px solid #DFE1E4;
background: #BBC4CE;
color: #1E5E7B;
}
.inputbox:hover {
border: 1px solid #BBC4CE;
background: #DFE1E4;
color: #1E5E7B;
}
.highlight {
background-color: #dcba2f;
color: #dfe1e4;
padding: 0px 2px 0px 2px;
}
.code {
background-color: #fef5d8;
border: 1px solid #ffffff;
}
a.mainlevel:link, a.mainlevel:visited {
display: block;
background: url(../images/vernav.jpg) repeat;
font-weight: bold;
font-size: 12px;
font-weight: bold;
color: #800000;
text-align: center;
text-decoration: none;
line-height: 31px;
margin-left: 4px;
}
a.mainlevel:hover {
background-position: 0px -31px;
text-decoration: none;
color: #006600;
}

a.sublevel:link, a.sublevel:visited {
margin-left: 2px;
margin-bottom: auto;
margin-top: auto;
font-size: 12px;
font-weight: bold;
color: #800000;
text-align: left;
text-decoration: none;
line-height: 12px;
white-space: normal;
}
a.sublevel:hover {
text-decoration: none;
color: #006600;
white-space: normal;
}
#content_area {
float: left;
width: 764px;
margin: 0;
padding: 0;
}
#content {
float: left;
width: 548px;
}
#banner_area {
width: 468px;
}
#banner {
width: 468px;
}
#rightout {
float: right;
width: 216px;
margin-top: -60px;
}

#topcenter {
width: 216px;
background: url(../images/leftcenter.png) repeat-y;
}
#rightcenter {
width: 216px;
background: url(../images/leftcenter.png) repeat-y;
}

.contentpane {
padding: 0;
margin: 0;
text-align: left;
}
.contentpaneopen {
padding: 0;
font-size: 14px;
text-align: left;
}
#component_area {
width: 468px;
padding: 0;
margin: 0;
float: left;
}
#component_one {
float: left;
text-align: left;
margin-left: 80px;
width: auto;
}
#component_two {
float: right;
text-align: left;
margin: 0px;
width: auto;
margin-left: 10px;
}
.contentheading, .componentheading {
color: #800000;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-align: center;
}
.contentpagetitle {
font-weight: bold;
color: #800000;
text-align: left;
}
a.contentpagetitle:link, a.contentpagetitle:visited, a.contentpagetitle:active {
text-decoration: none;
text-align: left;
}
#contentout {
text-align: left;
float: left;
width: 548px;
padding: 0;
margin-top: 10px;
}
#footer {
height: 69px;
width: 980px;
}
#leftfoot {
float: left;
height: 69px;
width: 53px;
background: url(../images/leftfoot.png) no-repeat;
margin-top: -69px;
padding: 0;
}
#flexfoot {
height: 69px;
background: url(../images/flexfoot.png) repeat-x;
margin: 0;
padding: 0;
}
#rightfoot {
float: right;
width: 51px;
height: 69px;
background: url(../images/rightfoot.png) no-repeat;
margin-top: -69px;
padding: 0;
}
.foot {
height: 54px;
margin-top: -54px;
color: #800000;
font-size: 12px;
}
.small {
font-size: 10px;
color: #800000;
padding-left: 12px;
line-height: 10px;
}
.smalldark {
font-size: 10px;
color: #1E5E7B;
}
.createdate, .modifydate {
font-size: 10px;
color: #800000;
padding-left: 12px;
line-height: 10px;
}
.content_rating {
font-size: 10px;
color: #1E5E7B;
}
.content_vote {
font-size: 10px;
}
.content_vote {
font-size: 10px;
}
.error {
font-style: italic;
text-transform: uppercase;
padding: 5px;
color: #800000;
font-size: 14px;
font-weight: bold;
}
hr {
width: 90%;
}
hr.separator {
width: 40%;
}
.blog_more {
text-align: right;
font-size: 14px;
margin-right: 40px;
}
.blogsection {
text-align: left;
font-size: 12px;
}
.blog_more ul li {
list-style: none;
background-image: none;
}
a.readon {
text-align: left;
font-size: 14px;
text-decoration: none;
line-height: 18px;
padding-left: 14px;
margin-top: 10px;
text-decoration: none;
font-weight: bold;
}
.sectiontableentry1 {
text-align: left;
background: #fef5d8;
font-size: 12px;
color:#80000;
padding: 1px;
}
.sectiontableentry2 {
background: #fef5d8;
font-size: 12px;
color:#80000;
text-align: left;
padding: 1px;
}
.poll {
font-size: 12px;
text-align: center;
}
.contentdescription {
font-size: 14px;
}
.sectiontableheader {
font-weight: bold;
font-size: 14px;
}
.pagenav {
font-size: 12px;
font-weight: bold;
}
form {
text-align: center;
}
table.contenttoc {
border: 1px dashed #648293;
padding: 2px;
}
table.contenttoc th {
font-weight: bold;
font-size: 14px;
}
und hier di index.php:
<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); $iso = split( '=', _ISO ); echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php mosShowHead(); ?>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>/templates/aha_flex/css/template_css.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/templates/aha_flex/images/favicon.ico"/>
<script language="JavaScript" type="text/javascript">
</script>
<?php if ( mosCountModules( 'right' ) <= 0) { ?>
<style type="text/css" media="screen">
#contentout{width:744px;padding:10px;}
#rightout{display:none;}
</style>
<?php } ?>
<?php if ( mosCountModules( 'left' ) <= 0) { ?>
<style type="text/css" media="screen">
#contentout{width:744px;padding:10px;}
#rightout{margin-right: -216px;}
#leftout{display:none;}
</style>
<?php } ?>
<?php if ( mosCountModules( 'left' ) + mosCountModules( 'right' ) <= 0) { ?>
<style type="text/css" media="screen">
#contentout{width:960px;padding:10px;}
#banner_area{width:980px;}
#component_area{width:960px;padding:10px;}
#rightout{display:none;}
#leftout{display:none;}
</style>
<?php } ?>
<?php if ( mosCountModules( 'user1' ) + mosCountModules( 'user2' ) <= 0) { ?>
<style type="text/css" media="screen">
#component_area{display:none;}
</style>
<?php } ?>
<?php if ( mosCountModules( 'banner' ) <= 0) { ?>
<style type="text/css" media="screen">
#banner_area{display:none;}
#rightout{margin-top:0;}
*+html #rightout{/* für den IE7 */margin-top:-16px;}
* html #rightout{/* für die IEs 4 - 6 */margin-top:-17px;}
h\tml:f\irst-child>body #rightout{/*für Opera and Safari*/margin-top:-0.5px;}
</style>
<?php } ?>
<?php if ( mosCountModules( 'user1' ) + mosCountModules( 'user2' ) + mosCountModules( 'banner' ) <= 0) { ?>
<style type="text/css" media="screen">
#component_area{display:none;}
#banner_area{display:none;}
#rightout{margin-top:0;}
*+html #rightout{/* für den IE7 */margin-top:1px;}
* html #rightout{/* für die IEs 4 - 6 */margin-top:0px;}
</style>
<?php } ?>
<?php
$user=(mosCountModules('user1') + mosCountModules('user2'));
$banner=(mosCountModules('banner'));
if ($user <= 0 && $banner != 0) { ?>
<style type="text/css" media="screen">
#component_area{display:none;}
#rightout{margin-top:0;}
*+html #rightout{/* für den IE7 */margin-top:1px;}
* html #rightout{/* für die IEs 4 - 6 */margin-top:0px;}
h\tml:f\irst-child>body #rightout{/*für Opera and Safari*/margin-top:0.5px;}
</style>
<?php } ?>
<?php if ( mosCountModules( 'user3' ) <= 0) { ?>
<style type="text/css" media="screen">
#navtab{display:none;}
</style>
<?php } ?>
<?php if ( mosCountModules( 'user4' ) <= 0) { ?>
<style type="text/css" media="screen">
#search{display:none;}
</style>
<?php } ?>
</head>
<body>
<div align="center">
<div id="mainbg">
<div id="mainhead">
<div id="header">
<div id="logo">
<div id="sitename"></div>
</div>
</div>
</div>
<div id="maintab"><?php if (mosCountModules('user3')) { ?>
<div id="navtab"><?php mosLoadModules ( 'user3', -2 ); ?>
</div>
<?php } ?>
<?php if (mosCountModules('user4')) { ?>
<div id="search"><?php mosLoadModules ( 'user4', -2 ); ?>
</div>
<?php } ?>
</div>
<div id="mainbread">
<div id="breadcenter">
</div>
<div id="breadright">
</div>
<div id="breadleft">
</div>
</div>
<div id="path"><?php include $GLOBALS['mosConfig_absolute_path'] . '/pathway.php'; ?>
</div>
<div class="clr"></div>
<?php if (mosCountModules('left')) { ?>
<div id="leftout">
<div id="left">
<div id="leftop">
</div>
<div id="leftcenter"><?php mosLoadModules ( 'left' ); ?>
</div>
<div id="leftbottom">
</div>
</div>
</div>
<?php } ?>
<div id="content_area">
<div id="content">
<?php if (mosCountModules('banner')) { ?>
<div id="banner_area">
<div id="banner"><?php mosLoadModules( 'banner', -2 ); ?>
</div>
</div>
<?php } ?>
</div>
<?php if (mosCountModules('user1') || mosCountModules('user2')) { ?>
<div id="component_area">
<div id="component_one"><?php mosLoadModules ( 'user1', -2 ); ?>
</div>
<div id="component_two"><?php mosLoadModules ( 'user2', -2 ); ?>
</div>
</div>
<?php } ?>
<?php if (mosCountModules('right')) { ?>
<div id="rightout">
<div id="rightop">
</div>
<div id="topcenter"><?php mosLoadModules ( 'top' ); ?>
</div>
<div id="rightcenter"><?php mosLoadModules ( 'right' ); ?>
</div>
<div id="rightbottom">
</div>
</div>
<?php } ?>
<div id="contentout"><?php mosMainBody(); ?>
</div>
</div>
<div class="clr"></div>
<div id="footer">
<div id="flexfoot">
</div>
<div id="rightfoot">
</div>
<div id="leftfoot">
</div>
</div>
<div class="foot"><?php include_once( $mosConfig_absolute_path .'/includes/footer.php' ); ?>
</div>
</div>
<?php mosLoadModules( 'debug', -2 );?>
</body>
</html>

[Gerhard]

Hallo Acky,

ich habe das Template mit der hier veröffentlichten CSS und Index-Datei getestet. Mit den Original-Bildern funktioniert alles einwandfrei. Auch im FF und im IE7. Ich habe mir den Code mal durchgesehen. Der Header und Maintab sind zu breit. Wenn beides breiter sein soll, dann muss auch "mainbg" und "mainhead" verbreitert werden. Das sind in der CSS die Zeilen 21 und 27. Ich würde aber empfehlen, die Originalgrössen beizubehalten. Wenn nicht, kann unter Umständen ein Problem das nächste jagen. Und es wäre dann auch zu umfangreich, alles genau zu erklären. Da könnte man dann gleich einen CSS-Kurs veranstalten.

In Zeile 101 wurde die Höhe für die Sucheingabe auf 80 Pixel gesetzt. Ist das Absicht? Ist eigentlich viel zu hoch. Background-Repeat in Zeile 110 ist überflüssig. Das wird schon in Zeile 108 definiert. Es wurden sowohl links als auch rechts ein paar Div-Container entfernt. In "component_two" steht margin:0 und zusätzlich margin-left:10px drin. Außerdem wurde der Float von left nach right geändert, was aber eigentlich nicht weiter schlimm ist in diesem Fall.
Es sind also schon einige massive Änderungen in der CSS vorhanden.

In der index.php fehlt nach Zeile 89 ein geschlossenes DIV und das Copyright wurde entfernt. Ohne Copyright funktioniert das Template natürlich nicht richtig.

Nein Spass beiseite, ich würde mal diese Punkte alle durchgehen, vor allem das DIV schliessen. Dann könnte sich das ganze doch erheblich verbessern. Dann hätten wir mal eine Basis und könnten eventuelle weitere Fehler besser beheben. Also einfach weiter Fragen wenn es nicht klappen will. Ich versuche auf jeden Fall zu helfen. Ich empfehle auch die Suche hier im Forum zu nutzen. Da gibt es einige Informationen bezüglich der Scroller. Vielleicht hilft das ja auch noch weiter. Am besten keine Größen , Margins, Paddings und auch keine Floats ändern, dann kann am wenigsten schief gehen. Das kann auch fatale Folgen haben, wenn man zum Beispiel einmal die linke oder auch die rechte Spalte ausblenden möchte. Bei massiven Änderungen muss man oft entsprechend floaten und clearen. Der IE6 kapiert das häufig nicht richtig. Deshalb zeigt er manchmal alles vermeintlich richtig an.

Mit besten Grüßen

Gerhard

[acky]

Hallo Gerhard, herzlichen Dank für die promte Hilfe ,jezt funzt die Geschichte. Noch eine Frage kann ich das Topmodul auf der Seite auch zentriert darstellen, würde mir besser gefallen.
Mit freundlichen Grüßen und nochmal herzlichen Dank
Acky

[Gerhard]

Hallo Acki,

schön dass es jetzt klappt.
In der CSS-Datei befindet sich ab Zeile 56 folgender Eintrag:

Code: Alles auswählen

#navtab {
   float: right;
   padding-right: 24px;
   width: 760px;
   height: 37px;
   overflow: hidden;
   }

Hier könnte man float right entfernen und mit padding könnte man entsprechend spielen, bis es passt. Das Suchfeld würde dabei allerdings verschoben werden. Aber wie ich gesehen habe, ist die Suche ohnehin nicht mehr vorhanden. Die Breite (width) könnte auch erhöht werden. Es gibt noch mehrere Möglichkeiten, aber das müsste funktionieren.

Gruß

Gerhard

[acky]

Hallo Gerhard, prima hat sofort geklappt, danke für die schnelle Hilfe. Allerdings habe ich nochmal width auf 900px erhöht um die volle breite zu erreichen hat aber nur den Erfolg gehabt das sich das topmenue nur wieder nach rechts verschob, macht nichts bin auch mit dem jetzigen Ergebnis zufrieden.
Danke!!! und wünsche dir ein schönes wochenende.
Acky

[Gerhard]

Hallo Acky,

eine Möglichkeit wäre auch float:left zu verwenden. Mit padding-left könntest Du die Navigation dann wieder mittig schieben. Wenn die Suche entfernt wurde, könntest Du width auf 980 Pixel verbreitern. Dazu sollte die Suche aber auch in der index.php entfernt werden. Ansonsten sind es ja immer die 760 Pixel links oder rechtsbündig, je nach float. Bei voller Breite kannst Du mit padding besser ausrichten. Es wäre auch möglich, die Breite so zu lassen und mit margin zu verschieben. Das sollte man aber immer in verschiedenen Browsern testen. Besonders der IE 6 geht hier eigene, falsche Wege. Ich würde es mit padding machen. Allerdings wenn Du so zufrieden bist, dann würde ich keine großen Experimente machen und es so lassen.

Ich wünsche ebenfalls ein schönes Wochenende

Gerhard

[acky]

Hallo Gerhard, noch eine kleine Frage, wie kann ich den header bzw. das logo etwas höher setzen, in der momentanen Situation verschenke ich ne´ganze Menge space.
Wieder mal vielen Dank für Deine Bemühungen.
Gruß acky

[Gerhard]

Hallo Acky,

in der template_css.css steht ab Zeile 31 folgendes:

Code: Alles auswählen

#header {
   width: 980px;
   height: 164px;
   background-color: #b2bbc5;
   background: url(../images/header.png) no-repeat;
   }
#logo {
   float: left;
   width: 111px;
   height: 110px;
   margin: 28px 940px 0 30px;
   background: url(../images/star.gif) no-repeat;
   }

Mit width wird die Breite verändert und mit height die Höhe. Also beim #header einfach die height verringern. Am besten genau auf die Höhe des Bildes, dann dürfte kein Platz verschwendet werden. Das Logo sollte ebenfalls auf die richtige height und width eingestellt werden. Dann lässt sich das Logo mit margin, also dem Außenabstand verschieben. Die 4 Zahlen bedeuten nacheinander: Oben, Rechts, Unten, Links. Wenn noch unerwünschter Platz vorhanden ist, dann hilft auch margin:0 und padding:0 weiter. Du könntest auch float mal rausnehmen oder float:right benutzen. Experimentiere einfach ein wenig, dann kommst Du sicher sehr schnell ans gewünschte Ziel.

Gruß

Gerhard