Guten Tag miteinander,
Ich bin seit heute bei diesem Forum dabei und hoffe, dass ich nichts falsch mache und ihr mir eventuell bei meinem Problem weiterhelfen könnt.
Ich bin momentan eine neue Webseite von Grund auf am bauen. Bis jetzt hat dies eigentlich recht gut geklappt, doch nun habe ich leider ein kleineres Problem.
Es geht um folgendes, ich würde am liebsten alles schön zentral auf der Webseite darstellen lassen, damit man die Webseite grösser und kleiner machen kann und es bleibt alles immer am selben Platz. Nun beim Header und Footer hat dies auch ohne Probleme geklappt, dass Problem ist nun mit der Navigation. Denn die hätte ich gerne zwischen Header und Footer zentral aber auf der linken Seite. Siehe Oder im Anhang http://www26.zippyshare.com/v/WAyYnSjp/file.html
Wenn ich mit dem Befehl margin-left Pronzet angebe bringe ich es zwar hin, dass es auf der gleichen höhe ist, aber wenn mann dann die Seite vergrössert oder verkleinert verschiebt sich das ganze.
Deshalb nun meine Frage, kann man dies irgendwie fix platzieren wie beim Header oder Footer und wenn ja wie müsste man dies dann machen?
Hier mein Quellcode:
<!DOCTYPE html>
<html>
<head>
<style>
#header {
border: 2px solid #ffffff;
padding: 14px 200px;
background: #CED8F6;
width: 600px;
border-radius: 25px;
margin-left:auto;
margin-right:auto;
font-family:Calibri;
font-size: xx-large;
color: black;
text-align: center;
}
#nav {
border: 2px solid #ffffff;
background: #CED8F6;
line-height:30px;
height:600px;
width:180px;
padding:5px;
border-radius: 25px;
margin-left: 24%;
margin-top: auto;
font-family:Calibri;
color: black;
text-align: center;
}
#footer {
border: 2px solid #ffffff;
padding: 5px 200px;
background: #CED8F6;
width: 600px;
border-radius: 25px;
margin-left:auto;
margin-right:auto;
font-family:Calibri;
color: black;
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<h1>Mola Mondfisch</h1>
</div>
<div id="nav">
Home<br>
History<br>
About us<br>Links<br>Contact<br>
</div>
<div id="footer">
Copyright ©</div>
</body>
</html>
Ich hoffe ihr könnt mir helfen. Vielen Dank im Voraus.
Gruss Jeri
- - - Aktualisiert - - -
Ich habe es jetzt folgendermassen gelöst:
<div style="width:900px;margin:0px auto;text-align:left;">Dann funktioniert es nur möchte ich den Abstand zwischen den einzelnen Elementen noch etwas grösser machen, dass bin ich momentan aber noch am nachlesen. Hat da jemand vielleicht ein Tipp oder eine Idee, wie man das lösen könnte? Und was haltet ihr von meiner Lösung?
Greez