|
|||
![]()
Hi
![]() Gleich vorweg: KLASSE Forum ^_^ Ich bin noch im Anfangsstadium ![]() ![]() ![]() 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 ![]() 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; } 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; } ![]() Soll ich die .html codes auch zeigen? Liebe Grüße, Habi ![]() |
Sponsored Links |
|
|||
![]()
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.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Sponsored Links |
|
|||
![]()
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"> Code:
<link rel="stylesheet" type="text/css" href="deinecss.css"> <link rel="stylesheet" type="text/css" href="deinecss2.css"> |
|
|||
![]()
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: ![]() Liebe Grüße, Habi |
|
|||
![]()
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.
|
|
|||
![]() |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hilfe --> Frameseiten mit CSS zusammenbau | grazioli | CSS | 6 | 29.07.2005 13:24 |
formulare und css -> differenzierung nach type möglich? | Andrzew | CSS | 1 | 03.05.2005 12:18 |
Super CSS Seite --> thestyleworks | x-sharp | Ressourcen | 0 | 28.03.2005 01:12 |
XML -> HTML mit CSS, erweiterbares layout | tk | CSS | 0 | 29.11.2004 09:41 |
CSS anfänger will nen paar Tips / Antworten :> | koDiacc | CSS | 23 | 20.09.2004 13:33 |