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

do góry

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

do góry

psychob napisał(a):

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


Probowalem. Nie chce dzialac...



--
Pozdrawiam,
Andre

do góry

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

do góry

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

do góry

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

do góry

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

do góry

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

do góry

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

do góry

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

do góry