+ Antworten
Ergebnis 1 bis 2 von 2

Thema: CSS problem mit Div und Hover-Div

  1. 19.01.2012 22:53 #1
    christd
    christd ist offline
    Neu an Board
    Registriert seit
    03.11.2007
    Ort
    Klagenfurt, Österreich
    Beiträge
    28
    Bedankte sich
    0
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard CSS problem mit Div und Hover-Div

    hallo leute ...

    ich erstell mir grad mein template und da bin ich auf css gestossen welches meinen wünschen entspricht ... aber irgendwie check ich das ganze ned ganz ...
    wo zum henker kann ich bei der hover-div diesen blauen aussenrand aus meinem beispiel hier...

    auch die position von dem hover-effekt ist mir nicht klar wie ich das ändere ...
    ja ...ich weiss ... die css ist im moment auch noch ein bisserl chaotisch aber da räum ich dann immer am ende zusammen ... und pack alles in eine .css-datei

    danke für eure hilfe schon mal
    chris



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta **********="Content-Type" content="text/html; charset=utf-8" />
    <title>MouseOver Divs</title>
    <style type="text/css">
    <!--
    #box1 {
    position:relative;
    top:100px; left:100px;
    z-index:3;}

    #box1 a {
    color:#ffffff;
    font:12px verdana, sans-serif;
    text-decoration:none;
    display:block;
    padding:22px;
    border:2px solid black;}

    #box1 a:hover {
    background:#009fe3;
    width:400px;}

    #box1 a span {display:none;}

    #box1 a:hover span {
    color:black;
    background:#C4C4C4;
    font:normal 12px Verdana, sans-serif;
    border:1px solid black;
    display:block;
    padding:2px;}
    -->
    </style>
    </head>

    <body>

    <div id="box1" style="width: 200px; height: 50px; position:absolute; margin:-5px 0px 0px -310px; top: 50%; left: 50%; text-align:left; font-family:Verdana, Geneva, sans-serif; padding-left: 5px;"><a href="#"><span><p><strong>Lorem ipsum</strong></p>dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span></a></div>

    </body>
    </html>
    Zitieren Zitieren
  2. 19.01.2012 23:52 #2
    christd
    christd ist offline
    Neu an Board
    Registriert seit
    03.11.2007
    Ort
    Klagenfurt, Österreich
    Beiträge
    28
    Bedankte sich
    0
    Erhielt 0 Danksagungen
    in 0 Beiträgen

    Standard

    ok ... jetzt hab ich grad was an dem css entdeckt ...

    bei "#box1 a:hover" fehlt das padding mit dem ich den aussenabstand definiere ...
    aber die thematik mit der positionierung des hovers ist mir noch unklar

    das mit dem aussenabstand schaut dann mal so aus ...


    #box1 a:hover {
    background:#009fe3;
    width:400px;
    padding:5px;
    }
    Zitieren Zitieren
+ Antworten
« Vorheriges Thema | Nächstes Thema »

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein

Foren-Regeln