HTML und CSS - Navigation → Sonderbereich

    Hi Leute... Wie kann man den Roten Bereich erstellen? (→ Siehe Bild!)

    http://abload.de/img/men-bearbeitetk0s5b.png


    Ich benutze folgende Codes:

    Code
    <div id="menü-div"><nav>           
 <ul>                
<li><a href="index.php">Start</a>                
<li><a href="news.php">News</a>               
<li><a href="clans.php">Clans</a>               
<li><a href="range.php">Ränge</a>                
<li><a href="games.php">Games</a>                
<li id="sonderbutton"><a href="bewerben.php">Bewerben</a></li>            
</ul>        </nav>        </div>


    Und CSS:

    Meine Webseite: http://simuundquex.de


    Ich bitte um hilfe...

    Einmal editiert, zuletzt von Simuletsplay (9. Mai 2018 um 14:03)

    Der rote Balken ist nicht so das große Problem - den kann zB mit ::after realisieren:

    HTML
    #sonderbutton::after {
    content: " ";
    width: 120px;
    height: 10px;
    background-color: #f00;
    position: absolute;
    top: 64px;
}


    Problematisch wird es, wenn die Displaybreite kleiner wird, denn bei etwa 710px bricht die Menüzeile (zum ersten mal) um und dann passt der 'top: 64px' nicht mehr.
    Man müsste also entweder bei kleineren Bildschirmen den roten Balken ausblenden...

    HTML
    @media screen and (max-width: 709px) {
  #sonderbutton::after {
     display: none;
  }  
}

    oder den Abstand zum oberen Rand vergrößern...

    HTML
    @media screen and (max-width: 709px) {
  #sonderbutton::after {
     top: 124px;
  }  
}

    Für noch kleinere Bildschirme (Handy & Co) müsste es dann analog gemacht werden, damit es passt.

    if(!sleep)

    {$sheep++;}

    Oder etwas einfacher. Du könntest ja den Bewerbungsling ein border-bottom: geben. Ist zwar dann nicht mehr unter dem gelben Balken, aber ist doch egal.

    Code
    ul li:last-child a {
 background: #508cb1;
 border-bottom:10px solid red;
 padding-bottom:10px;
}

    Ist ein Ersatz für Deine ID #sonderbutton.

    2 Mal editiert, zuletzt von djheke (9. Mai 2018 um 16:35)

    HTML
    #sonderbutton::after {
    content: "NEU";
    width: 120px;
    height: 1.5em;
    background-color: #f00;
    position: absolute;
    top: 64px;
    text-align: center;
    color: #000;
}

    if(!sleep)

    {$sheep++;}

    Du kannst den roten Kasten beliebig positionieren, in dem Code, den du hast, musst du dazu nur den Wert bei 'top' anpassen.
    Sollte sich der rote Kasten in der neuen Position unter die orange Linie schieben, dann kannst du ihn mit 'z-index' wieder in den Vordergrund holen.

    if(!sleep)

    {$sheep++;}