zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme beim ausrichten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.06.2008, 18:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.05.2008
Beiträge: 7
Mojo83 befindet sich auf einem aufstrebenden Ast
Standard Probleme beim ausrichten

Hallo Leute

ich bearbeite gerade ein Template und möchte das horizontale Menü gerne zentriert ausrichten, scheitere aber daran. Ich habe in der css-Datei schon an verschiedenen Stellen
text-align: center
eingefügt, aber das gewünschte Ergebnis blieb bisher aus.

Ich wäre deshalb sehr froh, wenn mir bei diesem Problem jemand helfen könnte.
Vielen Dank schonmal


hier der Quelltext:

Code:
<!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">
<head>
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="purple.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="favicon.ico" />

<!--[if lte IE 6]>
<style type="text/css">
div#rightblock{margin: 0px -3px;} table.contentpane{width: 90%;} 
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
div#footercontent{padding-top: 15px;}
</style>
<![endif]-->

</head>

<body>
<div align="center">
	
	<div id="wrapbg">
		<div id="wrapper">
			<div id="inner">

				<div id="topareadiv">
					<div id="toparea">


					</div>
				</div>


				<div id="navdiv">
					<div id="nav">

<ul>
<li class='active'><a href="index.html">Startseite</a></li>
<li><a href="index.html">Aktuelles</a></li>
<li><a href="index.html">Jobs</a></li>
<li><a href="index.html">Leistungen</a></li>
<li><a href="index.html">Über uns</a></li>
<li><a href="index.html">Anfahrt</a></li>
<li><a href="index.html">Kontakt</a></li>
<li><a href="index.html">Haftungsausschluss</a></li>
<li><a href="index.html">Impressum</a></li>
</ul>					</div>
				</div>

				<div id="maincontentdiv">
					<div id="maincontent">
												<div id="leftblock">
							<div id="leftdiv">

							</div>
						</div>

						<div id="centerblockright">
							<div id="centerdiv">
							

								
								<div id="center">
													<table class="contentpaneopen">
			<tr>
<td class="contentheading" width="100%">
<br />
<h1>
Herzlich willkommen
</h1>
</td>
							</tr>
			</table>
			
		<table class="contentpaneopen">
				<tr>
			<td valign="top" colspan="2">

<p>
uatutem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. uatutem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
<br /><br />
uatutem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. uatutem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. uatutem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
<br />
uatutem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. uatutem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum.
</p>

			</td>
		</tr>
				</table>



										</div>

								
								
								
							</div>
						</div>
						

					</div>
				</div>

				<div id="footercontentdiv">
					<div id="footercontent">
						<div id="footerdiv">
							<div id="footer">

<br />
Los Angeles, USA
							</div>
						</div>

					</div>
				</div>
			
			</div>
		</div>
	</div>

</div>

</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.06.2008, 18:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.05.2008
Beiträge: 7
Mojo83 befindet sich auf einem aufstrebenden Ast
Standard

Code:
body {
	margin: 0px;
	font-family: "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-size: 76%;
	color: #555555;
}
p {
	text-align: justify;
}

div#wrapbg{
	background: url(images/background_purple.gif);
	background-repeat: repeat-x;
	width: 100%;
}

a:link, a:visited{
	color: #89569e;
	text-decoration: none;
}

a:hover{
	color: #89569e;
	text-decoration: underline;
}

ul {
	margin: 0px;
	margin-left: 15px;
	padding: 0px;
}

ul a:link, ul a:visited{
	color: #89569e;
	text-decoration: none;
}

ul a:hover{
	color: #89569e;
	text-decoration: underline;
}

td{
	font-size: 1em;
}

.contentheading {
	font-family: "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-size: 1.33em;
	font-weight: bold;
	color: #89569e;
}

.contentheading a:link, .contentheading a:visited {
	font-family: "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-size: 1.33em;
	font-weight: bold;
	color: #89569e;
	text-decoration: none;
}

.contentheading a:hover {
	color: #89569e;
	text-decoration: underline;
}

td.buttonheading {
	width: 32px;
}

.componentheading {
	font-family: "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #cbcbcb;
	text-align: left;
	margin-bottom: 20px;
}
table.contenttoc {
	margin: 0 0 10px 10px;
	padding: 0;
	width: 200px;
}
table.contenttoc td {
	padding: 1px 5px 1px 18px;
}
table.contenttoc th {
	padding: 2px 4px;
	background-color : #efefef;
	border-bottom: solid 1px #999999;
	color: #888888;
	text-indent: 5px;
	text-transform: UPPERCASE;
}
table.blog, table.contentpaneopen{
	width: auto;
}
table.contentpane{
	width: 100%;
	margin-bottom: 30px;
	text-align: left;
}

.contentpane{
	width: auto;
}


div#wrapper{
	width: 960px;
}

div#topareadiv{
	height: 200px;
}
div#logo{
	width: 200px;
	height: 200px;
	background: url(images/logo_purple.gif) no-repeat;
	float: left;
}
div#bannerdiv{
	width: 750px;
	height: 200px;
	float: left;
}
div#banner{
	padding-top: 29px;
	text-align: left;
}

#navdiv{
	height: 30px;
}

#nav {
	background: url(images/toolbar_div_purple.jpg) 0 0 no-repeat;
	margin: 0;
	padding: 0;
	height: 30px;
}

#nav a {
	text-transform: uppercase;
	font-size: 11px;
	color: #fff;
	float: left;
	text-decoration: none;
	display: block;
	cursor: pointer;
	line-height: 30px;
	padding: 0 15px;
}

#nav a.topdaddy,

#nav li a {
	background: url(images/toolbar_div_purple.jpg) 100% 0 no-repeat;
}

#nav li a:hover{}

#nav li li a{
	background: none;
	font-weight: normal;
	padding: 0;
	text-indent: 15px;
	text-transform: uppercase;
	color: #939393;
	line-height: 30px;
}

#nav ul li ul li a:hover{
	background: none;
}

#nav ul li a:hover,

#nav ul li ul li ul li a:hover {
	color: #fff;
}

#nav, #nav ul {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
}

#nav li li {
	padding: 0;
	background: none;
	border-bottom: 1px solid #76458c;
	border-top: 1px solid #9869ab;
}
#nav ul ul a {
	display: block;
	color: #ffffff;
	text-decoration: none;
	width: 167px;
	text-transform: none;
	font-size: 11px;
	text-align: left;
}
#nav li {
	float: left;
	padding: 0;
 	background: none;
	height: 30px;
}
#nav ul li {
	position: relative;
	z-index: 1;
}
#nav li ul {
	top: 30px;
	position: absolute;
	left: -999em;
	height: auto;
	width: 170px;
	font-weight: normal;
	border-width: 0;
	margin: 0;
	padding: 0;
	border-right: 1px solid #76458c;
	border-left: 1px solid #76458c;
	border-bottom: 1px solid #76458c;
	border-top: 1px solid #76458c;
}	

#nav ul {
	padding: 0;
	margin: 0;
	margin-left: 2px;
}
#nav li li {
	float: left;
	padding: 0;
   	width: 170px;
}
#nav li ul ul {
	margin: -25px 0 0 170px;
}
#nav li:hover ul ul, 
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul,  
#nav li.sfhover ul ul, 
#nav li.sfhover ul ul ul, 
#nav li.sfhover ul ul ul ul {
	left: -999em;
}
#nav li:hover ul, 
#nav li li:hover ul, 
#nav li li li:hover ul, 
#nav li li li li:hover ul,
#nav li.sfhover ul, 
#nav li li.sfhover ul, 
#nav li li li.sfhover ul,
#nav li li li li.sfhover ul{
	z-index: 100;
	left: 0;
}
#nav li:hover, #nav li.sfhover {
    left: 0;
    background-color: #603c6e;
}
#nav li:hover a, #nav li.sfhover a {
    color: #fff;
}
#nav li li:hover a, #nav li li.sfhover a {
    color: #fff;
}
#nav li li:hover a:hover, #nav li li.sfhover a:hover {
    color: #fff;
}
#nav ul ul a {
	background: none;
}
#nav li.active {}
#nav li li.active {
	background: none;
}
#nav li:hover ul, 
#nav li li:hover ul, 
#nav li li li:hover ul, 
#nav li li li li:hover ul,
#nav li.sfhover ul, 
#nav li li.sfhover ul, 
#nav li li li.sfhover ul,
#nav li li li li.sfhover ul{
	background: #89569e;
}


a.mainlevel:link, a.mainlevel:visited { display: block; height: 20px; width: 180px; font-family: "Lucida Grande", Tahoma, Helvetica, sans-serif; text-decoration:none; color: #89569e; text-align: left; text-indent: 10px; line-height: 20px; padding-top: 3px; padding-bottom: 3px; border-bottom: 1px dotted #cccccc; }
a.mainlevel:hover {
	background-color: #f7f7f6;
	display: block;
	color: #89569e;	
}	

a.sublevel:link, a.sublevel:visited {
	display: block;
	height: 20px;
	width: 170px; 
	font-family: "Lucida Grande", Tahoma, Helvetica, sans-serif; 
	text-decoration:none; 
	color: #666666; 
	text-align: left; 
	text-indent: 15px; 
	line-height: 20px; 
	border-bottom: 1px solid #cccccc; 
}

a.sublevel:hover {
	background-color: #f7f7f6;
	display: block;
	color: #666666;	
}

#active_menu {
	color: #000;
	display: block;
}

#active_menu.sublevel {
	background-color: #f7f7f6;
	color: #000;
	display: block;
}


div#left .newsfeed a, div#user2 .newsfeed a,
div#user3 .newsfeed a, div#user4 .newsfeed a,
div#user5 .newsfeed a, div#user6 .newsfeed a,
div#user9 .newsfeed a, div#right .newsfeed a{
	font-weight: normal;
}
div#user2 .moduletable, div#user3 .moduletable,
div#user4 .moduletable, div#user5 .moduletable,
div#user6 .moduletable, div#user9 .moduletable{
	font-size: 0.92em;
}
div#maincontentdiv{
	margin: 30px 0px 30px 0px;
}

div#maincontent{}

div#topusersdiv{
	padding: 0px 0px 20px 0px;
	height: 1%;
}

div#bottomusers1div{
	padding: 30px 0px 20px 0px;
	height: 1%;
}

div#bottomusers2div{ background-color: #f9f7fa; padding: 0 0 20px; height: 1%; border: solid 1px #d4d6db; }
div#user2div, div#user3div,
div#user4div, div#user5div,
div#user6div, div#user9div{
	float: left;
}

div#user2, div#user3,
div#user4, div#user5,
div#user6, div#user9{
	padding: 0px 10px 0px 10px;
	text-align: left;
	font-size: 1em;
	color: #939393;
}

div#leftblock{
	float: left;
	width: 220px;
}
div#leftdiv{
	width: 200px;
	text-align: left;
}
div#left{
	font-size: 1em;
	color: #939393;
}
div#left h3{
	margin: 0px 0px 3px 0px;
	padding: 0px 0px 3px 0px;
	border-bottom: 1px solid #cccccc;
	font-size: 1.18em;
	color: #89569e;
}
div#left .moduletable{
	margin-bottom: 20px;
	font-size: 0.92em;
}
div#left div.moduletable { 	padding: 10px;
	background: #f9f7fa;
	margin-bottom: 10px;
	border: solid 1px #ffffff;
 }
div#left a{
	font-size: 1em;
}

div#centerblock{ /* 3 columns layout */
	float: left;
	width: 518px;
	border-left: 1px solid #ede8ef;
	border-right: 1px solid #ede8ef;
}
div#centerblockright{ /* 2 columns layout ~ right block disabled */
	float: left;
	width: 739px;
	border-left: 1px solid #ede8ef;
}
div#centerblockleft{ /* 2 columns layout ~ left block disabled */
	float: left;
	width: 739px;
	border-right: 1px solid #ede8ef;
}
div#centerblockfull{ /* 1 columns layout */
	float: left;
	width: 960px;
}
div#centerdiv{
	padding: 0 10px;
}
div#center{text-align: left; position: relative;}

div#footercontentdiv{
	margin-bottom: 10px;
}
div#footercontent{
	padding-top: 10px;
	border-top: 1px solid #cccccc;
}
div#footerdiv{
	text-align: left;
	color: #aaaaaa;
	font-size: 0.92em;
	float: left;
}
div#footerdiv a:link, div#footerdiv a:visited{
	color: #89569e;
	text-decoration: none;
}
div#footerdiv a:hover{
	text-decoration: underline;
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.06.2008, 19:15
Benutzerbild von Peter Klein
CSS-Fetischist
XHTMLforum-Mitglied
 
Registriert seit: 27.02.2006
Ort: Berlin
Beiträge: 375
Peter Klein befindet sich auf einem aufstrebenden Ast
Standard

Gib dem Container einfach ein
Code:
margin: 0 auto;
so sollte dieser Container zentriert sein. der wert auto sagt dem element das es den abstand auf beide seiten aufteilen soll.
Mit Zitat antworten
  #4 (permalink)  
Alt 25.06.2008, 19:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.05.2008
Beiträge: 7
Mojo83 befindet sich auf einem aufstrebenden Ast
Blinzeln

Vielen Dank schonmal für deine Antwort.
Zu welchem Container soll ich das Skript hinzu fügen? (Ein Paar habe ich schon durchprobiert, aber anscheinend die falschen)
Mit Zitat antworten
  #5 (permalink)  
Alt 25.06.2008, 19:54
Benutzerbild von Peter Klein
CSS-Fetischist
XHTMLforum-Mitglied
 
Registriert seit: 27.02.2006
Ort: Berlin
Beiträge: 375
Peter Klein befindet sich auf einem aufstrebenden Ast
Standard

ch dnke mal du hast die navigation in einer <ul> und gebe dieser die deklarationen die ich oben beschireben hab.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
3 Spalten, linke Spalte unten ausrichten - Probleme im IE6 Mahoney CSS 5 31.03.2010 11:02
Horizontales Ausrichten von input (type=text) cross-browser kuhn CSS 0 08.05.2009 09:57
paar Probleme mit dem CSS Layout SimonK. CSS 6 05.10.2008 14:57
Probleme mit horizontaler Navigation Bollmann CSS 2 05.10.2008 01:25
IE: Probleme mit ul-Menü Ares CSS 4 18.10.2006 11:42


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:04 Uhr.