|
|||
![]()
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; } 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> Vielen Dank im voraus und viele Grüße, Yeti |
Sponsored Links |
|
|||
![]()
... hab die FAQ hier zum dritten mal gelesen und erst jetzt den richtigen Teil gefunden?
Code:
#navi li { display: inline; } ![]() Ist diese Lösung nun "sauber"? Ich hab ja jetzt einem Element einmal display:block; und gleichzeitig display:inline; zugewiesen? Gruß Yeti |
Sponsored Links |
|
|||
![]()
Vielen Dank für die Erklärungen!
Zitat:
Gruß Yeti |
|
||||
![]()
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.) |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Benötige dringend Hilfe mit CSS in Firefox & IE :( | r4m0n | CSS | 3 | 20.03.2009 11:12 |
CSS - Background-image im Firefox | djsky | CSS | 7 | 04.02.2009 21:36 |
Sitecheck - Problem mit CSS und Darstellung mit Firefox | muijschen | Site- und Layoutcheck | 2 | 27.07.2008 12:16 |
Problem mit Darstellung von Menü | evian | CSS | 1 | 16.06.2008 06:19 |
CSS Menü - Buttonfrage | Ralgar | CSS | 6 | 01.12.2006 17:14 |