Ergebnis 1 bis 10 von 10

Thema: HTML und CSS - Navigation → Sonderbereich

  1. #1
    Teeny
    Registriert seit
    07.04.2018
    Beiträge
    22
    Danke
    2
    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...
    Geändert von Simuletsplay (09.05.2018 um 14:03 Uhr)

  2. #2
    Samurai
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    207
    Danke
    0
    Bekam 49 mal "Danke" in 49 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
    475
    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
    Teeny
    Themenstarter

    Registriert seit
    07.04.2018
    Beiträge
    22
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: HTML und CSS - Navigation → Sonderbereich

    Vielen Dank für eure Antworten...

  5. #5
    Teeny
    Themenstarter

    Registriert seit
    07.04.2018
    Beiträge
    22
    Danke
    2
    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
    Samurai
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    207
    Danke
    0
    Bekam 49 mal "Danke" in 49 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
    Teeny
    Themenstarter

    Registriert seit
    07.04.2018
    Beiträge
    22
    Danke
    2
    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
    Samurai
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    207
    Danke
    0
    Bekam 49 mal "Danke" in 49 Postings

    Standard AW: HTML und CSS - Navigation → Sonderbereich

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

  9. #9
    Teeny
    Themenstarter

    Registriert seit
    07.04.2018
    Beiträge
    22
    Danke
    2
    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
    Samurai
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    207
    Danke
    0
    Bekam 49 mal "Danke" in 49 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
  •