Toggle Menü // navi liste auf center bringen ohne dass bei @media unter 500px was ändert.

Serdar67 · 13. September 2017

Hallo.

ich bräuchte dringend HILFE , ich komme nicht mehr weiter..

also ich möchte Navi liste in die mitte (center) verschieben aber ohne dass sich bei @media was ändert

habe viele möglichkeiten getestet aber ohne erfolg

also die breite ist 940px;

body{

margin:0 auto;

max-width: 940px;!!!!!!!!!!!!

min-width: 720px;

}

aber die leiste überschreitet die grenze warum ?:(

Qeultext:

<!DOCTYPE html>

<html>

<head>

<title>Toggle Menü ohne JavaScript (CSS:target)</title>

<style>

body{

margin:0 auto;

max-width: 940px;

min-width: 720px;

}

* {

margin: 0;

padding: 0;

font-family: Arial, sans-serif;

}

header {

background-color: yellow;

background-color: gray;

width: 100%;

float: left;

border-bottom: 1px solid black;

}

#bereichlogo {

color: white;

background-color: limegreen;

display: block;

padding: 0.5em;

text-decoration: none;

float: left;

}

#bereichlogo {

width: auto;

}

#steuerung li {

list-style: none;

float: left;

}

#steuerung a {

display: block;

height: 100%;

width: 100%;

padding: 0.5em;

text-decoration: none;

color: white;

background-color: black;

}

.menue-button {

display: none;

}

#steuerung {

float: right;

}

#steuerung a:hover {

color: black;

background: orange;

}

/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */

/* Menü-Button oben rechts einblenden bei kleiner als 600px */

@media only screen and (max-width:600px) {

.menue-button {

display: block;

}

.menue-button {

background-color: darkblue;

display: block;

position: absolute;

right: 0;

top: 0;

padding: 0.5em;

color: white;

cursor: pointer;

text-decoration: none;

}

#bereichlogo {

width: 100%;

}

#steuerung {

float: left;

width: 100%;

display: none;

}

#steuerung li {

width: 100%;

border-bottom: 2px solid silver;

}

.menue-button:hover {

color: black;

background: orange;

}

/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */

#nav-menue:target #steuerung {

display: block;

}

/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */

#nav-menue:target .menue-button-beschr-open {

display: none ;

}

/* Allgemein Anweisungen */

section {

padding: 0.5em;

float: left;

width: 100%;

}

h1, p {

margin: 0.5em 0 0 0;

}

</style>

</head>

<body>

<a href="#" id="bereichlogo">HTML-Seminar.de</a>

<ul>

<li><a href="#">Startseite</a></li>

<li><a href="#">HTML lernen</a></li>

<li><a href="#">Beispiele</a></li>

<li><a href="#">Kontakt</a></li>

<li><a href="#">Impressum</a></li>

</ul>

</nav>

<a class="menue-button menue-button-beschr-close"

href="#nav-menue-zu">MENÜ zu</a>

<a class="menue-button menue-button-beschr-open"

href="#nav-menue">MENÜ auf</a>

</header>

<h1>Toggle Menü ohne JavaScript (CSS:target)</h1>

<h2>Steuerung für mobile Geräte</h2>

<p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt

Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt

Inhalt.</p>

<p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt

Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt

Inhalt.</p>

</section>

</body>

</html>

ist von: https://www.html-seminar.de/to…omatische-umschaltung.htm

Huhu · 14. September 2017

Ich hoffe, ich habe richtig verstanden, was du willst...

Entferne einfach das float:right; bei #steuerung.

Serdar67 · 14. September 2017

Hi,

Jaa so in etwa aber nur wenn ich float:right;

weg mache dann kommt es auf der Linke Seite

aber ich möchte die Leiste auf center bringen oder das soll auf Rechts bleiben aber die grenze von 940px also die breite darf es nicht überschreiten,

ich möchte das gerne ohne ( position ) machen

danke für die hilfe

Huhu · 14. September 2017

Dann mache das doch wie beim body - width vergeben und dann margin auf auto.

So halt:

#steuerung {

width: 300px;

margin: auto;

}

Serdar67 · 14. September 2017

Heey danke
Is in der Mitte vielen Dank.

ein problem gelöst

nun zweites Problem

die leiste ist über width:940; obwohl body{ width:940;} is

hier das Problem.

JR Cologne · 14. September 2017

Füge zu dem * Selektor mal box-sizing: border-box hinzu.

Dein Problem könnte nämlich auf padding zurückzuführen sein, das die Box vergrößert. Wenn du die oben genannte Eigenschaft setzt, wird das padding nicht mehr so gerendert, dass es die Größe der Box verändert.

Huhu · 14. September 2017

JR Cologne schrieb:

Füge zu dem * Selektor mal box-sizing: border-box hinzu.

Dein Problem könnte nämlich auf padding zurückzuführen sein, das die Box vergrößert. Wenn du die oben genannte Eigenschaft setzt, wird das padding nicht mehr so gerendert, dass es die Größe der Box verändert.

Am Besten auch noch alle width und padding/margin mal auskommentieren und konzentriert neu vergeben.

Serdar67 · 14. September 2017

Danke JR Cologne es hat geklappt :).

aber finde das eigentliche Problem leider nicht

wenn ich beim ( #steuerung a ) den padding: umänder dann klappt es aber dann habe ich die gewünschte große von 0.5em nicht :I

JR Cologne · 15. September 2017

Jo, das musst du dann noch bisschen anpassen...

Tags