CSS Probleme bei einem CSS Design

nebulein

Admiral
Registriert
Jan. 2011
Beiträge
8.527
Hallo,

ich habe gerade einen seltsamen Fehler und mir gehen so langsam die Ideen aus.

Ich habe ein zusätzliches Menü gebaut, welches nur bei bestimmten Links angezeigt wird. Dieses Menü hat einen anderen Hintergrund verpasst bekommen und obwohl ich diesen genau definiert habe, sind jetzt sämtliche Links auf meiner Seite mit diesem Hintergrundbild versehen.

Ich habe jetzt schon versucht mittels background-image: none; den anderen Links zu sagen das sie dieses Bild ausblenden sollen. Aber damit hatte ich leider keinen Erfolg.
PHP:
/* CSS Document */
.bg_main {
	background		: #CCCCCC;
	padding			: 0; 
	margin			: 0;
}

#body {
width: 953px;
height: 100%;
margin: 0 auto;
margin-top: 10px;
font-family:Verdana;
font-size:13px;
padding:0px;
}

#wrapper{
width: 953px;
height: 100%;
background: #FFFFFF;
border: 1px solid black;
}

#faux {

 margin-bottom: 5px;
 overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
 width: 100%
}

#header {
width: 953px;
height: 127px;
background-image: url(../images/header.png);
}

a:link {
color: #000000;
text-decoration: none;
background-image: none;
}

a:hover {
color: #3E968B;
text-decoration: none;
background-image: none;
}

a:visited {
color: #000000;
text-decoration: none;
background-image: none;
}

a:active {
color: #3E968B;
text-decoration: none;
background-image: none;
}

div.moduletable h3 {
background:url(../images/1.jpg);
color:#FFFFFF;
	font-size: 12px;
	font-weight: bold;
	text-align : center;
	height : 20px;
	line-height : 20px;
	padding-right : 15px;
	margin : 5px 0 2px 0;
	overflow : hidden;
}
.moduletable_text h3 {
	color:#FFFFFF;
	font-size: 12px;
background:url(../images/1.jpg);
	font-weight: bold;
	text-align : center;
	height : 20px;
	line-height : 20px;
	padding-right : 10px;
	margin : 5px 0 2px 0;
	overflow : hidden;
}
.moduletable_menu h3 {
background:url(../images/1.jpg);
	text-align : center;
	font-weight : bold;
	height : 20px;
	line-height : 20px;
	font-size : 12px;
	padding-right : 10px;
	margin : 5px 0 2px 0;
	overflow : hidden;
	color:#FFFFFF;
}

a.sublevel:link, a.sublevel:visited {
	display: block;
	font-size:11px;
  padding			: 0px 0px;
	height:22px;
	line-height:22px;
	margin-left: 10px;
	font-weight	: bold;
}
a.sublevel:hover {
	font-weight	: bold;
	font-size:11px;
	background-color: #3E968B;
	text-decoration	: none;
	padding-left: 0px;
}

a.sublevel#active_menu{
font-weight	: bold;
background-color: #3E968B;
text-decoration	: none;
padding			: 0px 0px;
}

.inputbox, .search {
	font			: bold 11px Arial, Helvetica, sans-serif;
	color			: #000000;
	border			: 1px solid #3E968B;

}

select.inputbox {
	font			: bold 11px Arial, Helvetica, sans-serif;
	color			: #000000;
	border			: 1px solid #3E968B;
	background		: #ffffff;
}

#form {
	font			:  8px Arial, Helvetica, sans-serif;
}

#maintable {
width: 913px;
height: 100%;
float: left;
padding-left: 20px;
padding-right: 20px;
background: #ffffff;
}

#footer {
width: 100%;
text-align: center;
background: #ffffff;
line-height: 30px;
}

