Navigation soll Container Breite ignorieren

Queckezz · 10 Juli 2012

Guten Abend,
Auf meiner Website habe ich einen Container der Header, Navigation, Content und Footer diesselbe Breite geben soll, wie hier auf dem Bild:

Das ist auch alles so gewollt bis auf die Navigation. Sie soll den Container ignorieren und 100% der Browserbreite ausnützen, wie hier gezeigt auf dem Bild:

Wie ist so etwas realisierbar? Danke im voraus für eure Antworten

-Fabian

prm · 10 Juli 2012

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">

<style type="text/css">
body
{
width: 100%;
height: 100%;
margin: 0;
padding: 0
}

#container
{
width: 800px;
height: 500px;
background: yellow;
margin: 0 auto;
padding-top: 100px;
}

#navi
{
width: 100%;
position: absolute;
z-index: 2;
top: 50px;
height: 50px;
background: red;
}

</style>

</head>

<body>
<div id="navi">
</div><!--Ende Navi-->
<div id="container">
<h1>Container</h1>
</div><!--Ende container-->


</body>
</html>

Queckezz · 16 Juli 2012

Danke für deine Hilfe, leider funktioniert es noch nicht ganz so wie gewollt.

Zurzeit sieht es so aus und ich habe das Problem nicht von alleine lösen können:

Mein bisheriger Code ist so wie du es in deinem Beispiel beschrieben hast.

Code:

body
  font-family Myriad Pro, Verdana
  font-size 1em
  width 100%
  height 100%


h1,h2,h3,h4,h5,h6
  font-weight normal


#container
  width 960px
  margin 40px auto


nav#main_nav
  color color_black 
  text-transform uppercase
  width 100%
  position absolute
  text-align center
  top 100px
  z-index 2

Ich hoffe du kannst mir dabei helfen :)

Obwohl wenn ich dein Skript auf jsfiddle laufen lasse funktioniert es bestens. Versteh es nicht ganz http://jsfiddle.net/Q9CxP/

EDIT: Lag an meinem HTML. Den Container hat die Navi umfasst, in deinem Beispiel ist die Navi auserhalb des Containers. Danke für die Hilfe klappt nun!

-Fab

Navigation soll Container Breite ignorieren

Queckezz

Neues Mitglied

Anhänge

prm

Aktives Mitglied

Queckezz

Neues Mitglied

Anhänge

Neueste Beiträge