Forum PHP.pl > [HTML][CSS] Rozmiar odsyłacza

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS] Rozmiar odsyłacza

dudek90

13.04.2012, 08:42:32

Witam,

Problem wydaje się banalny, ale odsyłacz nie ma u mnie odpowiedniego rozmiaru.

Stworzyłem sobie taki testowy kod:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
  "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a.test
{
  width: 400px;
  height: 400px;
  border: 1px solid red;
  background: url('obrazek.jpg') no-repeat;
}
</style>
<title>Test</title>
</head>
<body>
<a href="#" class="test">Test</a>
</body>
</html>
[HTML] pobierz, plaintext

Czyli powinienem mieć odsyłacz 400x400px, w którym tłem będzie mój obrazek.jpg
Odsyłacz ma niestety taką wielkość jaką ma napis test.
Jest jakiś sposób aby temu zaradzić?

Edit:
Dodałem właśnie linijkę: display: block; i zadziałało więc temat do zamknięcia, przepraszam za zamieszanie, ale myślałem, że display: block; to wartość domyślna ;/

maniana

13.04.2012, 09:20:55

Dodaj do css display:block; Sterowaie wielkością jest dla elementów blokowych.

IProSoft

13.04.2012, 10:09:14

Możesz też użyć obrazka jako odsyłacza, wtedy po zmienie obrazka odsyłać również zmieni rozmiar:

[HTML] pobierz, plaintext 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    a.test img
    {
    border: 1px solid red;
    }
    </style>
    <title>Test</title>
    </head>
    <body>
    <a href="#" class="test"><img src="obrazek.jpg" /></a>
    </body>
    </html>
[HTML] pobierz, plaintext

Chyba, że zależy Ci na pozostawieniu tekstu wtedy tak jak wyżej, dodaj display:block .

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.