[CSS] Div soll von anderem div "vorhergeschoben" werden (CSS)

pinguin2004 · 2. Dezember 2009

Div soll von anderem div "vorhergeschoben" werden (CSS)

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:

http://img300.imageshack.us/i/headernavi.png/

und so sieht es bei mir im browser aus:

http://yfrog.com/8cbildschirmfoto20091130uip

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

Code:

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 f 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:

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

Anzeige

breZZer · 3. Dezember 2009

AW: Div soll von anderem div "vorhergeschoben" werden (CSS)

Warum so ne DIV Suppe?
Umstellung von Tabellen-Design auf CSS-Design?

Ansonsten, wie wärs wenn du ein Bild machst, was links die rundung hat, und nach rechts seeehr breit ist, vlt 1600px oder so.
Dieses setzt du in das Div ein.
Dann machst du eine Liste für die Navigation, lässt sie horizontal verlaufen, und nacht rechts ausgerichtet in das Div.
Wenn die Navi nun länger wird, dürfte sich das Bild mit verschieben.

pinguin2004 · 3. Dezember 2009

AW: Div soll von anderem div "vorhergeschoben" werden (CSS)

heyy!

simple aber geniale idee!

ich hab das gleich mal ausprobiert, und es funktioniert einwandfrei!

vielen dank!

Nützliche Suchen

[CSS] Div soll von anderem div "vorhergeschoben" werden (CSS)

Videos zum Themenbereich