Ekkez: CSS inhalt wird nicht übernommen

Hallo!

Ich habe ein Problem. Ich habe ein Menü in meiner CSS Datei, sowie in der index.html eingefügt. Dennoch sieht es nicht so aus, wie es eigentlich sein sollte.

::::Code CSS::::

ul#menu  
{  
	margin:0;  
	padding:0;  
	list-style-type:none;  
	width:auto;  
	position:relative;  
	display:block;  
	height:30px;  
	font-size:12px;  
	font-weight:bold;  
	background:transparent url(images/nav_bg.png) repeat-x top left;  
	font-family:Arial, Helvetica, sans-serif;  
	border-bottom:1px solid #000000;  
	border-top:1px solid #000000;  
}  
  
ul#menu li  
{  
	display:block;  
	float:left;  
	margin:0;  
	padding:0;  
}  
	  
ul#menu li a  
{  
	display:block;  
	float:left;  
	color:#999999;  
	text-decoration:none;  
	font-weight:bold;  
	padding:8px 20px 0 20px;  
}  
	  
ul#menu li a:hover  
{	  
	color:#FFFFFF;  
	height:22px;  
	background:transparent url(images/nav_bg.png) 0px -30px no-repeat;		  
}  
	  
  
ul#menu li a.current  
{  
	display:inline;  
	height:22px;  
	background:transparent url(images/nav_bg.png) 0px -30px no-repeat;	  
	float:left;  
	margin:0;  
}  

::::Und der Code den ich in der HTML Kopiert habe::::

<div>  
	<ul id='menu'>  
	<li class="button"><a class='current' href='http://' >Home</a></li>  
	<li class="button"><a href='http://'  >Products</a></li>  
	<li class="button"><a href='http://'  >Support</a></li>  
	<li class="button"><a href='http://'  >Contact</a></li>  
	</ul>  
</div><!-- Ende Menü -->

::::So sollte es aussehen::::
Original Menü

::::Aber so sieht es aus::::
So sieht es bei mir aus

