HTML und CSS - Navigation → Sonderbereich

Simuletsplay

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:

Code

body{
	margin: 0;
	padding: 0;
	font-family: verdana;
	background-color: white;
	padding-bottom: 20px;
}
nav
{
	width: 1024px;
	border-bottom: 3px solid orange;
	background: lightblue;
	color: white;
	align-items: center;
	justify-content: center;
	float: center;
	padding-left: 20px;

}
ul
{
	width: 80%;
	margin: 0 auto;
	padding: 0;
}
ul li
{
    list-style: none;
    display: inline-block;
 }
ul li :hover
{
	background: orange;

}
ul li a
{
    color: #fff;
    text-decoration: none;
    display:block;
    padding:20px;
}
#sonderbutton
{
	background: #508cb1;
	list-style: none;
    display: inline-block;
}
{
	display: flex;
	align-items: center;
	justify-content: center;
}

Alles anzeigen

Meine Webseite: http://simuundquex.de

Ich bitte um hilfe...

Sailor

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.

djheke

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.

Simuletsplay

Vielen Dank für eure Antworten...

Simuletsplay

Aber wie kann ich es machen, dass in diesem Bereich noch ein Text steht? Also dort soll "Neu" oder "Wichtig" drinne stehen...

Sailor

HTML

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

Simuletsplay

Jetzt habe ich die Border entfernt, denn entweder bleibt diese weg, oder dieser Sonderbereich muss darüber

https://codepen.io/minimiBen/pen/BxPZJo

Sailor

Und was ist jetzt die Frage?

Simuletsplay

Naja... Ich will So, dass der Bereich die orange Linie überschreibt...

Wie auf dem Foto
http://abload.de/img/men-bearbeitetk0s5b.png

Sailor

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.

Tags