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

Kiedy aktywuje się funkcja sticky (menu), strona się rozjeżdża

VPS Starter Arubacloud
+1 głos
279 wizyt
pytanie zadane 27 czerwca 2020 w HTML i CSS przez MiloszGl90 Nowicjusz (130 p.)

Dzień dobry!

Mam problem, którego nie potrafię rozwiązać. Na mojej stronie zaimplementowałem sticky menu wg. poradnika p. Mirosława. Strona ma prawie identyczną konstrukcję, ale chciałem dodać jeszcze grafikę po lewej stronie contentu. Wszystko jest dobrze do czasu, kiedy menu "przykleja" się do góry (aktywuje się funkcja sticky). Wtedy diva z grafiką przerzuca na drugą stronę, zaczyna zachodzić na content i ogólnie jest rozjechane. Nie potrafię załączyć screenshotów, ponieważ mają one powyżej 2 mb i nie da się ich wysłać.

Kod daję bez fragmentu z javą, bo on na pewno jest dobrze:

<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title> Lorem Ipsum </title>
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/fontello.css" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
	<div class="header">
		<div class="logo">
			<div class="logo2">
				<img src="logo2.jpg">
			</div>
			<div class="logo3">
			Profesjonalne instalacje elektryczne i fotowoltaiczne
			</div>
		</div>
	</div>
	<div class="nav">
		<ol>
			<li><a href="#">Strona główna</a></li>
			<li><a href="#">O nas</a></li>
			<li><a href="#">Galeria</a></li>
			<li><a href="#">Nasze doświadczenie</a></li>
			<li><a href="#">Kontakt</a></li>
			<li><a href="#">Oferta<i class="icon-down-dir"></i></a>
				<ul>
					<li><a href="#">Instalacje elektryczne dla dużych firm</a></li>
					<li><a href="#">Instalacje fotowoltaiczne</a></li>
					<li><a href="#">Systemy alarmowe, montaż kamer</a></li>
					<li><a href="#">Instalacje domowe</a></li>
				</ul>
			</li>
		</ol>
	</div>
	<div class="socials">
		<a href="#"><div class="social2"><i class="icon-facebook"></i></div></a>
		<a href="#"><div class="social1"><i class="icon-twitter-bird"></i></div></a>
		<a href="#"><div class="social3"><i class="icon-instagram-filled"></i></div></a>
	</div>
	<div class="photo"><img src="ElektrykPoszukiwany.jpg"></div>
	<div class="content" style="font-family:Lato;">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec efficitur eros, et iaculis eros. Maecenas et libero purus. Mauris semper, quam in semper varius, ipsum enim ultrices odio, vitae iaculis nunc lorem in lacus. Vivamus dignissim nulla ipsum, vel facilisis dui vulputate in. Proin tincidunt urna a massa venenatis consectetur. Maecenas vitae nunc arcu. Nunc elementum, risus ac pellentesque porta, nisl velit pulvinar metus, sed mollis arcu lectus sed erat. Vestibulum a convallis urna.</p>

	<p>Etiam neque urna, porttitor in blandit nec, commodo eget ante. Maecenas nulla turpis, suscipit quis pretium a, hendrerit id orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce vel nisl dictum, efficitur risus ut, eleifend neque. Mauris et nisl sit amet turpis commodo posuere. Maecenas non dignissim ipsum. Nunc iaculis scelerisque rhoncus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce posuere fringilla vestibulum. Nunc sed ex sed erat efficitur posuere ac vitae ipsum. Vivamus viverra nisl ut bibendum iaculis. Praesent a arcu feugiat dolor placerat pulvinar congue nec risus. Sed sed suscipit risus.</p>

	<p>Mauris et erat elit. Pellentesque vitae ornare elit. Maecenas ipsum risus, facilisis sit amet eros at, commodo luctus neque. Ut porttitor venenatis leo, at placerat turpis tincidunt nec. Maecenas posuere ante urna, sit amet bibendum arcu condimentum at. Phasellus in dui dolor. Aliquam urna massa, volutpat nec libero non, malesuada efficitur metus. Proin tempus sapien non nunc pharetra malesuada. Proin sem massa, sodales sed efficitur a, dignissim vitae ligula. In hac habitasse platea dictumst. In sed elementum urna. Nunc tincidunt justo eget sagittis porttitor.</p>

	<p>Vestibulum congue odio sed ligula elementum vestibulum. Aliquam at tristique massa, quis tristique leo. Suspendisse et augue ut metus porta laoreet. Phasellus auctor feugiat mauris, iaculis luctus ipsum congue vel. Proin at massa sodales, aliquam turpis vitae, iaculis lorem. Morbi nec eros ex. Sed sodales justo sed mauris auctor rhoncus. Integer vestibulum felis quis urna condimentum, ac luctus sem cursus.</p>

	<p>Suspendisse tempus justo semper rhoncus dignissim. Morbi suscipit, ante vel auctor commodo, elit elit consectetur nulla, tempus aliquam massa odio ut justo. Nam aliquet orci sodales, fringilla lorem sed, malesuada tortor. Duis non facilisis metus. Proin aliquet ex ac enim varius, consequat hendrerit neque varius. Vivamus sed iaculis odio, sit amet efficitur ex. Nullam porttitor pellentesque ex at sollicitudin. Curabitur aliquet dolor a est consequat, sed tristique tortor iaculis.</p>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin dignissim ultrices. Phasellus tempor facilisis interdum. Curabitur scelerisque aliquam convallis. Vestibulum rutrum, sapien fermentum sagittis dictum, elit orci tincidunt neque, a commodo sapien tortor non dolor. Integer a ante quis leo tristique convallis et a sapien. Aliquam lorem nisi, ultrices vitae arcu et, rhoncus hendrerit enim. Aliquam lobortis tortor in odio ullamcorper, vel volutpat nunc mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed lacus est, ornare vehicula mattis vitae, finibus sed neque. Integer auctor massa ut nulla imperdiet egestas. Sed volutpat est eu mollis sollicitudin. Vivamus ac varius mauris. Sed quis nunc metus. Nunc tempor enim nec tempor rhoncus. Donec aliquet tempor enim facilisis posuere. Quisque pellentesque risus sit amet metus porttitor commodo.</p>

	<p>Nam varius ligula ante, nec laoreet mi fringilla a. Nulla in dignissim quam, eget aliquet dolor. Sed vel consectetur magna, non rutrum dui. Aliquam sodales lorem eu suscipit aliquam. Integer tincidunt accumsan orci, eu tincidunt lorem efficitur eu. Pellentesque urna mauris, placerat in dolor suscipit, consequat fermentum dolor. Curabitur elementum ultrices justo, id sollicitudin diam. Maecenas erat urna, fringilla luctus rhoncus varius, tempor quis felis. Integer elit nulla, lacinia eget rhoncus ut, pulvinar vitae velit. Fusce sed commodo massa. Phasellus facilisis ornare rhoncus. Curabitur dapibus sit amet dui vel iaculis. Maecenas et porttitor turpis, non ultrices arcu. Praesent aliquam augue at orci dictum convallis. Suspendisse in diam aliquet, imperdiet massa et, iaculis orci.</p>

	<p>Aenean sit amet mattis turpis, in rhoncus nulla. Integer accumsan nisl quis massa tincidunt, sed consequat ligula lobortis. Ut egestas convallis ligula non pellentesque. Phasellus ex dolor, tincidunt ac porta cursus, mattis non felis. Curabitur laoreet sem sem, porta fermentum metus euismod ac. Aliquam et rutrum justo, gravida dapibus purus. Nunc pharetra pretium tellus in dignissim. Vestibulum ut molestie neque. In auctor eget felis nec tempor. In hac habitasse platea dictumst. Quisque in neque facilisis, consequat dolor sit amet, fermentum mi. Sed sed ante et ante bibendum eleifend sed a libero. Curabitur sodales vestibulum dolor. Nunc consectetur, augue et luctus condimentum, quam velit sollicitudin massa, ut porttitor massa enim eu mauris. Praesent sit amet maximus sem. Aliquam at mollis justo.</p>
	</div>
	<div class="contact">
		<div class="contacticons">
		<div class="tel"><i class="icon-phone"></i><br /><br />+(48)XXX XXX XXX</div>
		<div class="e-mail"><i class="icon-mail-alt"></i><br /><br />XXX@XXX.com.pl</div>
		<div class="fax"><i class="icon-fax"></i><br /><br />(XX)XXXXXXX</div>
		<div class="address"><i class="icon-home"></i><br /><br />Ul. XXXXXX Gliwice<br />XX-XXX</div>
		<div style="clear:both"></div>
		</div>
	</div>
	<div class="footer">
	ASPRO SYSTEM &copy; 2020<br />
	Strona w budowie<br /><br />
	<img src="logo2.jpg">
	</div>
