Firefox-Ansicht

[Snakesqueezer]

Hallo,

habe gerade meine Baustelle geposted im "Homepage-Check", http://www.instructor-zone.de. Hier nun meine konkreten Probleme/Fragen:

- Trotz absoluter Positionierung in einem div haut meine Navi im Firefox und im Opera nach rechts ab. Wie kann ich das hinbekommen

- wohl eher ein Dreamweaver-Problem (glaub ich): Habe nur mit "div" gearbeitet und kann nun keine "Ebenen"/"Layer" mehr im DW einbauen, ich wollte dann einige Sachen mit verschiedenen Verhalten machen, aber so klappt das irgendwie nicht.

Schon mal Danke für die Hilfe,

Gruß aus Berlin[/url]

[Laus]

Hallo

Ich würde sagen gerade wegen deiner Absoluten Positionierung.
Du kannst nicht etwas floaten und absolut positionieren. Nur entweder oder.

[Snakesqueezer]

Hallo und erst mal vielen Dank für den Tipp.

Habe eben mal alle Container auf "relative" gesetzt und alle pixel-postitionsangaben rausgenommen. Ergebnis war, dass die Navi beim aufklappen den Inhalt runterschiebt und der Inhalt in meinem zentrierten Container linksbündig ist. Die Verschienbung der Navi sieht noch genauso aus.

Ich versuche das mal anders zu organisieren, aber ich glaube die Variante hatte ich schon. links und rechts vom Inhalt ein leerer Container und alles floaten, die Navi in einen Container, der dann zwischen Titel und delinks-Inhalt- und rechts-Container ist und alles floaten. Mal sehen.

[Laus]

Nimm alle deine floats raus außer bei #navigation .hauptpunkt da bleibt float.
Deinem #nav_container gibst du ein margin-left: -40px; und deiner #navigation einen z-index:100;

Dann sollte deine CSS Datei so aussehen:

Code: Alles auswählen

body {
   background-color: #333366;
   background-image: none;
   color: #CCCCCC;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   text-align: justify;
   padding: 5px;
   margin: 0;
   list-style-type: disc;
}
h1{
   padding: 0;
   margin: 0;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
}
h2{
   padding: 0;
   margin: 0;
   margin-bottom: 0.5em;
   }
h3{
   padding: 0;
   margin: 0;
   margin-bottom: 0.5em;
   }
h4{
   padding: 0;
   margin: 0;
   margin-bottom: 0.5em;
   }
h5{
   padding: 0;
   margin: 0;
   margin-bottom: 0.5em;
   }
h6{
   padding: 0;
   margin: 0;
   margin-bottom: 0.5em;
   }
/*zentrierter Container, in dem sich alles befindet*/
#haupt_container {
   width: 750px;
   margin-right: auto;
   margin-left: auto;
   z-index: 3;
   background-color: #000033;
   }
/*Container für die Seitentitel / Logo*/
#titel_container {
   width: 750px;
   height: 110px;
   color: #ff9900;
   text-align: center;
   font-weight: normal;
   background-image: none;
   background-color: #000033;
   z-index: 2;
   }
/*Listen-Navigation in einem Container und deren Eigenschaften, die an Unterpunkte weitergegeben werden*/
#nav_container {
   top: auto;
   width: 750px;
   margin-top: 0px;
   margin-bottom: 1em;
   margin-right: 0px;
   padding-bottom: 0px;
   margin-left: -40px;
   }
#navigation {
         position: absolute;
   z-index:100;
   list-style-type: none;
   width: 750px;
   visibility: visible;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 1em;
   margin-left: 0px;
   }
#navigation .hauptpunkt{
   cursor: crosshair;
   float: left;
   margin: 0;
   width: 142px;
   list-style-type: none;
   text-align: left;
   background-image: none;
   border: 2px black solid;
   color: #000000;
   background-color:#FFFFFF;
   }
#navigation .hauptpunkt:hover{
   color: #ffffff;
   background-color: #000066;
   }
#navigation li {
   border: 1px solid black;
   font-weight: bold;
   padding-left: 2px;
   padding-right: 2px;
   padding-top: 2px;
   padding-bottom: 2px;
   }
#navigation li ul{
   list-style-type: none;
   margin-left: 0;
   padding-left: 0px;
   background-color: #000099;
   }
#navigation li li{
   border: 1px solid black;
   background-color:#0066CC;
   }
#navigation li li a{
   /*Vererbung der Link-Textfarbe*/
   color: black;
   text-decoration: none;
   display: block;
   }
#navigation li li a:hover{
   color: #FF9900;
   }
#navigation li li:hover{
   color: #0066CC;
   background-color: #0000FF;
   }
/*Navigation-Ende*/

   /*Eigenschaften für eventuelle Zusatz-Container rechts und links vom Inhalt
#links_container {
   position: relative;
   width: 30px;
   top: 0px;
   float: left;
   font-weight: normal;
   background-image: none;
   background-color: #000033;

}
#rechts_container {
   position: relative;
   width: 30px;
   top: 0px;
   float: left;
   font-weight: normal;
   background-image: none;
   background-color: #000033;
   }*/

/*Container für den Seiteninhalt*/
#inhalts_container {
   position: relative;
   width: 650px;
   left: 30px;
   background-image: none;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   z-index: 3;
   text-decoration: none;
   background-color: #333333;
   padding: 20px;
}

/*Link-Design für Ibhalt-Container*/
.link_design01 a:link{
   color: #cccccc;
   text-decoration: none;
   }
.link_design01 a:visited{
   color: #cccccc;
   text-decoration: none;
   }
.link_design01 a:hover{
   color: #FFFFFF;
   background-color: #FF0000;
   text-decoration: none;
   }
.link_design01 a:active{
   color: #FF0000;
   text-decoration: none;
   }
/*Link-Design für Fuss-Container*/
.link_design02 a:link{
   color: #ff9900;
   text-decoration: none;
   }
.link_design02 a:visited{
   color: #ff9900;
   text-decoration: none;
   }
.link_design02 a:hover{
   color: #FFFFFF;
   text-decoration: none;
   }
.link_design02 a:active{
   color: #FF0000;
   text-decoration: none;
   }

/*dynamisch positionierter Container unter dem Inhalt durch float left und maximale Breite*/
#fuss_container {
   position: relative;
   width: 750px;
   height: 80px;
   font-weight: normal;
   background-image: none;
   background-color: #000033;
}

Zusätzlich Setzt du noch eine Browserweiche für den IE der das wie eben üblich nicht richtig versteht folgendermaßen:
In den Head deines Quelltextes.

Code: Alles auswählen

<!--[if IE]>
<style type="text/css">
  #nav_container {
margin-left: 0px;}
</style>
<![endif]-->

Das müsste dein Problem eigentlich Lösen.

Gruß Xaver

[Snakesqueezer]

Viiiielen Dank! Funzt jetzt total, hatte mir gerade die Karten gelegt wohl wegen dieser fehlenden Browserweiche.

Dank auch im Namen aller künftigen Homepagebesucher.

Gruß aus der Hauptstadt

Gunnar

PS: das Probleme im Dreamweaver keine Layer einsetzen zu können, lag daran dass ich in der "Layout-Ansicht" war... Autsch.