Woran liegt das? Ich hoffe ihr könnt mir helfen!

  1. Woran liegt das? Ich hoffe ihr könnt mir helfen!

    Ich würde damit beginnen, das CSS-Des anderen Menüs mit deinem zu vergleichen.

    Offensichtlich stimmen bei dir nichtmal die Farben ansatzweise überein - und da wunderst du dich?

    1. ich hab in der css datei die allg. mein Style hat, den erstmalig eingefügt, davor habe ich kein Menü gehabt.

      Das ist also mein 1. CSS Menü Code.

      1. 'ǝɯɐu$ ıɥ

        ich hab in der css datei die allg. mein Style hat, den erstmalig eingefügt, davor habe ich kein Menü gehabt.

        Das ist also mein 1. CSS Menü Code.

        gemeint war: vergleiche das CSS des "so sollte es sein" mit der traurigen realität...

        ssnɹƃ
        ʍopɐɥs

        --
        I like children. If they're properly cooked.
        - W.C. Fields
        1. 'ǝɯɐu$ ıɥ

          ich hab in der css datei die allg. mein Style hat, den erstmalig eingefügt, davor habe ich kein Menü gehabt.

          Das ist also mein 1. CSS Menü Code.

          gemeint war: vergleiche das CSS des "so sollte es sein" mit der traurigen realität...

          ssnɹƃ
          ʍopɐɥs

          Es enspricht genau dem was in der muster style ist.

          1. 'ǝɯɐu$ ıɥ

            gemeint war: vergleiche das CSS des "so sollte es sein" mit der traurigen realität...

            Es enspricht genau dem was in der muster style ist.

            dann vergleiche das HTML des "so sollte es sein" mit der traurigen realität...

            ssnɹƃ
            ʍopɐɥs

            --
            I like children. If they're properly cooked.
            - W.C. Fields
            1. Hey Ho...

              Entweder ich bin zu blöd, denn ich finde nichts. Ich poste nun die komplette CSS von meinem Hauptdesign und darunter poste ich die komplette css meiner muster css...

              body {  
              margin: 0px;  
              padding: 0px;  
              font-family:Verdana,Tahoma,Arial,sans-serif;  
              font-weight:normal;  
              color: #303030;  
              background:url(images/header.png)no-repeat ;  
              }  
                
                
              #alles {  
              background-color: transparent;  
              color: #303030;  
              position: absolute;  
              width: 1024px;  
              margin-left:-450px;  
              left:50%;  
              }  
                
              #header {  
              clear: both;  
              margin: 0 0 0 0;  
              padding: 0;  
              height: 241px;  
              background:url(images/header.png) no-repeat;  
              }  
                
              #header h1 {  
              width: 1024px;  
              margin: 15px 0 0px 10px;  
              float:left;  
              color:#FFFFFF;  
              font-size: 24px;  
              }  
                
              #header p {  
              width: 1024px;  
              float: right;  
              text-align:right;  
              color:#FFFFFF;  
              margin: 0px 10px 10px 0;  
              font-size: 12px;  
              line-height: 130%;  
              font-weight:bold;  
              }  
                
              #kopfzeile {  
              margin: 0 0 0 59;  
              padding: 0 0px 0 0px;  
              line-height: 170%;  
              width: 905px;  
              border-bottom: 5px solid #000000; /*Hauptlinie Hintergrundsfarbe */  
              }  
                
              #kopfzeile p {  
              color:#4F4F4F;  
              margin: 5px 0px 5px 59px;  
              font-size: 11px;  
              line-height: 130%;  
              font-weight:normal;  
              }  
                
              *{  
              	list-style:none;  
              	margin:0px;  
              	padding:0px;  
              }  
                
              ul#menu  
              {  
              	margin:0;  
              	padding:0;  
              	list-style-type:none;  
              	width:auto;  
              	position:relative;  
              	display:block;  
              	height:30px;  
              	font-size:12px;  
              	font-weight:bold;  
              	background:transparent url(images/nav_bg.png) repeat-x top left;  
              	font-family:Arial, Helvetica, sans-serif;  
              	border-bottom:1px solid #000000;  
              	border-top:1px solid #000000;  
              }  
                
              ul#menu li  
              {  
              	display:block;  
              	float:left;  
              	margin:0;  
              	padding:0;  
              }  
              	  
              ul#menu li a  
              {  
              	display:block;  
              	float:left;  
              	color:#999999;  
              	text-decoration:none;  
              	font-weight:bold;  
              	padding:8px 20px 0 20px;  
              }  
              	  
              ul#menu li a:hover  
              {	  
              	color:#FFFFFF;  
              	height:22px;  
              	background:transparent url(images/nav_bg.png) 0px -30px no-repeat;		  
              }  
              	  
                
              ul#menu li a.current  
              {  
              	display:inline;  
              	height:22px;  
              	background:transparent url(images/nav_bg.png) 0px -30px no-repeat;	  
              	float:left;  
              	margin:0;  
              }  
                
              #content {  
              margin: 0px 0px 20px 0px;  
              padding: 0 80px 0 130px;  
              line-height: 140%;  
              text-align: left;  
              }  
                
              #content p {  
              color:#4F4F4F;  
              margin: 0 20px 0px 0;  
              font-size: 12px;  
              line-height: 140%;  
              font-weight:normal;  
              }  
                
              #content h2 {  
              	color:#b91f24;  
              	font-size: 16px;  
              	margin: 15px 0 10px 0;  
              }  
                
              #content h3 {  
              color:#000000;/*Überschriftfarbe Content */  
              font-size: 12px;  
              margin: 15px 0 10px 0;  
              }  
                
              #content img {  
              padding: 2px;  
              display:inline;  
              background:#FFFFFF;  
              border: 4px solid #EFEFEF;  
              }  
                
              h3 {  
              font-size: 1.3em;  
              margin: 0 0 10px 0;  
              }  
                
              a {  
              text-decoration: none;  
              color: #86A31B;  
              }  
                
              a:hover {  
              text-decoration: underline;  
              color: #bd1f24;  
              }  
                
              a img {  
              border: 0;  
              }  
                
              #fuss {  
              clear: both;  
              margin: 0 auto;  
              padding: 10px 0 10px 0;  
              border-top: 4px solid #b7a58b;  
              width: 905px;  
              text-align: center;  
              color: #808080;  
              font-size: 10px;  
              }  
                
              #fuss a {  
              color: #b91f24;  
              text-decoration: none;  
              }  
                
              #fuss a:hover {  
              text-decoration: underline;  
              }  
                
              .links {  
              margin: 10px 10px 5px 0;  
              float: left;  
              }  
                
              .rechts {  
              margin: 10px 0 5px 10px;  
              float: right;  
              }  
              #content p {  
              	color: #000;  
              }  
              
              

              MUSTER CSS:::::

              ul#menu  
              {  
              	margin:0;  
              	padding:0;  
              	list-style-type:none;  
              	width:auto;  
              	position:relative;  
              	display:block;  
              	height:30px;  
              	font-size:12px;  
              	font-weight:bold;  
              	background:transparent url(images/nav_bg.png) repeat-x top left;  
              	font-family:Arial, Helvetica, sans-serif;  
              	border-bottom:1px solid #000000;  
              	border-top:1px solid #000000;  
              }  
                
              ul#menu li  
              {  
              	display:block;  
              	float:left;  
              	margin:0;  
              	padding:0;  
              }  
              	  
              ul#menu li a  
              {  
              	display:block;  
              	float:left;  
              	color:#999999;  
              	text-decoration:none;  
              	font-weight:bold;  
              	padding:8px 20px 0 20px;  
              }  
              	  
              ul#menu li a:hover  
              {	  
              	color:#FFFFFF;  
              	height:22px;  
              	background:transparent url(images/nav_bg.png) 0px -30px no-repeat;		  
              }  
              	  
                
              ul#menu li a.current  
              {  
              	display:inline;  
              	height:22px;  
              	background:transparent url(images/nav_bg.png) 0px -30px no-repeat;	  
              	float:left;  
              	margin:0;  
              }  
                
              
              

              Vielleicht findet ihr ja den fehler...

              1. @@Ekkez:

                nuqneH

                Ich poste nun die komplette CSS von meinem Hauptdesign und darunter poste ich die komplette css meiner muster css...

                Warum kommst du nicht selbst auf die Idee, den Link zu deiner problematischen Seite zu posten? [ZITAT1632]

                Qapla'

                --
                Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                (Mark Twain)
                1. Hey Ho!

                  Ich habs geschafft. Ich habe einfach 2 CSS in der index eingefügt, nun klappt es wunderbar. In der 1. CSS habe ich kurz alles weg gemacht, bis auf das Menü, in der Index sah das Menü dennoch shice aus... warum weiß ich nicht, so klappt es aber

                  1. Ich habs geschafft. Ich habe einfach 2 CSS in der index eingefügt, nun klappt es wunderbar. In der 1. CSS habe ich kurz alles weg gemacht, bis auf das Menü, in der Index sah das Menü dennoch shice aus... warum weiß ich nicht, so klappt es aber

                    Sehr beeindruckend.

                    Zielführender als unsinniges herumraten und "copy&paste-entwickeln" ist aber, dich mit den Grundlagen zu beschäftigen, dass du weißt was du da tust

              2. Hey Ho...

                Entweder ich bin zu blöd, denn ich finde nichts. Ich poste nun die komplette CSS von meinem Hauptdesign und darunter poste ich die komplette css meiner muster css...

                Vielleicht findet ihr ja den fehler...

                Ja sicher, du hast großte Teile die für die Formatierung verantwortlich sein können einfach unterschlagen.

                Folgendes z.B. - ohne das nötige  HTML zu kennen, sind das aber nur Mutmaßungen.

                Zielführender als unsinniges herumraten und "copy&paste-entwickeln" ist aber, dich mit den Grundlagen zu beschäftigen, dass du weißt was du da tust.

                *{  
                  list-style:none;  
                  margin:0px;  
                  padding:0px;  
                }  
                  
                a {  
                text-decoration: none;  
                color: #86A31B;  
                }  
                  
                a:hover {  
                text-decoration: underline;  
                color: #bd1f24;  
                }  
                  
                a img {  
                border: 0;  
                }  
                  
                .links {  
                margin: 10px 10px 5px 0;  
                float: left;  
                }  
                  
                .rechts {  
                margin: 10px 0 5px 10px;  
                float: right;  
                }  
                  
                a {  
                text-decoration: none;  
                color: #86A31B;  
                }  
                  
                a:hover {  
                text-decoration: underline;  
                color: #bd1f24;  
                }  
                  
                a img {  
                border: 0;  
                }  
                  
                #fuss a {  
                color: #b91f24;  
                text-decoration: none;  
                }  
                  
                #fuss a:hover {  
                text-decoration: underline;  
                }
                
          2. Es enspricht genau dem was in der muster style ist.

            Das ist unglaubwürdig, denn allein die von dir geposteten Farbwerte stimmen offensichtlich nicht mit denen im Bild überein.

            Entweder du machst etwas falsch (du hast dich im File geirrt, es gibt an anderer Stelle noch formatierungen die ul-, li- oder a-Elemente betreffen - oder sonstwas) oder du willst uns schlichtweg verarschen oder testen.

            1. Es enspricht genau dem was in der muster style ist.

              Das ist unglaubwürdig, denn allein die von dir geposteten Farbwerte stimmen offensichtlich nicht mit denen im Bild überein.

              Entweder du machst etwas falsch (du hast dich im File geirrt, es gibt an anderer Stelle noch formatierungen die ul-, li- oder a-Elemente betreffen - oder sonstwas) oder du willst uns schlichtweg verarschen oder testen.

              Nein verarschen will ich euch nicht, ich bin noch anfänger. Und weiss selbst nicht weiter

              1. Nein verarschen will ich euch nicht,

                Dann ist ja gut.

                ich bin noch anfänger. Und weiss selbst nicht weiter

                2 Texte (in diesem Fall CSS-Quelltexte) miteinander vergleichen kannst du aber?

  2. Moin!

    Hast Du vielleicht online Beispiele des 'so sollte es sein' und der traurigen Realitaet?  (um mich hier mal schadowcrows Worte zu bedienen.)

    --
    Ich bin dafuer verantwortlich was ich sage, nicht dafuer, was Du verstehst.
  3. Hallo,

    Woran liegt das?

    An bg.png? Die seltsamen Farben stehen jedenfalls nicht in deinen CSS-styles.

    Wenn eine Änderung in CSS nicht am Bildschirm zu sehen ist, liegt's am Browser-Cache.

    Gruß, Don P