MozillaPL.org - polskie centrum Mozilli

Główne menu:

[CSS] Kolejny problem: marginesy

Jak tworzyć strony WWW zgodnie ze standardami

Moderator: Pomocy?!

[CSS] Kolejny problem: marginesy

Postautor: Gość » 11 maja 2006, 17:46

Przeglądarka: Mozilla/5.0 (Windows; U; Win 9x 4.90; pl; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

Otóż mam cosik takiego:
http://staszek27.fm.interia.pl/zwykle.html
W FF i IE nie ma żadnego odstępu pomiędzy przyciskami (przylegają do siebie) a Opera swoje... :/
Jest na to jakiś sposób??
Gość
 

Postautor: Michał 1234 » 12 maja 2006, 19:55

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

Moim zdaniem to "ul" i "li" można wyrzucić i zamiast tego dać same "a".
Oto cały kod:
Kod: Zaznacz cały
<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<style>
body {
   background: #bbbbbb;
   font-family: verdana;
   color: #ffffff;
   font-weight: 700;
   font-size: 10pt;
}
img {
   border: 2px;
   border-style: dotted;
   border-color: #000000;
   padding: 2px;
}
.linki   {
width: 150px;
padding: 0px;
}
.linki a   {
display: block;
text-decoration: none;
color: #ffffff;
padding: 2px 0px 2px 4px;
background: #444444;
}
.linki a:hover   {
background: #0000aa;
}
.linki a:active   {
background: #0000ff;
}
</style>
</head>
<body>
<div class="linki">
<a href="zwykle.html">Zwykłe</a>
<a href="bmw.jpg">Sam obraz</a>
<a href="#">Nigdzie</a>
<a href="http://www.mozillapl.org">MozillaPL.org</a>
</div>
<br />
<img src="bmw.jpg" />
</body>
</html>


We wszystkich przeglądarkach wygląda tak samo.
POLECAM!!!

Kasten - Darmowe szablony stron www, gify, gry flash...

GryFlash - Darmowe gry flash, gry on-line, mini girki...
Michał 1234
 
Posty: 57
Z nami od: 12 listopada 2005, 13:43
Lokalizacja: Mielec

Postautor: Gedi » 12 maja 2006, 21:18

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

A wystarczy zamiast 'display: table-cell' dać 'display: block;' dla 'a.zdjecho'. Ja bym ograniczył klasy i zrobił tak:

CSS
Kod: Zaznacz cały
ul.lista,
ul.lista li {
   margin: 0;
   padding: 0;
   list-style-type: none;
}
ul.lista a {
   display: block;
   padding: 2px 4px;
   width: 150px;
   text-decoration: none;
   color: #fff;
   background-color: #444;
}
ul.lista a:hover {
   color: inherit;
   background-color: #00a;
}
ul.lista a:active {
   color: inherit;
   background-color: #00f;
}


HTML
Kod: Zaznacz cały
<ul class="lista">
   <li><a href="zwykle.html">Zwykłe</a></li>
   <li><a href="bmw.jpg">Sam obraz</a></li>
   <li><a href="#">Nigdzie</a></li>
   <li><a href="http://www.mozillapl.org">MozillaPL.org</a></li>
</ul>


Poza tym przyjrzyj się ile błędów zrobiłeś w kodzie :). Skorzystaj z walidatora na W3C.
Gedi
 
Posty: 324
Z nami od: 10 sierpnia 2003, 17:36

Postautor: Gość » 13 maja 2006, 19:03

Przeglądarka: Mozilla/5.0 (Windows; U; Win 9x 4.90; pl; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

Dziękuję, zaraz to przeanalizuję ;)
Gość
 


Wróć do Tworzenie stron WWW

Kto jest online

Zarejestrowani użytkownicy: Baidu [Spider], Google [Bot]

cron
Przejdź do powiązanej strony

Nawigacja:

Stopka: