kostenloser Webspace werbefrei: lima-city


Style Tag (Mehrere Styles in einem Attribut?)

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    kill-a-teddy

    Kostenloser Webspace von kill-a-teddy

    kill-a-teddy hat kostenlosen Webspace.

    Als Beispiel nenne ich jetzt mal ".tag/container">container" und ".container:hover", welche ich beide in eine div legen möchte:

    <div id="bla" style="????">
    </div>


    Wie mache ich das nun? Ich kann wohl schlecht zwei mal color definieren oder so ^^
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. m****r

    Meinst du, dass man einmal eine Farbe für <div> hat und eine andere für das gleiche div:hover ?

    Das wäre dann bei id="bla".

    #bla {
    color:red;
    }
    #bla:hover {
    color:blue;
    }

    Oder was genau meinst du hier?
  4. t*****b

    Das funktioniert nicht per inline-Style, sondern nur über eine externe CSS-Datei oder ein Style-Kontainer im head.


    .container {
    color:red;
    }
    .container:hover {
    color:blue;
    }


    <div id="bla" class="container">
    ...
    </div>
  5. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    Was meinst du genau?
    Sowas?
    <div class="eineklasse andereklasse">
    Oder eher sowas:
    <div style="stiel1: wert; stiel2:wert">
    Auf jeden Fall darfst du eine Eigenschaft (z.B. Farbe) mehrmals definieren, am Ende wird die zuletzt ausgewertete Definition verwendet, außer du schreibst
    !important
    zu der Definition die alle anderen Definitionen im gleichen Gültigkeitsbereich überschreiben soll.

    Per inline-Style kannst du nur einen festen Style festlegen der für immer gilt, also nichts dynamisches. Dafür brauchst du dann CSS mit Selektoren.

    .container
    und
    .container:hover
    wird automatisch zugeordnet sobald du
    <div class="container">
    schreibst, da das :hover nur auf "container" angewendet wird.
  6. Autor dieses Themas

    kill-a-teddy

    Kostenloser Webspace von kill-a-teddy

    kill-a-teddy hat kostenlosen Webspace.

    hackyourlife schrieb:
    Was meinst du genau?
    Sowas?
    <div class="eineklasse andereklasse">
    Oder eher sowas:
    <div style="stiel1: wert; stiel2:wert">
    Auf jeden Fall darfst du eine Eigenschaft (z.B. Farbe) mehrmals definieren, am Ende wird die zuletzt ausgewertete Definition verwendet, außer du schreibst
    !important
    zu der Definition die alle anderen Definitionen im gleichen Gültigkeitsbereich überschreiben soll.

    Per inline-Style kannst du nur einen festen Style festlegen der für immer gilt, also nichts dynamisches. Dafür brauchst du dann CSS mit Selektoren.

    .container
    und
    .container:hover
    wird automatisch zugeordnet sobald du
    <div class="container">
    schreibst, da das :hover nur auf "container" angewendet wird.


    Eher so etwas:

    <div style="div:hover{stil1};div.nomal{stil2}">


    Das das so in der Form nicht funktioniert ist mir klar ^^ deshalb möchte ich ja wissen, wie ich das schaffe? :P

    Hab es schon mit einem onmouseover probiert, aber das funktioniert auch nicht (oder ich mache etwas falsch)..

    Also das Ding ist: Ich hab im JS eine Funktion, die auf JQ basiert.. Mit dem DOM Parser wird ein Image ausgelesen, um das image herum wird ne div gelegt.. Nu möchte ich der div eben einen hover effekt verpassen ^^ Aber: mit dem ".wrap()" von JQ kann ich nur inline style's vergeben, alles andere funktioniert leider nicht :(


    //EDIT:

    Kann man in dem div ein Stylesheet einbinden?

    Zum Beispiel
    <div><link rel="stylesheet" href="internetseite.css"></div>


    Beitrag zuletzt geändert: 3.7.2012 16:09:23 von kill-a-teddy
  7. ich glaub :hover ist dafür kein gutes Beispiel,
    zum Einen, weil :hover im IE nur bei <a> Tags funktioniert
    zum Anderen, weil :hover "nur" ein Selektor eines Elements und kein eigenständiger Style ist

    wie hackyourlife ja erklärt hat:
    hackyourlife schrieb:
    CSS mit Selektoren.

    .container
    und
    .container:hover
    wird automatisch zugeordnet sobald du
    <div class="container">
    schreibst, da das :hover nur auf "container" angewendet wird.


    aber mal das BSP mit Hintergrund und Text-Farben

    .bg_dunkel {
    background:#000000;
    }

    .bg_hell {
    background:#FFFFFF;
    }

    .txt_dunkel {
    background:#000000;
    }

    .txt_hell {
    background:#FFFFFF;
    }


    für Anwenung von 2 Klassen einfach in class="" beide durch Leerzeichen getrennt rein schreiben

    <div class="bg_dunkel txt_hell"> Weißer Text auf schwarzem Hintergrund </div>
    
    <div class="bg_hell txt_dunkel"> Schwarzer Text auf weißem Hintergrund </div>


    geht auch mit ID und Klasse gemischt

    #dunkel {
    background:#000000;
    }

    #hell {
    background:#FFFFFF;
    }

    .txt_dunkel {
    background:#000000;
    }

    .txt_hell {
    background:#FFFFFF;
    }


    für Anwenung von Klasse und ID in einem Element einfach in beide normal zuweisen

    <div id="dunkel" class="txt_hell"> Weißer Text auf schwarzem Hintergrund </div>
    
    <div id="hell" class="txt_dunkel"> Schwarzer Text auf weißem Hintergrund </div>


    aber zwei IDs in einem Element machen glaub keinen Sinn :)


    bei Selector (dynamische Pseudo-Klassen) wie a:hover oder p:first-letter
    brauchst Du keinen extra-Style definieren, die greifen "dynamisch"
    also für die angegebene Klasse bzw. für die ID (siehe BSP von hackyourlife oben)



    EDIT .... ahhh .... Du willst :hover auf nicht-Link <a> Elemente anwenden ??? also z.B. auf <div>

    die Pseudo-Klasse (selector) :hover ist eigentlich nur für <a> TAGs gedacht (links)
    viele Browser können es auch nur dort anwenden

    damit .container:hover { ... } geht kann man aber schon was tricksen

    es gibt sowas wie "Whatever:hover" als .htc ... (siehe: http://www.google.de/search?q=hover+htc)
    oder evtl auch was in jQuery oder ähnliches
    also quasi per JavaScript den :hover -Effekt auf alle Elemente anwendbar gemacht


  8. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    digg schrieb:
    ich glaub :hover ist dafür kein gutes Beispiel,
    zum Einen, weil :hover im IE nur bei <a> Tags funktioniert
    zum Anderen, weil :hover "nur" ein Selektor eines Elements und kein eigenständiger Style ist

    [...]

    EDIT .... ahhh .... Du willst :hover auf nicht-Link <a> Elemente anwenden ??? also z.B. auf <div>

    die Pseudo-Klasse (selector) :hover ist eigentlich nur für <a> TAGs gedacht (links)
    viele Browser können es auch nur dort anwenden

    damit .container:hover { ... } geht kann man aber schon was tricksen
    Wozu irgendwie tricksen anfangen? Das ist eine ganz normale genormte Pseudoklasse, die es ab spätestens CSS2 gibt.
    Näheres findest du in der Dokumentation der CSS-Selektoren.

    There may be document language or implementation specific limits on which elements can become :active or acquire :focus.
    Mehr als das wird dazu nicht gesagt...

    Wenn du schon meinst, dass :hover von vielen Browsern nur für <a> verwendet werden kann, warum nennst du dann nicht die Quelle dieser Wahrheit?


    Zu deinem Trick:
    This script is from 2003, and targets a flaw in IE6, which at its peak was a really popuplar browser. [Today (oct 2011) it no longer is, and as such this script should not really be necessary anymore.

    Please try to convice your client, project manager or boss, that not every browser needs to display a website the exact same way; it is the content that matters. And if you really still need to support IE6, don't use :hover for interaction.
    Also kannst du diese Idee schnell wieder verwerfen, da der IE6 doch schon etwas veraltet ist und :hover von allen aktuelleren Browsern richtig interpretiert wird.
  9. Autor dieses Themas

    kill-a-teddy

    Kostenloser Webspace von kill-a-teddy

    kill-a-teddy hat kostenlosen Webspace.

    Offensichtlich kann man einem div bzw. einer Klasse einen :hover Attribut verpassen, denn wenn ich das in einer externen .css Datei mache funktioniert alles einwandfrei ;)

    Ich glaube ihr habt die hälfte von dem Post überlesen ^^

    Ich habe einmal meine Klasse .container und meine Klasse mit Hover .container:hover swap... Statt nun also beide klassen, die sich auf eine div beziehen in eine .css Datei zu packen, möchte ich diese in den Style Tag vom div rein packen.. Beispielsweise hat .container die Eigenschaft
    farbe blau
    aber beim hovern
    .container:hover swap{farbe lila;}


    Soweit sollte das klar sein?

    Nun kann man in einer div zwar einen Style attribut hinzufügen, allerdings wie gesagt auch nur einen

    <div style="farbe blau">
    &nbsp;
    </div>


    Was ich aber tatsächlich möchte ist etwas in der art:

    <div style="farbe blau" onmouseover="irgendwas, dass die farbe lila werden lässt, in css geschrieben">
    &nbsp;
    </div>
  10. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    kill-a-teddy schrieb:
    Nun kann man in einer div zwar einen Style attribut hinzufügen, allerdings wie gesagt auch nur einen
    Und du kannst ihm kein
    class
    verpassen? Es muss also ein inline-Style sein? Schafft das jQuery sonst nicht?
  11. Autor dieses Themas

    kill-a-teddy

    Kostenloser Webspace von kill-a-teddy

    kill-a-teddy hat kostenlosen Webspace.

    hackyourlife schrieb:
    kill-a-teddy schrieb:
    Nun kann man in einer div zwar einen Style attribut hinzufügen, allerdings wie gesagt auch nur einen
    Und du kannst ihm kein
    class
    verpassen? Es muss also ein inline-Style sein? Schafft das jQuery sonst nicht?


    So sieht das aus.. Wie gesagt benutze ich .wrap, um die Div um ein anderes Element zu legen.. Damit hab ich auch keine Probleme, ist eben nur dieser style Tag, der mir zu schaffen macht :D

    Hab gerade an etwas anderes gedacht..

    Wenn ich .css nutze, auf z.B. die Oberste div.. Kann ich dann einen css code, wie in einer externen css schreiben oder bin ich auch an eine bestimmte Schreibweise gebunden?

    //EDIT:

    Sofern niemand eine bessere Lösung hat, kann dies Thema geschlossen werden.. Hier meine Lösung:

    Die externe .css- Datei einfach via Jquery / Javascript in der Funktion laden und dann in den Head bereich einfügen ;)

    function wrap(){
    var myStylesLocation = "online link zur Datei.css";
    $('<style type="text/css"></style>')
        .html('@import url("' + myStylesLocation + '")')
        .appendTo("head");
    }


    Beitrag zuletzt geändert: 4.7.2012 7:36:15 von kill-a-teddy
  12. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!