Ergebnis 1 bis 2 von 2

Thema: link geht über ganze Zeiel, soll aber nur 3% einnehmen

  1. #1
    HTML Newbie
    Registriert seit
    13.11.2018
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard link geht über ganze Zeiel, soll aber nur 3% einnehmen

    Hallo, ich habe ein dropdown Menü erstellt, wobei ein Bild als Start ist. Das Ganze ist ein Button mit der witdth: 3%, ich musste allerdings für das Bild angeben, dass es 100% ist und somit nicht mehr als die 3% des divs einnimmt.
    HTML:
    HTML-Code:
    <div class="dropdown"> 
    <button class="dropbtn">
    <img src="PIC/MenuSymbol.png"/>
    </button>    
      <div class="dropdown-content">    
        <a href="#">Link 1</a>  
        <a href="#">Link 2</a>   
        <a href="#">Link 3</a>    
      </div>   
     </div>

    CSS:
    HTML-Code:
    .dropbtn {   
    color: none;    
    font-size: 16px;   
    border: none;    
    max-width: 3%;
    }
    
    .dropbtn img{  
    display: block;  
    max-width: 100%;
    }
    
    /* The container <div> - needed to position the dropdown content */
    .dropdown {   
     position: fixed;
    }
    
    /* Dropdown Content (Hidden by Default) */
    .dropdown-content {   
    display: none;    
    position: absolute;    
    background-color: none;    
    min-width: 160px;    
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);    
    z-index: 1;
    }
    
    /* Links inside the dropdown */
    .dropdown-content a {    
    color: black;    
    padding: 12px 16px;    
    text-decoration: none;    
    display: block;
    }
    
    /* Change color of dropdown links on hover */
    .dropdown-content a:hover {
    background-color: #ddd;
    }
    
    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
    display: block;
    }
    
    /* Change the background color of the dropdown button when the dropdown content is shown */
    .dropdown:hover .dropbtn {
    background-color: none;
    }
    Wie mache ich es nun, dass der Link, also der Button, nur die 3% einnimmt und nicht die ganze Zeile?
    Viele Dank!
    Geändert von UnknoenInnocent (13.11.2018 um 14:53 Uhr)

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

    Standard AW: link geht über ganze Zeiel, soll aber nur 3% einnehmen

    1. 'color: none;' und 'background-color: none;' gibt es nicht - wenn du keine Farbe willst, lass es weg oder schreibe statt none -> transparent.
    2. Definiere für .dropdown den Wert 'width: 3%;'
    3. Definiere für .dropbtn den Wert 'width: 100%;'
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

Ähnliche Themen

  1. Bild über ganze Homepage ( Hintergrund ) aber nicht strecken
    Von lukas.meier im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 24.06.2014, 12:09
  2. jcarousellite soll auf der ganze seite und unterseiten ungestört weiterlaufen
    Von lydiabusch im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 26.10.2010, 23:02
  3. CSS Link geht bei IE aber nicht bei Firefox
    Von Perry im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 05.06.2008, 01:23
  4. Logo über die ganze Seite
    Von Highligenschein im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 7
    Letzter Beitrag: 07.09.2006, 17:21
  5. Link geht in FF aber nicht im IE
    Von rezeptionist im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 08.08.2005, 17:31

Stichworte

Berechtigungen

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