• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Menübar zentrieren

T

tronicxs

Neues Mitglied
Hallo zusammen!
Ich bin noch ein Anfänger, daher brauche ich Unterstützung.

Ich möchte gerne den Inhalt meiner Menübar zentrieren, kriege es aber einfach nicht hin :S
Ich hau mal ein Foto und den Code dazu hier hinein.
Danke schon jetzt, für Eure Hilfe!


<!DOCTYPE html>
<html>
<head>
<title>1. FC Obotrit Bargeshagen e.V.</title>
<style>
body {
background-color:#81BEF7;
}
ul {
list-style-type: none;
margin: 500;
padding: 100;
overflow: hidden;
background-color: #38444d;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: right-aligned;
padding: 15px 100px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #aeaeae;
min-width: 290px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<center>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Mannschaften</a>
<div class="dropdown-content">
<a href="#">Herren</a>
<a href="#">Alte Herren</a>
<a href="#">A - Junioren</a>
<a href="#">B - Junioren</a>
<a href="#">C - Junioren</a>
<a href="#">E - Junioren</a>
<a href="#">F - Junioren</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Verein</a>
<div class="dropdown-content">
<a href="#">Der Vorstand</a>
<a href="#">Satzung</a>
<a href="#">Geschichte</a>
<a href="#">Sponsoren</a>
<a href="#">Archiv</a>
<a href="#">Downloads</a>
<a href="#">Datenschutz</a>
<a href="#">Impressum</a>
</div>
</li>
</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>
</center>
</html>
Zum Vergrößern anklicken....


1.png
 
Werbung:
Hi probiere mal:
CSS: 
li {
  display:inline-block;
}

ul {
list-style-type: none;
margin: 500;
padding: 100;
overflow: hidden;
background-color: #38444d;
text-align:center;
}

Float muss raus!
Best practice ist auch, die Untermenüpunkte in <li> zu wrappen.
 
Werbung:
Hey Oliver, vielen Dank!
Vielleicht liegt es auch einfach daran, dass ich es in einer Datei habe?

Danke dir! Ich werde es heute Abend mal aufsplitten und gebe dann Feedback!
 
Werbung:
Du kannst den Code ersetzen, aber eigentlich habe ich nur die 2 Sachen ersetzt, siehe Post #2.
Ob du es alles in einer Datei hast oder trennst, macht keinen Unterschied, aber empfehlenswert ist es zu trennen ja.
 
Vielen Dank Oliver!
Das hat soweit funktioniert!

Kannst du mir vielleicht noch bei einem anderen "Problem" weiterhelfen?
Und zwar möchte ich gerne, das meine Menübar sich nicht über die ganze Oberfläche erstreckt, sondern nur minimal mehr, als das wofür ich sie benötige.
Im aktuellen Fall für 3 Buttons.
Siehe Anhang.

Ich hänge mal auch noch meinen Stylesektor mit ran.

Vielen Dank im Vorraus!
<style>
body {
background-color:#81BEF7;
}
ul {
list-style-type: none;
margin: 500;
padding: 100;
overflow: hidden;
background-color: #38444d;
text-align:center;
border-radius: 25px;
}

li {
display:inline-block;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: right-aligned;
padding: 15px 100px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #aeaeae;
min-width: 290px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}
section {
background-color: #81BEF7;
width: 900px;
float: center;
}

article {
border: gray 4px groove;
padding: 20px;
text-align: left;
overflow: auto;
margin-bottom: 25px;
margin-right: 30px;
}

article h2 {
font-size: 14pt;
color: white;
padding-bottom: 10px;
letter-spacing: 1px;
font-weight: bold;
}

article p {
font-size: 12pt;
padding-bottom: 10px;
color: black;
}

article blockquote {
font-weight: bold;
font-style: italic;
font-size: 10pt;
padding: 15px;
background-color: white;
border-radius: 10px;
color: black;
}
footer {
clear: both;
text-align: center;
padding: 5px;
background-color: #38444d;
color: white;
border-radius: 25px;
}

footer p {
font-size: 12pt;
font-weight: bold;
font-family: monospace;
text-shadow: gray 1px 1px 2px;
}
}
</style>
Zum Vergrößern anklicken....
 

Anhänge

  • obo.PNG
    obo.PNG
    172,6 KB · Aufrufe: 3
Hier nochmal ein Update:

Wenn das nicht reicht poste mir mal dein HTML


CSS: 
ul {
list-style-type: none;
margin: 500;
padding: 100;
overflow: hidden;
background-color: #38444d;
text-align:center;
max-width:800px;
margin:auto;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: right-aligned;
padding: 15px 40px;
text-decoration: none;
}
 
Werbung:
Eine Sache hab ich allerdings doch noch .. :D
Bekomme ich den News (Article) Bereich irgendwie kleiner?
Also so, das links und rechts nicht noch so viel Luft ist?
<style>
body {
background-color:#81BEF7;
}
ul {
list-style-type: none;
margin: 500;
padding: 100;
overflow: hidden;
background-color: #38444d;
text-align:center;
max-width:800px;
margin: auto;
border-radius: 25px;
}

