Servuuus,
ich hab mir ne kleine Seite zusammengebastelt, ich habe auch irgendwie drauf gehofft, dass sie responsive ist, da ich jetzt keine wirklich absoluten positionierungen verwendet habe. Allerdings, wenn ich einen größen Bildschirm für die Seite nehme, ist alles irgendwo, aber nicht da wo es sein soll. Ich hoffe mir kann jemand helfen und mir sagen wo mein Fehler liegt.
ich hab mir ne kleine Seite zusammengebastelt, ich habe auch irgendwie drauf gehofft, dass sie responsive ist, da ich jetzt keine wirklich absoluten positionierungen verwendet habe. Allerdings, wenn ich einen größen Bildschirm für die Seite nehme, ist alles irgendwo, aber nicht da wo es sein soll. Ich hoffe mir kann jemand helfen und mir sagen wo mein Fehler liegt.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>HTML</title>
<meta charset="UTF-8">
<meta name="HTML-Site" content="Andi">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="index.css" rel="Stylesheet" type="text/css"/>
<link href="Logo.svg.png" rel="Icon" type="image/x-icon"/>
</head>
<body>
<header>
<div id="head">
<div id="Überschrift">HTML</div>
<div id="logo"><img src="Logo.svg.png" alt="Bild"></div>
</div>
</header>
<nav>
<div id="NavPos">
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="Einfuehrung.html">Einführung</a></li>
<li><a href="#">Lektionen</a>
<ul>
<li><a href="html.html">HTML</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="java.html">JaveScript</a></li>
</ul>
</li>
<li><a href="Kontakt.html">Kontakt</a></li>
<li><a href="Review.html">Review</a></li>
</ul>
</div>
</nav>
<div id="content">
<div id="trennung1"><span id="text">Test<h2><i></i></h2> Text
<br>Text...
<br>
<br>
Text...</span></div>
<div id="textbox">
<br><br>
<h3><!--Hier steht absofort der interessante Text --></h3>
</div>
</div>
<div id="preview"></div>
<footer>
<div id="footer">©</div>
</footer>
</body>
</html>
CSS:
@import "dropdown.css";
#head{
position: relative;
height: 12em;
left: 0;
right: 0;
top: 0;
}
#NavPos{
position: relative;
border-bottom: 2px solid darkgrey;
top: 0em;
height: 2.3em;
left: 0;
right: 0;
}
#logo{
width: 15em;
position: relative;
left: 62em;
margin-top: 2em;
}
img{
max-width: 100%;
height: auto;
}
#Überschrift{
position: absolute;
color: black;
margin-left: 380px;
margin-top: 75px;
font-size: 50px;
font-family: consolas;
text-align: center;
}
#footer{
border: 1px solid black;
position: relative;
top: em;
left: 0;
right: 0;
height: 1em;
text-align: right;
font-family: Times-New-Roman;
font-size: 12px;
}
#content{
left: 0;
right: 0;
height: 37em;
}
#trennung1{
border-right: 1px solid black;
height: 37em;
right: 58%;
left: 0;
position: absolute;
}
#textbox{
border: 1px solid black;
position: relative;
left: 45em;
top: 6em;
width: 30em;
height: 23em;
border-radius: 5px;
color: green;
}
#text{
position: absolute;
top: 2em;
left: 1em;
width: 30em;
height: 34em;
font-family: consolas;
font-size: 14px;
text-align: center;
}
Code:
#NavPos ul{
list-style-type: none;
margin-left: 210px;
padding: 0;
}
#NavPos > ul > li{
float: left;
}
#NavPos > ul > li > ul{
display: none;
}
#NavPos > ul a{
display: block;
white-space: nowrap;
padding: 10px;
text-decoration: none;
color: black;
font-size: 24px;
font-family: consolas;
}
#NavPos ul > li > ul > li a{
color: black;
margin-left: -190px;
width: 100px;
}
#NavPos > ul{
overflow: hidden;
padding: 0 10px 0 10px;
}
#NavPos > ul > li:hover > ul{
display: block;
position: absolute;
width: 120px;
}
#NavPos > ul > li > ul > li{
position: relative;
}