#mainlevelmainnav,#mainlevelmainnav ul{
float:left;
list-style:none;
line-height:20px;
background:transparent;
font-weight:700;
margin:0;
padding:0;
}
#mainlevelmainnav a{
display:block;
color:#f90;
text-decoration:none;
}
#mainlevelmainnav li{
float:left;
padding:0;
}
#mainlevelmainnav li ul{
position:absolute;
left:-999em;
height:auto;
width:15em;
font-weight:400;
background:#36f;
margin:0;
}
#mainlevelmainnav li li{
width:15em;
}
#mainlevelmainnav li ul a{
width:15em;
color:#fff;
font-size:0.9em;
line-height:20px;
font-weight:400;
}
#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{
left:-999em;
}
#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover ul,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul{
left:auto;
z-index:6000;
}
#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover{
background:#039 url(../images/soccerball.gif) 98% 50% no-repeat;
}

div#topmenu div.moduletable_menu {
	margin: 0;
	padding: 0;
    font-size: 13px;
	font-style: normal;
	font-weight: bold;
	line-height: 27px;
	background: #528177;
}

div#topmenu div.moduletable_menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	background: #528177;
}

div#topmenu div.moduletable_menu ul li {
	margin: 0;
	padding: 0;
	width: auto;
	float: left;
	border-right: 1px solid #fff;
	background: #528177;
}

div#topmenu div.moduletable_menu ul li.last {
	border-right: none;
	background: #528177;
}

div#topmenu div.moduletable_menu ul li a {
	display: block;
	margin: 0;
	padding: 0 10px 0 10px;
	text-decoration: none;
	border: none;
	font-weight: bold;
	line-height: 35px;
	background: url("../images/topmenu_bg.png") 0 0 scroll repeat-x;
}

div#topmenu div.moduletable_menu ul li a:link,
div#topmenu div.moduletable_menu ul li a:visited {
	color: #fff;
}

div#topmenu div.moduletable_menu ul li a:hover {
	background: url("../images/topmenu_bg_hl.png") 0 0 scroll repeat-x;
}

div#topmenu div.moduletable_menu ul li a.active,
div#topmenu div.moduletable_menu ul li a.current {
	background: url("../images/topmenu_bg_hl.png") 0 0 scroll repeat-x;
}

#box1 {
width: 262px;
height: 202px;
background: url("../images/box_background.png");
color: #ffffff;
padding-left: 10px;
float: left;
}

#box2 {
width: 262px;
height: 182px;
background: url("../images/box_background.png");
color: #ffffff;
padding: 10px;
margin-left: 30px;
float: left;
}

#box3 {
width: 242px;
height: 172px;
background: url("../images/box_background.png");
color: #ffffff;
padding: 20px;
padding-top: 10px;
margin-left: 30px;
float: left;
}

#box3 a:link {
color: #ffffff;
text-decoration: none;
background-image: none;
}

#box3 a:visited {
color: #ffffff;
text-decoration: none;
background-image: none;
}

#box3 a:hover {
color: #3E968B;
text-decoration: none;
}

#menuleft{
width: 200px;
height: 100%;
float: left;
background: #ffffff;
color: #000000;
text-decoration: none;
list-style: none;
}

#menuleft a:link {
display: block;
line-height: 30px;
width: 180px;
padding-left: 20px;
background-image: url("../images/menu_underline.png");
text-decoration: none;
list-style: none;
}

#menuleft a:hover {
display: block;
line-height: 30px;
width: 180px;
padding-left: 20px;
background-image: url("../images/menu_underline2.png");
text-decoration: none;
list-style: none;
}

#maintablehalb {
width: 713px;
height: 100%;
float: left;
padding-left: 20px;
padding-right: 20px;
background: #ffffff;
}

#menuleft ul {
list-style:none;
}

#menuleft ul li {
list-style:none;
}

#moduletable{
text-decoration: none;
list-style: none;
background-image: none;
}

Es geht mir dabei um das menuleft. Das Bild menu_underline.png wird jetzt quasi bei jedem Link auf meiner Seite dargestellt und ich verstehe nicht wo mein Fehler liegt. Vielleicht kann mir den ja jemand mal fix aufzeigen da wäre ich sehr dankbar.
 
Yuuri schrieb:

Gibts leider noch keinen Link, da die Seite noch Lokal auf meinem Xampp läuft. Es handelt sich dabei um ein Joomla Template. Anbei mal der Inhalt der index.php

PHP:
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>

<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>

