Hallo zusammen,
ich bin gerade dabei mir selbständig html und css beizubringen. Also versuche ich gerade erste Experimente.
Ich möchte ein ganz simples Website Layout aufbauen und mithilfe von divs und befehlen display: inline zu positionieren. Hier der Code dazu:
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Meine erste Website</title>
<style>
#header {
width:90%;
Height:30px;
background-color: #00FF80;
}
#website{
width: 90%;
}
#menuehorizontal{
width: 980px;
height: 45px;
background-color:white;
display: inline;
}
#menuevertical{
width: 20%;
height: 400px;
background-color:indianred;
display: block;
}
#content {
width:70%;
height:400px;
background-color:#00FF80;
margin-left: 300px;
display: inline;
}
#contenttext{
font:arial;
width:450px;
height:100px;
margin-left:50px;
padding-top: 50px;
font-family: Helvetica;
font-size: 11px;
display: inline-block;
}
#cta{
width:150px;
height:40px;
background-color:white;
margin-left:50px;
font-family: Helvetica;
Text-Align: center;
display: inline-block;
}
#footer{
width:980px;
height:200px;
}
ul {
list-style-type: none;
}
li {
display: inline;
padding: 18px;
font-family: Helvetica
}
</style>
</head>
<body>
<div id="website">
<div id="header" style="border:1px solid black;">
</div>
<div id="menuehorizontal" style="border:1px solid black;">
<img src="C:/Users/lisa-/Desktop/logo_textmarke.png" height="40px" style="float:left; margin-left:50px;">
<ul style="display:inline">
<li>Über uns</li>
<li>Unsere Leistungen</li>
<li>Unser Portfolio</li>
</ul>
</div>
<div id="menuevertical">
<ul>
<li>Über uns</li>
<li>Leistungen</li>
<li>Referenzen</li>
<li>Impressum</li>
</ul>
</div>
<div id="content" style="border:1px solid black;">
<div id="contenttext" style="border:1px solid black;">
<p>Vielen Dank für Ihr Interesse! Hier finden Sie <span style="color:orange;font-weight:bold">Inspiration</span> und Anregungen für Ihren Innovationspool. Möchten Sie mehr erfahren treten Sie gerne mit uns in Kontakt.</p>
</div>
<div id="cta" style="border:1px solid black;">
<p>Jetzt kontaktieren!</p>
</div>
</div>
<div id="footer" style="border:1px solid black;">
<p>Das ist der Footer</p>
</div>
</div>
</body>
</html>In der Praxis sieht es im Browser so aus:
html-seminar.de/woltlab/attachment/2137/
Was mache ich falsch, dass das weiße Rechteck (div=content) mit schwarzer Border und dem Text nicht bündig beginnt wie das vertikale Menü (div=verticalmenue)?
Wenn ich es richtig verstanden habe, muss ich für die Positionierung von divs nebeneinander "nur" den Befehl display: inline nutzen, oder?
Viele Grüße,
Lisa