Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css+xhtml] Jak zrobić taki link...
Forum PHP.pl > Forum > Przedszkole
Kisiol_Ent
Otorze chce aby link "Pobierz teraz!" był gifem i mrygał ochoczo do użytkownika...
Wszystko jest ok ale chce tez aby np jak uzytkownik wylaczy style CSS albo oglada strone
w trybie textowym (np na komórce) to zeby zamiast (pod) gifem był tekst...
Jak to zrobić?

Mam koncepcje aby zrobić link zwykly i przykryć go linkiem graficznym ale niewiem czy to dobry pomysl...
plisek
nie wiem czy dobrze zrozumiałem, ale prostym sposobem jest chyba użycie JavaScript i automatyczne wymuszanie przeładowania strony wg wybranej opcji np włącz style css-wyłacz style css

mozna tez to napisac w php i przed zaladowaniem strony ustalic w jak sposób ma byc wyswietlana tresc strony-sam text, czy "ochoczo mrugający' ;P graficzny z css

pozdr

a jezeli chodzi o to jak zrobic, porponuje poczytac o instrukcjach warunkowych
cyphelf
W pliku html:

  1. <h1 id="download"><span></span>Ściągnij plik</h1>



W css:

  1. h1 span {
  2. display: block;
  3. position: relative;
  4. z-index: 1;
  5. }
  6. #download, #download span {
  7. width: 200px;
  8. height: 50px;
  9. background-repeat: no-repeat;
  10. background-image: url("/twoj_plik.gif");
  11. }
  12.  
  13. #download span {
  14. margin-bottom: -50px;
  15. }


W ten sposób powinno działać, musisz jeszcze dodać tam odnośnik <a>, a <h1> możesz zmienić na cokolwiek innego,
siemakuba
A czy nie będzie słusznie zrobić tak:

  1. <style type="text/css">
  2. #link {
  3. background:url('obrazek_dla_linku.jpg') no-repeat 0 0 transparent;
  4. display:block;
  5. width:200px;
  6. height:20px;
  7. text-indent:-999px;
  8. }
  9.  
  10. <a id="link" href="link.html">Wartość tekstowa linku</a>


Dzięki temu przy włączonym CSS obrazek z tła wypełnia zawartość odnośnika a tekst jest schowany. Kiedy CSS będzie wyłączone link będzie najnormalniejszym linkiem tekstowym.

pozdr.
Kisiol_Ent
A kiedy beda wyłączone grafiki to textu niebedzie! Do kitu ta metoda!
Próbowałem img zrobic ale tez do kitu bo ja sie wylaczy grafike to bedzie ramka z ikonka :/

Ale widze ze cyphelf mi tu dobry kod podaje zaraz go przerobie snitch.gif

Dzieki cyphelf :*
maryaan
Cytat(Kisiol_Ent @ 8.02.2007, 22:39:22 ) *
np na komurce
co to jest komurka?

brak grafiki w przegladarkach tekstowych rekompensuje alternatywny tekst, ktory - jak z tego wynika - jest elementem wymaganym


pozdrawiam
maryaan
tropiciel dzieci neo
siemakuba
Cytat(Kisiol_Ent @ 9.02.2007, 23:20:29 ) *
A kiedy beda wyłączone grafiki to textu niebedzie! Do kitu ta metoda!
Do każdej z metod bardziej "kombinacyjnych" niż podstawowa składania HTML/CSS i ich wykorzystanie zgodne z przeznaczeniem można znaleźć X sytuacji w których ta metoda się nie sprawdzi.

Chciałeś sposobów na swoje rozwiązanie to je dostajesz. Nie krzycz więc na nikogo proszę.

pozdr.
lopik
Cytat("Kisiol_Ent")
w trybie textowym (np na komórce)

A robienie stron pod komórki to już trochę inna bajka winksmiley.jpg
Vogel
  1. <link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
  2. <link rel="stylesheet" type="text/css" media="print" href="print.css" />
  3. <link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.