Ich habe eine einfache Website, die ich von Grund auf neu gemacht habe. Ich habe mit dem Layout meines Kopfes verwirrt:Positionierungselemente in einem div
- H1 Titel
- Textzeile
- Logo
- Menü (Codierung von w3school)
Diese vier sind in meinen div-Header. Ich würde gerne in der Lage sein, sie zu positionieren, wo immer ich möchte. Das Problem, das ich habe, ist, dass ich nicht sicher bin, welche Codierung dafür verwendet werden soll (Rand, Position: relativ oder absolut, Padding, oben :, rechts: usw.).
Ich habe alle Arten von Kombinationen ausprobiert, aber es scheint, dass sie nie positionieren, wo ich sie haben will und sie gegenseitig die Position versauen: Das Menü verliert volle Breite, das Logo kann ich nicht schön mit dem gleichen Abstand zwischen oben bekommen und rechts von header div, die H1 und tag scheinen nicht auf die Pixel zu reagieren, die ich gesetzt habe, und so weiter.
Könnte sich jemand bitte die Zeit nehmen und meinen Code anschauen und mit einem Vorschlag kommen, wie man dieses Layout stabil macht?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
body {
\t background-color: #F8F8F8;
\t }
#page {
\t width: 900px;
\t margin: 30px auto;
\t background-color: #FFFFFF;
\t }
#header {
\t height: 377px;
\t width: 100%;
\t background-image: url(images/banner.jpg);
\t background-repeat: no-repeat;
\t background-position: 0px 0px;
\t }
#header a {
\t color: black;
\t text-decoration: none;
\t }
\t
#header ul {
\t list-style-type: none;
\t margin-top: 0;
\t padding: 0;
\t overflow: hidden;
\t background-color: #3399FF;
\t position: relative;
\t top: 264px;
\t }
\t
#header li {
\t float: left;
\t }
\t
#header li a {
\t display: inline-block;
\t color: white;
\t text-align: center;
\t padding: 14px 16px;
\t text-decoration: none;
\t }
#header li a.active {
background-color: gray;
}
#header li a:hover:not(.active){
\t background-color: #3366CC;
\t }
.p1 {
\t font-family: Consolas, monaco, monospace;
font-size: 20px;
\t position: relative;
top: 28px;
\t left: 50px;
\t } \t \t
\t
.p2 {
font-family: Consolas, monaco, monospace;
\t font-size: 16px;
position: relative;
top: 5px;
\t left: 200px;
\t }
.logo {
\t float: right;
\t position: relative;
\t top: 8px;
\t right: 8px;
\t }
\t
#content {
\t position: relative;
\t top: 12px;
\t left: 10px;
\t }
\t
#footer {
\t font-size: 14px;
\t padding-top: 12px;
\t padding-bottom: 12px;
\t text-align: center;
\t border-top: #D3D3D3 0.5px solid;
\t }
</style>
</head>
<body>
<div id="page">
<div id="header">
<img class="logo" src="images/logo-d.png">
<span class="p1"><a href="http://www.finasteride-kopen.nl"><h1>This is my H1 Title</h1></a></span>
<span class="p2">"This is going to be my tag under H1"</span>
<ul>
<li><a class="active" href="">Link menu</a></li>
<li><a href="">Link menu 2</a></li>
<li><a href="">Link menu 3</a></li>
<li><a href="">Link menu 4</a></li>
<li><a href="">Link menu 5</a></li>
<li><a href="">Link menu 6</a></li>
</ul>
</div>
<div id="content">
<h1>H1 Title of the page content<h1>
<p></p>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<p></p>
</div>
<div id="footer">
The footer of the page
</div>
</div>
</div>
</body>
</html>
Dies ist kein Vorlage. Ich habe es selbst gemacht (daher die Probleme). Dieser Code sieht mir am vertrautesten aus und ich werde es versuchen. Aber ich habe Positionsstil verwendet und es schien die Position des anderen Inhalts im Div-Header zu beeinflussen. – Stryker79