XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Probleme mit Top Navigator und Anzeige im Mozilla!?!?! (http://xhtmlforum.de/showthread.php?t=33047)

Patrik 24.08.2004 16:47

Probleme mit Top Navigator und Anzeige im Mozilla!?!?!
 
Hallo Zusammen,

Zuerst möchte ich meine Begeisterung für dieses Forum aussprechen. Ich habe viele interessante Beiträge gelesen, gute Links gefunden und einiges dabei gelernt. Vielen Dank also an Alle die hier aktiv arbeiten.

Hier mein Anliegen:
Die Seite an der ich gerade arbeite soll komplett Barrierefrei und mit CSS layoutet sein. Also wird die Breite je nach Bildschirmauflösung flexibel (bis auf Margin 20px links und rechts) angepasst. Funktioniert auch soweit sehr gut.

Ich habe jetzt aber noch ein Problem mit dem Topnavigator und der Anzeige im Mozilla.
Wenn ich die Schriftgröße verändere(vergrößere), dann wird der innere Navigator (UL & LI) über den Topnav gelegt. Er soll aber darin bleiben und border-bottom des Topnav soll weiterhin dominierend über die gesamte Breite angezeigt werden.

Durch die vielen Versuche ist leider die derzeitige Code-Suppe entstanden. (z.B. die vielen * html #topnav ….) Und mittlerweile bin ich am Rande der Verzweiflung.

Den angefügten Code habe ich auf die wesentlichen Teile gekürzt.

Wenn Ihr also einen Tipp für mich habt, wie ich die Anzeige im Mozilla optimieren kann, dann bin ich absolut begeistert von CSS. Sonst nur begeistert. :)
Es macht sehr viel Spass, sich in CSS einzuarbeiten aber es kostet ab und an sehr viel Geduld. (z.B. bei dem Topnav!)

In der Hoffnung auf Hilfe verbleibe ich mit bestem Dank
Patrik
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Teststyle</title>

<style type="text/css">
body {
        background-color:#fff;
        margin:20px;
        padding:0px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 90%;
        }

.unsichtbar{       
        display:none;
        }

#topnav {
        margin:0px 0px 10px 0px;
        padding:0;
        width:100%;
        min-height:20px;
        border:0px;
        background-color:#CCCCCC;
        color:#ccc;
        font-family: arial, Helvetica, sans-serif;
        font-size: 100%;
        font-style: normal;
        text-align: left;
        border-bottom:2px solid #036;
        }

* html #topnav{
        height:20px;
        }

#topnav ul{
        margin-left:180px;
        padding:0px;
        border-left:1px solid #036;
        font-size: 100%;
        list-style-type: none;
        }

#topnav li{
        margin:0;
        padding:0px;
        min-height:18px;
        border-right:1px solid #036;
        background-color:#ccc;
        float:left;
        }

* html #topnav  li{
        height:20px;
        }

#topnav li a{
        display:block;
        margin:0;
        padding:2px 15px 0px 15px;
        color: #036;
        text-decoration: none;
        min-height:18px;
        font-size:100%;
        background-color:#ccc;
        list-style-type: none;
        float:left;
        }

* html #topnav li a{
        height:20px;
        }

#topnav li a.selected, #topnav01 a.selected:hover{
        color:#fff;
        background-color:#CC0;
        }

#topnav li a:hover{
        display:block;
        color: #036;
        background-color:#F93;
        min-height:18px;
        }

* html #topnav li a:hover{
        height:20px;
        }

</style>
</head>

<body>

<div id="topnav">
<hr class="unsichtbar"><h2 class="unsichtbar">Top Navigation:</h2>
<ul>[*]Home[*]News[*]Service und Produkte[*]Partner[*]Jobs[*]Kontakt[/list]</div>

</body>
</html>


terrikay 24.08.2004 17:22

Ist immer das Gleiche..... -> wenn Du die Links floatest, dann mußt Du danach clearen, sonst kommt der äußere Container nicht mit. ;)

Am besten sowas: <br style="clear:left; font-size:0; line-height:0" />
direkt nach der Liste einfügen (natürlich nicht unbedingt als inline-style....)

Patrik 24.08.2004 17:37

Danke für den Tipp. So einfach!!!
 
Hallo Terrykay,

vielen Dank für den Tipp. So einfach war das??? :oops:

Also, gelesen habe ich das auch schon mit Float und Clear. Nachdem es aber im IE einwandfrei funktioniert hat, habe ich daran leider nicht mehr gedacht.

Da die Umsetzung ohne HTML erfolgen soll, bis auf Body, Head und HTML habe ich das
durch eine Klasse .clearme ersetzt und direkt nach dem letzten[*] eingefügt.

Ist das i.O.???

Besten Dank nochmal und weiterhin viel Erfolg.
Patrik[/u]


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:34 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023