Sophie: Navigation + Bild

Beitrag lesen

SELF-Forum

Navigation + Bild

Sophie
– Informationen zu den Bewertungsregeln

Hallo an alle,

ich habe bisschen gebastelt, bin ich auf dem richtigen Weg?

* {
	box-sizing: border-box;
}

a {
	text-decoration: none;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

body, html{
    font-size: 100%;
    font-family: "Helvetica", sans-serif;
}
body,html{
    margin:0;
    padding: 0;
}

.container {
	max-width: 75.000em;
	margin: 0 auto;
}

nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    
nav ul{
    display: flex;
    align-items: center;
}

nav div:first-child h1{
    padding: 0;
    margin:0;
}

nav div:first-child img{
    max-height: 100%;
}

nav ul li{
    flex: 1 0 auto;
    position: relative;
}

nav ul li a{
    padding:1.2em 1em;
}

Und mein HTML

<!DOCTYPE html>
<html lang="de">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta name="robots" content="index,follow">
	<meta name="description" content="">
	<meta name="keywords" content="">

	<link rel="stylesheet" type="text/css" href="themes/herbst/css/style.css">

	<title>Startseite - Example.com</title>
</head>
<body>

<header>
	<div class="container">
		<nav>
			<div>
	       <h1><a href="#"><img src="http://placehold.it/100x40" alt="logo"></a></h1>
	    </div>
			<ul>
				<li><a href="#">Startseite</a></li>
				<li><a href="#">Leistungen</a></li>
				<li><a href="#">Wir über uns</a></li>
				<li><a href="#">Magazin</a></li>
				<li><a href="#">Kontakt</a></li>
			</ul>
		</nav>
	</div>
</header>

</body>
</html>

Auch gibt es wieder ein Online Beispiel https://codepen.io/anon/pen/GvrvQM

Beitrag melden
–
Informationen zu den Bewertungsregeln