eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwzmiana wygladu DIV poprzez linkRe: zmiana wygladu DIV poprzez link
  • Data: 2011-02-12 11:52:06
    Temat: Re: zmiana wygladu DIV poprzez link
    Od: Andre <a...@a...pl> szukaj wiadomości tego autora
    [ pokaż wszystkie nagłówki ]

    Mirosław Zalewski napisał(a):

    > Znaczy:
    >
    > p {display: none;}
    > div1 a:hover p {display: block;}

    Dziala wysmienicie. Pod Firefoxem 3.6...
    A co zrobic, zeby to ruszylo pod IE8 (standard w Win7)?

    Pozwole sobie wkleic caly kod, ktorego uzywam:

    ----------html----------------------
    <div class="pad_rama">

    <a>

    <div class="pad_up">
    <p class="pad_header">Kasia</p>
    </div>

    </a>

    <div class="pad_mid">
    <p class="pad_opis">Absolwentka Turystyki i Rekreacji na krakowskim AWF-
    ie. Całe życie związana z ruchem narciarstwo, trekking górski, rolki,
    rower, salsa, taniec towarzyski, trenowała również karate kyokushin itp.
    </p>
    </div>

    <div class="pad_down">
    </div>
    ----------/html----------------------

    ----------css------------------------
    </div>



    body
    {
    background-color: black;
    }



    div.pad_rama {
    width: 500px;
    margin: 0 auto;
    padding: 0px;
    }


    div.pad_up {
    width: 100%;
    height: 20px;
    margin: 0px;
    padding: 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    opacity: 0.5;
    background-color: red;
    display: block;
    }

    div.pad_mid {
    width: 100%;
    margin: 0px;
    padding: 0px;
    /*-moz-opacity: 0.5;*/
    background-color: green;
    }

    div.pad_down {
    width: 100%;
    height: 20px;
    margin: 0px;
    padding: 0px;
    -moz-border-radius: 0px 0px 10px 10px;
    /*-moz-opacity: 0.5;*/
    background-color: red;
    }



    p.pad_header {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    display: block;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-align: center;
    }


    p.pad_opis {
    margin: 0px 0px 0px 0px;
    padding: 5px;
    display: block;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-size: 12px;
    font-weight: normal;
    color: white;
    text-align: left;
    display: none;
    }



    a:hover .pad_up {
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-color: aqua;
    outline: none;
    -moz-border-radius: 10px 10px 0px 0px;
    /*opacity: 0.5;*/
    display: block;
    }


    a:hover + .pad_mid p.pad_opis {
    background-color: blue;
    display: block;
    color: red;
    display: block;
    }

    ----------/css------------------------


    Prosze nie zwracac uwagi na atrybuty tylko dla Mozilli. Rozszerzanie DIVa
    powinno dzialac niezaleznie. Border-radius to tylko dodatki kosmetyczne.
    Specjalnie zastosowalem rozne kolory, zeby bylo dokladnie widac, czy
    dziala.

    Z gory dziekuje za pomoc.


    --
    Pozdrawiam,
    Andre

Podziel się

Poleć ten post znajomemu poleć

Wydrukuj ten post drukuj


Następne wpisy z tego wątku

Najnowsze wątki z tej grupy


Najnowsze wątki

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: