Ergebnis 1 bis 10 von 10

Thema: HTML und CSS - Navigation → Sonderbereich

  1. #1
    Azubi(ne)
    Registriert seit
    07.04.2018
    Beiträge
    61
    Danke
    4
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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:
    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;
    }
    Meine Webseite: http://simuundquex.de



    Ich bitte um hilfe...
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Simuletsplay (09.05.2018 um 14:03 Uhr)

  2. #2
    Meister(in)
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    265
    Danke
    0
    Bekam 56 mal "Danke" in 56 Postings

    Standard AW: HTML und CSS - Navigation → Sonderbereich

    Der rote Balken ist nicht so das große Problem - den kann zB mit ::after realisieren:
    HTML-Code:
    #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-Code:
    @media screen and (max-width: 709px) {
      #sonderbutton::after {
         display: none;
      }  
    }
    oder den Abstand zum oberen Rand vergrößern...

    HTML-Code:
    @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.
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

  3. #3
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    476
    Danke
    0
    Bekam 52 mal "Danke" in 52 Postings

    Standard AW: HTML und CSS - Navigation → Sonderbereich

    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.
    Geändert von djheke (09.05.2018 um 16:35 Uhr)

  4. #4
    Azubi(ne)
    Themenstarter

    Registriert seit
    07.04.2018
    Beiträge
    61
    Danke
    4
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: HTML und CSS - Navigation → Sonderbereich

    Vielen Dank für eure Antworten...

  5. #5
    Azubi(ne)
    Themenstarter

    Registriert seit
    07.04.2018
    Beiträge
    61
    Danke
    4
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: HTML und CSS - Navigation → Sonderbereich

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

  6. #6
    Meister(in)
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    265
    Danke
    0
    Bekam 56 mal "Danke" in 56 Postings

    Standard AW: HTML und CSS - Navigation → Sonderbereich

    HTML-Code:
    #sonderbutton::after {
        content: "NEU";
        width: 120px;
        height: 1.5em;
        background-color: #f00;
        position: absolute;
        top: 64px;
        text-align: center;
        color: #000;
    }
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

  7. #7
    Azubi(ne)
    Themenstarter

    Registriert seit
    07.04.2018
    Beiträge
    61
    Danke
    4
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: HTML und CSS - Navigation → Sonderbereich

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

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

  8. #8
    Meister(in)
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    265
    Danke
    0
    Bekam 56 mal "Danke" in 56 Postings

    Standard AW: HTML und CSS - Navigation → Sonderbereich

    Und was ist jetzt die Frage?
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

  9. #9
    Azubi(ne)
    Themenstarter

    Registriert seit
    07.04.2018
    Beiträge
    61
    Danke
    4
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: HTML und CSS - Navigation → Sonderbereich

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

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

  10. #10
    Meister(in)
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    265
    Danke
    0
    Bekam 56 mal "Danke" in 56 Postings

    Standard AW: HTML und CSS - Navigation → Sonderbereich

    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.
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

Ähnliche Themen

  1. HTML und CSS - Navigation
    Von Simuletsplay im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 13.04.2018, 04:27
  2. Hilfe beim Planen einer Navigation mit CSS + HTML!
    Von Xandy Lee im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 04.08.2017, 00:17
  3. html-Navigation mit auftauchendem Bild
    Von archaja im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 13.11.2006, 12:52
  4. HTML Problem - Navigation !!
    Von Masterfummel im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 15.07.2005, 13:54
  5. rechte navigation welche html befehle?
    Von dinosaurs im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 05.05.2005, 19:16

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •