zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Menü, CSS, Darstellung im IE und im Firefox, die 2.000.000ste :(

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.07.2009, 10:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.07.2009
Beiträge: 4
yeti1966 befindet sich auf einem aufstrebenden Ast
Frage Menü, CSS, Darstellung im IE und im Firefox, die 2.000.000ste :(

Hi,

ich bin der Yeti.
Das ist mal die persönliche Vorstellung

Ich mach schon seit Tagen (immer wieder) an ein und demselben Problem rum. Ein ursprünlich aus Tabellen und reinen Grafiken bestehendes Menü wird von mir gerade umgebaut.

Die vorgeschriebene Darstellung habe ich im Firefox hinbekommen. Im Ie6 und im IE7 pass es nicht, wobei im IE7 wenigstens die Abstände zwischen den Menüpunkten nicht so viel größer sind.

Hier ein Bild:
Rechts die korrekte Darstellung im Firefox, links die verkorkste im IE6.



Ich habe in den letzten Tagen viel gelesen und verstehe immer weniger... jetzt sehe ich den Wald vor lauter Bäumen nicht mehr und deshalb frage ich hier

Hier die CSS-Datei:
Code:
/* generated by csscreator.com */

html, body{
 margin:0;
 padding:0;
 text-align:center;
 background: #aabcc9;
}

#pagewidth{
 margin-top: 25px;
 width:710px;
 text-align:left;
 margin-left:auto;
 margin-right:auto;
}

#header{
 position:relative;
 height:123px;
  background-color:#FFFFFF;
  background: url(pics/kopf.gif);
 width:100%;
}

#leftcol{
 width:169px;
 height: 449px;
 float:left;
 position:relative;
 background: url(pics/menu_back.gif);
  }

#twocols{
 width:541px;
 float:right;
 position:relative;
  }

#rightcol{
 width:24px;
 height: 449px;
 float:right;
 position:relative;
 background: url(pics/right_back.gif);
 }

#maincol{background-color: #FFFFFF;
 float: left;
 display:inline;
 position: relative;
 width:517px;
 height: 449px;
 background: url(pics/inhalt_back.gif);
 }

#footer{
 height:37px;
  background-color:#FFFFFF;
  background: url(pics/fuss.gif);
 clear:both;
 }



 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
 content: ".";
 display: block;
height: 0;
 clear: both;
 visibility: hidden;
 }

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */



 /*printer styles*/
 @media print{
/*hide the left column when printing*/
#leftcol{display:none;}

/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}


/*--------------------- MENU ---------------------*/

#menuecontainer {
	width: 167px;
	margin-top: 25px;

	}



#menue ul {
list-style-type: none;
/*list-style-position: outside;*/
padding: 0px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
letter-spacing:2px;
}
#menue li {
display: block;
margin-bottom: 2px;
list-style-type: none;
/*list-style-position: outside;*/
padding: 0px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
letter-spacing:2px;
}

#menue li a, #menue li a:link {
text-decoration: none;
display: block;
color: #FFFFFF;
border-top: 1px solid #565656;
border-right: 1px solid #565656;
border-bottom: 1px solid #565656;
border-left: 10px solid #565656;
padding:2px;
}
#menue li a:visited {
color: #FFFFFF;
}

#menue li a:hover, #menue li a:active, #menue li a:focus {
color: #FFFFFF;
border-top: 1px solid #940308;
border-right: 1px solid #940308;
border-bottom: 1px solid #940308;
border-left: 10px solid #940308;
padding:2px;
}

a {
margin: 0;
padding: 0;
}

/* spezielle Formate für Home */




#homeobenrechts {
margin-right:5px;
margin-bottom:10px;
float:right;
font-family: Arial, Helvetica, sans-serif;
font-size:0.8em;
letter-spacing:0.15em
text-align:right;
}


#homeobenlinks {
float:left;

}


#homeobenlinks li {
padding: 5px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size:0.9em;
color: #940308;
}

#homeobenlinks li span {
color: #000000;
font-size:0.8em;
font-weight: bold;
}

/* allgemeiner formate im Inhalt */


h1 {
font: 18px Arial, sans-serif;
color: #940308;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 20px;
text-align: right;
letter-spacing:0.2em
}

