✔ Problem mit Abstand im Menü

Jan-Frederik Stieler

Jan-Frederik Stieler

Monsterator
Moderator
Hi,
ich hab ein Problem mit dem Abstand des SubMenüs (Schaffers etc.)
Zum Rand ist ein Abstand obwohl nirgends ein Margin drinnen hängt.
Vielleicht sieht ja jemand den Fehler? Ichfind nun nach bestimmt 3 Std. suchen nichts.


menu.css
HTML: 
/* ################  topright-Menu  ################  */


ul#mainlevel-main
{
list-style-type: none;
padding: 0px;
margin: 0px;

}

ul#mainlevel-main li
{
display: inline;
float: right;
padding: 0px;
margin: 0px;
}

a.mainlevel-main {display: block; margin: 0; padding: 23px 13px 0 13px; font-family: verdana, helvetica, arial, normal, sans-serif; color:#000; font-size: 13pt; text-decoration:none;}
a.mainlevel-main:hover, a.mainlevel_current-main, a.mainlevel_active-main {display: block; border-bottom: 10px solid #000; color:#000; font-size: 13pt; text-decoration:none; background-color:#fff; margin: 0; padding: 23px 13px 10px 13px;}


/* ################  topleft(Sub)-Menu  ################  */

ul#mainlevel-submain li
{
display: inline;
float: left;
}

a.mainlevel-submain {display: block; margin: 0; padding: 23px 13px 0 13px; font-family: verdana, helvetica, arial, normal, sans-serif; color:#000; font-size: 13pt; text-decoration:none;}
a.mainlevel-submain:hover, a.mainlevel_current-submain, a.mainlevel_active-submain {display: block; border-bottom: 10px solid #000; color:#000; font-size: 13pt; text-decoration:none; background-color:#fff; margin: 0; padding: 23px 13px 10px 13px;}




/* ################  left(SubSub)-Menu  ################  */

ul#mainlevel-subsubmain li
{
display: inline-block;
}
a.mainlevel-subsubmain {display: block; margin: 0 0 13px 0; border-left: 10px solid #fff; padding: 0 0 0 10px; font-family: verdana, helvetica, arial, normal, sans-serif; color:#000; font-size: 13pt; text-decoration:none;}
a.mainlevel-subsubmain:hover, a.mainlevel_current-subsubmain, a.mainlevel_active-subsubmain {display: block; border-left: 10px solid #000; color:#000; font-size: 13pt; text-decoration:none; background-color:#fff; margin: 0 0 13px 0; padding: 0 0 0 10px;}




/* ################  foot-Menu  ################  */

ul#menulist_root-footright, ul#menulist_root-footleft
{
list-style-type: none;
padding: 0;
margin: 0;
}

ul#menulist_root-footright li
{
display: inline;
float: right;
}

a#menulink_1-footright
{
margin-top: 10px;
padding-left: 13px;
}

a#menulink_2-footright
{
margin-top: 10px;
padding-left: 13px;
padding-right: 13px;
}


a.mainlevel-footright {display: block; font-family: verdana, helvetica, arial, normal, sans-serif; color:#000000; font-size: 13pt; text-decoration:none; margin-top: 10px; padding-top: 20px;}
a.mainlevel-footright:hover, a.mainlevel_current-footright, a.mainlevel_active-footright {display: block; border-top: 10px solid #000; color:#000000; font-size: 13pt; text-decoration:none; background-color:#fff; margin-top: 10px; padding-top: 10px;}


ul#menulist_root-footleft li
{
display: inline;
float: left;
}

a#menulink_1-footleft
{
padding-right: 13px;
}

a.mainlevel-footleft {display: block; font-family: verdana, helvetica, arial, normal, sans-serif; color:#000000; font-size: 13pt; text-decoration:none; margin-top: 10px; padding-top: 20px;}
a.mainlevel-footleft:hover, a.mainlevel_current-footleft, a.mainlevel_active-footleft {display: block; border-top: 10px solid #000; color:#000000; font-size: 13pt; text-decoration:none; background-color:#fff; margin-top: 10px; padding-top: 10px;}

position.caa
HTML: 
/* ################  Position  ################  */

body
{
         padding: 0;
         margin: 0;
	text-align: center;
}

#wrapper
{
        	margin: 0 auto;
	width: 985px;
	padding: 20px;
	text-align: left;
}

#header
{
         margin: 0;
         padding: 0;
}

#top
{
	float: left;
	height: 45px;
         width: 984px;
         margin: 0;
         padding: 0;
         z-index: 5;

}

#topmenu
{
         margin: -19px 0 0 0;
         padding: 0;
}

#left
{
    	width: 170px;
         margin: 0;
         padding: 120px 0 0 0;
	height: 540px;
         float: left;
}

#subsubabstand
{
	min-height: 20px;
	padding: 0;
	margin: 0 0 0 -60px;
}

div > #content
{
	display: inline;
         margin: 0;
         padding: 120px 0 0 5px;
         float: left;
	min-height: 540px;
	width:810px;
}

#content  /*für Browser kleiner als  version IE6*/
{
	display: inline;
         margin: 0;
         padding: 120px 0 0 5px;
         float: left;
}


#footer
{
	float: left;
	height: 45px;
         width: 984px;
         margin: 0;
         padding: 0;

}

#footerleft
{

         position:relative;
	top:-10px;
	float:left;
         width: 50%;
         margin: -20px 0 0 0;
         padding: 0;
}

#footerright
{
	position:relative;
	top:-10px;
         float: left;
         width: 50%;
         margin: -20px 0 0 0;
         padding: 0;
         text-align: right;
}

#nofloat
{
clear: both;
}

layout.css
HTML: 
/* ################  Layout  ################  */

body
{
	font-family:myriad, verdana, helvetica, arial, normal, sans-serif; color:#000000; font-size: 14pt;
}

.hruler
{
	border-top:1px solid #000;
	padding: 0;
	margin: 0;
}


#wrapper
{

}

#header
{

}

#top
{
	border-bottom: 1px solid #000;

}

#left
{

}

#content
{

}

#footer

{
	border-top: 1px solid #000;

}

img table th td tr .contentpaneopen
{
	margin: 0;
	padding: 0;
}

table
{
	border-collapse:collapse;
	border-spacing: 0;
}

index.php
PHP: 
<!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>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="birkenhof, hofladen, gemüse, erdbeeren" />
  <meta name="description" content="Seite des Birkenhof Bauernhofes und des Birkenhof Hofladens" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>Schaffers</title>
  <link href="/joomla1.5_birkenhof/templates/birkenhof/favicon.ico" rel="shortcut icon" type="image/x-icon" />

  <script type="text/javascript" src="/joomla1.5_birkenhof/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/joomla1.5_birkenhof/media/system/js/caption.js"></script>

<link rel="stylesheet" href="/joomla1.5_birkenhof/templates/_system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/joomla1.5_birkenhof/templates/birkenhof/css/layout_normal.css" type="text/css" />
<link rel="stylesheet" href="/joomla1.5_birkenhof/templates/birkenhof/css/position.css" type="text/css" />
<link rel="stylesheet" href="/joomla1.5_birkenhof/templates/birkenhof/css/menu.css" type="text/css" />
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
<!-- header -->
<div id="header">		<div class="moduletable">

					<img src="http://localhost/joomla1.5_birkenhof/images/header_images/header_i57.png" title="" alt="" class="" />		</div>
	</div>
<!-- top -->
<div id="top">
<!-- topmenu -->
<div id="topmenu">		<div class="moduletable-sub">
					<ul  id="mainlevel-submain"><li><a href="/joomla1.5_birkenhof/index.php?option=com_content&amp;view=category&amp;id=34&amp;Itemid=57" class="mainlevel_current-submain" id="active_menu-submain">Schaffers</a></li><li><a href="/joomla1.5_birkenhof/index.php?Itemid=&amp;option=" class="mainlevel-submain">Anbau</a></li><li><a href="/joomla1.5_birkenhof/index.php?Itemid=&amp;option=" class="mainlevel-submain">Methoden</a></li><li><a href="/joomla1.5_birkenhof/index.php?Itemid=&amp;option=" class="mainlevel-submain">Gute Gründe</a></li></ul>		</div>

			<div class="moduletable-main">
					<ul  id="mainlevel-main"><li><a href="/joomla1.5_birkenhof/index.php?option=com_content&amp;view=frontpage&amp;Itemid=56" class="mainlevel_active-main">Landwirtschaft</a></li><li><a href="/joomla1.5_birkenhof/index.php?Itemid=&amp;option=" class="mainlevel-main">Hofladen</a></li></ul>		</div>
	</div>
</div>
<!-- left-->
<div id="left">
<div class="hruler"></div>
<div id="subsubabstand">
		<div class="moduletable-subsub">
					<ul  id="mainlevel-subsubmain"><li><a href="/joomla1.5_birkenhof/index.php?option=com_content&amp;view=article&amp;id=47&amp;Itemid=58" class="mainlevel-subsubmain">Thomas Schaffer</a></li><li><a href="/joomla1.5_birkenhof/index.php?option=com_content&amp;view=article&amp;id=52&amp;Itemid=67" class="mainlevel-subsubmain">Mutter Schaffer</a></li></ul>		</div>

	
</div>
<div class="hruler"></div>
</div>
<!-- content -->
<div id="content"><table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="contentpane">
<tr>
	<td width="60%" valign="top" class="contentdescription" colspan="2">
		<img src="/joomla1.5_birkenhof/images/contentimages/andere/omar.jpg" alt="" /><img src="/joomla1.5_birkenhof/images/contentimages/andere/omar.jpg" alt="test2" /><img src="/joomla1.5_birkenhof/images/contentimages/andere/omar.jpg" alt="" /></td>
</tr>
<tr>
	<td>
	<script language="javascript" type="text/javascript">

	function tableOrdering( order, dir, task )
	{
		var form = document.adminForm;

		form.filter_order.value 	= order;
		form.filter_order_Dir.value	= dir;
		document.adminForm.submit( task );
	}

</script>
<form action="http://localhost/joomla1.5_birkenhof/index.php?option=com_content&view=category&id=34&Itemid=57" method="post" name="adminForm">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="sectiontableentry1" >
	<td align="right">
		1	</td>
				</tr>
<tr class="sectiontableentry2" >
	<td align="right">
		2	</td>

				</tr>
</table>

<input type="hidden" name="id" value="34" />
<input type="hidden" name="sectionid" value="1" />
<input type="hidden" name="task" value="category" />
<input type="hidden" name="filter_order" value="" />
<input type="hidden" name="filter_order_Dir" value="" />
</form>

		</td>
</tr>
</table>
</div>
<!-- footer -->

<div id="footer">
<!-- footerleft -->
<div id="footerleft">		<div class="moduletable">
					<ul  id="menulist_root-footleft" class="mainlevel-footleft"><li id="menuitem_1-footleft"><a href="/joomla1.5_birkenhof/index.php?option=com_contact&amp;view=contact&amp;id=1&amp;Itemid=53" class="mainlevel-footleft" id="menulink_1-footleft">Kontakt</a></li></ul>		</div>
	</div>
<!-- footerright -->
<div id="footerright">		<div class="moduletable">
					<ul  id="menulist_root-footright" class="mainlevel-footright"><li id="menuitem_1-footright"><a href="/joomla1.5_birkenhof/index.php?option=com_content&amp;view=article&amp;id=50&amp;Itemid=54" class="mainlevel-footright" id="menulink_1-footright">Impressum</a></li><li id="menuitem_2-footright"><a href="/joomla1.5_birkenhof/index.php?option=com_content&amp;view=article&amp;id=51&amp;Itemid=55" class="mainlevel-footright" id="menulink_2-footright">Geschäftsbedingungen</a></li></ul>		</div>

	</div>
</div>
<!-- float clear-->
<div id="nofloat"></div>
<!-- wrapper end -->
</div>
</body>
</html>

Viele Grüße
 
Moin,

du hast es versäumt, für ul#mainlevel-submain zumindest seine linken Polsterungseigenschaften auf null zu stellen, falls du von diesem Abstand sprichst:

CSS: 
ul#mainlevel-submain {
margin-left:0;
padding-left:0;
}

Ich persönlich regel das immer mit dem Universalselektor * zu Beginn eines Stylesheets:

CSS: 
* {
margin:0;
padding:0;
}
denn dieser Selektor bezieht alle enthaltenden Elemente im HTML-Dokument ein, und sorgt dafür, dass in den Browsern die von Element zu Element unterschiedlich voreingestellten Initialwerte dieser beiden Eigenschaften zurückgesetzt werden.

Dort, wo dann ein Außen- und/oder Innenabstand für ein Element erwünscht ist, wird dieser dann von mir explizit definiert.

mfg Maik
 
Hi,
das mit dem Universalselektor hab ich bisher noch nicht so in meine Arbeitsweise integriert gehabt. Bis jetzt :) . Das hatt mich nämlich immer genervt überall die Polstereigenschaften rauszunehmen.
Vorallem übersieht man dan auch keine die Fehlen.

Guter Tip, Danke!

VIele Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück