Was übersehe ich?
LiquiStyle
Ich suche schon wieder n paar Tage, finde aber meinen Fehler nicht: der Menüpunkt "Leistungen" besitzt Childs, der Childblock, erstreckt sich aber hinter dem Content-Bereich, im IE kann man das sogar sehen, in dem Moment, wenn die Seite aufgerufen wird, schimmert er hinterm Content durch. Der Content soll sich aber natürlich nach unten verschieben, wenn der Bereich mit den Childs erscheint. Ich hatte das ganze auch schonmal so, aber da mal wieder was im Template geändert wurde, ist das jetzt leider hinfällig...
Wäre also prima, wenn mir jemand nen Tipp geben könnte, was ich übersehe...
Anbei noch das Stylesheet sowie der Quelltext, wenn der Menüpunkt "Leistungen" geklickt wurde:
Zitat:
Stylesheet main.css
html, body, p, ul, h1, h2, ul ul, ul li, ul li a{
margin: 0;
padding: 0;
}
#clearing { clear: both; }
#body{
background-color: #eeeeee;
color: black;
height: 101%;
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
}
#wrapper {
position: relative;
margin: 10px auto;
width: 984px;
background-color: white;
}
#header {
position: relative;
top: 1px;
background: url(../images/header_bg.png);
height: 168px;
width: 982px;
color: black;
margin-top: -10px;
border: 1px solid black;
}
#header h3 {
background: url(../images/logo.png);
height: 168px;
width: 334px;
position: relative;
top: -10px;
left: 0px;
}
#menu-top {
height: 1px;
width: 984px;
position: relative;
background: url(../images/menu-top-bottom.png);
top: 0px;
border-top: 1px solid black;
}
#menu-middle{
color: black;
min-height: 40px;
width: 982px;
border-left: 1px solid black;
border-right: 1px solid black;
background: url(../images/menu-middle.png);
position: relative;
top: -1px;
}
#menu-bottom {
height: 1px;
width: 984px;
position: relative;
background: url(../images/menu-top-bottom.png);
top: 0px;
}
#menu-middle span {
position: relative;
left: 0,5px;
text-decoration: none;
color: black;
display: inline;
top: 2.5px;
}
#menu-middle span a {
position: relative;
border-left: 1px #fff solid;
border-right: 1px #aaa solid;
text-decoration: none;
color: black;
background: transparent;
font-family: Verdana;
font-size: 14px;
font-weight: bold;
padding: 3px 1px;
padding-bottom: 4px;
margin-right: -4px;
margin-bottom: -3px;
}
#menu-middle a:hover,
#menu-middle a:focus,
#menu-middle a.current,
#menu-middle a:active { background: #eee; color: #333; text-decoration: none; border-top: 1px solid black; }
/*################################################# #############################
######################################CHILDS###### ##############################
################################################## ############################*/
#childs {
min-height: 0px;
background-color: red;
position: relative;
top: 10px;
}
#menu-middle span.child {
position: relative;
text-decoration: none;
color: black;
display: inline;
margin-bottom: 5px;
padding: 0px;
left: 0,5;
}
#menu-middle span.child a {
position: relative;
border-left: 1px #fff solid;
border-right: 1px #aaa solid;
text-decoration: none;
color: black;
background: transparent;
font-family: Verdana;
font-size: 14px;
font-weight: bold;
margin-right: -4px;
padding: 1,5px 1px;
padding-bottom: 0,5px;
top: -0,5;
}
#menu-middle span.child a:hover,
#menu-middle span.child a:focus,
#menu-middle span.child a.current,
#menu-middle span.child a:active { background: #eee; color: #333; text-decoration: none; }
/*################################################# #############################
###################################CHILDS-ENDE#################################
################################################## ###########################*/
#content {
min-height: 346px;
position: relative;
}
/*#content-top {
background: url(../images/content-top.png);
position: absolute;
width: 984px;
height: 10px;
top: 50%;
border-top: 1px solid black;
}*/
#content-middle {
position: relative;
color: black;
background: url(../images/content-middle.png);
width: 984px;
min-height: 409px;
top: -19px;
margin-bottom: 20px;
border-top: 1px solid black;
}
#content-text {
position: relative;
width: 900px;
top: -10px;
left: 50px;
}
#content-bottom {
background: url(../images/content-bottom.png);
position: absolute;
width: 984px;
height: 30px;
top: 100%;
margin-bottom: 120px;
}
#FrontArticle,
#FrontArticleOv,
#FrontContent,
#FrontDate,
#FrontDateOv,
#FrontGallery,
#FrontGalleryOv ,
#GB {
margin: 5px;
}
form.guestbook td {
height:21px;
left:250px;
width:380px;
text-align:left;
vertical-align:middle;
background-color:#FFFFFF;
padding:10px;
}
table.guestbook {
}
form.guestbook input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
background-color:#ffffff;
border-color:#000000;
border-style:solid;
border-width:thin;
}
form.guestbook input.error {
border-color:#FF0000;
border-left-width:2px;
}
a:link {
color: #333333;
text-decoration: none;
}
a:visited {
color: #333333;
text-decoration: none;
}
a:hover {
color: #be0000;
text-decoration: underline;
}
a:active {
color: #0000CC;
}
|
Zitat:
Stylesheet ie.css
html, body, p, ul, h1, h2, ul ul, ul li, ul li a{
margin: 0;
padding: 0;
}
#clearing { clear: both; }
#body{
background-color: #eeeeee;
color: black;
height: 101%;
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
}
#wrapper {
position: relative;
margin: 10px auto;
width: 984px;
background-color: white;
}
#header {
position: relative;
top: 1px;
background-color: #af0303;
height: 168px;
width: 982px;
color: black;
margin-top: -10px;
border: 1px solid black;
}
#header h3 {
background: url(../images/logo.png);
height: 168px;
width: 334px;
position: relative;
top: 0px;
left: 0px;
}
#menu-top {
height: 1px;
width: 984px;
position: relative;
background: url(../images/menu-top-bottom.png);
top: 0px;
border-top: 1px solid black;
}
#menu-middle{
color: black;
min-height: 40px;
width: 982px;
border-left: 1px solid black;
border-right: 1px solid black;
background: url(../images/menu-middle.png);
position: relative;
top: -1px;
}
#menu-bottom {
height: 1px;
width: 984px;
position: relative;
background: url(../images/menu-top-bottom.png);
top: 0px;
}
#menu-middle span {
position: relative;
left: 0,5px;
text-decoration: none;
color: black;
display: inline;
top: 2.5px;
}
#menu-middle span a {
position: relative;
border-left: 1px #fff solid;
border-right: 1px #aaa solid;
text-decoration: none;
color: black;
background: transparent;
font-family: Verdana;
font-size: 14px;
font-weight: bold;
padding: 2px 1px;
padding-bottom: 4px;
margin-right: -4px;
margin-bottom: -3px;
}
#menu-middle a:hover,
#menu-middle a:focus,
#menu-middle a.current,
#menu-middle a:active { background: #eee; color: #333; text-decoration: none; border-top: 1px solid black; }
/*################################################# #############################
######################################CHILDS###### ##############################
################################################## ############################*/
#childs {
min-height: 0px;
background-color: red;
position: relative;
top: 10px;
}
#menu-middle span.child {
position: relative;
text-decoration: none;
color: black;
display: inline;
margin-bottom: 5px;
padding: 0px;
left: 0,5;
}
#menu-middle span.child a {
position: relative;
border-left: 1px #fff solid;
border-right: 1px #aaa solid;
text-decoration: none;
color: black;
background: transparent;
font-family: Verdana;
font-size: 14px;
font-weight: bold;
margin-right: -4px;
padding: 1,5px 1px;
padding-bottom: 0,5px;
top: -0,5;
}
#menu-middle span.child a:hover,
#menu-middle span.child a:focus,
#menu-middle span.child a.current,
#menu-middle span.child a:active { background: #eee; color: #333; text-decoration: none; }
/*################################################# #############################
###################################CHILDS-ENDE#################################
################################################## ###########################*/
#content {
min-height: 346px;
position: relative;
}
/*#content-top {
background: url(../images/content-top.png);
position: absolute;
width: 984px;
height: 10px;
top: 50%;
border-top: 1px solid black;
}*/
#content-middle {
position: relative;
color: black;
background: url(../images/content-middle.png);
width: 984px;
min-height: 409px;
top: -19px;
margin-bottom: 20px;
border-top: 1px solid black;
}
#content-text {
position: relative;
width: 900px;
top: -10px;
left: 50px;
}
#content-bottom {
background: url(../images/content-bottom.png);
position: absolute;
width: 984px;
height: 30px;
top: 99%;
margin-bottom: 120px;
}
#FrontArticle,
#FrontArticleOv,
#FrontContent,
#FrontDate,
#FrontDateOv,
#FrontGallery,
#FrontGalleryOv ,
#GB {
margin: 5px;
}
form.guestbook td {
height:21px;
left:250px;
width:380px;
text-align:left;
vertical-align:middle;
background-color:#FFFFFF;
padding:10px;
}
table.guestbook {
}
form.guestbook input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
background-color:#ffffff;
border-color:#000000;
border-style:solid;
border-width:thin;
}
form.guestbook input.error {
border-color:#FF0000;
border-left-width:2px;
}
a:link {
color: #333333;
text-decoration: none;
}
a:visited {
color: #333333;
text-decoration: none;
}
a:hover {
color: #be0000;
text-decoration: underline;
}
a:active {
color: #0000CC;
}
|
Zitat:
Quelltext
<!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" lang="de" xml:lang="de">
<head>
<title>LiquiStyle</title>
<script src="modules/jquery-1.2.6.js" type="text/javascript"></script>
<link href="modules/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="modules/facebox/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loading_image : 'modules/facebox/loading.gif',
close_image : 'modules/facebox/closelabel.gif'
})
})
</script>
<link href="templates/cms_front/liquistyle/css/main.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<style type="text/css">
@import url(templates/cms_front/liquistyle/css/ie.css);
</style>
<![endif]-->
</head>
<body id="body"></a>
<div id="wrapper">
<div id="header" class="head">
<img align="left" src="templates/cms_front/liquistyle/images/logo.png" />
<img align="right" src="templates/cms_front/liquistyle/images/header_slogan.png" />
</div>
<div id="casing">
<div id="menu-top"> </div>
<div id="menu-middle">
<span><a href="index.php?langId=1&actElem=1&page=31&content Id=1" > Home </a></span>
<span><a href="index.php?langId=1&actElem=24&page=31&conten tId=22" > Slimp </a></span>
<span><a href="index.php?langId=1&actElem=11&page=31&conten tId=14" class="current" > Leistungen </a></span>
<span><a href="index.php?langId=1&actElem=4&page=31&content Id=5" > Referenzen </a></span>
<span><a href="index.php?langId=1&actElem=17&page=31&conten tId=2" > Kontakt </a></span>
<span><a href="index.php?langId=1&actElem=5&page=31&content Id=4" > Impressum </a></span>
<div id="childs">
<span class="child">
<a href="index.php?langId=1&actElem=19&page=31&conten tId=15" > Webdesign </a>
</span>
<span class="child">
<a href="index.php?langId=1&actElem=20&page=31&conten tId=16" > Printmedien </a>
</span>
<span class="child">
<a href="index.php?langId=1&actElem=22&page=31&conten tId=17" > Webhosting </a>
</span>
<span class="child">
<a href="index.php?langId=1&actElem=23&page=31&conten tId=18" > Programmierung </a>
</span>
</div> </div>
<div id="menu-bottom"> </div>
<div id="content">
<div id="content-top">
</div>
<div id="content-middle" class="content">
<div id="content-text">
<br />
<br />
<div id="FrontContent">
<p> </p>
<p><div style="text-align: center;"><span style="font-size: small;"><span style="font-family: Verdana;">Hier bieten wir Ihnen nun eine kurze Übersicht unserer Leistungen. </span></span></div>
<div style="text-align: center;"><span style="font-size: small;"><span style="font-family: Verdana;">Sollten Sie nicht fündig werden oder etwas ganz spezielles wünschen so scheuen Sie sich nicht uns einfach zu fragen!</span></span></div>
<div style="text-align: center;"> </div>
<div style="text-align: center;"> </div>
<div style="text-align: center;"> </div>
<div style="text-align: center;"> </div>
<p style="text-align: center;"><span style="font-family: Verdana;"> <img height="207" border="0" width="628" src="http://www.liquistyle.de/images/content/Bilder/Baum.png" alt="" usemap="#Leistungen" /><br />
<map name="Leistungen">
<area shape="rect" coords="0,55,130,75" href="index.php?langId=1&actElem=20&page=3 1&contentId=16" alt="Printmedien" title="Printmedien" />
<area shape="rect" coords="138,0,255,15" href="index.php?langId=1&actElem=19&page=3 1&contentId=15" alt="Webdesign" title="Webdesign" />
<area shape="rect" coords="323,0,450,20" href="index.php?langId=1&actElem=22&page=3 1&contentId=17" alt="Webhosting" title="Webhosting" />
<area shape="rect" coords="440,60,628,80" href="#" alt="Programmierung" title="Programmierung" /> </map> </span></p></p>
</div> </div>
<div id="content-bottom" class="clearing">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Wie gesagt, wär toll, wenn mir jemand sagen könnte, was ich übersehen habe, in diesem Sinne, vielen Dank im vorraus,
Psyclown
|