zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.07.2017, 14:14
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2004
Beiträge: 62
Knuddelkamel befindet sich auf einem aufstrebenden Ast
Standard 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;
}
Grüsse

Philip
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.07.2017, 14:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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;
}
Weglassen, das war schon immer unsinnig.

Code:
#menu {
width: 1000px;
padding-top: 5px;
padding-bottom:5px;
background: #fff;
font-family: Verdana;
font-size: 0.9em;
float: left;
}
Eine feste Breite hat in responsive Menüs nichts verloren.

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;
}
Kleiner als 1px geht nicht, Kommastellen sind damit vollkommen unsinnig.

Code:
#menu h3 {
height:35px;
font-size: 0.9em;
text-align: center;
color: #000;
border: 0px solid #000;
background: #98FB98;
}
Die height-Angabe ist unsinnig. Die Höhe von Elementen wird von ihrem Inhalt bestimmt. Also weglassen.

Code:
#menu a {
text-decoration: none;
display: block;
border: 0px solid #000;
text-align: center;
background: #98FB98;
height:35px;
color: #000;
margin-bottom:2px;
}
Die height-Angabe ist unsinnig. Die Höhe von Elementen wird von ihrem Inhalt bestimmt. Also weglassen.

Code:
/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/
Und so weiter.

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.07.2017, 15:18
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.10.2004
Beiträge: 62
Knuddelkamel befindet sich auf einem aufstrebenden Ast
Standard

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>
Ich bin kein Fan von altem Internetexplorer, nur meine Internetseite ist für denn ukrainischen Markt gemacht.

Grüsse

Philip
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:09 Uhr.