• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

HTML, CSS, <a href="">

VPS Starter Arubacloud
0 głosów
1,989 wizyt
pytanie zadane 13 stycznia 2018 w HTML i CSS przez glodny0 Początkujący (310 p.)

Witam.

Czy ktoś z Was spotkał się z takim przypadkiem?

Stworzyłem dwie nawigacje - górną i boczną, z odsyłaczami do odpowiednich plików html i ta boczna dziwnie się zachowuje. Po kliknięciu na dowolny element tej nawigacji i powrocie na stronę główną (za pomocą przeglądarkowej strzałki w lewo), zarówno pod, jak i nad elementem pojawiają się takie znaki jak na screenie: https://imgur.com/HowFgSU. Nie wydaje mi się, żebym coś sknocił w kodzie, bo nawigacja górna działa bez zarzutu. Jedyną różnicą, która może mieć z tym związek, jest ustawienie border-bottom w nawigacji bocznej, ale po usunięciu borderu dzieje się to samo. Dodam, że sprawdziłem inne przeglądarki i w Chromie i IE nie ma tego problemu, problem jest tylko na Firefoxie.

Kod html:

<aside>
			
	<a href="a.html"><div class="menu2">Nav 1</div></a>
	<a href="b.html"><div class="menu2">Nav2</div></a>
	<a href="c.html"><div class="menu2">Nav 3</div></a>
	<a href="d.html"><div class="menu2">Nav 4</div></a>
	<a href="e.html"><div class="menu2">Nav 5</div></a>
	<a href="f.html"><div class="menu2">Nav 6</div></a>
					
	<p>Miejsce na reklamę</p>
</aside>

Kod CSS:

aside
{
	float: left;
	width: 200px;
	min-height: 780px;
	text-align: center;
	background-color: #696969;
	padding: 0px 0px 10px 0px;
	margin-top: 40px;
}

aside > a >.menu2
{
	border-bottom: 1px dashed #000;
	padding: 10px;
	font-weight: 700;
	transition-property:background-color;
	transition-duration:1s;
}
aside > a >.menu2:hover
{
	background-color: #3671A3;
}

aside > a
{
	text-decoration: none;
	color: #fff;
}

aside > a:hover
{
	color: #BA121A;
}

Mam gorącą prośbę o pomoc.

1 odpowiedź

+1 głos
odpowiedź 13 stycznia 2018 przez Konrad Fx Mądrala (6,910 p.)

Cześć, może być to spowodowane stylami jakie wchodzą po kliknięciu.

Aby na to zaradzić poczytaj o dwóch rzeczach:

1/ :focus {} czyli co jak dany przycisk jest nacisnięty

2/ Outline, jedna z propert css która może Ci pomóc w usunięciu tego.

Wytłumaczenie zachowania przeglądarki:

- Każda przeglądarka ma inny silnik oraz standardowe style które dodaje do stron, dlatego niektóre strony wyglądają inaczej na IE i na Chrome. Aby ujednolicić dane style często używa się plików lub po prostu kodu który takie coś robi.

Przykład poniżej:


/* Global Defaults */
 html, body {
 margin: 0px;
 padding: 0px;
 border: 0px;
 }
 body {
 font: 1em/1.25 Arial, Helvetica, sans-serif;
 }
 
 /* Headlines */
 h1, h2, h3, h4, h5, h6 {
 margin: 0;
 padding: 0;
 font-weight: normal;
 font-family: Arial, Helvetica, sans-serif;
 }
 
 /* Text Styles */
 p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {
 margin: 0;
 padding: 0;
 font: normal normal normal 1em/1.25 Arial, Helvetica, sans-serif;
 }
 blockquote {
 margin: 1.25em;
 padding: 1.25em
 }
 q {
 font-style: italic;
 }
 acronym, abbr {
 cursor: help;
 border-bottom: 1px dashed;
 }
 small {
 font-size:.85em;
 }
 big {
 font-size:1.2em;
 }
 
 /* Links and Images */
 a, a:link, a:visited, a:active, a:hover {
 text-decoration: underline;
 }
 img {
 border: none;
 }
 
 /* Tables */
 table {
 margin: 0;
 padding: 0;
 border: none;
 }
 
 /* Forms */
 form {
 margin: 0;
 padding: 0;
 display: inline;
 }
 label {
 cursor: pointer;
 }
 
 /* Common Classes */
 .clear { clear: both; }
 .floatLeft { float: left; }
 .floatRight { float: right; }
 .textLeft { text-align: left; }
 .textRight { text-align: right; }
 .textCenter { text-align: center; }
 .textJustify { text-align: justify; }
 .blockCenter { display: block; margin-left: auto; margin-right: auto; } /* remember to set width */
 .bold { font-weight: bold; }
 .italic { font-style: italic; }
 .underline { text-decoration: underline; }
 .noindent { margin-left: 0; padding-left: 0; }
 .nomargin { margin: 0; }
 .nopadding { padding: 0; }
 .nobullet { list-style: none; list-style-image: none; }

 

Są to style css które czyszczą całe style defaultowe w przeglądarkach.

Powodzenia!

komentarz 13 stycznia 2018 przez glodny0 Początkujący (310 p.)
Udało mi się nareszcie rozwiązać problem. Float: left siedział w złym miejscu. Zamiast w aside{ } powinien być w aside > a >.menu2{ }. Dziękuję za odpowiedź, na pewno wkrótce poczytam o focusie i outline.

Pozdrawiam.

Podobne pytania

0 głosów
2 odpowiedzi 378 wizyt
pytanie zadane 9 sierpnia 2022 w HTML i CSS przez skylar Nowicjusz (170 p.)
0 głosów
3 odpowiedzi 883 wizyt
pytanie zadane 16 października 2020 w HTML i CSS przez Horsebye Nowicjusz (150 p.)
0 głosów
3 odpowiedzi 690 wizyt
pytanie zadane 2 kwietnia 2020 w HTML i CSS przez sopll Nowicjusz (170 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...