Hiho Freunde der Nacht
Ich habe nach laaanger Zeit mal wieder ein Problem, dass ich auch nicht mit google lösen kann.
Die Seite an der ich gerade bastel soll so aussehen:
<!-- m --><a class="postlink" href="http://img201.imageshack.us/f/layoutpk.jpg/">http://img201.imageshack.us/f/layoutpk.jpg/</a><!-- m -->
Die farbigen Kästchen stellen halt die inhalte / unterteilung dar.
Mein Html Code sieht so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Layout 2</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div id="navigation">
<div id="logo">
<img src="logo.png" alt="Logo"/>
</div>
<ul id="auflistung" style="list-style-type:none">
<li><a class="navilinks" href="index.htm" style="text-decoration: none; font-weight:bold; color:#fff;"><span style="color: #ffffff" onMouseOver="this.innerHTML='Exekutive summary';this.style.color='#f9a900';" onMouseOut="this.innerHTML='Exekutive summary';this.style.color='#ffffff';">Exekutive summary</span></a></li>
<li><a class="navilinks" href="hauslafinca.htm" style="text-decoration: none; font-weight:bold; color:#fff;"><span style="color: #ffffff" onMouseOver="this.innerHTML='Firmen Philosophie';this.style.color='#f9a900';" onMouseOut="this.innerHTML='Firmen Philosophie';this.style.color='#ffffff';">Firmen Philosophie</span></a></li>
<li><a class="navilinks" href="bilder.htm" style="text-decoration: none; font-weight:bold; color:#fff;"><span style="color: #ffffff" onMouseOver="this.innerHTML='Dienstleistungen';this.style.color='#f9a900';" onMouseOut="this.innerHTML='Dienstleistungen';this.style.color='#ffffff';">Dienstleistungen</span></a></li>
<li><a class="navilinks" href="aktiv.htm" style="text-decoration: none; font-weight:bold; color:#fff;"><span style="color: #ffffff" onMouseOver="this.innerHTML='Security';this.style.color='#f9a900';" onMouseOut="this.innerHTML='Security';this.style.color='#ffffff';">Security</span></a></li>
<li><a class="navilinks" href="preise.htm" style="text-decoration: none; font-weight:bold; color:#fff;"><span style="color: #ffffff" onMouseOver="this.innerHTML='Travel Awareness';this.style.color='#f9a900';" onMouseOut="this.innerHTML='Travel Awareness';this.style.color='#ffffff';">Travel Awareness</span></a></li>
<li><a class="navilinks" href="kontakt.htm" style="text-decoration: none; font-weight:bold; color:#fff;"><span style="color: #ffffff" onMouseOver="this.innerHTML='Gallerie';this.style.color='#f9a900';" onMouseOut="this.innerHTML='Gallerie';this.style.color='#ffffff';">Gallerie</span></a></li>
<li><a class="navilinks" href="kontakt.htm" style="text-decoration: none; font-weight:bold; color:#fff;"><span style="color: #ffffff" onMouseOver="this.innerHTML='Links';this.style.color='#f9a900';" onMouseOut="this.innerHTML='Links';this.style.color='#ffffff';">Links</span></a></li>
<li><a class="navilinks" href="kontakt.htm" style="text-decoration: none; font-weight:bold; color:#fff;"><span style="color: #ffffff" onMouseOver="this.innerHTML='Kontakt';this.style.color='#f9a900';" onMouseOut="this.innerHTML='Kontakt';this.style.color='#ffffff';">Kontakt</span></a></li>
<li><a class="navilinks" href="kontakt.htm" style="text-decoration: none; font-weight:bold; color:#fff;"><span style="color: #ffffff" onMouseOver="this.innerHTML='Impressum';this.style.color='#f9a900';" onMouseOut="this.innerHTML='Impressum';this.style.color='#ffffff';">Impressum</span></a></li>
</ul>
</div>
<div id="banner"><img src="banner.jpg" alt="Banner"/>
<div id="rechts"></div>
<div id="inhalt">
</div>
</div>
</body>
</html>
Alles anzeigen
und mein CSS Code so:
body {
font-family:tahoma, verdana, arial, sans-serif;
background:url(background.jpg);
line-height:150%;
font-weight:normal;
padding:0;
margin:0;
}
#inhalt {
background:url(schwarz_grau.jpg) no-repeat;
height:565px;
width:700px;
margin:0 0 0 252px;
}
#navigation {
float:left;
background:url(face_navi.jpg) no-repeat;
height:642px;
width:252px;
margin:50px 0 0 0;
}
#text {
font-size:12px;
padding:30px;
}
.navilinks {
line-height:50px;
}
#auflistung {
margin:26px 0 0 0;
padding:0 0 0 23px;
}
#logo {
padding:8px 0 0 29px;
}
p {
margin:0 0 8px 0;
}
#banner {
line-height:0;
margin:70px 0 0 0;
padding:0;
}
#rechts {
float:right;
background:url(rechts.jpg) repeat-y;
height:642px;
width:51px;
margin:50px 0 0 0;
}
Alles anzeigen
Habe das Problem das die blaue box(rechts.jpg) sich an schwarz-grau(braune box) ranhaften soll und sich nach rechts immer wiederholen soll.
Aber entweder sie heftet sich nach rechts oder zersprengt die seite das alles kreuz und quer liegt. Wäre soooowas von nett wenn ihr mir nen tipp
oder eine lösung geben könntet
wer ganz krass drauf ist und das nachbauen möchte/kann/will, die höhe breite stehen ja immer soweit drauf da muss man sich ja nur n viereck mit den maßen machhen :-p
wie immer
mfg
Kazu