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

Breite 25% funktioniert nicht

SpeedyX

Mitglied
Hi Leute,

wollte einfach mal eine Menüleiste erstellen, die sich über die gesamte Bildschirmbreite erstreckt.
Dazu habe ich die width auf initial gesetzt, was funktioniert hat.
Jetzt habe ich derzeit auf der Webseite 4 Kategorien in der Menüleiste.
Wenn ich die Breite der Kategorien auf 25% setze, hat jede Kategorie 424px, obwohl die komplette Breite 1920px beträgt.
Sezte ich die Breite manuell auf 480px erstreckt es sich genau über den ganzen Bildschirm, nicht zu kurz nicht zu weit, da 480px * 4 = 1920px sind.
Padding, Margin und Border sind 0px.

HTML:
HTML:
<ul id="menu">
   <li>
     <a href="#" title="Kategorie 1">Kategorie 1</a>
   </li>
   <li>
     <a href="#" title="Kategorie 2">Kategorie 2</a>
   </li>
   <li>
     <a href="#" title="Kategorie 3">Kategorie 3</a>
   </li>
   <li>
     <a href="#" title="Kategorie 4">Kategorie 4</a>
   </li>
</ul>

CSS:
CSS:
* {
    padding: 0px;
    margin: 0px;
}

#menu {
    text-align: center;
    width: initial;
    height: 10%;
    position: relative;
}

#menu li {
    list-style-type: none;
    background-color: #003399;
    width: 25%;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    height: 100px;
}

#menu li a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    display: block;
}

#menu li:hover {
    background-color: #0033FF;
}

#menu li a:hover {
    color: #FF0000;
}

Weiß jemand vielleicht woran das liegen könnte, würde es nämlich gerne mit 25% machen, da nicht jeder einen 16:9 Bildschirm mit 1920px hat.

Beste Grüße

jkhsjdhjs
 
Werbung:
Hallo,

ohne Link zur kompletten Seite kann man nur raten - das macht weder Spaß noch ist es Sinn des Forums.

Insgesamt scheint deine Vorgehensweise aber veraltet - aktuell ist für solches Layout Flexbox das Mittel der Wahl.

Gruss

MrMurphy
 
Hi,

erstmal Danke für die schnelle Antwort.

Von Flexbox habe ich schonmal gehört.
Hat jemand ne gute Dokumentation oder ein Tutorial dazu?

Die Seite gibt's unter http://moeller.mx

Anscheinend passen sich aber alle Boxen der Box mit dem längsten Text an. Also wird width: 25% ignoriert.
 
Werbung:
Hallo,

das Problem ist das "display: table". Dadurch verhält sich die Liste wie eine HTML-Tabelle. Und das wiederum ist etwas gewöhnungsbedürftig.

Um dein Problem zu lösen solltest du dem CSS des ul-Elements die Eigenschaft: "display: table;" hinzufügen und "width: initial;" in "width: 100%;" ändern.

Gruss

MrMurphy
 
Habe jetzt noch ne andere Frage, hat immer noch mit der gleichen Seite zu tun, deshalb wollte ich keinen neuen Thread eröffnen.

Und zwar habe ich es jetzt auf Flexbox anstatt Tabelle umgestellt (ich hoffe mal ich habs richtig gemacht) doch nun ist leider im letzten Abschnitt der Menüleiste der Text nicht horizontal zentriert, sondern link ausgerichtet. In den anderen 3 Abschnitten ist er aber horizontal zentriert. Vertikal ist er in allen 4 zentriert.
Der Link zur Seite ist immer noch http://moeller.mx

Hier der CSS Code:
CSS:
@font-face {
   font-family: 'Hemi Head';
   src: local('Hemi Head Regular'), local('Hemi Head Rg'), local('HemiHeadRg-BoldItalic'), local('HemiHeadRg'), url(/fonts/Hemi_Head_Regular.woff) format('woff');
}

* {
   padding: 0px;
   margin: 0px;
}

#menu {
   width: 100%;
   height: 10%;
   position: relative;
   display: flex;
   box-shadow: 0px 0px 1em 0.2em black;
}

#menu a {
   width: 25%;
   display: flex;
   height: 100px;
   border-right: 1px solid black;
   border-left: 1px solid black;
   background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
   color: #000000;
   text-decoration: none;
   font-family: "Hemi Head", Arial, Helvetica, sans-serif;
   font-size: 27px;
   align-items: center;
   justify-content: center;
}

#menu a:hover {
   background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
   font-weight: bold;
}

#menu a:active {
   font-size: 25px;
   color: blue;
}

HTML:
HTML:
<div id="menu">
   <a href="/schiffe-versenken" title="C++ Schiffe Versenken">
     C++ Schiffe Versenken
   </a>
   <a href="/WakeOnLAN" title="WakeOnLAN">
     WakeOnLAN
   </a>
   <a href="/hcp" title="Home Control Panel">
     Home Control Panel
   </a>
   <a href="/Unsymmetrischer_Instrumentenverstärker" title="Berechnung eines unsymmetrischen Instrumentenverstärkers">
     Unsymmetrischer Instrumentenverstärker
   </a>
</div>
Scheinbar wird es nicht mehr zentriert, wenn es 2 Zeilen sind.
Hat jemand nen Rat? Ich wette, ich hab das mit der Flexbox einfach nicht richtig verstanden und hab eine Definition falsch angewendet.
 
Werbung:
Hallo

ich hab das mit der Flexbox einfach nicht richtig verstanden und hab eine Definition falsch angewendet.

Leider fehlen dir noch mehr Grundlagen. Zum einen die Vorgaben, wie HTML und CSS korrekt angewendet werden, zum anderen, welche Vorgehensweisen zwar nicht vorgeschrieben sind, aber angewendet werden sollten, um Probleme zu vermeiden, die sogenannten "Best Practices".

1. Du solltest in HTML5 die Navigation in das nav-Element einschließen.

2. Du solltest für die Navigation das ul-Listenelement oder das p-Element verwenden.

3. Flexbox ist für Block-Elemente gedacht, a ist jedoch ein Inline-Element. Wenn du das ul-Listenelement oder das p-Element anwendest hast du gleichzeitig die erforderlichen Block-Elemente.

4. Lasse JavaScript weg bis das Layout steht und funktioniert.

5. Verzichte auf height, es gibt in der Regel bessere Lösungen

6. Ein Block-Element benötigt kein width: 100%

7. Bei Flexbox wird posititon: relative in der Regel nicht benötigt

8. Die Einheit px für die Font-Größe ist veraltet, genau so % und em, aktuell ist rem

9. In der Navigation macht das title-tag keinen Sinn, sondern macht nur den Quelltext unübersichtlicher

10. Inline-Elemente (wie das a-Element) sollten sich niemals direkt in Containern (wie div, main, nav, article, section, aside, header, footer) befinden.

Das ist das war mir auf die schnelle so auffällt, da ich los muss.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Ok, vielen Dank!! Ich werde mir das mal genauer anschauen.

EDIT: Habe das jetzt so überarbeitet, nach deinen Hinweisen.
Eine Alternative zu height: hab ich jetzt nicht gefunden, was wäre denn eine bessere Lösung?
Und zu der Nummer 4: JavaScript habe ich doch bis jetzt gar nicht verwendet. Habe JQuery nur schon mal eingebunden, da ich später damit arbeiten wollte, aber wie du gesagt hast, erst wenn das Layout steht.

Hier aktueller HTML Code:
HTML:
<nav id="menu">
   <p><a href="/schiffe-versenken">
     C++ Schiffe Versenken
   </a></p>
   <p><a href="/WakeOnLAN">
     WakeOnLAN
   </a></p>
   <p><a href="/hcp">
     Home Control Panel
   </a></p>
   <p><a href="/Unsymmetrischer_Instrumentenverstärker">
     Unsymmetrischer Instrumentenverstärker
   </a></p>
</nav>

und der CSS
CSS:
@font-face {
   font-family: 'Hemi Head';
   src: local('Hemi Head Regular'), local('Hemi Head Rg'), local('HemiHeadRg-BoldItalic'), local('HemiHeadRg'), url(/fonts/Hemi_Head_Regular.woff) format('woff');
}

* {
   padding: 0px;
   margin: 0px;
}

#menu {
   display: flex;
   box-shadow: 0px 0px 1em 0.2em black;
}

#menu p {
   width: 25%;
   display: flex;
   height: 100px;
   border-right: 1px solid black;
   border-left: 1px solid black;
   background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
   color: #000000;
   text-decoration: none;
   font-family: "Hemi Head", Arial, Helvetica, sans-serif;
   font-size: 1.6875rem;
   text-align: center;
   align-items: center;
   justify-content: center;
}

#menu p:hover {
   background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
   font-weight: bold;
}

#menu p:active {
   font-size: 1.5625rem;
}

#menu p a {
   text-decoration: none;
   color: #000000;
}

ist es auch möglich, dass das ganze p Element als link fungiert?
 
Zuletzt bearbeitet:
Mal ne Frage.
Wieso verwendest du überhaupt ein <p>-Tag?

Normalerweise mach ich ul > li > a, aber ob du nun dem Trottel oben glauben schenkst, dass man das ohne ul-Tags macht, ist deine Sache.
Hint: Ich arbeite seit Jahren als Webdeveloper und bin nie von ul > li > a weg, selbst CMS Systeme wie Contao/TypoLight verwenden dasselbe.

Nun zur Sache:
Habe dein CSS geringfügig modifiziert und die <p>-Tags entfernt:
CSS:
#menu {
    display: flex;
    box-shadow: 0px 0px 1em 0.2em black;
}

#menu a {
    width: 25%;
    display: flex;
    height: 100px;
    border-right: 1px solid black;
    border-left: 1px solid black;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
    color: #000000;
    text-decoration: none;
    font-family: "Hemi Head", Arial, Helvetica, sans-serif;
    font-size: 1.6875rem;
    text-align: center;
    align-items: center;
    justify-content: center;
}

#menu a:hover {
    background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
    font-weight: bold;
}

#menu a:active {
    font-size: 1.5625rem;
}

#menu a {
    text-decoration: none;
    color: #000000;
}

Und hier dein HTML:
HTML:
<nav id="menu">
    <a href="/schiffe-versenken">
        C++ Schiffe Versenken
    </a>
    <a href="/WakeOnLAN">
        WakeOnLAN
    </a>
    <a href="/hcp">
        Home Control Panel
    </a>
    <a href="/Unsymmetrischer_Instrumentenverstärker">
        Unsymmetrischer Instrumentenverstärker
    </a>
</nav>

Nachtrag:
Ich rate dir von Flexbox ab, wenn du auch für den IE alles passend haben willst. Flex ist erst ab Version 10 (und das mit -ms- Schreibweise) verfügbar:
http://caniuse.com/#feat=flexbox
 
Werbung:
Ok, aber er hat ja nicht gesagt, dass ich das p Element verwenden soll. Er hat mir die Wahl gelassen zwischen ul und p.
Habe mich dann für p entschieden.

Wenn du das so sagst, dann werde ich das auch ohne ul/li und p verwenden, ist ja quasi das, was ich vorher schonmal hatte.
Danke!

EDIT: Habe mir das grade nochmal durchgelesen, er hat nie gesagt, dass ich das ohne ul verwenden sollte, im Gegenteil. Da ihr ja anscheinend beide die Lösung mit ul und li bevorzugt, werde ich das dementsprechend bearbeiten.

Wie sähe denn die Lösung mit ul und li aus, so dass ich li einen Hyperlink zuordnen kann?
 
So, nun gebe ich neien Senf auch noch dazu.
HTML:
<!doctype html>
<html>
<head>
<title>Lenovo</title>
<meta charset="UTF-8">
<style>
* {
margin:0;
padding:0;
box-sizing:border-box;
}

#menu {
display:table;
width:100%;
}


#menu UL , #menu LI  {
list-style:none;
}
#menu LI {
display:table-cell;
width:25%;
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
vertical-align:middle;
border-right:1px solid #000;
}

#menu LI:nth-child(4) {
border:none;
}

#menu LI A  {
padding:10px;
color:#000;
text-decoration:none;
text-align:center;
display:block;
}

#menu LI:hover {
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(119,119,119,1) 100%);
font-weight: bold;
margin-bottom:-1px;
}


</style>
</head>
<body>
<nav id="menu">
<ul>
<li><a href="#"> C++ Schiffe Versenken</a></li>
<li><a href="#"> WakeOnLAN</a></li>
<li><a href="#"> Home Control Panel</a></li>
<li><a href="#">Unsymmetrischer Instrumentenverstärker</a></li>
</ul>
</nav>
</body>
</html>
 
Zuletzt bearbeitet:
Danke, funktioniert einwandfrei. Jedoch immer noch meine Frage:

Wie kann ich jetzt dem ganzen Block (also dem li Element) einen Hyperlink zuordnen? So, wie es jetzt ist, kann ich nur zum Link gelangen in dem ich mit der Maus über das a Element fahre. Geht das nicht auch mit dem ganzen li Element?
 
Werbung:
Danke, funktioniert einwandfrei. Jedoch immer noch meine Frage:

Wie kann ich jetzt dem ganzen Block (also dem li Element) einen Hyperlink zuordnen? So, wie es jetzt ist, kann ich nur zum Link gelangen in dem ich mit der Maus über das a Element fahre. Geht das nicht auch mit dem ganzen li Element?

Der "trick" ist es, das a Element so groß wie das li Element zu machen. In @djheke s post sollte dies bereits der fall sein.
 
Zurück
Oben