CSS Problem

Kutz

hi.

bin nicht sehr bewandert mit Css deshalb meine frage.

verwende ein horizontales menü und möchte nun auf der rechten seite den eingeloggten user zeigen, irgendwie schaffe ich es nicht, dass dies auf der selben höhe wie dass menü angezeigt wird, sprich ohne zeilenumbruch ! Hab auch schon display:inline ausprobiert, jemand ne idee ? Mir ist klar, dass ich es aufspalten könnte like mainnav_left mainnav_right aber dass wäre doch umständlich. (mannav ist ein div mit id)

danke

lg kutz

mein css für dass menü :

#mainnav
{
padding-left: 2em;
background-color: #9FA41D;

}

#mainnav ul
{
margin-top: 0em;
margin-bottom: 0em;
list-style-type: none;
border-left: 1px solid #C4C769;
line-height:165%;
padding: 0;
}

#mainnav li
{
display: inline;
padding: 0 10px;
border-right: 1px solid #C4C769;
}

#mainnav li a
{
text-decoration: none;
color: #272900;
}

#mainnav a:visited
{
color: #600;
}

#mainnav li a:hover
{
text-decoration: none;
color: #fff;
background-color: #272900;
}

Paulchen

Hilft's vielleicht, auch <ul> - das ein Block-Element ist - mit "display: inline" zu einem Inline-Element zu machen (und nicht nur die <li>s)?

maciek

kannst Du mal den html code herzeigen?

cherrybonbon

ohne html ist es schwer dir zu helfen, aber vielleicht hilft dir ja http://de.selfhtml.org/css/layouts/na….htm#horizontal weiter.

generel ist selfhtml äußerst nützlich um infos bezüglich html/css/js nachzulesen.

ich empfehle das firefox-addon firebug (https://addons.mozilla.org/de/firefox/addon/1843) zum experimentieren mit css. mit dem addon kannst du das css/html von der geladenen seite editieren, die änderungen werden dabei wie bei einem wysiwyg-editor sofort angezeigt.

Kutz

hi zuerst mal danke für die antworten, hab eure vorschläge probiert keine änderung.
habs jetzt auch mit ner aufspaltung des mainnav probiert, ebenso dass selbe , fügt immer eine neue zeile ein weshalb dass login unter dem Mainnav auf der rechten seite sich befindet. hab gerade gemerkt, dass der IE die mainnav breiter macht, der Firefox nicht, der setzt es nur eine zeile runter

mein jetziges css:

#mainnav
{
background-color: #9FA41D;
width:80em;
padding: 2px 0;

}

#mainnav_left
{

}

#mainnav_left ul
{
margin: 0 0 0 2em;
padding: 0;
list-style-type: none;
border-left: 1px solid #C4C769;
display: inline;
}

#mainnav_left li
{
display: inline;
padding: 0 10px;
border-right: 1px solid #C4C769;
}

#mainnav_left li a
{
text-decoration: none;
color: #272900;
}

#mainnav_left a:visited
{
color: #600;
}

#mainnav_left li a:hover
{
text-decoration: none;
color: #fff;
background-color: #272900;
}

#mainnav_right
{
display: inline;
float:right;
background-color:Yellow;

}

#userName
{
font-style:italic;
color:White;
display:inline;
font-weight:bold;

}

html

<div id="container">
<div id="header">
Name of Site
</div>
<div id="mainnav">
<div id="mainnav_left">
<ul>
<li><a href="#">asdf</a></li>
<li><a href="">asfadf</a></li>
<li><a href="#">asdf</a></li>
<li><a href="">asdf</a></li>
</ul>
</div>
<div id="mainnav_right">
Logged in as <span id="userName" runat="server"></span>
</div>
</div>

wär fein könnte jemand helfen (:- )

lg kutz

maciek

für den Anfang mal ganz was Banales: Lösche mal alle Zeilenumbrüche weg. Eigentlich sollte es reichen die Zeilenumbrüche gleich nach dem <div> wegzulöschen ... klingt zwar etwas idiotisch, aber ich hatte so ein Problem schon mal ...

Kutz

Zitat von maciek

für den Anfang mal ganz was Banales: Lösche mal alle Zeilenumbrüche weg. Eigentlich sollte es reichen die Zeilenumbrüche gleich nach dem <div> wegzulöschen ... klingt zwar etwas idiotisch, aber ich hatte so ein Problem schon mal ...

<div id="mainnav_right">Logged in as <span id="userName" runat="server"></span></div>

The same problem !

lg kutz

maciek

sodala ... jetzt hatte ich mehr Zeit. Mal abgesehen davon, dass ein <div> nicht zu ist/war, hat Dir beim "mainnav_left" das "float:left" gefehlt. Wenn Du das machst, musst Du auch die Höhe der "mainnav" festlegen. In etwa so:

HTML

<html>
<head>


    <style>
        #mainnav {
            background-color:   #9FA41D;
            width:              80em;
            height:             1.5em;
            padding:            2px 0;
        }


        #mainnav_left {
            float:              left;
        }


        #mainnav_left ul {
            margin:             0 0 0 2em;
            padding:            0;
            list-style-type:    none;
            border-left:        1px solid #C4C769;
        }


        #mainnav_left li {
            display:            inline;
            padding:            0 10px;
            border-right:       1px solid #C4C769;
        }


        #mainnav_left li a {
            text-decoration:    none;
            color:              #272900;
        }


        #mainnav_left a:visited {
            color:              #600;
        }


        #mainnav_left li a:hover {
            text-decoration:    none;
            color:              #fff;
            background-color:   #272900;
        }


        #mainnav_right {
            float:              right;
            background-color:   Yellow;
        }


        #userName {
            float:              right;
            font-style:         italic;
            color:              White;
            font-weight:        bold;
        }
    </style>