li {
display:inline-block;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: right-aligned;
padding: 15px 100px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #aeaeae;
min-width: 290px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}
section {
background-color: #81BEF7;
width: 50px;
float: center;
}

article {
border: gray 4px groove;
padding: 20px;
text-align: left;
overflow: auto;
margin-bottom: 25px;
margin-right: 30px;
}

article h2 {
font-size: 14pt;
color: white;
padding-bottom: 10px;
letter-spacing: 1px;
font-weight: bold;
}

article p {
font-size: 12pt;
padding-bottom: 10px;
color: black;
}

article blockquote {
font-weight: bold;
font-style: italic;
font-size: 10pt;
padding: 15px;
background-color: white;
border-radius: 10px;
color: black;
}
footer {
clear: both;
text-align: center;
padding: 5px;
background-color: #38444d;
color: white;
border-radius: 25px;
}

footer p {
font-size: 12pt;
font-weight: bold;
font-family: monospace;
text-shadow: gray 1px 1px 2px;
}
}
Zum Vergrößern anklicken....
 

Anhänge

  • Screenshot 2024-03-21 190427.png
    Screenshot 2024-03-21 190427.png
    59,8 KB · Aufrufe: 0
  • 1711044348583.png
    1711044348583.png
    59,8 KB · Aufrufe: 0
Werbung:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>1. FC Obotrit Bargeshagen e.V.</title>
<style>
body {
background-color:#81BEF7;
}
ul {
list-style-type: none;
margin: 500;
padding: 100;
overflow: hidden;
background-color: #38444d;
text-align:center;
max-width:800px;
margin: auto;
border-radius: 25px;
}

li {
display:inline-block;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: right-aligned;
padding: 15px 100px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #aeaeae;
min-width: 290px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}
section {
background-color: #81BEF7;
width: 50px;
float: center;
}

article {
border: gray 4px groove;
padding: 20px;
text-align: left;
overflow: auto;
margin-bottom: 25px;
margin-right: 30px;
}

article h2 {
font-size: 14pt;
color: white;
padding-bottom: 10px;
letter-spacing: 1px;
font-weight: bold;
}

article p {
font-size: 12pt;
padding-bottom: 10px;
color: black;
}

article blockquote {
font-weight: bold;
font-style: italic;
font-size: 10pt;
padding: 15px;
background-color: white;
border-radius: 10px;
color: black;
}
footer {
clear: both;
text-align: center;
padding: 5px;
background-color: #38444d;
color: white;
border-radius: 25px;
}

footer p {
font-size: 12pt;
font-weight: bold;
font-family: monospace;
text-shadow: gray 1px 1px 2px;
}
}
</style>
</head>
<center>
<img src="https://www.obotrit-bargeshagen.de/header.png" height="111" width="787">
<body>
<ul>
<li><a href="https://www.obotrit-bargeshagen.de/index.html">Home</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Mannschaften</a>
<div class="dropdown-content">
<a href="#">Herren</a>
<a href="#">Alte Herren</a>
<a href="#">A - Junioren</a>
<a href="#">B - Junioren</a>
<a href="#">C - Junioren</a>
<a href="#">E - Junioren</a>
<a href="#">F - Junioren</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Verein</a>
<div class="dropdown-content">
<a href="#">Der Vorstand</a>
<a href="#">Satzung</a>
<a href="#">Geschichte</a>
<a href="#">Sponsoren</a>
<a href="#">Archiv</a>
<a href="#">Downloads</a>
<a href="#">Datenschutz</a>
<a href="#">Impressum</a>
</div>
</li>
</ul>
<center>
<h1> <b>Unsere Sponsoren </b></h1>
<article>
<center><h3>Bürotechnik Lehmann</h3></center>
<p style="text-align: center">Das erfahrene Team berät Sie in allen Fragen rund um Bürotechnik und Bürosysteme. Ihre Fragen, Wünsche und Probleme werden fachkundig,
<br>schnell und zuverlässig bedient – so finden Sie die optimale Lösung für Ihr Büro.
<br>Sie analysieren, projektieren, entwickeln und programmieren für Sie Automatisierungslösungen und Sensortechnik-Anpassungen.
<br>
Sie betreuen die Bürotechnik sämtlicher Hersteller.
<br>
Sie bieten Lösungsvorschläge für Verbrauchsmaterialien aller Art vom Toner bis zum Endlospapier.
<br>
Ob Drucker, Kopierer oder Computer, sie binden Technik in Ihr Netzwerk ein, für eine einfache, unkomplizierte Bedienung nach Ihren Vorstellungen.</p>
<center><a href="https://buerotechnik-lehmann.de"><img src="https://obotrit-bargeshagen.de/Lehmann.png" alt="Lehmann Bürotechnik" border="0"></a></center>
</center>
</article>
<center>
<h3>Bürotechnik Lehmann</h3>
<p style="text-align: center">Das erfahrene Team berät Sie in allen Fragen rund um Bürotechnik und Bürosysteme. Ihre Fragen, Wünsche und Probleme werden fachkundig,
<br>schnell und zuverlässig bedient – so finden Sie die optimale Lösung für Ihr Büro.
<br>Sie analysieren, projektieren, entwickeln und programmieren für Sie Automatisierungslösungen und Sensortechnik-Anpassungen.
<br>
Sie betreuen die Bürotechnik sämtlicher Hersteller.
<br>
Sie bieten Lösungsvorschläge für Verbrauchsmaterialien aller Art vom Toner bis zum Endlospapier.
<br>
Ob Drucker, Kopierer oder Computer, sie binden Technik in Ihr Netzwerk ein, für eine einfache, unkomplizierte Bedienung nach Ihren Vorstellungen.</p>
<a href="https://buerotechnik-lehmann.de"><img src="https://obotrit-bargeshagen.de/Lehmann.png" alt="Lehmann Bürotechnik" border="0"></a>
</center>