<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="shortcut icon" href="http://www.novitas.de/templates/novitastemp/images/novitas.ico" />
<jdoc:include type="head" />
</head>
<body class="bg_main">
<div id="body">
<div id="wrapper">
<div id="header"></div>
<div id="topmenu"><jdoc:include type="modules" name="topmenu" style="xhtml" /></div>
<div id="faux">
<div id="menuleft"><?php if($this->countModules('menuleft')) : ?>
<jdoc:include type="modules" name="menuleft" style="xhtml" /></div>
<?php else: ?>
<?php endif; ?>
<?php if($this->countModules('menuleft')) : ?>
<div id="maintablehalb">
<?php else: ?>
<div id="maintable">
<?php endif; ?>
<jdoc:include type="message" />
<jdoc:include type="component" />
<?php if($this->countModules('box1')) : ?>
<div id="box1"><jdoc:include type="modules" name="box1" style="xhtml" /></div>
<?php else: ?>
<?php endif; ?>
<?php if($this->countModules('box2')) : ?>
<div id="box2"><jdoc:include type="modules" name="box2" style="xhtml" /></div>
<?php else: ?>
<?php endif; ?>
<?php if($this->countModules('box3')) : ?>
<div id="box3"><jdoc:include type="modules" name="box3" style="xhtml" /></div>
<?php else: ?>
<?php endif; ?>

<div id="footer">Copyright 2012 by Novitas AG<jdoc:include type="modules" name="bottom" style="xhtml" /></div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
</div>

<jdoc:include type="modules" name="debug" style="" />
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7174853-3");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>

Und ich hau mal noch den Quelltext dazu von der Startseite...

PHP:
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="de-de" lang="de-de" >
<head>
	<link rel="stylesheet" href="/novitas_neu/templates/system/css/system.css" type="text/css" />
	<link rel="stylesheet" href="/novitas_neu/templates/system/css/general.css" type="text/css" />
	<link rel="stylesheet" href="/novitas_neu/templates/novitas_neu/css/template.css" type="text/css" />
<link rel="shortcut icon" href="http://www.novitas.de/templates/novitastemp/images/novitas.ico" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="joomla, Joomla" />
  <meta name="description" content="Joomla! - dynamische Portal-Engine und Content-Management-System" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>Novitas AG - die Strategy Company</title>
  <link href="/novitas_neu/index.php?option=com_content&amp;view=frontpage&amp;Itemid=1&amp;format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
  <link href="/novitas_neu/index.php?option=com_content&amp;view=frontpage&amp;Itemid=1&amp;format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <script type="text/javascript" src="/novitas_neu/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/novitas_neu/media/system/js/caption.js"></script>
  <!-- JoomlaWorks "Frontpage Slideshow" (v2.9.1) starts here -->

	<style type="text/css" media="all">
		
	<!--
	@import "/novitas_neu/modules/mod_fpss/tmpl/Movies/css/template_css.php?w=650&h=300&sw=250";
	
	//-->
	
	</style>
	<!--[if lte IE 7]>
	<link rel="stylesheet" href="/novitas_neu/modules/mod_fpss/tmpl/Movies/css/template_css_ie.css" type="text/css" />
	<![endif]-->
	<script type="text/javascript" src="/novitas_neu/modules/mod_fpss/includes/engines/mootools-fpss-comp.js"></script>
	<script type="text/javascript">
		//<![CDATA[
		var fpssPlayText = "Play";
		var fpssPauseText = "Pause";
		var navTrigger = "click";
		var crossFadeDelay = 15000;
		var crossFadeSpeed = 1000;
		var fpssLoaderDelay = 800;
		var autoslide = true;
		var CTRtext_effect = true;
		var CTRtransitionText = 1000;
		//]]>
	</script>
	
<!-- JoomlaWorks "Frontpage Slideshow" (v2.9.1) ends here -->

