Real.
CSS Element Anordnung Fehlerhaft [UPDATE]
Ich bin mit meinem Latein am Ende. Zugegeben ich mache im normalfall ned viel mit Code und bin daher kein Pro, aber eig dachte ic hdas ich ne simple Portfolio hinbekommen mmüsste (hat ja schon n paar mal geklappt).
Nun zum Problem(en):
1. Es klappt bei mir einfach die Anordnung nicht. Ich will das das Logo (welches im mom noch durch Navi verdeckt wird - man sieht oben n kleinen Schnippsel) ganz oben liegt. Dann die Navigation und dann erst den Content. Allerdings ist genau andersrum egal was ich mache :S
2. Die Navi. Woher nimtm die diesen Streifen, den sie im BG hat und warum ist dieser so lang wenn ich die Navi selbst auf 396px festgelegt habe.
Als Referenz wie es eig aussehn sollte, könnt ihr hier gugen:
Hier ist der Code:
und hier:
Hoffe ihr könnnt mir hier helfen. 
mfg Real.
Ich bin mit meinem Latein am Ende. Zugegeben ich mache im normalfall ned viel mit Code und bin daher kein Pro, aber eig dachte ic hdas ich ne simple Portfolio hinbekommen mmüsste (hat ja schon n paar mal geklappt).
Nun zum Problem(en):
1. Es klappt bei mir einfach die Anordnung nicht. Ich will das das Logo (welches im mom noch durch Navi verdeckt wird - man sieht oben n kleinen Schnippsel) ganz oben liegt. Dann die Navigation und dann erst den Content. Allerdings ist genau andersrum egal was ich mache :S
2. Die Navi. Woher nimtm die diesen Streifen, den sie im BG hat und warum ist dieser so lang wenn ich die Navi selbst auf 396px festgelegt habe.
Als Referenz wie es eig aussehn sollte, könnt ihr hier gugen:
Hier ist der Code:
Code:
/* ALLGEMEIN */
* {
background-image: url(images/bg.jpg);
}
#layout {
width: 1103px;
height: 819px;
background-image: url(images/bg_2.jpg);
background-position: 0%;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
position: relative; top: -7px;
}
/* CONTENT */
#content {
width: 900px;
height: 502px;
background-color: #FFFFFF;
background-image: url(images/bg_content.jpg);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
position: relative; top: 65px;
}
/* NAVI */
#navi_top {
height: 31px;
display: block;
position: relative; top: 65px;
}
#navi_top ul {
list-style-type: none;
width: 396px;
margin: 0;
padding: 0;
float: right;
}
#navi_top ul li {
display: block;
float: right;
margin: 0;
padding: 0;
height: 31px;
}
.spacer {
border: 0px;
width: 100%;
height: 100%;
}
#button_web {
width: 99px;
background-image: url(images/button_web.png);
background-repeat: no-repeat;
}
#button_web:hover {
background-image: url(images/button_web_2.jpg);
}
#button_print {
width: 99px;
background-image: url(images/button_print.png);
background-repeat: no-repeat;
}
#button_print:hover {
background-image: url(images/button_print_2.jpg);
}
#button_logo {
width: 99px;
background-image: url(images/button_logo.png);
background-repeat: no-repeat;
}
#button_logo:hover {
background-image: url(images/button_logo_2.jpg);
}
#button_misc {
width: 99px;
background-image: url(images/button_misc.png);
background-repeat: no-repeat;
}
#button_misc:hover {
background-image: url(images/button_misc_2.jpg);
}
/* LOGO */
#head {
width: 144px;
height: 83px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
position: relative; top: 55px; left: 110px;
float: left;
}
Code:
<body>
<div id="layout">
<div id="head">
</div>
<div id="navi_top">
<ul>
<li id="button_web"><a href="web.html"><img class="spacer" src="http://www.psd-tutorials.de/modules/Forum/images/spacer.gif"/></a></li>
<li id="button_print"><a href="print.html"><img class="spacer" src="http://www.psd-tutorials.de/modules/Forum/images/spacer.gif"/></a></li>
<li id="button_logo"><a href="logo.html"><img class="spacer" src="http://www.psd-tutorials.de/modules/Forum/images/spacer.gif"/></a></li>
<li id="button_misc"><a href="misc.html"><img class="spacer" src="http://www.psd-tutorials.de/modules/Forum/images/spacer.gif"/></a></li>
</ul>
</div>
<div id="content">
</div>
</div>
</body>mfg Real.
Zuletzt bearbeitet:
