Moin,
werde zukünftig immer mal wieder ein paar Fragen hier in die Runde werfen, da ich denke, dass es sich nicht lohnt für jede kleine Frage ein neues Thema zu öffnen.
PS: Ich bin gerade dabei HTML & CSS zu lernen, erwartet also nicht zu viel von mir. :p
Fangen wir gleich mal an.
1. Ich möchte der ganzen Seite eine content-breite von 1000px geben. Wie stelle ich das am besten an? Wenn ich im body einen div mit 100px erstelle, dann werden die bereits erstellten elemente (nav, div#content-1 etc.) auch auf 1000px abgeschnitte, die hintergrund-farbe dieser elemente soll allerdings über die volle breite laufen - nur der Inhalt, bei nav das <img> und <ul> sollten sich an der 100px breite anordnen.
2. Ich möchte das <img> im <nav> vertikal zentrieren, krieg ich aber irgendwie nicht hin. Habe es mit line-height 80px und vertical-align middle in nav versucht.
Vielen Dank für eure Hilfe. :handsdown:
werde zukünftig immer mal wieder ein paar Fragen hier in die Runde werfen, da ich denke, dass es sich nicht lohnt für jede kleine Frage ein neues Thema zu öffnen.
PS: Ich bin gerade dabei HTML & CSS zu lernen, erwartet also nicht zu viel von mir. :p
Fangen wir gleich mal an.
1. Ich möchte der ganzen Seite eine content-breite von 1000px geben. Wie stelle ich das am besten an? Wenn ich im body einen div mit 100px erstelle, dann werden die bereits erstellten elemente (nav, div#content-1 etc.) auch auf 1000px abgeschnitte, die hintergrund-farbe dieser elemente soll allerdings über die volle breite laufen - nur der Inhalt, bei nav das <img> und <ul> sollten sich an der 100px breite anordnen.
2. Ich möchte das <img> im <nav> vertikal zentrieren, krieg ich aber irgendwie nicht hin. Habe es mit line-height 80px und vertical-align middle in nav versucht.
Vielen Dank für eure Hilfe. :handsdown:
HTML Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <link href="main.css" rel="stylesheet"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> <title>Nova²</title> </head> <body> <nav> <img src="img/logo.png" width="132px" height="60px" alt="logo"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Pages</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <div id="content-1"> <p>test</p> </div> <div id="content-2"> <p>test</p> </div> <div id="content-3"> <p>test</p> </div> </body> </html>
Code:
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
body {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 1em;
color: #333333;
}
nav {
height: 80px;
background-color: #ffffff;
}
nav ul {
float: right;
}
nav ul li{
display: inline-block;
line-height: 80px;
padding-left: 30px;
}
a:link {
text-decoration: none;
color: #333333;
}
nav ul li a:link {
text-transform: uppercase;
font-weight: 700;
font-size: 0.8em;
}
nav ul li a:visited {
color: #333333;
}
nav ul li a:hover, a:active {
color: #3498db;
}
#content-1 {
height: 500px;
background-color: #3498db;
}
#content-2 {
height: 150px;
background-color: #ffffff;
}
#content-3 {
height: 550px;
background-color: #252525;
}
