|
Ocena wątku:
- 0 głosów - średnia: 0
- 1
- 2
- 3
- 4
- 5
|
Problem z css
|
Liczba postów: 4
Liczba wątków: 1
Dołączył: 09-01-2011
Reputacja:
0
Witam,
Mam problem z ujednoliceniem wyświetlania buttonów i linków. Konkretnie chodzi o taki fragment kodu:
Kod: input[type=submit], a.button_link {
float:left;
display:block;
padding:4px 10px;
color:#0073ea;
font-weight:bold;
background-color:#fafafa;
text-decoration:none;
border:1px solid #dddddd;
margin:3px 3px 3px 0;
line-height:16px;
cursor:pointer;
font-size:13px;
}
input[type=submit]:hover, a.button_link:hover {
color:#ffffff;
background-color:#0073ea;
border:1px solid #0073ea;
}
Czy jest ktoś w stanie mi powiedzieć dlaczego różnią się wysokością?
Jak je ujednolicić?
Liczba postów: 578
Liczba wątków: 11
Dołączył: 06-01-2011
Reputacja:
23
Witaj,
Resetowałeś ręcznie ustawienia CSS, bądź korzystasz z jakiegoś skryptu?
Liczba postów: 4
Liczba wątków: 1
Dołączył: 09-01-2011
Reputacja:
0
Nic nie resetowałem. Jedyne rzeczy jakie mam globalnie ustawione to padding, margin - na 0 i rozmiar, rodzaj fontu.
Może komuś podpowie fakt, że link inaczej interpretuje wysokość niż button.
Link robi to naturalnie, czyli:
padding-top+height+padding-bottom
W przypadku buttona wysokością jest po prostu:
height
Co więcej, tekst buttona jest zawsze na środku , w przypadku linku - położenie tekstu jest zależne od paddingu.
Liczba postów: 578
Liczba wątków: 11
Dołączył: 06-01-2011
Reputacja:
23
Polecam używanie skryptów resetujących ustawienia CSS. Ja używam np. tego:
Kod: /* --------RESETY-------- */
html, body, ul, li, img { margin: 0; padding: 0;}
h1, h2, h3, ul, li, p { margin: 0; padding: 0;}
body h1, h2, h3 {margin: 0;}
a img {border: none; }
a {outline: none; }
li { list-style: none;}
a { text-decoration: none; color: #cab97d;}
a:visited {}
a:hover {}
a:active {}
/* --------RESETY KONIEC-------- */
Poprostu weklej to na samym początku kodu CSS.
Podaj link do strony, na której występuje problem.
Liczba postów: 4
Liczba wątków: 1
Dołączył: 09-01-2011
Reputacja:
0
10-01-2011, 05:26
(Ten post był ostatnio modyfikowany: 10-01-2011, 05:50 przez fiat125_p.)
Na pewno dam plusika osobie która mi pomoże 
Natomiast Twój reset nie zmienia żadnych ustawień których bym nie wziął pod uwagę w załączonym kodzie.
Linka nie mogę dać, bo to jest aplikacja. Wklejam kod najprostszej strony na której widać problem:
Kod: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
input[type=submit], a.button_link {
float:left;
display:block;
padding:4px 10px;
color:#0073ea;
font-weight:bold;
background-color:#fafafa;
text-decoration:none;
border:1px solid #dddddd;
margin:3px 3px 3px 0;
line-height:16px;
cursor:pointer;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
}
input[type=submit]:hover, a.button_link:hover {
color:#ffffff;
background-color:#0073ea;
border:1px solid #0073ea;
}
</style>
</head>
<body>
<input type="submit" value="Zapisz"/>
<a href="#" class="button_link">Usuń</a>
</body>
</html>
Będę wdzięczny za każdą sugestię.
Problem dla mnie rozwiązuje line-height:18px ... wtedy buttony są identyczne - nie rozwiązuje to ogólnego problemu, w przypadku, gdy ktoś będzie wolał mieć niższy button, bo dla innych wartości line-height już nie jest tak słodko.
O co chodzi?
Liczba postów: 578
Liczba wątków: 11
Dołączył: 06-01-2011
Reputacja:
23
Kod: Link robi to naturalnie, czyli:
padding-top+height+padding-bottom
Skoro tak, to nie próbowałeś napisac osobnych deklaracji dla linka i osobnych dla buttona? Jak będę miał chwile czasu, to pobawię się z tym troche 
Pozdrawiam.
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
Resetowanie nic nie da.
Różnią się - bo tak.
Albo ustawisz dodatkowy styl dla linków, albo zapomnij o takim samym wyglądzie.
Co mogę poradzić? A jako display:block; albo odpowiednie paddingi - dla A będą większe niż dla inputów.
A i tak nigdy nie uzyskasz idealnie takich samych wyglądów z tego powodu, że w inputach nie ruszysz położenia tekstu.
Tak więc zrób dodatkowy styl dla linków i dodaj tam odpowiedni padding + jakieś małe zmiany by zasymulować input (najlepiej wychodzi z display:block, ale to mało praktyczne). Choć sam tak robiłem, to wiadomo, że to nie jest dobra praktyka. W końcu link =/= input
Liczba postów: 578
Liczba wątków: 11
Dołączył: 06-01-2011
Reputacja:
23
Pewnie już na to wpadłeś, a jeśli nie to tutaj masz rozwiązanie:
Kod: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
input[type=submit], a.button_link {
float:left;
display:block;
padding:4px 10px;
color:#0073ea;
font-weight:bold;
background-color:#fafafa;
text-decoration:none;
border:1px solid #dddddd;
margin:3px 3px 3px 0;
line-height:16px;
cursor:pointer;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
}
a.button_link {
padding:5px 10px;
}
input[type=submit]:hover, a.button_link:hover {
color:#ffffff;
background-color:#0073ea;
border:1px solid #0073ea;
}
</style>
</head>
<body>
<input type="submit" value="Zapisz"/>
<a href="#" class="button_link">Usuń</a>
</body>
</html>
Do twojego kodu wystarczyło dołączyc taką linijke a.button_link {padding:5px 10px;}.
Pozdrawiam.
|
Użytkownicy przeglądający ten wątek:
|
|
|
Sponsorzy i przyjaciele
|
|
|