<center>
<h3>Bürotechnik Lehmann</h3>
<p style="text-align: center">Das erfahrene Team berät Sie in allen Fragen rund um Bürotechnik und Bürosysteme. Ihre Fragen, Wünsche und Probleme werden fachkundig,
<br>schnell und zuverlässig bedient – so finden Sie die optimale Lösung für Ihr Büro.
<br>Sie analysieren, projektieren, entwickeln und programmieren für Sie Automatisierungslösungen und Sensortechnik-Anpassungen.
<br>
Sie betreuen die Bürotechnik sämtlicher Hersteller.
<br>
Sie bieten Lösungsvorschläge für Verbrauchsmaterialien aller Art vom Toner bis zum Endlospapier.
<br>
Ob Drucker, Kopierer oder Computer, sie binden Technik in Ihr Netzwerk ein, für eine einfache, unkomplizierte Bedienung nach Ihren Vorstellungen.</p>
<a href="https://buerotechnik-lehmann.de"><img src="https://obotrit-bargeshagen.de/Lehmann.png" alt="Lehmann Bürotechnik" border="0"></a>
</center>

<center>
<h3>Bürotechnik Lehmann</h3>
<p style="text-align: center">Das erfahrene Team berät Sie in allen Fragen rund um Bürotechnik und Bürosysteme. Ihre Fragen, Wünsche und Probleme werden fachkundig,
<br>schnell und zuverlässig bedient – so finden Sie die optimale Lösung für Ihr Büro.
<br>Sie analysieren, projektieren, entwickeln und programmieren für Sie Automatisierungslösungen und Sensortechnik-Anpassungen.
<br>
Sie betreuen die Bürotechnik sämtlicher Hersteller.
<br>
Sie bieten Lösungsvorschläge für Verbrauchsmaterialien aller Art vom Toner bis zum Endlospapier.
<br>
Ob Drucker, Kopierer oder Computer, sie binden Technik in Ihr Netzwerk ein, für eine einfache, unkomplizierte Bedienung nach Ihren Vorstellungen.</p>
<a href="https://buerotechnik-lehmann.de"><img src="https://obotrit-bargeshagen.de/Lehmann.png" alt="Lehmann Bürotechnik" border="0"></a>
</center>
<footer>
<div class="legal-content">
(c)2024 - 1. FC Obotrit Bargeshagen e.V. | <a href=impressum.html>Impressum</a> | <a href=datenschutz.html>Datenschutz</a>
</div>
</footer>
<center><a href="https://instagram.com/1fcobotrit"><img src="https://obotrit-bargeshagen.de/instagram.png" height="50" width"50" alt="Bild" /></a>
<a href="https://facebook.com/obotrit"><img src="https://obotrit-bargeshagen.de/facebook.png" height="50" width"50" alt="Bild"/></a></center><br><p></p>
<center><script language="JavaScript" src="https://www.besucherzaehler-kostenl...id=obotrit-bargeshagen.de&start=100&design=1c"></script></center>
</body>
</center>
</html>
 

CSS: 
article {
border: gray 4px groove;
padding: 20px;
text-align: left;
overflow: auto;
margin-bottom: 25px;
margin-right: 30px;
/* hier einfügen max-width */
max-width:800px;  
}

HTML: 
<img src="https://www.obotrit-bargeshagen.de/header.png" height="111" width="787">
<body>
Musst du tauschen das Bild liegt im Body!
 
Werbung:
Jetzt hab ich ein anderes Problem :S
Jetzt zentriert er mir nur die ersten 2 Article. Ab dem dritten rutscht es nach links, obowohl es 1:1 der gleiche code ist..
1711047202700.png
 
und wo hin?
article {
border: gray 4px groove;
padding: 20px;
text-align: left;
overflow: auto;
margin-bottom: 25px;
margin-right: 30px;
max-width:800px;
}

article h2 {
font-size: 14pt;
color: white;
padding-bottom: 10px;
letter-spacing: 1px;
font-weight: bold;
}

article p {
font-size: 12pt;
padding-bottom: 10px;
color: black;
}

article blockquote {
font-weight: bold;
font-style: italic;
font-size: 10pt;
padding: 15px;
background-color: white;
border-radius: 10px;
color: black;
Zum Vergrößern anklicken....
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben