Jump to content
Sign in to follow this  
FemtoBadianCanadian

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

Recommended Posts

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.

Share this post


Link to post

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 ☺️ ?

Share this post


Link to post
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ć.

Edited by arces

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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 ☺️...

 

 

Share this post


Link to post
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 ☺️

Share this post


Link to post

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ł

Share this post


Link to post

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 ☺️

  • Like 1

Share this post


Link to post

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.

  • Like 1

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Create a New Account. It’s free and easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×
×
  • Create New...