</div>
</body>
</html>

I CSS:

body
{
margin:0 !important;
font-family:Ubuntu;
font-size:20px;
}
.wrapper
{
	width:100%;
}
.header
{
	width:100%;
	padding:20px 0;
}
.logo
{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	width:522px;
	margin-bottom:20px;
}
.logo2
{
	width:220px;
	padding:20px;
	float:left;
}
.logo3
{
	width:220px;
	padding:20px;
	border-left:2px dotted #6d6671;
	float:left;
	margin-top:42px;
	font-size: 22px;
}
.nav
{
	width:100%;
	padding:10px 0;
	background-color:#bd0c0c;
	border-top:1px solid #751b1b;
	border-bottom:1px solid #751b1b;
	clear:both;
	text-align:center;
}
.content
{
	width:1000px;
	margin-right:auto;
	margin-left:auto;
	text-align:justify;
	background-color:#f4f4f4;
	padding:20px 40px;
}
.contact
{
	width:100%;
	text-align:center;
	background-color:#5c6c7f;
	clear:both;
	
}
.contacticons
{
	width:1000px;
	margin-left:auto;
	margin-right:auto;
}
.tel
{
	width:250px;
	height:155px;
	float:left;
	font-size:22px;
	padding:20px 0;
}
.tel:hover
{
	background-color:#bd0c0c;
	font-size:24px;
}
.e-mail
{
	width:250px;
	height:155px;
	float:left;
	font-size:22px;
	padding:20px 0;
}
.e-mail:hover
{
	background-color:#bd0c0c;
	font-size:24px;
}
.fax
{
	width:250px;
	height:155px;
	float:left;
	font-size:22px;
	padding:20px 0;
}
.fax:hover
{
	background-color:#bd0c0c;
	font-size:24px;
}
.address
{
	width:250px;
	height:155px;
	float:left;
	font-size:22px;
	padding:20px 0;
}
.address:hover
{
	background-color:#bd0c0c;
	font-size:24px;
}
.footer
{
	text-align:center;
	background-color:#211a20;
	padding:30px;
	color:white;
}
.sticky
{
	width:100%;
	position:fixed;
	left:0;
	top:0;
	z-index:100;
}
.photo
{
	width:300px;
	height:800px;
	margin:5px;
	float:left;
}
.socials
{
	width:100px;
	float:right;
}
.social2
{
	height:100px;
	background-color:#3366cc;
	text-align:center;
}
.social3
{
	height:100px;
	background-color:#8e665a;
	text-align:center;
}
.social1
{
	height:100px;
	background-color:#99ccff;
	text-align:center;
}
.social2:hover
{
	background-color:#cf6969;
}
.social3:hover
{
	background-color:#cf6969;
}
.social1:hover
{
	background-color:#cf6969;
}
ol
{
	padding:0;
	margin:0;
	list-style-type:none;
	font-size:20px;
	height:40px;
	line-height:200%;
	display:inline-block;
}
ol a
{
	color:white;
	text-decoration:none;
	display:block;
}
ol > li
{
	float:left;
	width:220px;
	height:45px;
	border-right:1px solid #6d6671;
}
ol > li:first-child
{
	border-left:1px solid #6d6671;
}
ol > li:hover
{
	background-color:#cf6969;
	font-size:22px;
}
ol > li > ul
{
	list-style-type:none;
	padding:0;
	margin:0;
	height:40px;
	font-size:18px;
	display:none;
}
ol > li > ul > li
{
	background-color:#cf6969;
	position:relative;
	z-index:100;
	border-top:1px dashed #6d6671;
}
ol > li > ul > li:hover
{
	background-color:#bd0c0c;
}
ol > li:hover > ul
{
	display:block;
}

 