</head>
<body class="bg_main">
<div id="body">
<div id="wrapper">
<div id="header"></div>
<div id="topmenu">		<div class="moduletable_menu">
					<ul  id="mainlevel_menu"><li><a href="/novitas_neu/index.php?option=com_content&amp;view=frontpage&amp;Itemid=1" class="mainlevel_menu" id="active_menu_menu">Start</a></li><li><a href="/novitas_neu/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=3" class="mainlevel_menu">Strategie</a></li><li><a href="/novitas_neu/index.php?option=com_content&amp;view=article&amp;id=3&amp;Itemid=4" class="mainlevel_menu">Business Coaching</a></li><li><a href="/novitas_neu/index.php?option=com_content&amp;view=article&amp;id=4&amp;Itemid=5" class="mainlevel_menu">Firmenportrait</a></li><li><a href="/novitas_neu/index.php?option=com_impressum&amp;view=impressum&amp;Itemid=2" class="mainlevel_menu">Impressum</a></li></ul>		</div>
	</div>
<div id="faux">
<div id="menuleft"><div id="maintable">

<table class="blog" cellpadding="0" cellspacing="0">
<tr>
	<td valign="top">
					<div>
		
<table class="contentpaneopen">




<tr>
<td valign="top" colspan="2">
<p>
	

<!-- JoomlaWorks "Frontpage Slideshow" (v2.9.1) starts here -->

<div id="fpss-outer-container">
	<div id="fpss-container">
		<div id="fpss-slider">
			<div id="slide-loading"></div>
			<div id="slide-wrapper">
				<div id="slide-outer">
								<div class="slide">
					<div class="slide-inner">
						<a href="javascript:void(0);" class="fpss_img">
							<span>
								<span style="background:url(/novitas_neu/components/com_fpss/images/ehrensenator.jpg) no-repeat;">
									<span>
										<img src="/novitas_neu/components/com_fpss/images/ehrensenator.jpg" alt="Ehrensenator" />
									</span>
								</span>
							</span>
						</a>
												<div class="fpss-introtext">
							<div class="slidetext">

																<h1><a href="javascript:void(0);">Ehrensenator</a></h1>
								
								
								
																<p>EWIF Ehrensenator Horst Schmitz</p>
								
																<a href="javascript:void(0);" title="Read more about Ehrensenator" class="readon">Weiterlesen...</a>
															</div>
						</div>
											</div>
				</div>
								<div class="slide">
					<div class="slide-inner">
						<a href="javascript:void(0);" class="fpss_img">
							<span>
								<span style="background:url(/novitas_neu/components/com_fpss/images/gutachten_1.jpg) no-repeat;">
									<span>
										<img src="/novitas_neu/components/com_fpss/images/gutachten_1.jpg" alt="Wirtschafts- &amp; Finanzgutachten" />
									</span>
								</span>
							</span>
						</a>
												<div class="fpss-introtext">
							<div class="slidetext">

																<h1><a href="javascript:void(0);">Wirtschafts- & Finanzgutachten</a></h1>
								
								
								
																<p>Erfahre mehr über das Wirtschafts- &amp; Finanzgutachten</p>
								
																<a href="javascript:void(0);" title="Read more about Wirtschafts- &amp; Finanzgutachten" class="readon">Weiterlesen...</a>
															</div>
						</div>
											</div>
				</div>
								<div class="slide">
					<div class="slide-inner">
						<a href="javascript:void(0);" class="fpss_img">
							<span>
								<span style="background:url(/novitas_neu/components/com_fpss/images/seperarierungsstrategie.jpg) no-repeat;">
									<span>
										<img src="/novitas_neu/components/com_fpss/images/seperarierungsstrategie.jpg" alt="Separierungsstrategie" />
									</span>
								</span>
							</span>
						</a>
												<div class="fpss-introtext">
							<div class="slidetext">

																<h1><a href="javascript:void(0);">Separierungsstrategie</a></h1>
								
								
								
																<p>Ihr Separierungsexperte rät</p>
								
																<a href="javascript:void(0);" title="Read more about Separierungsstrategie" class="readon">Weiterlesen...</a>
															</div>
						</div>
											</div>
				</div>
								</div>
			</div>
		</div>
		<div id="navi-outer">
			<div id="pseudobox"></div>
				<div class="ul_container">
					<ul>
						<li class="noimages"><a id="fpss-container_prev" href="javascript:void(0);" onclick="showPrev();clearSlide();" title="Previous">&laquo;</a></li>
												<li>
							<a class="navbutton off navi" href="javascript:void(0);" title="Ehrensenator">
								<span class="navbar-img">
									<img src="/novitas_neu/components/com_fpss/images/thumbs/ehrensenator.jpg" alt="Navigate to Ehrensenator" />
								</span>
								<span class="navbar-key">01</span>
								<span class="navbar-title">Ehrensenator</span>
								<span class="navbar-tagline"></span>
								<span class="navbar-clr"></span>
							</a>
						</li>
												<li>
							<a class="navbutton off navi" href="javascript:void(0);" title="Wirtschafts- & Finanzgutachten">
								<span class="navbar-img">
									<img src="/novitas_neu/components/com_fpss/images/thumbs/gutachten_1.jpg" alt="Navigate to Wirtschafts- &amp; Finanzgutachten" />
								</span>
								<span class="navbar-key">02</span>
								<span class="navbar-title">Wirtschafts- & Finanzgutachten</span>
								<span class="navbar-tagline"></span>
								<span class="navbar-clr"></span>
							</a>
						</li>
												<li>
							<a class="navbutton off navi" href="javascript:void(0);" title="Separierungsstrategie">
								<span class="navbar-img">
									<img src="/novitas_neu/components/com_fpss/images/thumbs/seperarierungsstrategie.jpg" alt="Navigate to Separierungsstrategie" />
								</span>
								<span class="navbar-key">03</span>
								<span class="navbar-title">Separierungsstrategie</span>
								<span class="navbar-tagline"></span>
								<span class="navbar-clr"></span>
							</a>
						</li>
												<li class="noimages"><a id="fpss-container_next" href="javascript:void(0);" onclick="showNext();clearSlide();" title="Weiter">&raquo;</a></li>
						<li class="noimages"><a id="fpss-container_playButton" href="javascript:void(0);" onclick="ppButtonClicked();return false;" title="Play/Pause Slide">Pause</a></li>
					</ul>
				</div>
			</div>
		<div class="fpss-clr"></div>
	</div>
	<div class="fpss-clr"></div>
