Menüsáv fixálása, és horizontálisan középre igazítása, hogyan? (HTML/CSS)
Kaptunk egy leckét, ami egy menüről szólt színezés stb (a Lorem Ipsumot én raktam hozzá)
És ez kész is lett de sajna bosszankodok vele vagy két napja, nemtudom megcsinálni a címben leírt igazításokat ://
Tudnátok segíteni? Div be beleraktam, de valahogy mégsem megy, marginnal is próbálkoztam.
CSS:
ul {
list-style:none;
display: flex;
justify-content: center;
}
li {
float: right;
border: 1px solid black;
background-color: #4da6ff; /* Világoskék */
width: 90px;
text-align: center;
}
li a {
display: block;
color: white; /* Betűszín */
padding: 12px;
text-decoration: none;
}
li a:hover {
background-color: #ffdb4d; /* Világossárga*/
}
.active {
background-color: #4CAF50;
}
.menu {
}
HTML:
<div class="menu">
<ul>
<li><a href="index.html" class="active">Kezdőlap</a></li>
<li><a href="other.html">Egyéb</a></li>
<li><a href="about.html">Magamról</a></li>
<li><a href="images.html">Képek</a></li>
</ul>
</div>
Köszi szépen
válasza:<style>
.menu ul {
list-style:none;
padding: 0;
margin: 0;
text-align: center;
}
.menu li {
border: 1px solid black;
background-color: #4da6ff; /* Világoskék */
width: 90px;
text-align: center;
display: inline-block;
}
.menu li a {
display: block;
color: white; /* Betûszín */
padding: 12px;
text-decoration: none;
}
.menu li a:hover {
background-color: #ffdb4d; /* Világossárga*/
}
.menu .active {
background-color: #4CAF50;
}
.menu {
display: block;
position: fixed;
width: 100%;
}
</style>
<div class="menu">
<ul>
<li><a href="index.html" class="active">Kezdõlap</a></li>
<li><a href="other.html">Egyéb</a></li>
<li><a href="about.html">Magamról</a></li>
<li><a href="images.html">Képek</a></li>
</ul>
</div>
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!