Html Menüleiste Website

Question

Hey Ich möchte eine Website mit einer Frontpage genau wie diese: http://foreword.io/.

Ich brauche Hilfe mit der horizontalen Liste, um es genau wie die auf foreword.io zu erhalten.

Ich möchte den gelben Bereich bis zu den Seiten gestreckt werden. Wenn ich den Mauszeiger über einen Link halte, markiert er nur den oberen Teil des Quadrats, also möchte ich das ganze Quadrat für jeden Link markieren.

Bitte helfen und danke im Voraus.

Hier ist mein Code:

body { 
 
    font-family: Times New Roman; 
 
} 
 

 
.h1 { 
 
    position: absolute; 
 
    height: 200px; 
 
    top: 90px; 
 
    width: 1585px; 
 
    text-align: center; 
 
    font-size: 350%; 
 
    font-family: Times New Roman, Georgia; 
 
} 
 

 
u { 
 
    text-decoration: none; 
 
    border-bottom: 5px solid black; 
 
} 
 

 
.fakta { 
 
    position: absolute; 
 
    height: 190px; 
 
    top: 340px; 
 
    width: 700px; 
 
    left: 500px; 
 
    font-size: 50px; 
 
} 
 

 
ul { 
 
    position: absolute; 
 
    height: 100px; 
 
    top: 600px; 
 
    left: 100px; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: yellow; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 20px; 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
} 
 

 
li a:hover { 
 
    background-color: white; 
 
}

<div class="h1"> 
 
    <h1> 
 
    <u>DatabaseNavn</u> 
 
    </h1> 
 
</div> 
 
<div class="fakta"> 
 
    <p>Database med ansatte <br> og avdelinger</p> 
 
</div> 
 
<ul> 
 
    <li><a href="side1.html">Side1</a></li> 
 
    <li><a href="side2.html">Side2</a></li> 
 
    <li><a href="side3.html">Side3</a></li> 
 
    <li><a href="side4.html">Side4</a></li> 
 
    <li><a href="side5.html">Side5</a></li> 
 
</ul>

Answer 1

du die Option Höhe nur tun können, das Hinzufügen zu "li a" in der CSS wie folgt:

li a { 
    display: block; 
    color: black; 
    height: 100px; 
    text-align: center; 
    padding: 20px; 
    text-decoration: none; 
    font-size:20px; 
} 

es wird Stellen Sie die Höhe des Quadrats so ein, dass der gesamte gelbe Teil zu weiß wechselt.

im Fall der gelben Balken Größe und Artikelpositionen:

die Breite des ul auf 100% gesetzt, so dass es den gesamten verfügbaren Speicherplatz auf dem Browser wird auch die „links“ und schließlich hinzufügen 'entfernen Position: relativ ',' links: 20% 'und' Breite: 10%; zum li Abschnitt.

li { 
    position: relative; 
    left: 20%; 
    width: 10%; 
    float: left; 
} 

QUELLE: Mein Kopf :-P

Answer 2

Weave:http://kodeweave.sourceforge.net/editor/#2b1da7103aeec07f8b53045481c63c77

Für etwas so einfach Sie verwenden position absolute an Orten, wo es nicht erforderlich, die mit margin ersetzt werden könnte. So ist Ihr Code ziemlich WET (vor allem mit mir auf einem Tablet im Moment) Also habe ich eine simple mockup das ist DRY und kann für RWD auch arbeiten, wenn Sie media-queries verwenden.

Ich habe viel von der unnötigen Positionierung entfernt. Durch das Setzen des ul Tags auf text-align center konnte ich die Anker zentrieren, indem ich das li Tag anzeigte, das als inline-block angezeigt werden sollte. Dann füllte ich die Breite mit width: 100%; margin: 0; padding: 0;

Wie dieses Schnipsel hilft.

body { 
 
    font-family: Times New Roman; 
 
} 
 

 
.h1 { 
 
    width: 100%; 
 
    text-align: center; 
 
    font-size: 350%; 
 
    font-family: Times New Roman, Georgia; 
 
} 
 

 
u { 
 
    text-decoration: none; 
 
    border-bottom: 5px solid black; 
 
} 
 

 
.fakta { 
 
    width: 100%; 
 
    font-size: 50px; 
 
    text-align: center; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: yellow; 
 
    text-align: center; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 20px; 
 
    text-decoration: none; 
 
    font-size: 20px; 
 
} 
 

 
li a:hover { 
 
    background-color: white; 
 
}

<div class="h1"> 
 
    <h1> 
 
    <u>DatabaseNavn</u> 
 
    </h1> 
 
</div> 
 
<div class="fakta"> 
 
    <p>Database med ansatte og avdelinger</p> 
 
</div> 
 
<ul> 
 
    <li><a href="side1.html">Side1</a></li> 
 
    <li><a href="side2.html">Side2</a></li> 
 
    <li><a href="side3.html">Side3</a></li> 
 
    <li><a href="side4.html">Side4</a></li> 
 
    <li><a href="side5.html">Side5</a></li> 
 
</ul>

Answer 3

Verwenden display: inline-block; statt display: block; und Sie erhalten eine horizontale Liste erhalten.