Vill du vara del av diskussionerna i forumet, ställa frågor eller hjälpa andra? Registrera dig här!

html / css Hur delar jag min nav bar och får en logga i mitten

Trädvy Permalänk
Medlem
Registrerad
Aug 2012

html / css Hur delar jag min nav bar och får en logga i mitten

Halloj allesammans, har precis börjat trixa med html och css som hobby och jag tycker att det är riktigt roligt men har kommit till mitt första problem! Har googlat runt lite och kollat lite på youtube men det blir inte riktigt rätt. Så jag undrar om någon vänlig själ kan ta sig en titt.

Problemet är att min navigation bar är delad i två och men att de sitter längst ut i ändarna till höger och vänster och jag vill ha de lite mer i mitten.
typ så Här vill jag att det ska se ut.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="https://fonts.googleapis.com/css2?family=Russo+One&display=sw..." rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <ul> <link rel="stylesheet" href="style.css"> <div class="main"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="About.html">ABOUT</a></li> <li><a href="partners.html">PARTNERS</a></li> <li class="push"><a href="teams.html">TEAMS</a></li> <li class="push"><a href="shop.html">SHOP</a></li> <li class="push"><a href="contact.html">CONTACT</a></li> </div> </ul> </nav> </body> </html>

css

* { margin: 0; padding: 0; } body { background-color: #171820 } nav { width: 100%; height: 130px; background-color: #0009 } nav ul { margin: auto; padding: 10px 0; list-style: none; text-align: right; } nav ul li { list-style: none; float: none; display: inline-block; line-height: 170px } nav ul li a { text-decoration: none; font-size: 24px; font-family: 'Russo One', sans-serif; color:white; padding: 0 15px; } .main ul li:nth-child(1){float: left;} .main ul li:nth-child(2){float: left;} .main ul li:nth-child(3){float: left}

Trädvy Permalänk
Medlem
Plats
På yogamatta
Registrerad
Jul 2011

Kika på flexbox så blir det säkert mycket lättare

https://css-tricks.com/snippets/css/a-guide-to-flexbox/