Probleme beim mittigen Zentrieren

Mitglied seit
21.05.2011
Beiträge
196
Hollerö Liebe Leute,
ich habe ein sehr großes Problem und bin am verzweifeln :(.

Ich bin gerade dabei ein Joomla!2.5 Design zu erstellen und hab jetzt ein Problem ein Div mittig zu Positionieren (normal ist es ja automatisch mittig), aber dann gibt es im Design Probleme.
Schalte ich aber "float: left;" ein, dann ist das Design gut angepasst, nur halt links :/.

hier mal die Bilder zum Problem und auch der Quellcode von der Css und von der html/php datei.

CSS
Code:
/* 
    Document   : menu
    Created on : 25.07.2012, 10:28:05
    Author     : florian
    Description:
        Purpose of the stylesheet follows.
*/
@charset "utf-8";

* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

html {height: 101%;}
body{
    background: #457025 url('../images/gras.jpg');
    font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
    font-size: small;
}
h1 { font-size: 170%; }
h2 { font-size: 150%; }
h3 { 
    font-size: 115%;
    font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
    text-align: center;
    background: #457025 url('../images/verlauf.png');
    border-bottom: 1px solid #000000;
}
h1, h2 {
    text-align: left;
    font-family: Georgia, 'Times New Roman',Times;
}
#logo {
    -moz-border-radius: 12px 12px 0 0;
    -webkit-border-radius: 12px 12px 0 0;
    border-radius: 12px 12px 0 0;
}
#wrpr {
    left: 200px;
}
#wrapper {
    width: 960px;
    height: 100%;
    margin: 20px auto;
    background: #ffffff;
    border: 3px solid #00aa00;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}


#head {
    width: 960px;
    height: 250px;
    background: #ff0000 /*url()*/;
    -moz-border-radius: 12px 12px 0 0;
    -webkit-border-radius: 12px 12px 0 0;
    border-radius: 12px 12px 0 0;
}

#content {
    width: 100%;
}

#modulesTop {
    width: 959px;
    height: 25px;
    background: #000000 url('../images/verlauf02.png');
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    -moz-border-radius: 0 0 0 12px;
    -webkit-border-radius: 0 0 0 12px;
    border-radius: 0 0 0 12px;
}
/*--------------------------------*/
#modulesTop {
    padding: 0px;
    font-size: 105%;
}

#modulesTop ul {
    margin: auto;
    list-style: none;
    line-height: 1.3;
    background: #ffffff;
    
}

#modulesTop a {
    padding: 0 10px 0 10px;
    color: #000000;
    display: inline;
    line-height: 1.7;
}
#modulesTop a:hover {
    color: #444;
}
#modulesTop a:active {
    color: #aaa;
}

#modulesTop li {
   float: left;
   line-height: 1.3;
   padding-left: 30px;
   margin: auto;
}

#modulesTop ul li {
   float: left;
   line-height: 1.3;
   padding: 0 0 0 30px;
   margin: auto;
}
#modulesTop ul li ul li{
   float: left;
   line-height: 1.3;
   padding: 0 10px;
   margin: -0.5em auto 0 -0.5em;
}

#modulesTop li ul {
  text-align:left;
  position: absolute;
  max-width: 9em;
  left: -999em;
  line-height: 1.3;
  padding: 5px 0 2px 0;
  border: 1px solid #cccccc;
  -moz-border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
}

#modulesTop li:hover ul {
   left: auto;
   line-height: 1.3;
}

#modulesTop li:hover ul, #modulesTop li.sfhover ul {
   left: auto;
   line-height: 1.3;
}

#modulesTop li ul ul {
   margin: -2em 0 0 8em;
   line-height: 1.3;
}

#modulesTop, #modulesTop ul {
   padding-left: 0px;
   margin: 0;
   list-style: none;
   line-height: 1.3;
}

#modulesTop li:hover ul ul, #modulesTop li:hover ul ul ul, #modulesTop li.sfhover ul ul, #modulesTop li.sfhover ul ul ul {
   left: -1100em;
   line-height: 1.3;
}