</head>


<body>
<div id="container">
    <div id="header">
        Name of Site
    </div>
    <div id="mainnav">
        <div id="mainnav_left">
            <ul>
                <li><a href="#">asdf</a></li>
                <li><a href="">asfadf</a></li>
                <li><a href="#">asdf</a></li>
                <li><a href="">asdf</a></li>
            </ul>
        </div>
        <div id="mainnav_right">
            Logged in as <span id="userName" runat="server"></span>
        </div>
    </div>
</div>
</body>
</html>

Alles anzeigen

PS: Überleg Dir, ob Du den <ul> und <li> Teil überhaupt brauchst. Du könntest die <a> gleich mit inline anordnen ...

Kutz

herzlichen Dank,

sind halt meine ersten gehversuche mit Css

lg

kutz

maciek

Zitat von Kutz

sind halt meine ersten gehversuche mit Css

dann gleich noch Tipp: Verwende width und padding nicht in Kombination miteinander. Das wird auf Grund der unterschiedlichen Auffassung der Richtigkeit des Box-Modells bei IE und Firefox unweigerlich zu Problemen führen.

hal

Zitat von maciek

Das wird auf Grund der unterschiedlichen Auffassung der Richtigkeit des Box-Modells bei IE und Firefox unweigerlich zu Problemen führen.

Hm? IE kann doch gar kein CSS? Der kann doch nur so lookalikes von den webstandards.

maciek

Zitat von hal

Hm? IE kann doch gar kein CSS? Der kann doch nur so lookalikes von den webstandards.

wie meinst Du das?

hal

Der IE kann etwas, das "almost, but not entirely unlike" HTML aussieht, und das gleiche gilt auch für CSS.
Nur, weil der IE Dateien, die mit dem Typ text/html angegeben sind, rendert, sollte man sich nicht in die Irre leiten lassen, dass er das auch wirklich nach den HTML-Regeln macht.
Bei den Seiten, die sowohl in Brausern als auch im IE funktionieren sollen, verwende ich immer eine komplett separate Version für den IE. Mit PHP ist es auch nicht schwer, diese beiden Kategorien voneinander zu unterscheiden.

Myc0rrhizal

Zitat von hal

Hm? IE kann doch gar kein CSS? Der kann doch nur so lookalikes von den webstandards.

So ein bledsinn, schon der IEv3 hatte rudimentären CSS Support. Der Punkt ist halt einfach, das sich IE (mit ausnahme des IE5/Mac*) einfach nicht an die W3C Normen hält und einfach eigene Regel erfindet, und deshalb ist die darstellung am IE, naja sagen wir mal, fehlerhaft.

