Ich habe ein Tempalte, Mambo (CMS) tauglich gemacht!
Jetzt mein Problem (siehe Bild2), wenn ich z.B. auf den Menüpunkt die Praxis gehe dann verschiebt sich das Template und es bekommt zusetzlich
Scorlbalken! ( wenn man auf Praxis geht erscheint ein untermenü, vieleicht liegt es daran, dass es sich verschiebt)
Also meine Frage was muss ich an der index.php oder an der css datei ändern damit sowas nicht passiert?
Hier der index.php code:
Code:
<link href="<?php echo $mosConfig_live_site;?>/templates/JavaBean/css/template_css.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico"/>
<body id="css-zen-garden">
<div id="container">
<div id="intro">
<div id="pageHeader">
<h1><span>css Zen Garden</span></h1>
<h2><span>The Beauty of <acronym title="Cascading Style Sheets">CSS</acronym> Design</span></h2>
</div>
<div id="quickSummary">
<?php mosPathWay(); ?>
</div>
<div id="requirements">
<h3><span>Requirements</span></h3>
<?php mosMainBody(); ?>
</div>
<div id="footer">
</div>
</div>
<div id="linkList">
<div id="linkList2">
<div id="lselect">
<h3 class="select"><span>Select a Design:</span></h3>
<?php if (mosCountModules('left')>0) mosLoadModules('left','true'); ?>
</div>
<div id="lresources">
<h3 class="resources"><span>Resources:</span></h3>
</div>
</div>
</div>
</div>
<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>
</body>
</html>
CSS Datei:
Code:
* {
margin : 0;
padding : 0;
}
body {
font : 75%/160% verdana;
color : #333;
background : #333 url(../images/equaliser.jpg) repeat 0% 0%;
margin : 0;
text-align : right;
padding-top : 0;
font-family : "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Verdana, sans-serif;
}
#container {
padding : 0;
margin : 30px 30px 0 auto;
width : 720px;
text-align : left;
background : transparent url(../images/back.jpg) repeat-y 0% 0%;
overflow : auto;
}
#extraDiv1 {
padding : 0;
margin : 0 30px 30px auto;
width : 720px;
height : 75px;
background : transparent url(../images/useless.jpg) repeat 0% 0%;
overflow : auto;
}
#linkList {
background : transparent url(../images/linkback.gif) repeat-y 0% 0%;
margin : 0 0 0 70px;
float : left;
width : 120px;
position : absolute;
top : 299px !important;
top : 269px;
top : 299px;
}
#linkList2 {
background : transparent url(../images/linkbottom.jpg) no-repeat 0% 100%;
padding : 0 2px 20px;
}
#lselect h3 , #larchives h3 , #lresources h3 , #lfavorites h3 {
margin : 10px 0 0;
text-indent : -15000px;
height : 28px;
overflow : hidden;
}
#lselect h3 {
background : transparent url(../images/select.gif) no-repeat 0% 0%;
height : 50px;
margin : 0;
}
#larchives h3 {
background : transparent url(../images/archives.gif) no-repeat 0% 0%;
}
#lfavorites h3 {
background : transparent url(../images/favourites.gif) no-repeat 0% 0%;
}
#lresources h3 {
background : transparent url(../images/resources.gif) no-repeat 0% 0%;
}
#quickSummary {
padding : 0;
margin : 0 10px 0 250px !important;
margin : 0 5px 0 250px;
float : right;
width : 250px;
clear : right;
background : #fff;
color : #666;
}
#quickSummary p {
margin : 5px;
height : 100%;
}
#quickSummary p.p1 {
text-indent : -15000px;
overflow : hidden;
height : 1px;
margin : 0;
}
#pageHeader {
background : url(../images/header.jpg) no-repeat 0% 0%;
padding : 0;
margin : 0;
text-indent : -15000px;
height : 290px;
overflow : hidden;
}
#supportingText {
padding : 0;
margin : 0 10px 0 0 !important;
margin : 0 5px 0 0;
}
#preamble {
padding : 0;
margin : 0 0 20px 205px !important;
margin : 0 0 20px 102px;
float : left;
width : 230px;
clear : left;
background : url(../images/preambleback.jpg) repeat-y 0% 0%;
}
#explanation {
background : transparent;
margin : 0 0 10px 20px !important;
margin : 0 0 10px 457px;
padding-bottom : 10px;
width : 250px;
clear : right;
float : right !important;
float : none;
overflow : auto;
}
#participation {
background : transparent;
margin : 0 0 40px 20px !important;
margin : 0 0 40px 205px;
float : right !important;
float : none;
width : 505px;
clear : right;
overflow : auto;
background : transparent url(../images/participationback.jpg) repeat-y 0% 0%;
}
#benefits , #requirements {
background : transparent;
margin : 40px 0 0 70px;
clear : both;
overflow : auto;
width : 640px;
background : transparent url(../images/benback.jpg) repeat-y 0% 0%;
position : relative;
}
#footer {
text-align : center;
padding : 40px 0 10px;
background : transparent url(../images/footback.jpg) no-repeat 0% 0%;
margin : 0 0 0 460px;
width : 250px;
float : right !important;
float : none;
overflow : auto;
border-bottom : 2px solid #fff;
}
#preamble h3 , #explanation h3 , #participation h3 , #benefits h3 , #requirements h3 {
padding : 0;
margin : 0 0 10px;
text-indent : -15000px;
height : 40px;
overflow : hidden;
}
#preamble h3 {
background : transparent url(../images/road.jpg) no-repeat 0% 0%;
}
#explanation h3 {
background : transparent url(../images/what.jpg) no-repeat 0% 0%;
}
#participation h3 {
background : transparent url(../images/participation.jpg) no-repeat 0% 0%;
}
#benefits h3 {
background : transparent url(../images/benefits.jpg) no-repeat 0% 0%;
}
#requirements h3 {
background : transparent url(../images/requirements.jpg) repeat-y 0% 0%;
}
#preamble p , #explanation p , #participation p , #benefits p , #requirements p {
margin : 10px 15px;
text-align : justify;
}
#participation p {
margin : 10px 15px 10px 25px;
}
#participation h3 , #benefits h3 , #requirements h3 {
margin : 0;
height : 50px;
}
#participation p.p3 {
background : transparent url(../images/participationbottom.jpg) no-repeat 0% 100%;
margin : 0;
padding : 10px 15px 30px 25px;
}
#benefits p , #requirements p {
margin : 10px 15px 10px 25px;
}
#benefits p.p1 , #requirements p.p5 {
background : transparent url(../images/benbottom.jpg) no-repeat 0% 100%;
margin : 0;
padding : 10px 15px 30px 25px;
}
#preamble p {
margin : 10px 20px;
}
#preamble p.p3 {
background : transparent url(../images/preamblebottom.jpg) no-repeat 0% 100%;
margin : 0;
padding : 10px 25px 30px;
}
#preamble h3 {
margin : 0 0 20px;
height : 50px;
}
a , a:link , a:visited {
background-color : transparent;
color : #996;
text-decoration : none;
font-weight : bold;
}
a:visited {
background-color : transparent;
color : #600;
}
a:hover {
text-decoration : underline;
color : #600;
}
#linkList ul {
list-style : none;
padding : 0;
margin : 0;
font-size : 0.9em;
letter-spacing : 1px;
}
#linkList ul li {
padding : 5px 10px 5px 5px;
margin : 0;
}
#linkList ul li:hover {
background : #cc9;
color : #333;
}
#linkList ul li:hover a {
background : #cc9;
color : #333;
}
#linkList #lselect {
color : #333;
}
#linkList ul li a {
display : inline;
color : #363;
font-weight : normal;
}
#linkList #lselect ul li a {
display : block;
}
#linkList #lselect ul li a.c , #linkList ul li a.c {
display : inline;
font-size : 0.8em;
color : #363;
color : #600;
text-transform : none;
font-weight : normal;
}
a.mainlevel:link, a.mainlevel:visited {
display: block;
background: url(../images/menu_bg.gif) no-repeat;
vertical-align: bottom;
font-size: 10px;
font-weight: bold;
color: #666666;
text-align: left;
padding-top: 5px;
padding-left: 10px;
height: 22px !important;
width: 150px;
text-decoration: none;
font-family: verdana, sans-serif, Arial, Helvetica;
}
a.mainlevel:hover {
background: url(../images/menuhov_bg.gif) no-repeat;
text-decoration: none;
color: #FFD700;
height: 22px !important;
}
a.sublevel:link, a.sublevel:visited {
padding-left: 1px;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #ff6600;
text-align: left;
}
a.sublevel:hover {
color: #ffcc00;
text-decoration: none;
}