Skocz do zawartości
Pecetowicz Forum komputerowe

Lista całego sprzętu danej zakładki. Okno po najechaniu kursorem


Rekomendowane odpowiedzi

Witam! Mam problem z CSS ponieważ próbuje na wszystkie sposoby zrobić okno które musi się pojawić jeśli najadę kursorem myszy na menu główne, a w tym oknie ma być lista całego sprzętu danej zakładki. Przesyłam także pliki HTML i CSS.

HTML: 

<!DOCTYPE html>
<html lang="pl-PL">
<head>
	<link rel="shourt icon" href="img/ikonaS.jpg">
	<meta charset="UTF-8">
	<title>Shocik - Strona główna</title>
	<link rel="stylesheet" href="css/main.css">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">
</head>
<body>
	<div id="container">
		<div id="header">
			<div id="conto-user"></div>
			<div class="menu">
				<span style="color: #000" id="olo">Telefony i Tablety</span>
					<ol>
						<li>
							<ul>
									<li id="ol"><span style="color: #42d1f4"><a href="#"><B>Telefony</B></a></span></li>
									<li id="ol">LG</li>
									<li id="ol">HTC</li>
									<li id="ol">Lenovo</li>
									<li id="ol">Asus</li>
									<li id="ol">Samsung</li>
									<li id="ol">Sony</li>
									<li id="ol">Nokia</li>
									<li id="ol">Hammer</li>
							</ul>
						</li>
						<li>						
							<ul>
									<li id="ol"><span style="color:#42d1f4"><a href="#"><B>Tablety</B></a></span></li>
									<li id="ol">IOS</li>
									<li id="ol">Windows</li>
									<li id="ol">Android</li>
							</ul>
						</li>	
						<div style="clear:both;"></div>
					</ol>
			</div>
			<div class="menu">
				<span style="color:#000" id="olo">Laptopy</span>
					<ol>
						<li>
							<ul>
								<li id="ol"><span style="color: #42d1f4"><a href="#"><B>Laptopy</B></a></span></li>
								<li id="ol">HP</li>
								<li id="ol">Asus</li>
								<li id="ol">Lenovo</li>
								<li id="ol">MSI</li>
								<li id="ol">Dell</li>
								<li id="ol">Apple</li>
								<li id="ol">Fujitsu</li>
								<li id="ol">Toshiba</li>
							</ul>
						</li>
					</ol>
			</div>
			<div class="menu"><span id="olo" style="color:#000">Komputery</span></div>
			<div class="menu"><span id="olo" style="color:#000">Części komputerowe</span></div>
			<div class="menu"><span id="olo" style="color:#000">Konsole</span></div>
			<div class="menu"><span id="olo" style="color:#000">Akcesoria dla Graczy</span></div>
			<div style="clear:both;"></div>
			<hr width="99.75%" color="#dedede">
		</div>
	</div>
</body>
</html>

oraz CSS

body
{
	background-color: #fff;
	color: #000;
	margin: 0;
}
#container
{
	width: 100%;
}
#header
{
	width: 100%;
	height: 150px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
}
.menu
{
	width: 170px;
	padding: 10px;
	float:left;
	text-align: center;
	padding: 10px 0;
	margin-left: 30px;
	margin-top: 10px;
}
.menu:hover
{
	display:block;
	cursor: pointer;
}
.menu a
{
	text-decoration: none;
	color: #000;
}
ol
{
	list-style-type: none;
	padding: 10px 5px;
	margin: 0;
	font-size: 18px;
	height: 35px;
	width: 150px;
	line-height: 200%;
}
ol a
{
	color: #ffffff;
	text-decoration: none;
	display: block;
}
#ol:hover
{
	text-decoration: underline;
}
#olo:hover
{
	text-decoration: underline;
}
ol > li
{
	margin-top: 10px;
}
ol > li:hover > a
{
	color: #111;
}
ol > li > ul
{
	text-align: left;
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 40px;
	display: none;
}
ol > li:hover > ul
{
	display: block;
}
ol > li > ul > li
{
	background-color:#fff;
	border: 1px solid #010101;
}

Czekam na pomoce! Z góry dziękuje.

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert
Dnia 1.04.2017 o 23:29, Lithard napisał:

Może dodaj plik reset.css + zamiast clasy daj to w id.

 

Serio nie działa kod jest poprawny może odświeżanie przeglądarki ☺️ ?

ID nie służy do stylowania, a wykorzystuje się je raczej do JSa. Wiadomo, że nie jest to jakiś ogromny błąd, ale powinno się tego unikać.

