kostenloser Webspace werbefrei: lima-city


Css- problem

lima-cityForumDie eigene HomepageGrafikdesign

  1. Autor dieses Themas

    jocko

    Kostenloser Webspace von jocko

    jocko hat kostenlosen Webspace.

    hi zusammen.
    hab dieses css-design:

    #navi {
    width:200px; /* Breite des Bereichs */
    text-align:left; /* Textausrichtung */
    margin-top:10px; /* Außenabstand oben */
    margin-bottom:10px; /* Außenabstand unten */
    margin-left:20px; /* Außenabstand links */
    margin-right:15px; /* Außenabstand rechts */
    }

    #navi ul {
    list-style:none; /* keine Aufzählungspunkte */
    }

    #navi li {
    background-color:#82DF7B; /* Hintergrundfarbe */
    border-top:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */
    border-left:25px green solid; /* Rahmenfarbe Auflistungpunkt links */
    border-bottom:1px green solid; /* Rahmenfarbe unten */
    border-right:2px green solid; /* Rahmenfarbe unten */
    margin-top:10px; /* Außenabstand oben */
    padding-top:8px; /* Innenabstand oben */
    padding-bottom:8px; /* Innenabstand unten */
    padding-left:8px; /* Innenabstand unten */
    padding-right:8px; /* Innenabstand unten */
    }



    wie kann ich machen,dass die "link-box",wenn ich mit der maus drüberfahre,sich die farbe von hellgrün zu rot ändert?

    Beitrag geaendert: 24.2.2007 12:13:36 von jocko
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. jenachdem was deine link-box is hängst du einfach hintendran ein ":hover"
    dann halt noch angeben das es rot werden soll..

    wenn z.B. #navi deine linkbox is dann halt so:

    #navi:hover {background-color: #ff0000;}


  4. Autor dieses Themas

    jocko

    Kostenloser Webspace von jocko

    jocko hat kostenlosen Webspace.

    und wie kann ich machen,dass die ganze box,die hier hellgründ ist als link benütz werden kann?
    jetzt ist es nur der link z.b. startseite..
  5. so in etwa?

    http://outlawrocknroll.tiger-army.de/test.html
  6. technofan

    Moderator Kostenloser Webspace von technofan

    technofan hat kostenlosen Webspace.

    hmmm, das Thema hier passt, hab nämlich auch en kleines Prob... wie macht man nen Zeilenhover von ner Tabelle... also von <tr> und von <td> möcht ich des auch wissen.
  7. Also mir fällt im Moment auch nicht ein, wie man das, was du willst realiesieren kann.

    Guck doch mal unter forum.joomla.de. Da gibt es einige CSS Spezialisten.
  8. Autor dieses Themas

    jocko

    Kostenloser Webspace von jocko

    jocko hat kostenlosen Webspace.


    so in etwa?

    http://outlawrocknroll.tiger-army.de/test.html


    ja.nur das die ganze box noch ein link wäre.
  9. wie schon gesagt wurde, musst du mit dem effekt hover arbeiten.
    damit die gesammte box ein link wird, wie ich es auch hier gerade mache:
    http://nils-werner.com/nusse/
    musst du z.b. deinen link so schreiben
    <a href="#"><div id="nav">link</div></a>
    wenn ich deine frage falsch verstanden haben sollte und du was anderes meinst, oder probleme hast, dann schreib mir einfach ne pn
  10. Autor dieses Themas

    jocko

    Kostenloser Webspace von jocko

    jocko hat kostenlosen Webspace.

    ja so gefällt es mir!
    kannst du mir mal den code senden?
  11. gib mir mal deinen, und ich bastel ihn dir um..
    denn meiner ist speziel auf meine seite angepasst ;) und da is zu viel php zwischen ;)

    hier ist schon mal dein code oben optimiert

    #navi {
    width:200px; /* Breite des Bereichs */
    text-align:left; /* Textausrichtung */
    margin:10px 15px 10px 20px; /* Außenabstand reihenfolge: oben rechts unten links*/
    }

    #navi ul {
    list-style:none; /* keine Aufzählungspunkte */
    }

    #navi li {
    background-color:#82DF7B; /* Hintergrundfarbe */
    border-top:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */
    border-left:25px green solid; /* Rahmenfarbe Auflistungpunkt links */
    border-bottom:1px green solid; /* Rahmenfarbe unten */
    border-right:2px green solid; /* Rahmenfarbe unten */
    margin-top:10px; /* Außenabstand oben */
    padding:8px; /* Innenabstand bei nur einer angabe, wird es für alles übernommen.. */
    }


    Beitrag geaendert: 24.2.2007 14:35:32 von nilswerner
  12. Autor dieses Themas

    jocko

    Kostenloser Webspace von jocko

    jocko hat kostenlosen Webspace.

    body { background-color:yellow; }

    #navi {
    width:200px; /* Breite des Bereichs */
    text-align:left; /* Textausrichtung */
    margin-top:10px; /* Außenabstand oben */
    margin-bottom:10px; /* Außenabstand unten */
    margin-left:20px; /* Außenabstand links */
    margin-right:15px; /* Außenabstand rechts */
    }

    #navi ul {
    list-style:none; /* keine Aufzählungspunkte */
    }

    #navi li {
    background-color:#82DF7B; /* Hintergrundfarbe */
    border-top:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */
    border-left:25px green solid; /* Rahmenfarbe Auflistungpunkt oben */
    border-bottom:1px red solid; /* Rahmenfarbe unten */
    border-right:2px blue solid; /* Rahmenfarbe unten */
    margin-top:10px; /* Außenabstand oben */
    padding-top:8px; /* Innenabstand oben */
    padding-bottom:8px; /* Innenabstand unten */
    padding-left:8px; /* Innenabstand unten */
    padding-right:8px; /* Innenabstand unten */
    }

    #navi li:hover {background-color:green;}
    #navi a:hover {
    color:chartreuse;

    text-decoration: none;}


    ich hätte am liebsten,dass es sich auch nach rechts verschibt und eben das mit dem ganzen kästchen..dankeschön
  13. das mit ul und li hat nich so ganz geklappt, hab einfach alles mit divs gemacht..
    die css datei:
    body { background-color:yellow; }

    #nav {
    width:200px; /* Breite des Bereichs */
    text-align:left; /* Textausrichtung */
    margin:10px 15px 10px 20px; /* Außenabstand reihenfolge: oben rechts unten links */
    }

    .nav {
    background-color:#82DF7B; /* Hintergrundfarbe */
    border-top:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */
    border-left:25px green solid; /* Rahmenfarbe Auflistungpunkt oben */
    border-bottom:1px red solid; /* Rahmenfarbe unten */
    border-right:2px blue solid; /* Rahmenfarbe unten */
    margin-top:10px; /* Außenabstand oben */
    padding:8px; /* Innenabstand wird für alle übernommen, da es die gleichen sind */
    }

    .nav:hover {color:chartreuse;text-decoration: none;background-color:green;padding-left:15px /*kann erhöhtwerden, jenachdem wie weit der link wandern soll beim hover*/}

    der html part
    <div id="nav">
    <a class="link" href="#"><div class="nav">link</div></a>
    <a class="link" href="#"><div class="nav">link</div></a>
    <a class="link" href="#"><div class="nav">link</div></a>
    <a class="link" href="#"><div class="nav">link</div></a>
    <a class="link" href="#"><div class="nav">link</div></a>
    </div>




    bekomm ich ein karma? ;)

    Beitrag geaendert: 24.2.2007 15:01:04 von nilswerner
  14. sowas hab ich auch mal gesucht.
    nur ohne diesen weissen rand.wie bringt mal den weg?

    Hast von mir eins bekommen..vielleicht kommt jocko nochmals und gibt dir auch eins

    Beitrag geaendert: 24.2.2007 15:04:42 von krska-vas
  15. hab das erneuert ;)
    jetz nochma kopieren und einfügen hab ich im edit weg gemacht..

    edit:
    ansonsten einfach den
    border:1px solid #fff;
    befehl löschen..

    Beitrag geaendert: 24.2.2007 15:05:19 von nilswerner
  16. danke!
    wo hast du css gelernt?mit einem buch?
  17. nope alles selbst bei gebracht..hab mir css dateien angeschaut, ein wenig mit denen rumgespielt, und dabei gelernt ;)

    ansonsten kannst dir ma
    css4you.de anschauen dort sind noch nen paar gute sachen zu sehen..oder diese seite
    http://css.fractatulum.net/

    Beitrag geaendert: 24.2.2007 15:08:43 von nilswerner
  18. Nur zur Info nebenbei:
    IE6 und andere dieser Sorte unterstützen :hover nur für Links, andere Browser erlauben :hover für alle Elemente wie es sich gehört...

    MfG apollo13
  19. echt?
    scheiß microsoft ^^
    wer will benutzt denn auch schon den IE ;)
    sollte ich mich ma anschauen und ggf. ändern
  20. IE brät sich ja überall ne extrawurst...


    http://alistapart.com/stories/taminglists/



    http://www.thestyleworks.de/tut-art/ie7.shtml

    Laut der Seite solls im IE7 eh behoben sein
  21. will ich ma hoffen ;) will mir ja nich scho wieder alles neu aneignen müssen nur damit die mit dem IE das auch sehn könn ;)
  22. 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!