</div>
<div style="display:none;">Frontpage Slideshow | Copyright &copy; 2006-2011 JoomlaWorks, a business unit of Nuevvo Webware Ltd.</div>
<!-- JoomlaWorks "Frontpage Slideshow" (v2.9.1) ends here -->

</p></td>
</tr>



</table>
<span class="article_separator">&nbsp;</span>
		</div>
		</td>
</tr>


</table>

<div id="box1">		<div class="moduletable">
					<p><a href="http://www.aktion-neue-zukunft.de" target="_blank"><img style="display: block; margin-left: auto; margin-right: auto;" src="/novitas_neu/images/stories/logo_anz.png" alt="" height="179" width="160" /></a></p>		</div>
	</div>
<div id="box2">		<div class="moduletable">
					<p>test</p>		</div>
	</div>
<div id="box3">		<div class="moduletable">
					<h3>Klienten-Kontakt</h3>
					<p>So erreichen Sie uns:</p>
<p><strong><img src="/novitas_neu/images/stories/telephone-arrow-icon.png" alt="" /> 06746 - 91 00</strong></p>
<p><strong><img src="/novitas_neu/images/stories/telephone-fax-icon.png" alt="" /> 06746 - 91 0 16</strong></p>
<p><strong><a href="mailto:info@novitas.de?subject=Kontaktanfrage%20über%20Novitas%20Website"><img src="/novitas_neu/images/stories/mail-2-icon.png" alt="" /> info@novitas.de</a><br /></strong></p>		</div>
	</div>

<div id="footer">Copyright 2012 by Novitas AG</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
</div>


<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7174853-3");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>

Ich habe z.b. Links in Box1 und in der Box3 und diese haben auch das Hintergrundbild.
 
<div id="menuleft"><?php if($this->countModules('menuleft')) : ?>
<jdoc:include type="modules" name="menuleft" style="xhtml" /></div>
<?php else: ?>
<?php endif; ?>

Sieht jetzt auf den ersten Blick für mich so aus, dass das </div> im if-Block eigentlich hinter das <?php endif; ?> gehört, denn wenn der else-fall eintritt, wird <div id="menuleft"> nicht geschlossen und der #menuleft-style wirkt sich dann auf den Rest des ganzen Dokuments auf.
 
Zurück
Oben