eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwzmiana wygladu DIV poprzez link
Ilość wypowiedzi w tym wątku: 38

  • 1. Data: 2011-02-11 20:30:22
    Temat: zmiana wygladu DIV poprzez link
    Od: Andre <a...@a...pl>

    Witam.

    Mam taka konstrukcje:

    <div1>
    <a href="">
    <div2>
    <p>text</p>
    </div2>
    </a>
    <div3>
    </div3>
    </div1>


    Chcialbym, zeby caly div2 wewnatrz A byl linkiem i fajnie - dziala. Ale
    jak zrobic, zeby div2 na a:link mial jedno tlo, a na a:hover inne?

    Dodatkowo, czy da sie zrobic, zeby na a:hover zmienialo sie tlo div3?


    Prosilbym oczywiscie i podpowiedz w konstrukcji css/html.


    --
    Pozdrawiam,
    Andre


  • 2. Data: 2011-02-11 20:35:04
    Temat: Re: zmiana wygladu DIV poprzez link
    Od: psychob <p...@g...cum>

    Niejaki *Andre* przemówił ludzkim głosem i zadziwił swoją mądrością
    _pl.comp.www_:
    > <div1>
    > <a href="">
    > <div2>
    > <p>text</p>
    > </div2>
    > </a>
    > <div3>
    > </div3>
    > </div1>
    >
    >
    > Chcialbym, zeby caly div2 wewnatrz A byl linkiem i fajnie - dziala. Ale
    > jak zrobic, zeby div2 na a:link mial jedno tlo, a na a:hover inne?
    a:link div2 { }
    a:hover div2 { }
    >
    > Dodatkowo, czy da sie zrobic, zeby na a:hover zmienialo sie tlo div3?
    Bez js się nie da (ale mogę się mylić, bo nie znam zbyt dobrze
    wszystkich selektorów css-a).


    --
    [ http://psychobsoftware.cba.pl/ ] <- strona domowa


  • 3. Data: 2011-02-11 20:40:43
    Temat: Re: zmiana wygladu DIV poprzez link
    Od: Andre <a...@a...pl>

    psychob napisał(a):

    > a:link div2 { }
    > a:hover div2 { }


    Probowalem. Nie chce dzialac...



    --
    Pozdrawiam,
    Andre


  • 4. Data: 2011-02-11 20:45:17
    Temat: Re: zmiana wygladu DIV poprzez link
    Od: Mirosław Zalewski <miniopl@CUT_THIS.gmail.com>

    luty roku pamiętnego 2011, prawdopodobnie 11. Wielka mądrość na
    czytelników pl.comp.www spłynęła, gdy tako rzekł(a) Andre:

    > Dodatkowo, czy da sie zrobic, zeby na a:hover zmienialo sie tlo div3?

    a:hover + div {background: reguły; }
    --
    Niżej podpisany, zamieszkały w http://minio.xt.pl ,
    Mirosław Zalewski


  • 5. Data: 2011-02-11 20:58:28
    Temat: Re: zmiana wygladu DIV poprzez link
    Od: Andre <a...@a...pl>

    Mirosław Zalewski napisał(a):

    > a:hover + div {background: reguły; }


    Ehh jedna mala kropka i nie chcialo dzialac...

    Dziekuje pieknie, nie wiedzialem o mozliwosci stosowania "+"


    To jeszcze dopytam, przytaczajac poprzedni przyklad:

    <div1>
    <a href="">
    <div2>
    <p>text</p>
    </div2>
    </a>
    <div3>
    </div3>
    </div1>

    Czy da sie na a:link ukryc zawartosc znacznika P, a na a:hover te
    zawartosc pokazac?
    Obecnie div2 jest zdefiniowany na width: 300px; height:100%; i tekst
    ladnie mi DIVa rozszerza. Chcialbym uzyskac taki efekt, ze na a:link
    tekst znika i DIV sie zweza, a na a:hover tekst sie pokazuje i DIV sie
    rozszerza.

    Czy to jest mozliwe do osiagniecia za pomoca CSS?


    --
    Pozdrawiam,
    Andre


  • 6. Data: 2011-02-11 21:08:28
    Temat: Re: zmiana wygladu DIV poprzez link
    Od: psychob <p...@g...cum>

    Niejaki *Andre* przemówił ludzkim głosem i zadziwił swoją mądrością
    _pl.comp.www_:
    > psychob napisał(a):
    >
    >> a:link div2 { }
    >> a:hover div2 { }
    >
    >
    > Probowalem. Nie chce dzialac...
    >
    >
    >
    Zgaduje, działa ci jak najedziesz, czyt zmienia się styl, ale nie działa
    'dla linku' (bo href jest pusty)

    Przynajmniej takie zachowanie jest w fazanfoxie

    --
    [ http://psychobsoftware.cba.pl/ ] <- strona domowa


  • 7. Data: 2011-02-11 21:49:39
    Temat: Re: zmiana wygladu DIV poprzez link
    Od: Mirosław Zalewski <miniopl@CUT_THIS.gmail.com>

    luty roku pamiętnego 2011, prawdopodobnie 11. Wielka mądrość na
    czytelników pl.comp.www spłynęła, gdy tako rzekł(a) Andre:

    > Dziekuje pieknie, nie wiedzialem o mozliwosci stosowania "+"

    Polecam przejrzeć selektory CSS3:
    http://www.w3.org/TR/css3-selectors/#selectors

    Z tym że pewnIE nie wszystkie przeglądarki wszystkie obsługują.

    > To jeszcze dopytam, przytaczajac poprzedni przyklad:
    >
    > <div1>
    > <a href="">
    > <div2>
    > <p>text</p>
    > </div2>
    > </a>
    > <div3>
    > </div3>
    > </div1>
    >
    > Czy da sie na a:link ukryc zawartosc znacznika P, a na a:hover te
    > zawartosc pokazac?

    Znaczy:

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

    ?

    Gdybyś tam miał kilka akapitów i chciał np. ukryć wszystkie poza
    pierwszym, ale je pokazywać gdy kursor najedzie na ten pierwszy, to
    byłoby to trudniejsze. Ale też do zrobienia w czystym CSS, akurat
    niedawno przerabiałem.
    --
    Niżej podpisany, zamieszkały w http://minio.xt.pl ,
    Mirosław Zalewski


  • 8. Data: 2011-02-12 11:52:06
    Temat: Re: zmiana wygladu DIV poprzez link
    Od: Andre <a...@a...pl>

    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


  • 9. Data: 2011-02-12 13:07:01
    Temat: Re: zmiana wygladu DIV poprzez link
    Od: Peter May <p...@o...pl>

    W dniu 2011-02-12 12:52, Andre pisze:
    [...]
    > ----------html----------------------
    > <div class="pad_rama">
    >
    > <a>
    >
    > <div class="pad_up">
    > <p class="pad_header">Kasia</p>
    > </div>
    >
    > </a>
    [...]

    Od kiedy taka struktura jest prawidłowa?

    --
    Peter


  • 10. Data: 2011-02-12 13:12:38
    Temat: Re: zmiana wygladu DIV poprzez link
    Od: Mirosław Zalewski <miniopl@CUT_THIS.gmail.com>

    luty roku pamiętnego 2011, prawdopodobnie 12. Wielka mądrość na
    czytelników pl.comp.www spłynęła, gdy tako rzekł(a) Andre:

    > 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----------------------

    Jeśli to jest cały kod, to sprawa jest prosta -- zapomniałeś
    zadeklarować DOCTYPE, przez co IE wchodzi w tryb zgodności z jakimiś
    archaicznymi samozwańczymi ,,standardami" z początku wieku. Wystarczy że
    dodasz jako pierwszą linijkę:

    <!DOCTYPE html>

    i wszystko będzie działało.
    To jest DOCTYPE dla HTML5. Inne znajdziesz tutaj:
    http://www.w3schools.com/tags/tag_DOCTYPE.asp

    Poza tym kilka uwag natury ogólnej:
    1. Używaj tagów o znaczeniu semantycznym*. Jeśli coś ma być nagłówkiem,
    niech będzie nagłówkiem (<h1> do <h6>, w zależności od poziomu) a nie
    akapitem z odpowiednią klasą. Przy pomocy CSS masz pełną kontrolę nad
    prezentacją dokumentu -- możesz zrobić żeby <span> wyświetlał się jako
    blok i tym podobne.

    (* - wiem, pleonazm)

    2. Jeśli jakiejś klasy chcesz użyć tylko raz, to bardziej na miejscu
    będzie użycie identyfikatora niż klasy:
    <body id="costam">
    #costam {reguły;}
    Ponadto selektory CSS (:first-child, :last-child, +, >, :only-of-type
    itd.) pozwalają bezbłędnie wybierać elementy ze struktury dokumentu.
    Stosując je, przy prostych stronach nie ma potrzeby stosować żadnych
    klas czy identyfikatorów :) (chyba że są Ci potrzebne do manipulacji
    DOM przy pomocy JS).

    3. W CSS elementy w większości dziedziczą właściwości po swoich
    rodzicach. Jak zadeklarujesz font-family dla elementu najwyższego rzędu
    (html lub body, ewentualnie jakiś obejmujący wszystko div), to
    wszystkie jego dzieci będą miały tę samą właściwość.
    (Z poprawką na resetowanie, gdy zazwyczaj się podaje listę elementów,
    ale wtedy raczej podajesz odpowiedni font przy regułach resetujących.)

    Generalnie możesz chcieć przyjrzeć się jakiemuś rzetelnemu kursowi HTML
    i CSS. Niestety nie mogę żadnego polecić, ponieważ sam nie uczyłem się
    z kursów. Dużo podpowiedzi dają też artykuły publikowane na blogach
    osób związanych z tworzeniem stron, bo tam często jest wytłumaczone
    dlaczego zastosowany jest właśnie taki element i takie reguły.
    No i pewnie jeśli po skończeniu strony poprosisz tutaj na grupie o
    recenzję, to zostaną wskazane wszystkie, nawet najmniejsze, błędy.
    --
    Niżej podpisany, zamieszkały w http://minio.xt.pl ,
    Mirosław Zalewski

strony : [ 1 ] . 2 ... 4


Szukaj w grupach

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: