+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Problem z css (/thread-problem-z-css)
Problem z css - fiat125_p - 09-01-2011
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ć?
RE: Problem z css - Ancik - 09-01-2011
Witaj,
Resetowałeś ręcznie ustawienia CSS, bądź korzystasz z jakiegoś skryptu?
RE: Problem z css - fiat125_p - 09-01-2011
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.
RE: Problem z css - Ancik - 09-01-2011
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.
RE: Problem z css - fiat125_p - 10-01-2011
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>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?
RE: Problem z css - Ancik - 11-01-2011
Kod:
Link robi to naturalnie, czyli:
padding-top+height+padding-bottomSkoro 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.
RE: Problem z css - Kartofelek - 11-01-2011
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
RE: Problem z css - Ancik - 11-01-2011
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.