zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Grafische Navigation aus FAQ Probleme im IE

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.08.2008, 15:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2008
Beiträge: 10
mastermartin befindet sich auf einem aufstrebenden Ast
Standard Grafische Navigation aus FAQ Probleme im IE

Hallo zusammen,

ich versuche gerade meine Webseite: Die Seite über den Halo Clan 360 D'shiznit von einem Tabellenlayout mit Net Objects Fusion auf ein CSS basiertes Layout umzuschreiben. Die Seite über den Halo Clan 360 D'shiznit

Habe hierzu folgende Box für den grafischen Rahmen verwendet: Box by tedd

Für die Navigation bin ich das Tutorial auf der FAQ-Seite durchgegangen. Im Firefox sieht das ganze auch schon entsprechend aus. Nur im IE werden die Grafiken gar nicht angezeigt, es wird nur eine vertikale Liste dargestellt.
Wieso bekomme ich im IE eine falsche Darstellung?

Ich verstehe auch die Angaben für die Zustände der Navi nicht ganz.
#home a span steht für den Zustand link, oder?
Für was stehen die Angaben a:focus span und strong span?

Außerdem ist das Logo und die Navi nicht zentriert, obwohl ich in CSS text-align: center angegeben habe.

Ich hoffe ihr könnt mir weiter helfen.

Hier ein Teil des CSS Code:
Code:
/* \*/
* html #tlc, * html #trc {height: 1%;}
/* */

body
	{
	margin: 0;
	padding: 0;
	background-color: #66ff66;
	font-size: 100.01%;
	text-align: center;
	font-family : Georgia, Palatino, "Times New Roman", Times, Serif;
	}

#box
	{
	position: relative;
	margin-left: auto;
	margin-right: auto;	
	margin-top: 0.5em;
	padding: 0;
	text-align: left;
	width:80%;				/* <-- use this to tie width to viewport size */
	width: 40em;				/* <-- use this for a set width */
	background-color: #ffffff;
	min-width:950px;
	}
 	
#content
	{
	padding:1.5em;
	}

#content h1
	{
	color:#0354c2;
	font-weight: bold;
	font-size: 1.2em;
	}
		
#content p
	{
	color:#3b3b3b;
	font-size: 1em;
	line-height: 1.3em;
	}
		
/* ---=== border code follows ===--- */
/*
	tlc = top left corner
	trc = top right corner
	blc = bottom left corner
	brc = bottom right corner
	lb = left border
	rb = right border
	tb = top border
	bb = bottom border 
*/

#tlc, #trc, #blc, #brc
	{
	background-color: transparent;
	background-repeat: no-repeat;
	}

#tlc
	{
	background-image:url(../images/grafik/oben_links.jpg);
	background-position: 0% 0%;
	}

#trc
	{
	background-image:url(../images/grafik/oben_rechts.jpg);
	background-position: 100% 0%;
	}
	
#blc
	{
	background-image:url(../images/grafik/unten_links.jpg);
	background-position: 0% 100%;
	}

#brc
	{
	background-image:url(../images/grafik/unten_rechts.jpg);
	background-position: 100% 100%;
	}

#tb, #bb
	{
	background-color: transparent;
	background-repeat: repeat-x;
	}
			
#tb
	{
	background-image:url(../images/grafik/mitte_oben.jpg);
	background-position: 0% 0%;
	}

#bb
	{
	background-image:url(../images/grafik/mitte_unten.jpg);
	background-position: 50% 100%;
	}
	
#rb
	{
	background-image:url(../images/grafik/mitte_rechts.jpg);
	background-position: 100% 0%;
	background-repeat: repeat-y;
	}

#lb
	{
	background-color: #ffffff;
	background-image:url(../images/grafik/mitte_links.jpg);
	background-position: 0% 100%;
	background-repeat: repeat-y;
	}
	
#logo
	{
	vertical-align:text-top;
	text-align:center;
	}
	
	/* ---=== Navigation ===--- */

#navi li {
	float: left;
	width: 142px;
	list-style:none;
	text-align:center;
	}

#navi a,
#navi strong {
	display: block;
	height: 55px;
	width: 100%;
	position: relative;
	overflow: hidden;
	}

#navi span {
	position: absolute;
	width: 100%;
	height: 55px;
	top: 0;
	left: 0;
	background: url(../images/navi/navi_gesamt.jpg) no-repeat;
	}

/* #navi #home */
	
#navi #home a span { /* Erste die horizontale und der Zweite die vertikale Position */
	background-position: 0 0;
	}

