zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 2 CSS Files -> 1 CSS File

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.02.2010, 11:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2010
Beiträge: 4
Habi befindet sich auf einem aufstrebenden Ast
Lächeln 2 CSS Files -> 1 CSS File

Hi
Gleich vorweg: KLASSE Forum ^_^

Ich bin noch im Anfangsstadium also seid lieb *g*

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; }
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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.02.2010, 11:23
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.039
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.02.2010, 11:59
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.02.2010
Beiträge: 162
Duderinho befindet sich auf einem aufstrebenden Ast
Standard

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">
Mit Zitat antworten
  #4 (permalink)  
Alt 17.02.2010, 12:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2010
Beiträge: 4
Habi befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 17.02.2010, 12:59
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.02.2010
Beiträge: 162
Duderinho befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 17.02.2010, 14:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2010
Beiträge: 4
Habi befindet sich auf einem aufstrebenden Ast
Standard

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

Danke!
Mit Zitat antworten
  #7 (permalink)  
Alt 17.02.2010, 14:58
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.02.2010
Beiträge: 162
Duderinho befindet sich auf einem aufstrebenden Ast
Standard

Das meine ich:
z-index: Überlappung: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Mit Zitat antworten
  #8 (permalink)  
Alt 17.02.2010, 15:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2010
Beiträge: 4
Habi befindet sich auf einem aufstrebenden Ast
Standard

Duderinho mein CSS Gott
Danke hat prima geklappt
Mit Zitat antworten
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
Hilfe --> Frameseiten mit CSS zusammenbau grazioli CSS 6 29.07.2005 12:24
formulare und css -> differenzierung nach type möglich? Andrzew CSS 1 03.05.2005 11:18
Super CSS Seite --> thestyleworks x-sharp Ressourcen 0 28.03.2005 00:12
XML -> HTML mit CSS, erweiterbares layout tk CSS 0 29.11.2004 08:41
CSS anfänger will nen paar Tips / Antworten :> koDiacc CSS 23 20.09.2004 12:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:37 Uhr.