Menuleiste vertical links bündig mit header und anderes

Lythis · 7 September 2012

Hallo an alle, ist sicher ne alberne Frage, aber ich darf dass da ich neu bin ^^.

also, folgendes Problem:
ich möchte eine Seite machen, wo alles mittig Zentriert wird mit 1024px breite.

drunter kommt dann links die Navigation, mittig die Section Box und rechts nochmal ne art infobox.

dazu möchte ich hinter all dem ein Hintergrund Bild, welches aber nicht das Background der Seite ist. also quasi alle Elemente nochmals auf eine Art Brett setzen vorm Hintergrund.

mit der Zentrierung der Seite hat es schonmal geklappt.
auch die Navigation befindet sich gefloatet links von der Section.
Allerdings läuft diese nicht bündig mit dem header sondern verschiebt sich zunehmends je mehr man die browser verbreitert.

wie müsste der Quellcode in etwa aussehen um dieses problem zu beheben. habe schon gedacht die kompletten inhalte der Seite nochmal in eine Extra box zu setzen, wodurch man ja auch das problem mit dem "2" hintergrundbild lösen könnte.
aber so ganz will es nicht klappen. hier mal ein beispiel: IrfanView - Official Homepage - one of the most popular viewers worldwide

bodil · 7 September 2012

Wie sieht dein Quellcode denn bisher aus? Deine Frage

wie müsste der Quellcode in etwa aussehen um dieses problem zu beheben

zielt auf einen Neubau ab, aber vielleicht ist dein Code ja mit ein paar Handgriffen zu retten?

Lythis · 8 September 2012

hier mal mein HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<title>Titel der Seite</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>

<header>
<h1>Überschrift</h1>
<h2>Zusatz</h2>
</header>

<body>
<nav>
<ul>
<a href="http://www.youtube.de"> <li>Platzhalter</li></a>
<a href="http://www.youtube.de"> <li>Platzhalter</li></a>
<a href="http://www.youtube.de"> <li>Platzhalter</li></a>
<a href="http://www.youtube.de"> <li>Platzhalter</li></a>
<a href="http://www.youtube.de"> <li>Platzhalter</li></a>
<a href="http://www.youtube.de"> <li>Platzhalter</li></a>
<a href="http://www.youtube.de"> <li>Platzhalter</li></a>
</ul>
</nav>

<section>

<article>
<h2>News</h2>
</article>

</section>

<aside>
<h2>Infoticker</h2>
</aside>

</div>

</body>

</html>

und Hier den CSS Ausschnitt:
* {
padding: 0px;
margin: 0px;
font-family: Arial, Verdana, sans-serif;
text-align: center;
}
header{
background: #808080;
background-position: center ;
margin-top: 20px;
width: 1024px;
height: 110px;
margin-left: 1px;
margin-bottom: 10px;
}
nav{
float: left;
}
nav ul {
list-style-type: none;
background-color: #93B0FF;
width: 150px;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 10px;
}
nav li {
font-family:Verdana;
display: inline;
background-color: #800000;
padding-left:10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 3px;
margin-bottom: 10px;
cursor: default;
}
body{
margin-left: 10px;
background-color: #808000;
background: left 30px;
}

Menuleiste vertical links bündig mit header und anderes

Lythis

Mitglied

bodil

Mitglied

Lythis

Mitglied

Neueste Beiträge