|
|||
Probleme mit zentrieren
Hallo Zusammen
Ich möchte gerne mein Menü zentrieren, alle Schriften sollen horizontal wie vertikal zentriert sein. Es funktioniert leider bis jetzt noch nicht. Habe bereits gesucht, aber bis jetzt keine Lösung gefunden. Code:
* { margin: 0; padding: 0; } #menu { width: 1000px; padding-top: 5px; padding-bottom:5px; background: #fff; font-family: Verdana; font-size: 0.9em; float: left; } #menu ul { float: left; width: 140.85px; list-style-type: none; position:relativ; padding-right:1px; padding-left:1px; } /*--definiert die Blocküberschriften--*/ #menu h3 { height:35px; font-size: 0.9em; text-align: center; color: #000; border: 0px solid #000; background: #98FB98; } /*--definiert die "Drop-Down-Links" im Normalzustand--*/ #menu a { text-decoration: none; display: block; border: 0px solid #000; text-align: center; background: #98FB98; height:35px; color: #000; margin-bottom:2px; } /*--definiert die "Drop-Down-Links" im Hoverzustand--*/ #menu a:hover { color: #000; background: #7FFFd4; } /*verhindert im Zusammenhang mit position absolute bei ul ul *eine Höhenvergrößerung von #menu beim Hovern-- */ #menu li { position: relative; } /*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/ #menu ul ul { position: absolute; z-index: 2; display: none; } /*--lässt die Dropdown-Links beim Hovern erscheinen--*/ #menu ul li:hover ul { display: block; width:200px; } /*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/ * html #menu ul li{ float: left; width: 100%; } /*--nur für IE 7 erkennbar--*/ *+ html #menu ul li { float: left; width: 100%; } /*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/ *html body { behavior: url(csshover3-source.htc); font-size: 100%; } *html #menu ul li a { height: 1%; } /*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/ #menu a.direkt:link { font-size: 0.9em; font-weight: bold; text-align: center; color: #000; border: 1px solid #003366; background: #ff8000; } /*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/ #menu a.direkt:hover { color: #ff9224; background: #003366; border: 1px solid #ccc; } Philip |
Sponsored Links |
|
|||
Hallo
Es wäre schön wenn du dir bei der Fragestellung etwas mehr Mühe geben würdest. Es ist schlicht nervig immer wieder nach fehlenden Informationen Fragen zu müssen: https://xhtmlforum.de/73262-breitena...n-mit-css.html oder https://xhtmlforum.de/72636-div-cont...angezeigt.html Ohne den HTML-Quelltext nützt das CSS zur konkreten Lösung nichts. So können wir dir nur allgemeine Tips geben: Code:
* { margin: 0; padding: 0; } Code:
#menu { width: 1000px; padding-top: 5px; padding-bottom:5px; background: #fff; font-family: Verdana; font-size: 0.9em; float: left; } Float dient dazu Text andere Elemente umfließen zu lassen. Der Mißbrauch zu anderen Layoutwünschen ist seit der Einführung von Flexbox unnötig, sachlich falsch und schafft zusätzliche Probleme. Du solltest also alle float-Angaben löschen. Code:
#menu ul { float: left; width: 140.85px; list-style-type: none; position:relativ; padding-right:1px; padding-left:1px; } Code:
#menu h3 { height:35px; font-size: 0.9em; text-align: center; color: #000; border: 0px solid #000; background: #98FB98; } Code:
#menu a { text-decoration: none; display: block; border: 0px solid #000; text-align: center; background: #98FB98; height:35px; color: #000; margin-bottom:2px; } Code:
/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/ Wenn du noch IE kleiner 11 unterstützen willst hast du die letzten 5 Jahre Entwicklung verschlafen. Die werden praktisch nicht mehr unterstützt, auch wenn du dir das noch so sehr wünscht. Gruss MrMurphy |
Sponsored Links |
|
|||
Danke für deine erste Informationen.
Hier ist noch der dazugehörige html code HTML-Code:
<div id="inhalt"> ..... <div id="titel"> <h1>POS оборудование </h1> </div> <div id="produkte_inhalt"> <!--Boxen Hauptseite Start--> <div id="produkte_box"> <div id="produkte_titel"><h4>Фискальные регистраторы</h4></div> <div id="produkte_foto"> <a href="hardware/fiskalnieprinter/1.php""><img id="foto" src="hardware/fiskalnieprinter/1.jpg" /> </a> </div> </div> <!--Boxen Hauptseite Ende--> <!--Boxen Hauptseite Start--> <div id="produkte_box"> <div id="produkte_titel"><h4>Кассовые аппараты</h4></div> <div id="produkte_foto"> <a href="hardware/kassenapparate/1.php"><img id="foto" src="hardware/kassenapparate/1.jpg" /> </a> </div> </div> <!--Boxen Hauptseite Ende--> <!--Boxen Hauptseite Start--> <div id="produkte_box"> <div id="produkte_titel"><h4>Принтеры чеков</h4></div> <div id="produkte_foto"> <a href="hardware/printer/1.php"><img id="foto" src="hardware/printer/1.jpg" /> </a> </div> </div> <!--Boxen Hauptseite Ende--> <!--Boxen Hauptseite Start--> <div id="produkte_box"> <div id="produkte_titel"><h4>Принтеры этикеток</h4></div> <div id="produkte_foto"> <a href="hardware/etikettendrucker/1.php"><img id="foto" src="hardware/etikettendrucker/1.jpg" /> </a> </div> </div> <!--Boxen Hauptseite Ende--> <!--Boxen Hauptseite Start--> <div id="produkte_box"> <div id="produkte_titel"><h4>POS терминалы</h4></div> <div id="produkte_foto"> <a href="hardware/posterminal/1.php"><img id="foto" src="hardware/posterminal/1.jpg" /> </a> </div> </div> <!--Boxen Hauptseite Ende--> <!--Boxen Hauptseite Start--> <div id="produkte_box"> <div id="produkte_titel"><h4>Сканеры штрих кода</h4></div> <div id="produkte_foto"> <a href="hardware/scanner/1.php"><img id="foto" src="hardware/scanner/qw2100/1.jpg" /> </a> </div> </div> <!--Boxen Hauptseite Ende--> <!--Boxen Hauptseite Start--> <div id="produkte_box"> <div id="produkte_titel"><h4>Денежные ящики</h4></div> <div id="produkte_foto"> <a href="hardware/kassenschubladen/1.php"><img id="foto" src="hardware/kassenschubladen/1.jpg" /> </a> </div> </div> <!--Boxen Hauptseite Ende--> <!--Boxen Hauptseite Start--> <div id="produkte_box"> <div id="produkte_titel"><h4>Детекторы валют</h4></div> <div id="produkte_foto"> <a href="hardware/geldprufer/1.php"><img id="foto" src="hardware/geldprufer/1.jpg" /> </a> </div> </div> <!--Boxen Hauptseite Ende--> <!--Boxen Hauptseite Start--> <div id="produkte_box"> <div id="produkte_titel"><h4>Счетчики банкнот</h4></div> <div id="produkte_foto"> <a href="hardware/zahlmaschinen/1.php"><img id="foto" src="hardware/zahlmaschinen/1.jpg" /> </a> </div> </div> <!--Boxen Hauptseite Ende--> <!--Boxen Hauptseite Start--> <div id="produkte_box"> <div id="produkte_titel"><h4>Этикет-пистолеты</h4></div> <div id="produkte_foto"> <a href="hardware/etikettenpistolen/1.php"><img id="foto" src="hardware/etikettenpistolen/1.jpg" /> </a> </div> </div> <!--Boxen Hauptseite Ende--> <!--Boxen Hauptseite Start--> <div id="produkte_box"> <div id="produkte_titel"><h4>Весы</h4></div> <div id="produkte_foto"> <a href="hardware/waagen/1.php"><img id="foto" src="hardware/waagen/1.jpg" /> </a> </div> </div> <!--Boxen Hauptseite Ende--> </div> </div> </body> </html> Grüsse Philip |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Liste zentrieren - Probleme in Chrome | TomBOX | CSS | 4 | 03.03.2015 11:54 |
Probleme bei zentrieren Div in Div | Elijo | CSS | 4 | 27.01.2015 02:26 |
Probleme mit dem zentrieren | Star_Scream | CSS | 2 | 27.02.2009 12:18 |
Probleme mit dem zentrieren | pepesan | CSS | 1 | 04.04.2008 23:12 |
IE: Probleme beim Zentrieren | idontwantaname | CSS | 7 | 15.11.2007 18:36 |