zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Float bei der Navigation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.08.2007, 11:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.08.2007
Beiträge: 1
Julez84 befindet sich auf einem aufstrebenden Ast
Standard Problem mit Float bei der Navigation

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.08.2007, 11:08
Benutzer
neuer user
 
Registriert seit: 29.05.2007
Beiträge: 77
Sonny Lane befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:22 Uhr.