#flash-start {
text-align:right;
margin-top:100px;
margin-right: 5px;
}

.text {
font: 12px Arial, sans-serif;
margin-top: 15px;
margin-right: 5px;
margin-left:90px;
letter-spacing:0.1em
}

.rechts {
font: 12px Arial, sans-serif;
text-align: right;
margin-top: 15px;
margin-right: 5px;
letter-spacing:0.1em
}

.imp-klein {
font: 9px Arial, sans-serif;
text-align: right;
margin-top: 15px;
margin-right: 5px;
letter-spacing:0.1em
}

.weiter {
font: 11px Arial, sans-serif;
text-align: right;
margin-top: 20px;
margin-right: 5px;
letter-spacing:0.1em
}

.allgimg {
margin-top:20px;
text-align:right;
}
Hier der entsprechende HTML Code:
HTML-Code:
<div id="menuecontainer">
  <div id="menue"
  <ul>
	<li><a href="home.html">Startseite</a></li>
	<li><a href="philosophie.html">Philosophie</a></li>
	<li><a href="referenzen.html">Referenzen</a></li>
	<li><a href="invest.html">Invest Management</a></li>
	<li><a href="kontakt.html">Kontakt</a></li>
	<li><a href="impressum.html">Impressum</a></li>
  </ul>

  </div>
</div>
Könnt ihr mir einen Tip geben?
Vielen Dank im voraus und viele Grüße,

Yeti
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.07.2009, 11:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.07.2009
Beiträge: 4
yeti1966 befindet sich auf einem aufstrebenden Ast
Idee Hier die Lösung...

... hab die FAQ hier zum dritten mal gelesen und erst jetzt den richtigen Teil gefunden?

Code:
#navi li {
	display: inline;
	}
Das ist wie im Supermarkt, wenn du vor dem Ketchup stehst und die Verkäuferin nach dem Ketchup fragst

Ist diese Lösung nun "sauber"? Ich hab ja jetzt einem Element einmal display:block; und gleichzeitig display:inline; zugewiesen?

Gruß Yeti
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.07.2009, 11:59
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Das ist völlig okay, denn li braucht gar kein display: block;, und da li keinerlei "Funktion" hat, darf es gerne für den IE display: inline; bekommen. Übrigens, soll li ein Blockelement bleiben, gibt es auch dafür eine Lösung in den FAQ (per float).

Beachte aber noch die ebenfalls beschriebene Sache mit der nicht vollständig anklickbaren Linkfläche im IE (dort ist nur der Text anklickbar, jedoch nicht der restliche Bereich).

Warum umgibst Du Deine Navi eigentlich mit gleich zwei divs? Bei Deinem Design kann ul auch alleine stehen.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #4 (permalink)  
Alt 14.07.2009, 12:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.07.2009
Beiträge: 4
yeti1966 befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für die Erklärungen!

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Warum umgibst Du Deine Navi eigentlich mit gleich zwei divs? Bei Deinem Design kann ul auch alleine stehen.
Ich möchte evtl. mal ein zweites, separates Menü unter das erste erstellen bzw. evtl. einen Hinweis-Bereich separat gestalten. Da schien mir das sinnvoll.

Gruß Yeti
Mit Zitat antworten
  #5 (permalink)  
Alt 14.07.2009, 12:24
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Auch dann würde ein div#navigation reichen, dass die beiden ul und den Hinweis enthält
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #6 (permalink)  
Alt 14.07.2009, 12:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.07.2009
Beiträge: 4
yeti1966 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Auch dann würde ein div#navigation reichen, dass die beiden ul und den Hinweis enthält
Ja stimmt... jetzt bin ich auch schlauer

Gruß Yeti
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
Benötige dringend Hilfe mit CSS in Firefox & IE :( r4m0n CSS 3 20.03.2009 12:12
CSS - Background-image im Firefox djsky CSS 7 04.02.2009 22:36
Sitecheck - Problem mit CSS und Darstellung mit Firefox muijschen Site- und Layoutcheck 2 27.07.2008 13:16
Problem mit Darstellung von Menü evian CSS 1 16.06.2008 07:19
CSS Menü - Buttonfrage Ralgar CSS 6 01.12.2006 18:14


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