#navi #home a:hover span {
	background-position: 0px -55px;
	}
#navi #home a:active span {
	background-position: 0px -110px;
	}
#navi #home a:focus span,
#navi #home strong span {
	background-position: 0px -110px;
	}

Geändert von mastermartin (22.08.2008 um 15:20 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.08.2008, 20:44
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von mastermartin Beitrag anzeigen
Hallo zusammen,

ich versuche gerade meine Webseite: Die Seite über den Halo Clan 360 D'shiznit von einem Tabellenlayout mit Net Objects Fusion auf ein CSS basiertes Layout umzuschreiben. Die Seite über den Halo Clan 360 D'shiznit

Habe hierzu folgende Box für den grafischen Rahmen verwendet: Box by tedd

Für die Navigation bin ich das Tutorial auf der FAQ-Seite durchgegangen. Im Firefox sieht das ganze auch schon entsprechend aus. Nur im IE werden die Grafiken gar nicht angezeigt, es wird nur eine vertikale Liste dargestellt.
Wieso bekomme ich im IE eine falsche Darstellung?
Scheint ein Problem mit dem einladen der CSS-Datei zu sein. Lass mal "media=screen" weg.
Zitat:
Ich verstehe auch die Angaben für die Zustände der Navi nicht ganz.
#home a span steht für den Zustand link, oder?
Für was stehen die Angaben a:focus span und strong span?
#home a span = Link im normal Zustand
#home a:focus span = Link im markierten Zustand
#home strong span = Link im aktiven Zustand (z.B. bist du auf der Seite: "Home" kommt dies zum Einsatz)
Zitat:
Außerdem ist das Logo und die Navi nicht zentriert, obwohl ich in CSS text-align: center angegeben habe.
Was hat "text-align:center" bekommen, um den <=IE6 zum zentrieren zu bewegen?

Moderne Browser brauchen im zuzentrierenden Element "margin: 0 auto".
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.08.2008, 21:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2008
Beiträge: 10
mastermartin befindet sich auf einem aufstrebenden Ast
Standard

Dake für die Hilfe. Die Zentrierung passt jetz. Aber der IE zickt immer noch. Die Navi wird mit Listenpunkten und ohne Grafiken angezeigt. Ich benutze den IE 7 zum testen.
Mit Zitat antworten
  #4 (permalink)  
Alt 25.08.2008, 21:55
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von mastermartin Beitrag anzeigen
Dake für die Hilfe. Die Zentrierung passt jetz. Aber der IE zickt immer noch. Die Navi wird mit Listenpunkten und ohne Grafiken angezeigt.
Sry, ka wieso das so ist. Muss sich noch jemand anderes ansehen.
Zitat:
Ich benutze den IE 7 zum testen.
Nimm den Opera 9.5x oder den Firefox 3.x zum testen. Die haben die beste Engine und sind deshalb nicht so Fehler anfällig, wie der IE.


PS: [Invalid] Markup Validation of http://www.dshiznit.de/withouttd/html/ - W3C Markup Validator
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #5 (permalink)  
Alt 25.08.2008, 22:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Die IE Developer Toolbar zeigt, dass der IE ein Element <br id="navi"> sieht.
Ja, es wäre wirklich sinnvoll, die HTML-Fehler zu beheben.
Mit Zitat antworten
  #6 (permalink)  
Alt 25.08.2008, 22:07
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Interessanter Fehler. Dem br fehlt ein ">" und schon denkt der IE

Code:
<br <ul id="navi">
würde
Code:
<br id="navi">
bedeuten. Und der Validator schickt eine einfachen Warnung, sonst nichts, weil es sogar valid ist. Köstlich.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #7 (permalink)  
Alt 25.08.2008, 23:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2008
Beiträge: 10
mastermartin befindet sich auf einem aufstrebenden Ast
Standard

Blöde Fehler CSS im html Code. In Zukunft benutz ich immer den Validator.

Werd mir mal die Internetseite fwpf-webdesign.de anschauen um den Rest meines Layouts zu realisieren. Ich hoffe damit steig ich ein wenig mehr hinter die Regeln von CSS.
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
Problem mit Navigation safari CSS 12 20.04.2011 12:11
Float-Problem? mischaef CSS 33 20.10.2010 17:20
Probleme mit horizontaler Navigation Bollmann CSS 2 05.10.2008 02:25
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 16:29
Container mit 2 Container darin -> Hintergrund anzeigen bendar CSS 4 05.04.2005 19:18


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