und3rtaker
Neues Mitglied
Hey,
ich hab seit kurzem wieder angefangen HTML zu lernen, ich konnte es früher hab allerdings fast alles vergessen und bin wieder sogesagt bei 0.
Ich hab versucht eine HTML Seite zum aufwärmen zu erstellen allerdings hab ich nun ein Problem.
der HTML und CSS Code bisher:
So klappt alles.
Allerdings ist das leider nicht flexibel.
margin-top ist dick markiert weil ich musste es so machen da die section nach unten verrutscht ist und ausserhalb div content war.
Wenn ich nun neue articles hinzufügen will, muss ich immer margin top ändern und somit für jeden article eine neue id erstellen.
clear: both; hab ich probiert, hat leider nichts gebracht.
wo ist der Fehler?
Vielen Dank
mfg
ich hab seit kurzem wieder angefangen HTML zu lernen, ich konnte es früher hab allerdings fast alles vergessen und bin wieder sogesagt bei 0.
Ich hab versucht eine HTML Seite zum aufwärmen zu erstellen allerdings hab ich nun ein Problem.
der HTML und CSS Code bisher:
Code:
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Testseite</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
<header>
<h1>Willkommen</h1>
</header>
<div id="content">
<nav>
<ul>
<a href="#"><li>Item1</li></a>
<a href="#"><li>Item2</li></a>
<a href="#"><li>Item3</li></a>
<a href="#"><li>Item4</li></a>
<a href="#"><li>Item5</li></a>
<a href="#"><li>Item6</li></a>
</ul>
</nav>
<section>
<article>
<h2>Dies ist eine Überschrift</h2>
<p>balablblabalbalbalblalblalblablalblalbab</p>
<p>balbalbalblalbalblalb</p>
</article>
</section>
</div>
</body>
</html>
Code:
*{
margin: 0;
padding: 0;
color: black;
}
body{
background: grey;
width: 900px;
margin: 0 auto;
}
header{
background: rgba(51,51,51,.4);
border-radius: 50px;
padding: 30px;
margin-top: 25px;
text-align:center;
}
header h1{
text-shadow:black 1px 1px 1px;
font-family: Arial, Helvetica, sans-serif;
font-style:oblique;
}
#content{
background: rgba(51,51,51,.4);
margin-top: 30px;
border-radius: 50px;
padding: 10px;
}
nav{
margin-left: 40px;
background: rgba(51,51,51,.6);
width: 180px;
border-radius: 30px;
padding: 10px;
cursor:default;
}
nav a{
text-decoration:none;
list-style-type:none;
font-weight:bold;
font-variant: small-caps;
cursor:default;
font-family:Tahoma, Geneva, sans-serif;
}
nav li{
padding: 5px;
border: black solid 2px;
border-radius: 30px;
width: 100px;
text-align: center;
margin: 15px auto 15px auto;
cursor:default;
}
nav li:hover,li:focus,li:active{
background: rgba(51,51,51,.4);
color: white;
cursor:default;
}
section{
width: 550px;
background: rgba(51,51,51,.6);
float:right;
[B]margin-top: -335px;[/B]
border-radius:30px;
margin-right:40px;
}
article{
margin-bottom: 10px;
}
article h2{
text-align:center;
font-style:italic;
padding: 2px;
border: black solid 2px;
border-radius: 30px;
width: 450px;
margin: 10px auto 10px auto;
}
article p{
font-family:Verdana, Geneva, sans-serif;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 5px;
}So klappt alles.
Allerdings ist das leider nicht flexibel.
margin-top ist dick markiert weil ich musste es so machen da die section nach unten verrutscht ist und ausserhalb div content war.
Wenn ich nun neue articles hinzufügen will, muss ich immer margin top ändern und somit für jeden article eine neue id erstellen.
clear: both; hab ich probiert, hat leider nichts gebracht.
wo ist der Fehler?
Vielen Dank
mfg