1
komentarz 27 czerwca 2020 przez VBService Ekspert (251,250 p.)
Zrób printscr tylko wycinka ekranu.
1
komentarz 27 czerwca 2020 przez Aisekai Nałogowiec (42,190 p.)
Wrzuć kod na stackblitza, będzie łatwiej poszukać.
komentarz 27 czerwca 2020 przez MiloszGl90 Nowicjusz (130 p.)
@Aisekai, niestety jestm baaaardzo początkujący, nie za bardzo wiem jak używać tej platformy, musiałbym więcerj poczytać, a to trochę potrwa (mam bardzo ograniczony czas)
komentarz 27 czerwca 2020 przez MiloszGl90 Nowicjusz (130 p.)

Po zajściu błędu

komentarz 27 czerwca 2020 przez MiloszGl90 Nowicjusz (130 p.)

Przed błędem

komentarz 27 czerwca 2020 przez MiloszGl90 Nowicjusz (130 p.)
Jeśli coś mógłbym jeszcze wytłumaczyć, to proszę pisać. Bardzo mi zależy na naprawie błędu.
komentarz 28 czerwca 2020 przez ScriptyChris Mędrzec (190,190 p.)

@Aisekai,

Wrzuć kod na stackblitza, będzie łatwiej poszukać.

W prawym górnym rogu posta z kodem są przyciski uruchamiające kod w serwisach Codepen i JSFiddle - tam można testować kod.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 157 wizyt
pytanie zadane 11 maja 2021 w HTML i CSS przez bazyl8796 Obywatel (1,020 p.)
+1 głos
1 odpowiedź 327 wizyt
pytanie zadane 8 sierpnia 2021 w HTML i CSS przez NA Użytkownik (590 p.)
0 głosów
2 odpowiedzi 150 wizyt
pytanie zadane 2 lipca 2020 w HTML i CSS przez Shiro Stary wyjadacz (10,300 p.)

92,454 zapytań

141,263 odpowiedzi

319,099 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!

...