Seltsames Verhalten von li Element in responsive Webseite

Hallo Ich bin ein Anfänger in der Codierung und lerne von mir selbst zu Hause. Ich bin auf ein Problem gestoßen, das ich einfach nicht lösen kann.Seltsames Verhalten von li Element in responsive Webseite

Zum einen ist hier die codepen Link für die Website:

http://codepen.io/sheahan/pen/ygKabM

Die Website arbeitet ziemlich nahtlos mit Ausnahme einer Frage.

Werfen Sie einen Blick auf die 'Artikel' Liste auf der linken Seite der Seite. Ich habe es so eingerichtet, dass sich bei einem Hover die Schriftfarbe, die Hintergrundfarbe und die Schriftgröße ändern (ich musste die Auffüllung ändern, um sicherzustellen, dass die Li die gleiche Größe behält). Dies funktioniert gut, wenn die Bildschirmgröße über 900px ist.

Jetzt habe ich die Seite reagiert und eine Medienabfrage eingestellt, um das Layout unter 900px zu ändern. Die Artikelliste wird an den Anfang der Seite mit einem neuen Format verschoben, das in einem Raster und nicht in einer einzelnen Spalte angeordnet ist. Das scheint gut zu funktionieren, bis auf den letzten Punkt rechts von jeder Reihe (Punkt 3 und Punkt 6). Immer wenn ich den Mauszeiger darüber bewege, schiebt er das nächste Element in der Reihe über zwei Felder nach rechts und lässt zwei leere Felder übrig. Einer der HTML-Editoren, die ich verwende, zeigt das Vorhandensein von zwei "Geister" li-Elementen, die nicht vorhanden sind.

Irgendwelche Vermutungen?

Ich bin auch offen für Kommentare oder Kritik der Website, begierig zu lernen.

Hier ist der Rohcode

<html> 
    <head> 

     <title>Food Supply Company</title> 

     <link href="FoodSupplyStyle.css" rel="stylesheet" text="text/css"> 

     <link href="https://fonts.googleapis.com/css?family=Volkhov:700|Alegreya:900" rel="stylesheet"> 

    </head> 

    <body> 

    <div class="container"> 

     <div class="title"> 
     <h1>Food Supply Company</h1> 
     </div> 

     <ul class="menunav"> 
      <ul class="Products"> 
      <li><a href="#" >Products</a> 
       <ul class="productsnav"> 
       <li><a href="#">Products</a></li> 
       <li><a href="#">Fruits</a></li> 
       <li><a href="#">Vegetables</a></li> 
       <li><a href="#">Dry Foods</a></li> 
       <li><a href="#">Spices</a></li> 
       </ul> 
      </li> 
      </ul> 
      <ul class="AboutUs"> 
      <li><a href="#" >About Us</a> 
       <ul class="aboutusnav"> 
       <li><a href="#">About Us</a></li> 
       <li><a href="#">History</a></li> 
       <li><a href="#">Mission</a></li> 
       <li><a href="#">Personel</a></li> 
      </ul> 
      </li> 
       </ul> 
       <ul class="Contact"> 
       <li><a href="#" >Contact</a></li> 
       </ul> 
     </ul> 

     <div class="ProductMain"> 
     <div class="sidebar"> 
      <div class="logoholder"> 
      <a href="#"><img src="https://c1.staticflickr.com/1/501/32498772122_9137841b84_o.png" alt="Company Logo Letters Only" height="130" width="130"></a> 
      </div> 
      <div class="sidebarlinks"> 
      <ul> 
       <li><a href="#">Item 1</a></li> 
       <li><a href="#">Item 2</a></li> 
       <li><a href="#">Item 3</a></li> 
       <li><a href="#">Item 4</a></li> 
       <li><a href="#">Item 5</a></li> 
       <li><a href="#">Item 6</a></li> 
       <li><a href="#">Item 7</a></li> 
       <li class="lastitem"><a href="#">Item 8</a></li> 
      </ul> 
      </div> 
     </div> 

     <div class="maincontent"> 
      <h1 class="productname">Item Name</h1> 

      <img src="http://pngimg.com/upload/mango_PNG9168.png" > 
      <div class="Attributes"> 
      <div class="Titles"> 
       <ul> 
       <li>Country:</li> 
       <li>Variety:</li> 
       <li>Season:</li> 
       </ul> 
      </div> 
      <div class="Names"> 
       <ul> 
       <li>Australia</li> 
       <li>Tastey</li> 
       <li>October-December</li> 
       </ul> 
      </div> 
      </div> 
      <div class="Description"> 
       You can add a description of the item. Mention the history, the taste and other attributes of the product. 
      </div> 
     </div> 


     </div> 
      <div class="foot"> 
       <div class="footer left">Website Designer<br>Happy Designs Inc.<br>Qatar</div> 
       <div class="footer center">&copy Food Supply Company</div> 
       <div class="footer right">P.O.Box 11111<br>Doha<br>Qatar</div> 
      </div> 
     </div> 




</body> 

</html>

CSS

*{ 
    Margin:0;  
    padding:0; 
    border-radius:5px; 
    font-family: 'Verdana',sans-serif; 
} 

body{ 
    background-image: url(https://c1.staticflickr.com/1/470/32498869432_082f3cf148_o.jpg); 
    background-size:  cover;    
    background-repeat: no-repeat; 
    background-position: center center; 
    background-attachment: fixed; 
} 

.container{ 
    width: 900px; 
    margin:auto; 
    position:relative; 
} 

h1{ 
    font-family: 'Alegreya:900','Verdana',sans-serif; 
    padding:20px 0 15px 0; 
    text-align: center; 
    font-weight: 900; 
    font-size:65px; 
    letter-spacing: 2px; 
    color:coral; 
    text-shadow: 3px 3px 1px grey; 
    Width: 100%; 
    margin:10px 0 20px 0; 

} 

a{ 
    text-decoration: none; 
    text-align: center; 
    font-family: 'verdana', sans-serif; 
} 

p{ 
    font-family: 'verdana', sans-serif; 
} 

li{ 
    list-style-type:none; 
} 

.menunav{ 
    margin:5px 0 30px 0; 
    overflow:auto; 
    font-size: 20px; 
} 

.menunav a{ 
    float:left; 
    margin:0px 3px 5px 3px; 
    width:293px; 
    padding: 5px 0px 5px 0px; 
    background-color: rgba(255,127,80,0.85); 
    color: bisque; 
    box-shadow: 2px 2px 2px 0px darkgray; 
} 

.menunav a:hover{ 
    background-color: bisque; 
    color: coral; 
} 

.productsnav, .aboutusnav{ 
    position:absolute; 
    top:134px; 
    background-color:rgba(0,0,0,0); 
    z-index: 1; 
} 

.aboutusnav{ 
    margin-left:298px; 
} 

.productsnav a, .aboutusnav a{ 
    width:293px; 
    display: none; 
    background-color:coral; 
} 

.Products:hover .productsnav a{ 
    display:block; 
} 

.AboutUs:hover .aboutusnav a{ 
    display:block; 
} 

.ProductMain{ 
    position:relative; 
    overflow: auto; 
    margin-bottom:18px; 
    padding-bottom:5px; 
} 

.sidebar{ 
    float:left;; 
    width:250px; 
    margin-left:3px; 
} 

.sidebar a{ 
    font-size: 16px; 
    display: block; 
    padding: 15px 0px; 
    background-color: rgba(255, 228, 196,0.85); 
    color:coral; 
    font-weight: bold; 
    margin-bottom:5px; 
    box-shadow: 2px 2px 2px 0px darkgray; 
} 

.sidebar a:hover{ 
    color:lightgray; 
    background-color:coral; 
    font-size:20px; 
    padding:13px 0px; 
} 


.sidebar .logoholder a{ 
    background-color:rgba(0,0,0,0); 
    box-shadow: none; 
} 

.sidebar .logoholder a:hover{ 
    padding:15px 0px 13px 0px; 
} 

.logoholder img{ 
    background-color: rgba(0,0,0,0); 
} 

.lastitem a{ 
    margin-bottom: 0px; 
} 

.maincontent { 
    background-color:rgba(244,164,96,0.8); 
    position:absolute; 
    left: 270px; 
    height: 99.2%; 
    width: 600px; 
    box-shadow: 2px 2px 7px 2px darkgray; 
    box-sizing:border-box; 

} 

.productname{ 
    font-size:35px; 
    margin:0; 
    padding: 20px 0 15px 0; 
    background-color: rgba(0,0,0,0); 
    color: bisque; 
    border-bottom-style:double; 
    border-bottom-width: 4px; 
    border-bottom-left-radius: 0px; 
    border-bottom-right-radius: 0px; 
    border-bottom-color:bisque; 
    box-shadow: none; 
} 

.maincontent img{ 
    float:left; 
    width:250px; 
    height:240px; 
    background-color:rgba(0,0,0,0); 
    margin: 20px -5px 0px 30px; 
} 

.Attributes{ 
    position:relative; 
    right:-8px; 
    top:35px; 
    overflow:auto; 
    height:auto; 
    padding: 0px 5px; 
    background-color:rgba(255, 228, 196,0.5) ; 
    border-style:inset; 
    border-width: 3px; 
    margin-bottom:90px; 
    width:270px; 
} 


.Titles, .Names{ 
    display: inline-block; 
    line-height:3.7em; 

} 


.Titles li, .Names li{ 
    border-radius: 0; 
    font-weight: bold; 
    color:chocolate; 
} 

.Titles li{ 
    font-size:17px; 
    text-align: center; 
} 

.Names li{ 
    padding-left:5px; 
} 

.Description{ 
    width:500px; 
    height:180px; 
    overflow:auto; 
    margin:auto; 
    padding: 10px 15px ; 
    background-color:rgba(255, 228, 196,0.5); 
    border-style:inset; 
    border-width: 3px; 
    color:chocolate; 
    line-height:1.5em; 
} 

.foot{ 

    width: 860px; 
    height:70px; 
    background-color: rgba(255, 228, 196,0.9); 
    margin: 10px 0px; 
    box-shadow: 2px 2px 2px 0px darkgray; 
    padding: 10px 20px 20px 20px; 
    color:coral; 
} 

.footer{ 
    display:inline-block; 
    width:33%; 
    background-color: rgba(0,0,0,0); 
    height:100%; 
    padding:10px; 
    box-sizing:border-box; 
    margin:-3px; 
    font-size: 15px; 
    line-height:1.5em; 
} 

.right{ 
    text-align: right; 
} 

.center{ 
    text-align:center; 
} 

@media screen and (max-width:920px){ 

    .container{ 
    width: 600px; 
    margin:auto; 
    position:relative; 
    } 

    .menunav a{ 
    float:left; 
    width:32%; 
    } 


    .productsnav{ 
    position:absolute; 
    top: 213px; 
    } 

    .aboutusnav{ 
    position:absolute; 
    top: 213px; 
    margin-left:198px; 
    } 

    .productsnav a, .aboutusnav a{ 
    width:190px; 
    } 

    .ProductMain{ 
    position: relative; 
    height:800px;; 
    margin-bottom:18px; 
    margin-right: 0px; 
    padding-bottom:5px; 
    width:600px; 

    } 

    .logoholder{ 
     display:none; 
    } 

    .sidebar{ 
     width:99%; 
     position:relative; 
     float:none; 
     display:inline-block; 
     padding-left:10px; 
    } 

    .sidebar a{ 
     width:32%; 
     float:left; 
     margin-right:5px; 
    } 

    .maincontent 
    { 
     position:static; 
     margin-top:15px; 
     height:600px; 
     width:99%; 
    } 

    .foot{ 
     width:100%; 
     padding:0; 
     height:90px; 
    } 

    .footer{ 
     margin-top:0; 
    } 

    .left{ 
     margin-left: 13px; 
    } 

    .center{ 
     width:30%; 
    } 

    .sidebar a:hover{ 
    color:lightgray; 
    background-color:coral; 
    font-size:24px; 
    padding:10px 0;  
    } 

}

Quelle

2017-02-01 shea

Und noch eine Frage, ich kann die Google Fonts, die ich in meiner HTML-Datei verlinkt habe, nicht auf die Seite laden. Irgendeine Hilfe? – shea

Ich habe keine Probleme wie die, die du beschreibst, nichts bricht für mich. – Sergi

Ein kürzester Weg, um das Problem zu beheben ist font-size:23px; einzustellen für .sidebar a:hover

.sidebar a:hover{ 
    color:lightgray; 
    background-color:coral; 
    font-size:23px; 
    padding:10px 0;  
}

codepen

Quelle

2017-02-01 19:49:38 Banzay

Seltsames Verhalten von li Element in responsive Webseite

Antwort

Verwandte Themen