✔ Problem mit Abstand bei den Menüs zum Rand

Status
Nicht offen für weitere Antworten.
Jan-Frederik Stieler

Jan-Frederik Stieler

Monsterator
Moderator
Hallo,
ich bin grad dabei eine Seite in Joomla zumachen und hab jetzt das Problem das alle Menüs nicht am Rand stehen obwohl ich eigentlich nirgends mehr ein Padding oder Margin drin habe wo auch keins sein sollte.
Wahrscheinlich hab ich grad wieder Tomaten auf meinen Augen und sehe den Wald vor lauter Bäumen nicht aber wäre trotz dem nett wenn jemand mal drüber schauen könnte komm ich komm grad nicht weiter.

PHP: 
/* ################  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;
}

#topleft
{
	display: inline;
         margin: 0;
         padding: 0;
	height: 45px;
         float: left;
         width:50%;
         text-align:left;
}

#topright
{
	display: inline;
         margin: 0;
         padding: 0;
         float: left;
	height: 45px;
         width:50%;
         text-align: right;
}

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

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

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

}

#footerleft
{
	float:left;
         height: 45px;
         width: 50%;
         margin: -10px 0 0 0;
         padding: 0px 0 0 0;
}

#footerrigh
{
         float:left;
         height: 45px;
         width: 50%;
         margin: -10px 0 0 0;
         padding: 0px 0 0 0;
}

#nofloat
{
clear: both;
}

PHP: 
/* ################  Layout  ################  */

body
{
	font: normal small-caps normal 14pt verdana, sans-serif ;
}

#hruler
{
	border-top:1px solid #000;
}


#wrapper
{
	background-color: #CC0000;
}

#header
{
	background-color: #669933;
}

#topleft
{
	border-bottom: 1px solid #000;
	background-color:#FF99FF;
}

#topright
{
	border-bottom: 1px solid #000;
	background-color:#FF99FF;
}

#left
{
	background-color:#663333;
}

#content
{
	background-color:#0033CC;
}

#footer

{
	background-color: #66FF66;
         border-top:1px solid #000;
}

PHP: 
/* ################  Menu  ################  */

ul-topright
{
float:left; list-style: none; margin: 0; padding: 0;
}

li
{
display:inline; margin: 0; padding: 0;
}
  /* ################  topright  ################  */