Übrigens sind Browser Verteiler nicht wirklich empfohlen, da es den Wartungsaufwand verdoppelt und dreifacht, und die Verbreitung von nicht W3C-Standard-konformen XHTML / CSS schürt. Interessand zu diesem Thema "Webdesign mit Webstandards" von Jeffrey Zeldman.

*hielt sich an den damaligen standard

hal

Alles, das den CSS-Standard ignoriert, ist kein CSS.

Es gibt einen großen Unterschied zwischen fehlerhafter oder unvollständiger Implementationen, oder bewussten Andersinterpretationen.

maciek

Zitat von hal

Alles, das den CSS-Standard ignoriert, ist kein CSS.

Es gibt einen großen Unterschied zwischen fehlerhafter oder unvollständiger Implementationen, oder bewussten Andersinterpretationen.

ich glaube, wir verzetteln uns da etwas in Details und "Religionsfragen". Tatsache ist, dass IE "eigene Vorstellungen von Standards" hat bzw. einige Sachen nicht standardkonform interpretiert. Wenn man aber einige dieser "Probleme" richtig adressiert, so kommt man mit nur einem .css file (ohne Browserweichen) ganz gut aus. Auch ich halte nicht viel davon, ein eigenes CSS file pro Browser einzubinden.

Myc0rrhizal

Ein Browser ist ja kein CSS, oder wie meinst du das?

Ich rede von "CSS-Support", der ja nicht direkt was mit den Standards zu tun hat wenn ich CSS (Cascading Style Sheets) als Technik ansehe und das Doctype oder das Scheme (k.A. wie das vom W3C definiert wird) f. die jewilige Version ist ja wieder was anderes.

Soweit ich weiß wird CSS3 in Paketen kommen und ein Browser kann entscheiden welche Pakete integriert werden, das ist dann auch CSS-Support, unterstütz dann aber vlt. nich alle funktionen bzw. Standards

Aber grundsätzlich gebe ich dir Recht, ich bin ein IE Gegner wenns um CSS geht, aber CSS-Support hatter.

Bobsch

wieso sind alle so scharf darauf, dass ihre seite in IE genau so ausschaut wie in ff? wenn der IE zu dumm ist, und der user zu dumm, einen gescheiten browser zu verwenden, gibts halt keine tollen animationen, etc.

jemand, der einen alten SW-Röhren-Fernseher hat, kann auch kein HDTV in Farbe empfangen. Des selbe gilt z.B. für IE6 (Industrie-Standard, aber SW-Röhre) im Vergleich zu FF2/FF3/Opera9/Safari. Tough crap, aber kann man nix machen. Und die Browserweichen für unterschiedliche Browser zahlen sich schon aus (z.B. die conditinional comments oder wies heissen, mit denen du bestimmte Versionen vom IE aussortieren kannst)

allgemeinerer Tipp: verwende für unterschiedliche aufgaben unterschiedliche CSS-Dateien. (eine Datei für Farben, eine für Layout, eine für Schriftsatz.) IMHO sind die einzelnen Bereiche viel effizienter zu ändern.

@For3st
das CSS3 Beispiel ist schlecht gewählt. Grundsätzlich ist es so - IE7 z.B. hat sich an die CSS2.1-Standards schon ziemlich angenähert, interpretiert aber z.B. das Boxmodell anders als das W3C es vorschlägt. Damit unterstützt der IE7 schlicht und ergreifend den CSS 2.1 Standard nicht - größtenteil, aber nicht komplett. Selbiges gilt übrigens auch bei einigen Kleinigkeiten für den FireFox, aber bei wichtigen Dingen (Box-Model) ist er standard-konform.

Ist ein bisserl so wie bei den HD-Ready Sachen. Nicht der volle Standard, aber sowas ähnliches, mit ein paar Sachen halt kastriert. Der IE7 ist halt auch CSS2.1-ready (nachdem es den Standard jetzt seit ~10 jahren gibt!)

hal

Ja, wie in so vielen Bereichen hat Microsoft Rückwärtskompatiblität einer guten Implementierung vorgezogen.

Bobsch

okay, die rückwärtskompatibilität wir von vielen leuten aber auch gefordert (warum kann ich unter vista mein office 97 bitte nicht mehr betreiben, schweinerei?)

genauso - warum muss ich meine homepage jetzt auf einmal an standards anpassen damit sie im neuen IE7 nicht wie müll aussieht?

Jetzt mitmachen!