#modulesTop li:hover ul, #modulesTop li li:hover ul, #modulesTop li li li:hover ul, #modulesTop li.sfhover ul, #modulesTop li li.sfhover ul, #modulesTop li li li.sfhover ul {
   left: auto;
   line-height: 1.3;
}
/*--------------------------------------*/
#date {
    float: right;
    padding: 3px 5px 0 0; 
}
.moduletable {
    border: 1px solid #000000;
    border-top: none;
}
#modulesLeft {
    width: 200px;
    float: left;
    
}
#modulesRight {
    width: 200px;
    height: 100%;
    min-height: 500px;
    float: left;
    border-left: 1px solid #aaaaaa;
}
#modulesRight li {
    list-style: none;
}
.moduletable a, .moduletable p,.moduletable ul{
    padding: 0 5px;
}
#component {
    width: 739px;
    float: left;
    padding: 10px;
    border-bottom:  1px solid #aaaaaa;
    
}
.actions, .actions li {
    list-style: none;
    display: inline;
}


#modulesFooter {
    float: left;
    width: 960px;
    min-height: 30px;
    border-top: 1px solid #aaaaaa;
    text-align: center;
    color: #aaaaaa;
}

#modulesFooter a{ color: #888888;}

select, input{
    border: 1px solid #cccccc;
    border-right: 1px solid #aaaaaa;
    border-bottom: 1px solid #aaaaaa;
}
.button {
    margin: 5px;
    padding: 2px 3px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background: #aaaaaa url('../images/verlauf02.png');
}

Code:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" dir="ltr" >
<head>
		  <base href="http://localhost/Deister-Highlander/index.php/arcas" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="generator" content="Joomla! - Open Source Content Management" />
  <title>arcas</title>
  <script src="/Deister-Highlander/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/Deister-Highlander/media/system/js/core.js" type="text/javascript"></script>
  <script src="/Deister-Highlander/media/system/js/caption.js" type="text/javascript"></script>
  <script src="/Deister-Highlander/media/system/js/mootools-more.js" type="text/javascript"></script>
  <script type="text/javascript">
window.addEvent('load', function() {
				new JCaption('img.caption');
			});
function keepAlive() {	var myAjax = new Request({method: "get", url: "index.php"}).send();} window.addEvent("domready", function(){ keepAlive.periodical(840000); });
  </script>

		<link rel="stylesheet" href="/Deister-Highlander/templates/system/css/system.css" type="text/css" />
		<link rel="stylesheet" href="/Deister-Highlander/templates/highlander/css/template.css" type="text/css" />
		
</head>
<body>
    <div id="wrpr">
        <div id="wrapper">

            <div id="head">
                <a href="/Deister-Highlander"><h1><img id="logo" src="/Deister-Highlander/templates/highlander/images/logo.jpg" alt="Highlander vom Deister" /></h1></a>
            </div><!--#head-->
            <div id="modulesTop">
                		<div class="moduletable_menu">
					
<ul class="menu">
<li class="item-101 deeper parent"><a href="/Deister-Highlander/" >Home</a><ul><li class="item-102"><a href="/Deister-Highlander/index.php/home/archiv" >archiv</a></li></ul></li><li class="item-103 current active deeper parent"><a href="/Deister-Highlander/index.php/arcas" >arcas</a><ul><li class="item-104"><a href="/Deister-Highlander/index.php/arcas/sdsdsd" >sdsdsd</a></li></ul></li><li class="item-105"><a href="/Deister-Highlander/index.php/team" >team</a></li></ul>
		</div>
	
                <div id="date"></div>
            </div><!--#menu-->

            <div id="content">
                <div id="modulesLeft"></div><!--#news-->
                <div id="component"><div class="archive">
<form id="adminForm" action="/Deister-Highlander/index.php/arcas" method="post">
	<fieldset class="filters">
	<legend class="hidelabeltxt">Filter</legend>
	<div class="filter-search">
		
		<select id="month" name="month" size="1" class="inputbox">
	<option value="">Monat</option>
	<option value="01">Jan</option>
	<option value="02">Feb</option>
	<option value="03">Mär</option>
	<option value="04">Apr</option>
	<option value="05">Mai</option>
	<option value="06">Jun</option>
	<option value="07">Jul</option>
	<option value="08">Aug</option>
	<option value="09">Sep</option>
	<option value="10">Okt</option>
	<option value="11">Nov</option>
	<option value="12">Dez</option>
