Problem mit Float bei der Navigation

Julez84 · #1 (**permalink**) 09.08.2007, 11:02

Hallo zusammen,

ich steige derzeit von einem Tabellen- auf ein CSS-Layout um und habe ein paar kleine Probleme. Ich habe die Navigationspositionierung über Float gelöst und möchte das wenn das Browserfenster verkleinert wird die Navigation fixiert bleibt und sich die Bilder nicht nach unten verschieben.

Hier der Link zur Site: Broken-Hardcore - Willkommen

HTML

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=iso-8859-1" />
<title>Broken-Hardcore - Willkommen</title>
<link href="broken_layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="kopfbereich"></div>
<ul id="navigationhome">
  <li id="navigationhome_home" ><a href="home.htm"><span>Home</span></a></li>
</ul>
  <ul id="navigationband">
  <li id="navigationband_band" ><a href="band.htm"><span>Band</span></a></li>
  </ul>
  <ul id="navigationdisco">
   <li id="navigationdisco_disco" ><a href="discography.htm"><span>Discography</span></a></li>
</ul>
     <ul id="navigationgallery">
   <li id="navigationgallery_gallery" ><a href="gallery.htm"><span>Gallery</span></a></li>
   </ul>
   <ul id="navigationdownloads">
   <li id="navigationdownloads_downloads" ><a href="downloads.htm"><span>Downloads</span></a></li>
   </ul>
      <ul id="navigationshop">
   <li id="navigationshop_shop" ><a href="shop.htm"><span>Shop</span></a></li>
   </ul>
         <ul id="navigationlinks">
   <li id="navigationlinks_links" ><a href="links.htm"><span>Link</span></a></li>
   </ul>
            <ul id="navigationguest">
   <li id="navigationguest_guest" ><a href="guest.htm"><span>Guestbook</span></a></li>
   </ul>
   
               <ul id="navigationimp">
   <li id="navigationimp_imp" ><a href="impressum.htm"><span>Impressum</span></a></li>
   </ul>
<div id="contentbereich">
 	<div id="demo"><img src="images/aktuelles_demo.gif" alt="Aktuelles Demo" width="195" height="205"/></div>
<div id="textbereich">
<br/>
<h1>Herzlich Willkommen auf der Website der Band "Broken"!</h1>

Unsere Website ist für eine Auflösung von 1024x768 Pixel optimiert und als Browser empfehlen wir den Mozilla Firefox oder den Microsoft Internet Explorer. Ausserdem wird zur korrekten Darstellung der Flash Player 8 benötigt. (Download Flash Player)<br/>
<br/><br/>



<h2>25.03.2007 Gig im "Schwarzen Adler" am 31.03.2007 ABGESAGT!!!</h2>

Am 31.03.2007 werden wir leider nicht im Schwarzen Adler spielen können, da unser Sänger derzeit krank ist, und in Zukunft wahrscheinlich aus beruflichen Gründen nicht mehr mit uns auf der Bühne stehen kann! Wir möchten uns bei den Veranstaltern und allen die wegen uns gekommen wären entschuldigen. Wir hoffen, dass wir bald wieder auf der Bühne zurück sind! Näheres in Kürze!

<br/>
<br/><br/>


<h2>12.02.2007 | Kommentare nur noch mit Registrierung möglich!</h2>

Aufgrund von Spamproblemen in der letzten Zeit sind Kommentare in
der Gallery nur noch für registrierte Benutzer möglich.<br/><br/><br/>



<h2>04.12.2006 Broken ist ab jetzt viert !!</h2>

Ab jetzt haben wir ein 4. Mitglied: Konrad Steinestel übernimmt in Zukunft den Bass, so dass sich Andi voll aufs Singen konzentrieren kann! Näheres zu ihm in kürze unter "Band"
<br/>
<br/><br/>

<h2>Letzte Aktualisierung: 25.03.2007 - 18:46 Uhr | Besucher gesamt: 3856</h2>

</div> 
</div>
<div id="footer"></div>

</body>
</html>

CSS

Code:

/* CSS Document */

body {
  margin-left: 0px;
  margin-top: 0px;
  padding:0;
  color: white;
  background-color: black;
  font-size: small;
  }
  
  #kopfbereich {
  width: 975px;
  height: 145px; 
  
  background-image: url(images/head.jpg);
  
  }

/* NAVIGATION*/
#navigationhome
{
float:left;
  list-style-type:none;
  margin:0;
  padding:0;
}

#navigationhome li a
{

float:left;
margin:0;
width:93px;
height:60px;
background:white url(images/home.jpg) no-repeat;
padding:0;
}

#navigationhome li a span
{
float:left;
display:none;
margin:0;
}

#navigationhome_home a:link, #navigationhome_home a:visited, #navigationhome_home a:active { background-position:0px 0px; }
#navigationhome_home a:hover { background-position:0px -60px; }

#navigationband
{
  list-style-type:none;
  float:left;
margin:0;
  padding:0;
}

#navigationband li a
{
float:left;
position:relative;
width:56px;
height:60px;
background:white url(images/band.jpg) no-repeat;
}

#navigationband li a span
{

float:left;
margin:0;
  display:none;
}

#navigationband_band a:link, #navigationband_band a:visited, #navigationband_band a:active { background-position:0px 0px; }
#navigationband_band a:hover { background-position:0px -60px; }

#navigationdisco
{
  list-style-type:none;
  float:left;
  margin:0;
  padding:0;
}

#navigationdisco li a
{

float:left;
width:116px;
height:60px;
background:white url(images/discography.jpg) no-repeat;
}

#navigationdisco li a span
{
float:left;

  display:none;
}

#navigationdisco_disco a:link, #navigationdisco_disco a:visited, #navigationdisco_disco a:active { background-position:0px 0px; }
#navigationdisco_disco a:hover { background-position:0px -60px; }


#navigationgallery
{
  list-style-type:none;
  float:left;
  margin:0;
  padding:0;
}

#navigationgallery li a
{
float:left;
width:83px;
height:60px;
background:white url(images/gallery.jpg) no-repeat;
}

#navigationgallery li a span
{
float:left;
  display:none;
}

#navigationgallery_gallery a:link, #navigationgallery_gallery a:visited, #navigationgallery_gallery a:active { background-position:0px 0px; }
#navigationgallery_gallery a:hover { background-position:0px -60px; }

#navigationdownloads
{
  list-style-type:none;
  float:left;
  margin:0;
  padding:0;
}

#navigationdownloads li a
{
float:left;
width:110px;
height:60px;
background:white url(images/downloads.jpg) no-repeat;
}

#navigationdownloads li a span
{
float:left;
  display:none;
}

#navigationdownloads_downloads a:link, #navigationdownloads_downloads a:visited, #navigationdownloads_downloads a:active { background-position:0px 0px; }
#navigationdownloads_downloads a:hover { background-position:0px -60px; }

#navigationshop
{
  list-style-type:none;
  float:left;
  margin:0;
  padding:0;
}

#navigationshop li a
{
float:left;
width:56px;
height:60px;
background:white url(images/shop.jpg) no-repeat;
}

#navigationshop li a span
{
float:left;
  display:none;
}

#navigationshop_shop a:link, #navigationshop_shop a:visited, #navigationshop_shop a:active { background-position:0px 0px; }
#navigationshop_shop a:hover { background-position:0px -60px; }

#navigationlinks
{
  list-style-type:none;
  float:left;
  margin:0;
  padding:0;
}

#navigationlinks li a
{
float:left;
width:57px;
height:60px;
background:white url(images/links.jpg) no-repeat;
}

#navigationlinks li a span
{
float:left;
  display:none;
}

#navigationlinks_links a:link, #navigationlinks_links a:visited, #navigationlinks_links a:active { background-position:0px 0px; }
#navigationlinks_links a:hover { background-position:0px -60px; }

#navigationguest
{
  list-style-type:none;
  float:left;
  margin:0;
  padding:0;
}

#navigationguest li a
{
float:left;
width:103px;
height:60px;
background:white url(images/guestbook.jpg) no-repeat;
}

#navigationguest li a span
{
float:left;
  display:none;
}

#navigationguest_guest a:link, #navigationguest_guest a:visited, #navigationguest_guest a:active { background-position:0px 0px; }
#navigationguest_guest a:hover { background-position:0px -60px; }

#navigationimp
{

  list-style-type:none;
  float:left;
  margin:0;
  padding:0;
}

#navigationimp li a
{

float:left;
width:240px;
height:60px;
background:white url(images/impressum.jpg) no-repeat;

}

#navigationimp li a span
{


  display:none;
}

#navigationimp_imp a:link, #navigationimp_imp a:visited, #navigationimp_imp a:active { background-position:0px 0px; }
#navigationimp_imp a:hover { background-position:0px -60px; }

/* NAVIGATION ENDE*/


#contentbereich { 
float:left;
position:relative;
width:892px;
height:auto;
padding:0;
margin:0;

background-image:url(images/content_bg.jpg) ;

  
background-repeat:no-repeat;
background-color: #2a2420;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}


#textbereich {
height:600px;
width: 555px;
padding-top:22px;
padding-left:96px;
font-family:georgia;
font-size:12px;
color:white;
line-height: 18px;
}

h1 {

font-family:georgia;
font-size:14px;
font-weight:bold;
color:#cc9900;
margin-top:0;

}

h2 {

font-family:georgia;
font-size:12px;
color:#cc9900;

}

#footer {
float:left;
width:892px;
height:101px;
margin:0;
position:relative;
background-image:url(images/footer.jpg) ;

  
background-repeat:no-repeat;
background-color: #2a2420;
}

#demo {
margin-top:0;
position:relative;
float:right;
padding-left:43px;


}

Wäre um jeden Rat dankbar wie ich das lösen kann.

Gruß

Julez

Sonny Lane · #2 (**permalink**) 09.08.2007, 11:08

Für die einzelnen Menüpunkte brauchst du nicht jedes mal eine neue Liste zu eröffnen.
Mach es einfach so:

Code:

<ul>
   <li>Erster Menüpunkt</li>
   <li>Zeiter Menüpunkt</li>
   <li>usw.</li>
</ul>

Dass sich die Elemente nach unten verschieben gehört zum Verhalten von float. Mit einer festen Breite für deine Liste kannst du das unterbinden.

Freundliche Grüsse

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Navigation zentrieren	garfield1711	CSS	1	12.06.2011 09:12
Problem mit float und position:absolute	infernalshade	CSS	4	12.11.2008 09:52
Problem mit Navigation (<a>) in ul bzw. li	stefanw	CSS	1	10.11.2008 16:52
Problem mit Line-Height auf dem IE lte 6	actionjackson	CSS	2	20.11.2007 10:17
Problem mit Navigation und Links	cb01	(X)HTML	1	28.07.2006 21:07