Hallo
Ich habe eine Haupnavigation mit CSS angepasst, aber leider lässt diese sich nicht so ausrichten wie ich es gerne hätte.
Meine Buttons oben liegen nun mittig, ich würde sie jedoch gerne unten haben. Mit Textausrichtung funktioniert es nicht. Es würde gehen wenn ich die topnavigation schmaller machen würde, was jedoch nicht optimal ist. Zudem sollte die Navigation etwas nach links rücken.
Hier mal der Code, im Anhang ist auch ein Bild:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<!--
This website is powered by TYPOlight Open Source CMS :: Licensed under GNU/LGPL
Copyright ©2005-2009 by Leo Feyer :: Extensions are copyright of their respective owners
Visit the project website at https://contao.org for more information
//-->
<head>
<title>Testseite</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<!--[if lte IE 7]><link rel="stylesheet" href="system/iefixes.css" type="text/css" media="screen" /><![endif]-->
<style type="text/css">
<!--
/* vordefiniert */
body{margin:0;padding:0;font-size:100.01%;text-align:left;position:relative;}select,input,textarea{font-size:99%;}form{margin:0;padding:0;}img{border:0;}#left{float:left;}#right{float:right;}#main{width:auto;position:relative;}.inside{position:relative;text-align:left;}.block{overflow:hidden;}.clear,#clear{height:0.1px;font-size:0.1px;line-height:0.1px;clear:both;}
.invisible{width:0px;height:0px;left:-1000px;top:-1000px;position:absolute;overflow:hidden;display:inline;}.custom{display:block;text-align:left;}.custom:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
/* eigener Code */
#footer .mod_customnav{display:inline-block;vertical-align:top;}
#formular input{}
.ce_gallery .pagination a:hover{background-color:#0DFF11;-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;}
.ce_gallery .pagination a,.ce_gallery .pagination a:active,.ce_gallery .pagination a:link,.ce_gallery .pagination a:visited{padding:2px 5px;text-decoration:none;font-size:10px;color:#000000;}
.ce_gallery .pagination li{display:inline;}
.ce_gallery .image_container{padding:2px 2px 1px 2px;border:1px solid #000000;}
#main .mod_article{margin:2px 5px;padding:2px;background-color:#f2f2f2;-webkit-border-radius: 7px;-moz-border-radius: 7px;}
#main .mod_article h1{font-family:Georgia;font-size:15px;line-height:14px;}
#header .subnavigation{color:#ffffff;}
#header .subnavigation li{display:inline;}
#header .subnavigation a{margin:0 5px 0 0;padding:2px 4px;text-decoration:none;font-size:10pt;color:#ffffff;}
#header .subnavigation a:hover{background-color:#0dff11;color:#000000;-webkit-border-radius: 4px;-moz-border-radius: 4px;}
#header .topnavigation{padding-bottom:1px;border-top:0px solid #0dff11;border-right:0px solid #0dff11;border-bottom:3px solid #0dff11;border-left:0px solid #0dff11;}
#header .topnavigation li{display:inline;padding:7px 15px;background-color:#0dff11;-webkit-border-top-right-radius: 10px;-moz-border-radius-topright: 10px;-webkit-border-top-left-radius: 10px;-moz-border-radius-topleft: 10px;}
body{margin:15px 15px 0 15px;background-color:#FF4500;font-family:Verdana,sans-serif;font-size:11px;color:#000000;}
#wrapper{background-color:#336699;-webkit-border-top-right-radius: 20px;-moz-border-radius-topright: 20px;-webkit-border-top-left-radius: 20px;-moz-border-radius-topleft: 20px;}
-->
</style>
</head>
<body id="top">
<div id="wrapper">
<div id="header">
<div class="inside">
<!-- indexer::stop -->
<div class="mod_navigation topnavigation block">
<a href="index.php/Seite2.html#skipNavigation2" class="invisible">Navigation überspringen</a>
<ul class="level_1">
<li class="first"><a href="index.php/home.html" title="Startseite" class="first" onclick="this.blur();">Home</a></li>
<li class="active"><span class="active">Seite2</span></li>
<li><a href="index.php/Seite3.html" title="Seite3" onclick="this.blur();">Seite3</a></li>
<li class="last"><a href="index.php/seite4.html" title="Seite4" class="last" onclick="this.blur();">Seite4</a></li>
</ul>
<a name="skipNavigation2" id="skipNavigation2" class="invisible"> </a>
</div>
<!-- indexer::continue -->
<!-- indexer::stop -->
<div class="mod_navigation subnavigation block">
<a href="index.php/fepro.html#skipNavigation3" class="invisible">Navigation überspringen</a>
<ul class="level_1">
<li class="first"><a href="index.php/programm-2010.html" title="Programm 2010" class="first" onclick="this.blur();">Programm 2010</a></li>
<li class="last"><a href="index.php/videos.html" title="Videos" class="last" onclick="this.blur();">Videos</a></li>
</ul>
<a name="skipNavigation3" id="skipNavigation3" class="invisible"> </a>
</div>
<!-- indexer::continue -->
</div>
</div>
<div id="container">
<div id="main">
<div class="inside">
<div class="mod_article block" id="ferienprogramm">
<div class="ce_text block">
<h1>Überschrift</h1>
<p>Text</p>
</div>
</div>
</div>
<div id="clear"></div>
</div>
</div>
<div id="footer">
<div class="inside">
<!-- indexer::stop -->
<div class="mod_customnav block">
<a href="index.php/Seite2.html#skipNavigation4" class="invisible">Navigation überspringen</a>
<ul class="level_1">
<li class="first"><a href="index.php/impressum.html" title="Impressum" class="first" onclick="this.blur();">Impressum</a></li>
<li class="last"><a href="index.php/rechtshinweise.html" title="Datenschutz und Haftungshinweise" class="last" onclick="this.blur();">Rechtshinweise</a></li>
</ul>
<a name="skipNavigation4" id="skipNavigation4" class="invisible"> </a>
</div>
<!-- indexer::continue -->
<!-- indexer::stop -->
<div class="mod_customnav block">
<a href="index.php/fepro.html#skipNavigation5" class="invisible">Navigation überspringen</a>
<ul class="level_1">
<li class="first"><a href="index.php/gaestebuch.html" title="Gästebuch" class="first" onclick="this.blur();">Gästebuch</a></li>
<li class="last"><a href="index.php/kontakt.html" title="Kontakt" class="last" onclick="this.blur();">Kontakt</a></li>
</ul>
<a name="skipNavigation5" id="skipNavigation5" class="invisible"> </a>
</div>
<!-- indexer::continue -->
</div>
</div>
<!-- indexer::stop -->
<img src="http://localhost/typolight/cron.php" alt="" class="invisible" />
<!-- indexer::continue -->
</div>
</body>
</html>
P.S. Wi bekomme ich es hin, dass main automatisch so groß ist, dass die ganze Seite ausgefüllt ist und der footer am Fenster unten abschließt, aber ohne dass ein Scrollbalken eingeblendet wird?
CSS-Problem mit Hauptnavigation
Zitieren
Lesezeichen