</select>
		<select id="year" name="year" size="1" class="inputbox">
	<option value="">Jahr</option>
	<option value="2000">2000</option>
	<option value="2001">2001</option>
	<option value="2002">2002</option>
	<option value="2003">2003</option>
	<option value="2004">2004</option>
	<option value="2005">2005</option>
	<option value="2006">2006</option>
	<option value="2007">2007</option>
	<option value="2008">2008</option>
	<option value="2009">2009</option>
	<option value="2010">2010</option>
	<option value="2011">2011</option>
	<option value="2012">2012</option>
	<option value="2013">2013</option>
	<option value="2014">2014</option>
	<option value="2015">2015</option>
	<option value="2016">2016</option>
	<option value="2017">2017</option>
	<option value="2018">2018</option>
	<option value="2019">2019</option>
	<option value="2020">2020</option>
</select>
		<select id="limit" name="limit" class="inputbox" size="1" onchange="this.form.submit()">
	<option value="5" selected="selected">5</option>
	<option value="10">10</option>
	<option value="15">15</option>
	<option value="20">20</option>
	<option value="25">25</option>
	<option value="30">30</option>
	<option value="50">50</option>
	<option value="100">100</option>
	<option value="0">Alle</option>
</select>
		<button type="submit" class="button">Filter</button>
	</div>
	<input type="hidden" name="view" value="archive" />
	<input type="hidden" name="option" value="com_content" />
	<input type="hidden" name="limitstart" value="0" />
	</fieldset>

	
<ul id="archive-items">
</ul>

<div class="pagination">
	<p class="counter">
			</p>
	</div>
</form>
</div>
</div><!--#component-->    
                <div id="modulesRight">		<div class="moduletable">
					<h3>Hauptmenü</h3>
					
<ul class="menu">
<li class="item-101 parent"><a href="/Deister-Highlander/" >Home</a></li><li class="item-103 current active deeper parent"><a href="/Deister-Highlander/index.php/arcas" >arcas</a><ul><li class="item-104"><a href="/Deister-Highlander/index.php/arcas/sdsdsd" >sdsdsd</a></li></ul></li><li class="item-105"><a href="/Deister-Highlander/index.php/team" >team</a></li></ul>
		</div>
			<div class="moduletable">
					<h3>Anmelden</h3>
					<form action="/Deister-Highlander/index.php/arcas" method="post" id="login-form" >
		<fieldset class="userdata">
	<p id="form-login-username">
		<label for="modlgn-username">Benutzername</label>
		<input id="modlgn-username" type="text" name="username" class="inputbox"  size="18" />
	</p>
	<p id="form-login-password">
		<label for="modlgn-passwd">Passwort</label>
		<input id="modlgn-passwd" type="password" name="password" class="inputbox" size="18"  />
	</p>
		<p id="form-login-remember">
		<label for="modlgn-remember">Angemeldet bleiben</label>
		<input id="modlgn-remember" type="checkbox" name="remember" class="inputbox" value="yes"/>
	</p>
		<input type="submit" name="Submit" class="button" value="Anmelden" />
	<input type="hidden" name="option" value="com_users" />
	<input type="hidden" name="task" value="user.login" />
	<input type="hidden" name="return" value="aW5kZXgucGhwP0l0ZW1pZD0xMDM=" />
	<input type="hidden" name="6c0d9653a6401a8386bf7c93c36307d6" value="1" />	</fieldset>
	<ul>
		<li>
			<a href="/Deister-Highlander/index.php/component/users/?view=reset">
			Passwort vergessen?</a>
		</li>
		<li>
			<a href="/Deister-Highlander/index.php/component/users/?view=remind">
			Benutzername vergessen?</a>
		</li>
				<li>
			<a href="/Deister-Highlander/index.php/component/users/?view=registration">
				Registrieren</a>
		</li>
			</ul>
	</form>
		</div>
	</div>

            </div><!--#content-->

            <div id="modulesFooter">
                <p>© Design by <a href="mailto:florianw1991@yahoo.de">F. Werner</a></p>
            </div><!--#footer-->

        </div><!--#wrapper-->
    </div>
</body>
</html>

den php code habe ich mal als html quelltext angegeben.

ich hoffe, ihr könnt mir helfen :/

Gruß moppel
 

Anhänge

Oben