XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   2 CSS Files -> 1 CSS File (http://xhtmlforum.de/showthread.php?t=60255)

Habi 17.02.2010 12:19

2 CSS Files -> 1 CSS File
 
Hi :mrgreen:
Gleich vorweg: KLASSE Forum ^_^

Ich bin noch im Anfangsstadium :lol: also seid lieb *g* :lol::oops:

Arbeite zurzeit an einem Layout das mit CSS gemacht wird und möchte dazu eine hübsche CSS Navigation einbinden.
Leider hab ich große Probleme das beide CSS gleichzeitig funktionieren :shock:
Ich hoffe es kann mir hier geholfen werden :)

CSS für index.html
Code:

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: #EAECEC;
}
#wrapper {
 margin: 0 auto;
 width: 900px;
}
#faux {
 background: #ffffff;
 margin-bottom: 0px;
 overflow: auto;
 width: 100%
}
#header {
 color: #333;
 width: 900px;
 padding: 0px;
 height: 450px;
 margin: 0px 0px 0px 0px;
 background: #ffffff;
}
#navigation {
 color: #333;
 padding: 0px;
 margin: 0px 0px 0px 0px;
 background: #ffffff;
}
#leftcolumn {
 display: inline;
 color: #ffffff;
 margin:0px;
 padding:0;
 width: 50px;
 float: left;
}
#content {
 float: left;
 color: #333;
 margin: 0px 0px;
 padding:0;
 width: 800px;
 display: inline;
 position: relative;
}
#rightcolumn {
 display: inline;
 position: relative;
 color: #ffffff;
 margin: 0px 0px 0px 0px;
 padding:0;
 width: 50px;
 float: right;
 }
#footer {
 width: 900px;
 clear: both;
 color: #333;
 background: #ffffff;
 margin: 0px 0px 10px 0px;
 padding: 0px;
}
.clear { clear: both; background: none; }

CSS für die Navigation

Code:

body {
        color: #666;
        }

h1 {
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:16px;
        font-weight:bold;
        margin:0;
        padding:0;
        }

hr {
        border:none;
        border-top:1px solid #CCCCCC;
        height:1px;
        margin-bottom:25px;
        }

a {
        color: #900;
        text-decoration: none;
        }

a:hover {
        background: #900;
        color: #FFF;
        }

/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
        margin: 0;
        border: 0 none;
        padding: 0;
        width: 500px; /*For KHTML*/
        list-style: none;
        height: 24px;
        }

ul#navmenu li {
        margin: 0;
        border: 0 none;
        padding: 0;
        float: left;
        display: inline;
        list-style: none;
        position: relative;
        height: 24px;
        }

ul#navmenu ul {
        margin: 0;
        border: 0 none;
        padding: 0;
        width: 160px;
        list-style: none;
        display: none;
        position: absolute;
        top: 24px;
        left: 0;
        }

ul#navmenu ul:after /*From IE 7 lack of compliance*/{
        clear: both;
        display: block;
        font: 1px/0px serif;
        content: ".";
        height: 0;
        visibility: hidden;
        }

ul#navmenu ul li {
        width: 160px;
        float: left; /*For IE 7 lack of compliance*/
        display: block !important;
        display: inline; /*For IE*/
        }

/* Root Menu */
ul#navmenu a {
        border: 1px solid #FFF;
        border-right-color: #CCC;
        border-bottom-color: #CCC;
        padding: 0 6px;
        float: none !important; /*For Opera*/
        float: left; /*For IE*/
        display: block;
        background: #EEE;
        color: #666;
        font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
        text-decoration: none;
        height: auto !important;
        height: 1%; /*For IE*/
        }

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
        background: #CCC;
        color: #FFF;
        }

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
        float: none;
        background: #EEE;
        color: #666;
        }

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
        background: #CCC;
        color: #FFF;
        }

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
        background: #EEE;
        color: #666;
        }

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
        background: #CCC;
        color: #FFF;
        }

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
        background: #EEE;
        color: #666;
        }

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
        background: #CCC;
        color: #FFF;
        }

ul#navmenu ul ul,
ul#navmenu ul ul ul {
        display: none;
        position: absolute;
        top: 0;
        left: 160px;
        }

/* Do Not Move - Must Come Before display:block*/
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
        display: none;
        }

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
        display: block;
        }

Ich schaffs einfach nicht die 2 zusammenzuwürfeln :?


Soll ich die .html codes auch zeigen?

Liebe Grüße,
Habi :coffee:

andir 17.02.2010 12:23

Was passiert, wenn Du css 2 in die css1 kopierst -am Ende?

Wo genau liegt dein Problem? Sieht es nicht aus wie gewünscht?

Evtl. mußt du #navigation im HTML ersetzen, wenn #navmenu die gleiche Aufgabe übernehmen soll.

Duderinho 17.02.2010 12:59

Wenn du beides in eine .css packst musst du schauen, dass du auf die richtige .css verlinkst:
Code:

<link rel="stylesheet" type="text/css"  href="deinecss.css">
Willst du beide .css beibehalten, verlinke einfach beide .css:
Code:

<link rel="stylesheet" type="text/css"  href="deinecss.css">
<link rel="stylesheet" type="text/css"  href="deinecss2.css">


Habi 17.02.2010 13:55

wow das ging schnell - Danke für die superschnelle Antworten :):!:

Ich sitz jetzt in der Firma und habs nochmal versucht (IE) und es hat peinlicherweise geklappt... bei FireFox (daheim) wurden die Untermenüs in der Navigation nicht angezeigt... komisch - werd ich mir daheim nochmal ansehen.

Eine andere Frage noch
Ist es möglich das die Navigation ÜBER dem Text angezeigt wird?

Screen:
http://img534.imageshack.us/img534/9...reenshotjk.jpg

Liebe Grüße,
Habi

Duderinho 17.02.2010 13:59

Sollte funktionieren indem du z-index verwendet. Weise der Navi z-index: 2; zu und dem Text z-index: 1; zu. Die Zahl ist an sich egal, die der Navi muss aber höher sein wie die des Textes damit sie im Vordergrund liegt. Falls du schon z-indexes verwendest musst du darauf achten, dass du die Zahlen so wählst, dass die Reihenfolge stimmt.

Habi 17.02.2010 15:49

@ Duderinho
Das muss ich mir erst bei google umdeutschen lassen :lol::lol:
Mal sehen was du meinst ^_^

Danke!

Duderinho 17.02.2010 15:58

Das meine ich:
z-index: Überlappung: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Habi 17.02.2010 16:25

Duderinho mein CSS Gott :lol::lol:
Danke hat prima geklappt :D


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:10 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020