a {text-decoration:none; font-family: myriad pro, verdana, helvetica, arial, sans-serif; color:#000000; font-size: 14pt;}
a.mainlevel-main:hover {border-color:#000; border-style:solid; border-width: 0 0 10px 0; }
a.mainlevel_active-main {border-color:#000; border-style:solid; border-width: 0 0 10px 0;}
a#active_menu-main {border-color:#000; border-style:solid; border-width: 0 0 10px 0;}
a#active_menu-main.mainlevel_current-main {border-color:#000; border-style:solid; border-width: 0 0 10px 0;}


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

mainlevel-foot ul
{
padding: 0px; margin: 0px;
}

#mainlevel-foot li
{
list-style: none; float: left;
}

#mainlevel-foot a {display: block; border-color:#fff; border-style:solid; border-width: 10px 0 0 0; text-decoration:none; text-align:right; margin: -11px 0 0 0; padding: 10px 0 0 0; font-family: myriad pro, verdana, helvetica, arial, sans-serif; color:#000000; font-size: 14pt;}
#mainlevel-foot a:hover {border-color:#000; border-style:solid; border-width: 10px 0 0 0; background-color:#fff;}
#active_menu-foot a {display: block; border-color:#000; border-style:solid; border-width: 10px 0 0 0; background-color:#fff;}

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>birkenhof - Schaffers</title>
<meta name="description" content="Joomla - the dynamic portal engine and content management system" />
<meta name="keywords" content="Joomla, joomla" />
<meta name="Generator" content="Joomla! - Copyright (C) 2005 - 2007 Open Source Matters. All rights reserved." />
<meta name="robots" content="index, follow" />
<script type="text/javascript" src="http://localhost/joomla_birkenhof/mambots/system/jceutils/jscripts/jceutils.js"></script>
<script type="text/javascript" src="http://localhost/joomla_birkenhof/mambots/system/jceutils/jscripts/mootools.js"></script>
<script type="text/javascript" src="http://localhost/joomla_birkenhof/mambots/system/jceutils/jscripts/jceutils_mootools.js"></script>
<script type="text/javascript" src="http://localhost/joomla_birkenhof/mambots/system/jceutils/jscripts/embed.js"></script>

<link href="http://localhost/joomla_birkenhof/mambots/system/jceutils/css/jceutils.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript">
if(typeof jceUtils != 'undefined'){
	jceUtils.setConfig({
		legacyPopup: 1,
		boxConvert: 0,
		boxResize: 1,
		boxIcons: 1,
		boxOverlayOpacity: 0.8,
		boxOverlayColor: '#000000',
		boxFadeSpeed: 500,
		boxScaleSpeed: 500,
		tipClass: 'tooltip',
		tipOpacity: 1,
		tipFxspeed: 150,
		tipPosition: 'br',
		tipOffsets: {'x': 16, 'y': 16},
		pngFix: 0,
		imagePath: 'mambots/system/jceutils/images/'
	});
}
</script>
	<link rel="shortcut icon" href="http://localhost/joomla_birkenhof/images/favicon.ico" />
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="http://localhost/joomla_birkenhof/templates/birkenhof/css/template.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/joomla_birkenhof/templates/birkenhof/css/position.css" rel="stylesheet" type="text/css" media="screen,projection"/>
<link href="http://localhost/joomla_birkenhof/templates/birkenhof/css/layout.css" rel="stylesheet" type="text/css" media="screen,projection"/>
<link href="http://localhost/joomla_birkenhof/templates/birkenhof/css/menu.css" rel="stylesheet" type="text/css" media="screen,projection"/>
<link href="http://localhost/joomla_birkenhof/templates/birkenhof/css/print.css" rel="stylesheet" type="text/css" media="Print" />
<link href="http://localhost/joomla_birkenhof/templates/birkenhof/js/sfhover.js" rel="stylesheet" type="text/javascript" />
</head>
<body>
<!-- wrapper -->
<div id="wrapper">

<!-- header -->
<div id="header">		<table cellpadding="0" cellspacing="0" class="moduletable">
				<tr>
			<td>
				<img src="http://localhost/joomla_birkenhof/images/header_images/site_logo.png" border="0" alt="header" />			</td>
		</tr>
		</table>
		</div>
<!-- topleft -->

<div id="topleft">		<table cellpadding="0" cellspacing="0" class="moduletable">
				<tr>
			<td>
				<ul  id="mainlevel-main"><li><a href="http://localhost/joomla_birkenhof/index.php?option=com_content&amp;task=section&amp;id=4&amp;Itemid=41" class="mainlevel_current-main" id="active_menu-main">Schaffers</a></li><li><a href="http://localhost/joomla_birkenhof/index.php?option=com_content&amp;task=section&amp;id=4&amp;Itemid=42" class="mainlevel-main">Anbau</a></li><li><a href="http://localhost/joomla_birkenhof/index.php?option=com_content&amp;task=section&amp;id=4&amp;Itemid=43" class="mainlevel-main">Methoden</a></li><li><a href="http://localhost/joomla_birkenhof/index.php?option=com_content&amp;task=section&amp;id=4&amp;Itemid=44" class="mainlevel-main">Gute Gründe</a></li></ul>			</td>
		</tr>
		</table>

		</div>
<!-- topright -->
<div id="topright">		<table cellpadding="0" cellspacing="0" class="moduletable">
				<tr>
			<td>
				<ul  id="mainlevel-main"><li><a href="http://localhost/joomla_birkenhof/index.php?option=com_content&amp;task=section&amp;id=4&amp;Itemid=28" class="mainlevel_active-main">Landwirtschaft</a></li><li><a href="http://localhost/joomla_birkenhof/index.php?option=com_content&amp;task=section&amp;id=5&amp;Itemid=29" class="mainlevel-main">Hofladen</a></li></ul>			</td>
		</tr>
		</table>

		</div>
<!-- left-->
<div id="left">
<div id="hruler"></div>
		<table cellpadding="0" cellspacing="0" class="moduletable">
				<tr>
			<td>
				<ul  id="mainlevel-main"><li><a href="http://localhost/joomla_birkenhof/index.php?option=com_content&amp;task=view&amp;id=12&amp;Itemid=40" class="mainlevel-main">Thomas Schaffer</a></li></ul>			</td>
		</tr>

		</table>
		<div id="hruler"></div>
</div>
<!-- content -->
<div id="content">			<div class="componentheading">
			landwirtschaft			</div>
					<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="contentpane">
					<tr>
				<td width="60%" valign="top" class="contentdescription" colspan="2">

								</td>
			</tr>
					<tr>
			<td width="100%">
						</td>
		</tr>
		<tr>
			<td colspan="2">
						</td>

		</tr>
		</table>
		</div>
<!-- footer -->
<div id="footer">
<!-- footerleft -->
<div id="footerleft">		<table cellpadding="0" cellspacing="0" class="moduletable">
				<tr>
			<td>
				<ul id="mainlevel-foot"><li><a href="http://localhost/joomla_birkenhof/index.php?option=com_contact&amp;task=view&amp;contact_id=1&amp;Itemid=37" class="mainlevel-foot" >Kontakt</a></li></ul>			</td>

		</tr>
		</table>
		</div>
<!-- footerright -->
<div id="footerrigh">		<table cellpadding="0" cellspacing="0" class="moduletable">
				<tr>
			<td>
				<ul id="mainlevel-foot"><li><a href="http://localhost/joomla_birkenhof/index.php?option=com_content&amp;task=view&amp;id=15&amp;Itemid=39" class="mainlevel-foot" >Impressum</a></li><li><a href="http://localhost/joomla_birkenhof/index.php?option=com_content&amp;task=view&amp;id=14&amp;Itemid=38" class="mainlevel-foot" >Geschäftsbedingungen</a></li></ul>			</td>

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

Viele Grüße und eine geruhsame Nacht!
 
Hi,

was hat es denn mit dem Selektor ul-topright zu Beginn in der menu.css auf sich? Der trifft nämlich auf keines der Listenelemente zu.

Und im Selektor mainlevel-foot ul fehlt das Gatterzeichen vor dem ID-Namen.

Außerdem muss eine ID im HTML-Dokument eindeutig sein, sprich: du kannst darin die ID #mainlevel-main und #mainlevel-foot nicht mehrmals vergeben. Hierfür sind die Klassen vorgesehen.
 
Hi,
was hat es denn mit dem Selektor ul-topright zu Beginn in der menu.css auf sich? Der trifft nämlich auf keines der Listenelemente zu.
Zum Vergrößern anklicken....
Ja da habe ich Mist zusammengeschrieben. Eigentlich müßte es ul-main heißen.
Was die doppelte Verwendung von Ids betrifft so habe ich darauf keinen Einfluß oder weiß nicht wie man das so einstellt das das CMS das richtig macht. Joomla verwendet daautomatischfür erstellte Menülisten die gleichen IDs. Dazu habe ich aber schon im Joomla Forum eine Frage zugestellt. Mal schauen ob mir die endlich mal einer beantwortet :(.

Also mein Problem ist das ich eigentlich alle Menüs, entweder rechts oder links außen ausgerichtet haben will. Ich dachte eigentlich das ich das mit vertical-align oder text-align hinbekommen würde. Funktioniert aber beides nicht. Habe schon versucht mit Hilfe von display die Listen inentsprechnde Elementarten umzuwandeln funktioniert aber nicht. Der IE richtet z.B. die Menüelemente auf der rechten Seite so aus wie ich das haben möchte.

Was mich aber etwas verwundert ist der Abstand den das Menü ( topleft und footerleft) auf der linken Seite hat da padding und margin im DIV auf 0 stehen.

Gruß
 
Hi.
DirtyWorld hat gesagt.:
Eigentlich müßte es ul-main heißen.
Zum Vergrößern anklicken....
Du meinst wohl eher ul#mainlevel-main?

DirtyWorld hat gesagt.:
Also mein Problem ist das ich eigentlich alle Menüs, entweder rechts oder links außen ausgerichtet haben will. Ich dachte eigentlich das ich das mit vertical-align oder text-align hinbekommen würde. Funktioniert aber beides nicht. Habe schon versucht mit Hilfe von display die Listen inentsprechnde Elementarten umzuwandeln funktioniert aber nicht. Der IE richtet z.B. die Menüelemente auf der rechten Seite so aus wie ich das haben möchte.
Zum Vergrößern anklicken....
Wenn es um die rechtsbündige Ausrichtung einer floatenden Liste geht, empfehle ich dir http://www.cssplay.co.uk/menus/centered2.html. Die linksbündige Ausrichtung des Elements sollte sich eigentlich von selbst ergeben.

DirtyWorld hat gesagt.:
Was mich aber etwas verwundert ist der Abstand den das Menü ( topleft und footerleft) auf der linken Seite hat da padding und margin im DIV auf 0 stehen.
Zum Vergrößern anklicken....
Du vergisst, dass auch das Listenelement ul selbst diese Polsterungseigenschaften besitzt, die aber wegen der angesprochenen fehlerhaften Selektorbezeichnungen im Stylesheet menu.css nicht zurückgesetzt werden.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück