XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Probleme beim ausrichten (http://xhtmlforum.de/showthread.php?t=52416)

Mojo83 25.06.2008 19:42

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>


Mojo83 25.06.2008 19:43

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;
}


Peter Klein 25.06.2008 20:15

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.

Mojo83 25.06.2008 20:40

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)

Peter Klein 25.06.2008 20:54

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:53 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023