Guten morgen Zusammen,
ich versuche grade eine horizontale navigation zu erstellen, die in einem div sitzt, das sich der länge des textes anpassen soll. dazu noch ein hintergrundbild das nach achse x wiederholt wird. soweit sogut.

aber damit das ganz auch gut aussieht muss vor (bzw. daneben) dieses besagte "navigations div" ein weiteres div, welches auch eine grafik enthält und immer vom navi div vorhergeschoben wird. angepasst an länge der navi halt.

ich zeig euch am besten mal wie es aussehen soll:
[img]http://img300.imageshack.us/i/headernavi.png/[/img]

und so sieht es bei mir im browser aus:
[img]http://yfrog.com/8cbildschirmfoto20091130uip[/img]


und damit ihr auch seht was ich so verbrochen habe, hier auch noch der html und css auszug dazu:


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
</head>
<body>
<div id="container">
<div id="bg_verlauf">
  <div id="header">
    <p>header</p>
</div>
 
     <div id="naviwrapper">
   <div id="navi2"></div> 
   <div id="navi"><p>navadasdsdfadassfsdfdasdasdi</p></div>
  </div>
<div id="content">
  <p>dsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfdsfsfsdfsdfsdfs fsf sf sdfs fsfsdfffffffffffffffffffsdf sfsfs f sdf sdf sdf sd f sdf sfsdf sdf sdf fsdf sf sf sf sf sdf sf sdf sdf sdf sdf ssd fsf s sdf sdf sdf sf sf sdf sdf sf sf sf sdf sdf sdf sdf sdf sdf sf sfswr fsf w4frsfdsf s fsfsf sef srfsfsfs ef sf sfs ef sf sf sef sf sf sef s</p>
</div>
</div>
</div>
 
</body>
</html>
hier der css:
Code:
* {
padding:0;
margin:0;
border:0;
text-decoration:none;
list-style:none;
}
 
body {
 background-color:#37444f;
 font-size: 1em;
 font-family:"Lucida Grande", verdana, arial, helvetica, sans-serif;
 
 }
 
#container {
 width:1000px;
 margin:0 auto;
 }
 
#bg_verlauf {
 width:1000px;
 background:#465762 url(bg_verlauf.png);
 background-repeat:repeat-x;
 min-height:1000px;
 }
#header {
 width:1000px;
 height:350px;
 background-image:url(header-navi2.png);
 }
#naviwrapper {
 float:right;
}
#navi {
 margin-top:-350px;
 float:right;
 background-image:url(bg_navi-repeat.png);
 background-repeat:repeat-x;
 height:43px;
 }
 
#navi2 {
 float:right;
 height:43px;
 width:50;
 background-image:url(bg_navi.png);
 background-repeat:no-repeat;
 margin-top:-350px;
}
#content {
 color:#FFF;
 padding:8px;
 max-width:984px;
 }
tut mir leid das ich es so umständlich hier rein poste. aber ich bin nicht zuhause und hab keinen zugriff auf den server.
über tipps würde ich mich sehr freuen!
danke und grüße
pingu