I am working on my portfolio page and as I was writing my html and my css, the site wasn't scrolling. I can't see the code only the first section.
Here is the html:
<navbar id="navbar">
<img id="logo" src="imagini/portfolio.png" alt="my portfolio" title="Bogdan's portfolio" />
<ul type="none" id="list">
<li>works</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<section id="welcome-section">
<h1>HI, I'M<br /> Pavel Bogdan Mihail</h1>
<p>I make people get amazed by my works because I'm AWSOME!</p>
<button type="button">GET IN TOUCH</button>
</section>
<section id="about">
<h3>A little bit about me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis neque sed massa sollicitudin interdum. Pellentesque vel libero sollicitudin lectus sollicitudin consectetur. In dictum eu nisi id porta. Ut molestie luctus hendrerit. Nulla ac nisl sit amet urna molestie dictum. Phasellus et turpis aliquet dolor iaculis congue. Nulla eget ligula nibh. Maecenas vel aliquam quam, sit amet semper nibh. Sed consectetur malesuada mauris a posuere. Suspendisse semper, magna ac convallis faucibus, orci eros ultrices diam, ac porttitor enim sem eget lorem. Proin laoreet commodo arcu, nec lobortis felis dapibus quis. Aenean ut arcu mauris. Nunc tempus erat eu felis faucibus facilisis. Donec gravida ullamcorper dolor ac dapibus. Sed pellentesque dapibus neque, quis ornare purus tincidunt ac.</p>
</section>
here is a codepen edit: https://codepen.io/bogdan-pavel/pen/pobgWjg
Your navbar is missing a closing tag. If you ad </navbar> after the navbar is done the rest will scroll.
Try this:
<navbar id="navbar">
<img id="logo" src="imagini/portfolio.png" alt="my portfolio" title="Bogdan's portfolio" />
<ul type="none" id="list">
<li>works</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<section id="welcome-section">
<h1>HI, I'M<br /> Pavel Bogdan Mihail</h1>
<p>I make people get amazed by my works because I'm AWSOME!</p>
<button type="button">GET IN TOUCH</button>
</section>
<section id="about">
<h3>A little bit about me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis neque sed massa sollicitudin interdum. Pellentesque vel libero sollicitudin lectus sollicitudin consectetur. In dictum eu nisi id porta. Ut molestie luctus hendrerit. Nulla ac nisl sit amet urna molestie dictum. Phasellus et turpis aliquet dolor iaculis congue. Nulla eget ligula nibh. Maecenas vel aliquam quam, sit amet semper nibh. Sed consectetur malesuada mauris a posuere. Suspendisse semper, magna ac convallis faucibus, orci eros ultrices diam, ac porttitor enim sem eget lorem. Proin laoreet commodo arcu, nec lobortis felis dapibus quis. Aenean ut arcu mauris. Nunc tempus erat eu felis faucibus facilisis. Donec gravida ullamcorper dolor ac dapibus. Sed pellentesque dapibus neque, quis ornare purus tincidunt ac.</p>
</section>
<navbar>
Related
I am trying to vertically align an image next to a paragraph using TailwindCSS. Take a look at the following Codepen which demonstrates the problem I'm facing:
https://codepen.io/team/Cloudinary/pen/rNWPWxr
<div class="bg-red-500">
<div class="w-full m-auto mt-8 px-8 py-6 items-center mb-6">
<img class="float-right align-middle sm:block" src="https://res.cloudinary.com/tamas-demo/image/upload/w_200,h_200,c_thumb,g_face,r_max,f_auto,q_auto,z_0.7/woman.jpg" />
<p class="text-white leading-normal font-bold text-2xl lg:text-3xl mb-8" id="greeting">Hi hi hi</p>
<p class="text-white leading-normal justify-between font-normal md:text-xl lg:text-2xl sm:w-3/4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc odio ante, placerat eget mollis vitae, vehicula congue magna. Fusce euismod ac tortor quis varius. Nullam quis arcu mauris. Nunc sit amet elit non dolor varius luctus. Fusce eget odio imperdiet ex cursus hendrerit. Aenean quis enim eu ante blandit venenatis. Nullam quis sollicitudin neque. Aenean hendrerit fringilla risus, pellentesque elementum neque.
Cras pretium a arcu quis cursus. Donec eu nisl scelerisque, venenatis neque a, consectetur magna. Suspendisse vestibulum neque vel metus feugiat maximus. Aliquam eu ligula vitae dui consectetur venenatis. Sed iaculis convallis nisi. Etiam placerat varius sem, non placerat neque consectetur et. Duis id risus lacinia ligula euismod aliquet et quis nibh. Sed odio mi, consectetur ac eros id, blandit interdum libero. Suspendisse potenti. Vestibulum bibendum sapien sed commodo pharetra. Fusce venenatis eget arcu et eleifend. Aliquam erat volutpat.
</p>
</div>
</div>
I can't seem to vertically align the image on the right side.
Use this code.
<div class="bg-red-500">
<div class="w-full m-auto mt-8 px-8 py-6 items-center mb-6" style = "display: flex; flex-direction: row-reverse;">
<img class=" align-middle sm:block" src="https://res.cloudinary.com/tamas-demo/image/upload/w_200,h_200,c_thumb,g_face,r_max,f_auto,q_auto,z_0.7/woman.jpg"/>
<div>
<p class="text-white leading-normal font-bold text-2xl lg:text-3xl mb-8" id="greeting">Hi hi hi</p>
<p class="text-white leading-normal justify-between font-normal md:text-xl lg:text-2xl sm:w-3/4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc odio ante, placerat eget mollis vitae, vehicula congue magna. Fusce euismod ac tortor quis varius. Nullam quis arcu mauris. Nunc sit amet elit non dolor varius luctus. Fusce eget odio imperdiet ex cursus hendrerit. Aenean quis enim eu ante blandit venenatis. Nullam quis sollicitudin neque. Aenean hendrerit fringilla risus, pellentesque elementum neque.
Cras pretium a arcu quis cursus. Donec eu nisl scelerisque, venenatis neque a, consectetur magna. Suspendisse vestibulum neque vel metus feugiat maximus. Aliquam eu ligula vitae dui consectetur venenatis. Sed iaculis convallis nisi. Etiam placerat varius sem, non placerat neque consectetur et. Duis id risus lacinia ligula euismod aliquet et quis nibh. Sed odio mi, consectetur ac eros id, blandit interdum libero. Suspendisse potenti. Vestibulum bibendum sapien sed commodo pharetra. Fusce venenatis eget arcu et eleifend. Aliquam erat volutpat.
</p>
</div>
</div>
</div>
I'm trying to achieve the following two column layout using Bootstrap 4:
My problem is, when I add content to the right column, it "pushes" the left one below, like this:
Here's my code so far:
<div class="row">
<div class="col-md-6">A</div>
<div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>
<div class="row">
<div class="col-md-6">B</div>
</div>
I'm not sure how to proceed next...
Technically, you should take 'B' part of the tag inside the 'A' tag and wrap both 'A' and 'B' with their own 'row' and 'col' tags.
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col">A</div>
</div>
<div class="row">
<div class="col">B</div>
</div>
</div>
<div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec at orci porta, suscipit
felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis
aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat
orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim,
eget consequat sem dapibus nec.
</div>
</div>
You can achieve the structure you are asking for as below. You were just mistaking while placing row and columns.
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
A
</div>
<div class="col-md-12">
B
</div>
</div>
</div>
<div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>
I want to display a list via "collapsible bootstrap panels" but I notice when I open certain panels they do not align properly.
E.g. when I open the first panel in the code all other panels move under each other under the second panel.
I want panel 3 and 4 to stay on their place in their grid when I open panel 1.
What am I doing wrong?
<div class="container">
<div class="row">
<div class="col-xs-6">
<div>
<a
href="#panel1"
class="btn btn-info"
data-toggle="collapse">Panel 1</a>
</div>
<div
id="panel1"
class="collapse">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent scelerisque, neque sit amet aliquam pulvinar, metus
arcu commodo sem, id volutpat erat nulla imperdiet enim. Proin
imperdiet dolor vitae lorem efficitur, non tincidunt nisi
accumsan. Nam condimentum mi ac auctor tincidunt. Fusce eget
tempus velit, in porta velit. Mauris vel ultrices ipsum. Nunc
rutrum vitae quam ut porta. Suspendisse diam sem, molestie sed
nisl id, imperdiet ornare libero. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam sagittis augue vitae iaculis
lacinia. Ut id eros egestas turpis vehicula feugiat ut eu
lectus. Ut eu consequat arcu, a porttitor magna.
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div>
<a
href="#panel2"
class="btn btn-info"
data-toggle="collapse">Panel 2</a>
</div>
<div
id="panel2"
class="collapse">
<div>
<p>Nunc vel lectus sit amet ante imperdiet aliquet non sit amet
felis. Vestibulum rhoncus rutrum ante nec sodales. Aliquam
vitae suscipit orci. Nam dignissim a purus vitae efficitur.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Nam libero augue,
scelerisque ut rhoncus eu, scelerisque a enim. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Ut luctus molestie lectus, ac dictum sem tempor
id.
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div>
<a
href="#panel3"
class="btn btn-info"
data-toggle="collapse">Panel 3</a>
</div>
<div
id="panel3"
class="collapse">
<div>
<p>Aliquam sit amet convallis nulla, quis dapibus elit. Aliquam
nisl justo, mollis et pulvinar ut, laoreet eu enim. Quisque
maximus scelerisque dui, aliquam posuere dolor consequat ut.
Nullam semper dictum urna et auctor. Donec lacus risus,
sagittis at vestibulum ac, dictum vitae mauris. Duis non velit
congue diam vulputate auctor a et libero. Duis a tortor
lobortis, suscipit orci eu, facilisis eros. Proin et faucibus
tortor, in finibus elit. Morbi suscipit porttitor justo
interdum euismod. In posuere leo velit, non egestas tortor
malesuada sit amet. Phasellus malesuada ultricies massa eget
volutpat.
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div>
<a
href="#panel4"
class="btn btn-info"
data-toggle="collapse">Panel 4</a>
</div>
<div
id="panel4"
class="collapse">
<div>
<p>Cras interdum dui sit amet nisi porttitor, iaculis cursus
tellus tincidunt. Praesent iaculis eget ipsum sed condimentum.
Fusce aliquam ipsum mauris. Donec laoreet dapibus efficitur.
Quisque in rhoncus dolor. Aliquam erat volutpat. Quisque eget
quam sed velit ultrices pellentesque. Vivamus neque arcu,
vestibulum in neque a, tincidunt sagittis lectus. Nullam nisi
nulla, semper non maximus sed, rutrum vel velit.
</p>
</div>
</div>
</div>
</div>
</div>
**Tyr With this**
<div class="container">
<div class="row">
<div class="col-xs-6">
panel1 Code
</div>
<div class="col-xs-6">
panel2 Code
</div>
</div>
<div class="row">
<div class="col-xs-6">
panel3 Code
</div>
<div class="col-xs-6">
panel4 Code
</div>
</div>
</div>
When I click on an anchor link (which is linked to the article-header), it appears exactly on top of the page. But because of sticky page-header, article-header can't be seen.
I'd like to 'move it' down, to be seen just below page-header.
Here is codepen: link.
(On the sidebar you have to open link called "HERE HERE HERE" ;) )
html:
<body>
<div class="main-container">
<div class="box">
<header class="page-header">
<h1>
MAIN HEADER
</h1>
</header>
<main class="main-content">
<article class="single-article" id="warstwy">
<header class="article-title">
<h1>Warstwy modelu ISO/OSI</h1>
</header>
<div class="article-content">
<ul>
<li><strong>Warstwa fizyczna</strong></li>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.
</ul>
</ul>
</div>
</article>
<article class="single-article" id="tcp">
<header class="article-title">
<h1>TCP</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.
</ul>
</div>
</article>
<article class="single-article" id="ip">
<header class="article-title">
<h1>IP</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.
</ul>
</div>
</article>
<article class="single-article" id="tcp_ip">
<header class="article-title">
<h1>TCP/IP</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.
</ul>
</div>
</article>
<article class="single-article" id="udp">
<header class="article-title">
<h1>UDP (User Datagram Protocol)</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales. Cras lectus lorem, venenatis sed nisi vitae, egestas dignissim nulla. Maecenas quis ornare quam. Suspendisse blandit leo non felis feugiat, sed porttitor eros luctus. Aliquam in magna est. Suspendisse commodo elit et leo tincidunt accumsan. Fusce convallis lacus lacus, a laoreet arcu condimentum id. Etiam dictum tortor molestie eros lobortis faucibus. Cras aliquam eu sem ut dignissim. Morbi mollis sit amet augue sed euismod. Ut id varius lacus, nec sollicitudin neque. Integer lobortis sapien in consequat hendrerit. Duis a lectus id odio blandit ultrices vitae sed leo.</li>
</ul>
</div>
</article>
<article class="single-article" id="adresy">
<header class="article-title">
<h1>Adresy IP</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.</li>
</ul>
</div>
</article>
<article class="single-article" id="dns">
<header class="article-title">
<h1>DNS (Domain Name Service)</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.</li>
</ul>
</div>
</article>
<article class="single-article" id="vpn">
<header class="article-title">
<h1>VPN (Virtual Private Network - Wirtualna Sieć Prywatna)</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.</li>
</ul>
</div>
</article>
<article class="single-article" id="metody">
<header class="article-title">
<h1>Metody szyfrowania i zabezpieczania transmisji</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.</li>
</ul>
</div>
</article>
<article class="single-article" id="gniazda">
<header class="article-title">
<h1>Gniazda</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.</li>
</ul>
</div>
</article>
<article class="single-article" id="architektura">
<header class="article-title">
<h1>Architektura klient-serwer</h1>
</header>
<div class="article-content">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra dignissim mauris id fermentum. Duis diam elit, tristique eget hendrerit in, ornare in mauris. Ut tempor mattis est in blandit. Proin gravida facilisis lacus a laoreet. Morbi quis fermentum lorem. Donec interdum purus vitae orci blandit sollicitudin id non sapien. Mauris elementum, enim ut consequat blandit, felis nibh faucibus libero, sed ultrices tellus dui et elit. Aenean nec elit sit amet nulla commodo dapibus. Sed pretium metus eget metus aliquam, ac pretium urna sodales.</li>
</ul>
</div>
</article>
</main>
<footer class="footer">
<p>Copyright © 2017 Konrad Wolniak All Rights Reserved</p>
</footer>
<nav class="site-nav">
<header class="nav-header">
<h2>Spis treści</h2>
</header>
<section class="nav-menu">
<a class="accordion-head"><span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span>Interfejsy</a>
<div class="dropdown-content">
<ul>
<li>Kodowanie kanałowe</li>
<li>Zwielokrotnienie pasma</li>
<li>Koordynacja czasowa</li>
<li>Interfejsy szeregowe i równoległe</li>
<li>Interfejsy systemowe</li>
<li>Interfejsy zewnętrzne</li>
<li>Polling</li>
<li>Przerwania</li>
<li>Point-to-point</li>
</ul>
</div>
<hr>
<a class="accordion-head">Procesory<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<div class="dropdown-content">
<ul>
<li>CISC</li>
<li>RISC</li>
<li>Architektura procesora</li>
<li>Pozostałe o procesorze</li>
<li>Potokowość</li>
<li>Superskalarność</li>
<li>Wielordzeniowość</li>
</ul>
</div>
<hr>
<a class="accordion-head">Procesy i wątki<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<div class="dropdown-content">
<ul>
<li>PCB</li>
<li>Stan i kolejki procesów</li>
<li>Przełączanie kontekstów</li>
<li>Synchronizacja/związek procesów i wątków</li>
<li>Mutex, semafor i sekcja krytyczna</li>
</ul>
</div>
<hr>
<a class="accordion-head">Przechowywanie danych<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<div class="dropdown-content">
<ul>
<li>Budowa dysku</li>
<li>Najważniejsze parametry</li>
<li>Adresowanie</li>
<li>Technologie dysków SSD</li>
<li>Buforowanie zapisu</li>
<li>RAID</li>
<li>Struktura logiczna dysku</li>
<li>MBR</li>
<li>Systemy plików</li>
<li>FAT</li>
<li>NTFS</li>
<li>EXT2/EXT4</li>
<li>Użytkownicy i grupy</li>
<li>Uprawnienia oraz atrybuty plików i katalogów</li>
<li>Pliki ukryte i wykonywalne</li>
</ul>
</div>
<hr>
<a class="accordion-head">Grafika<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<div class="dropdown-content">
<ul>
<li>Pamięć obrazu/bufor ramki</li>
<li>Reprezentacja pikseli</li>
<li>GPU-pipeline</li>
<li>Shader</li>
<li>OpenGL</li>
<li>Prymitywy geometryczne</li>
<li>Reprezentacja obiektów</li>
</ul>
</div>
<hr>
<a class="accordion-head">Linux<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<div class="dropdown-content">
<ul>
<li>Dowiązania do plików</li>
<li>Systemy plików</li>
<li>Ważne katalogi</li>
</ul>
</div>
<hr>
<a class="accordion-head">HERE HERE HERE<span class="fa fa-angle-double-down fa-fw" aria-hidden="true"></span></a>
<div class="dropdown-content">
<ul>
<li>Warstwy modelu ISO/OSI</li>
<li>TCP</li>
<li>IP</li>
<li>TCP/IP</li>
<li>UDP</li>
<li>Adresy IP</li>
<li>DNS</li>
<li>Hub, switch, router</li>
<li>VPN</li>
<li>Metody szyfrowania i zabezpieczania transmisji</li>
<li>Gniazda</li>
<li>Architektura klient-serwer</li>
</ul>
</div>
</section>
<!-- <button class="hamburger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button> -->
</nav>
</div>
</body>
I solved the same problem by adding id attribute somewhere on some hidden element, before your heading tag. In your case it would be something like:
<div id="tcp" style="margin-top: -100px; position: absolute;"></div>
<article class="single-article">
<header class="article-title">
<h1>TCP</h1>
</header>
<div class="article-content">
<ul>
...
I have had the same problem, you can't use anchors anymore. Try jquery animate scroll to top offset from top. Here is an example
var $stickyNav = $('#nav_main'),
stickyNavHeight = $stickyNav.innerHeight(),
topPaddingOffset = 20,
fullTopOffset = stickyNavHeight + topPaddingOffset
//on click of url
$('YOUR LINK').on('click', function(e) {
var targetDiv = $(this).attr('href');
$('html, body').animate({
scrollTop: $(targetDiv).offset().top - fullTopOffset
}, 500);
});
I'm learning web designing. I tried to make a page out of my knowledge. The page is plant text. Here is the code.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Sample Site</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
<nav>
<ul>
<li><a href=''>Home</a></li>
<li><a href='#whatwedo'>What We Do?</a></li>
<li><a href='#vision'>Our Vision</a></li>
<li><a href='#work'>Our Work</a></li>
<li><a href='#customer'>Our Proud Customers</a></li>
<li><a href='#testimonial'>Testimonials</a></li>
<li><a href=''>Blog</a></li>
<li><a href=''>About Us</a></li>
<li><a href=''>Contact Us</a></li>
</ul>
</nav>
</header>
<div id='whatwedo'>
<h1>What We Do?</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
</p>
</div>
<div id='vision'>
<h1>Our Vision</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
</p>
</div>
<div id = 'work'>
<h1>Our Work</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
</p>
</div>
<div id = 'customer'>
<h1>Our Proud Customers</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
</p>
</div>
<div id = "testimonial">
<h1> Testimonials</h1>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>
</div>
<footer>
<nav>
<ul>
<li><a href=''>Sales Company</a></li>
<li><a href=''>Local Resellers</a></li>
<li><a href=''>Special Orders</a></li>
<li><a href=''>Comapny Officies</a></li>
<li><a href=''>Subsidiaries</a></li>
</ul>
</nav>
</footer>
</body>
</html>
Below is the css file.
html {
font-size: 100%;
line-height: 1.8em;
}
* {
box-sizing: border-box;
border-color: white;
}
/*
Navigation
*/
nav ul{
position: fixed;
top: 0%;
}
nav ul li{
float: left;
margin: 1em 0.5em;
list-style: none;
}
#whatwedo {
clear: left;
margin-top: 8em;
}
/* Navigation Ends
*/
background {
background-color: white;
}
blockquote:before {
content: "''";
}
blockquote:after {
content: "''";
}
#testimonial {
text-align: center;
}
When I open the webpage, my fixed positioned menu gets overlapped. I don't want it to overlap. The overlap gets corrected when I remove this line:
top: 0%;
from this:
nav ul{
position: fixed;
top: 0%;
}
Will you please help me about what's causing this error. When the line is added, menu gets overlapped and when the line is removed the menu comes down and come in front of the other content. Please correct it and explain me the problem.
I think this is the correct behavior of position:fixed
Keep in mind, that position of fixed element started from the border of window, not from it's parent element.
btw, if you write 0, you don't have to type it's units (%) zero is zero, no matter in which units :)
Svoka, If you open the web page you will come to know that the menu is overlapping each other. I don't want it to overlap. I want to correct this behaviour. However, the things you are telling me are already known to me. I want the overlapping glitch to be removed.