@FemtoBadianCanadian Wrzuć kod na codepen.io i zobaczymy co da się zrobić.

Edytowane przez arces
Odnośnik do odpowiedzi
Udostępnij na innych stronach
7 godzin temu, arces napisał:

 

ID nie służy do stylowania, a wykorzystuje się je raczej do JSa. Wiadomo, że nie jest to jakiś ogromny błąd, ale powinno się tego unikać.

 

 

@FemtoBadianCanadian Wrzuć kod na codepen.io i zobaczymy co da się zrobić.

W sumie to nie wiedziałem wiedziałem że można go użyć tylko raz :). Tak na w3c przeczytałem :P.

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert
27 minut temu, Lithard napisał:

W sumie to nie wiedziałem wiedziałem że można go użyć tylko raz :). Tak na w3c przeczytałem :P.

Można używać ID kilkukrotnie na stronie ale trzeba pamiętać, żeby różnie się nazywało. Teoretycznie jak pisałem można stylować po ID, ale od czego są klasy? ID wykorzystujemy do JSa, żeby się odnosić do danych elementów.

Odnośnik do odpowiedzi
Udostępnij na innych stronach
1 godzinę temu, arces napisał:

 

Można używać ID kilkukrotnie na stronie ale trzeba pamiętać, żeby różnie się nazywało. Teoretycznie jak pisałem można stylować po ID, ale od czego są klasy? ID wykorzystujemy do JSa, żeby się odnosić do danych elementów.

Kolego nie rób ze mnie down'a bo aż taki tępy nie jestem...

Większość ludzi wie co to id i class w byle jakim poradniku jest napisane że to co wyżej napisaliśmy.

JSa ? JavaScript ?

Może ty jesteś tak nauczony ☺️ zobacz sobie na strony www i do czego id jest używane... być może ty i wiele ludzi uważa to za błąd ale chyba takich umiejętności nie masz nawet przez pracę w 3 firmach że możesz poprawiać w3c :).

A mi chodziło o to że może mieć gdzieś tą klasę już użytą i jakieś tam dziwne atrybuty dodane ☺️...

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert
30 minut temu, Lithard napisał:

Kolego nie rób ze mnie down'a bo aż taki tępy nie jestem...

Większość ludzi wie co to id i class w byle jakim poradniku jest napisane że to co wyżej napisaliśmy.

 

JSa ? JavaScript ?

Może ty jesteś tak nauczony ☺️ zobacz sobie na strony www i do czego id jest używane... być może ty i wiele ludzi uważa to za błąd ale chyba takich umiejętności nie masz nawet przez pracę w 3 firmach że możesz poprawiać w3c :).

 

A mi chodziło o to że może mieć gdzieś tą klasę już użytą i jakieś tam dziwne atrybuty dodane ☺️...

 

 

W3C nie zamierzam poprawiać, ale tak się przyjęło i już. Nie mam zamiaru z nikogo robić tu idioty, ale napisałeś sam niezrozumiale. JS (javascript) tak jak piszesz. Pokaż mi jedną porządną stronę, gdzie ID służy tylko do stylowania ☺️

Odnośnik do odpowiedzi
Udostępnij na innych stronach

Nie będę specjalnie szukać przykładów aby ci udowodnić bo nie chce mi się ale luknij sobie style IPS Focus Deflection następnie id="header" i szukaj w stylach :).

Prosty przykład :). I nie mów że ludzie tego nie robią bo robią a ja uważam że z tej strony wychodzą porządne style - strony jak zwał tak zwał

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert

Też się nie zamierzam kłócić, ale to co najmniej dziwnie zrobione. Narypane tych IDków w każdym divie  W takim razie po co mu classy to już nie wiem, jak wszędzie mógłby wykorzystać ID ☺️

  • Lubię to! 1
Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert

Dane ID może wystąpić na stronie jedynie raz, bo służy do kotwiczenia elementów. Jeżeli wystąpi więcej razy - JS będzie mieć problem i standaryzację szlag trafi. Kłócicie się nie wiadomo o co i po co skoro temat dotyczy zupełnie czego innego.

Wracając do tematu - samym CSSem tego nie osiągniesz. Jeżeli dane mają być zczytywane z bazy dopiero po najechaniu na dany element musisz skorzystać z AJAXa.

  • Lubię to! 1
Odnośnik do odpowiedzi
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
×
×
  • Dodaj nową pozycję...