Thank you so much, I solved my problem. I changed my style of calling css and javascript files from the project files.
I have a MVC5 project, I want to use some plugins but it doesn't seem working. I started a blank project to see if the plugins are working and they work perfect there. In my project, there are no css-js.
This is what my form must have look like.
And this is what is actually look like right now.
And this is the code I wrote. It works in a blank project successfully.
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>BASIC EXAMPLE - HORIZONTAL LAYOUT</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<div class="body">
<div id="wizard_horizontal">
<h2>First Step</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut nulla nunc. Maecenas
arcu sem, hendrerit a tempor quis, sagittis accumsan tellus. In hac habitasse platea
dictumst. Donec a semper dui. Nunc eget quam libero. Nam at felis metus. Nam tellus
dolor, tristique ac tempus nec, iaculis quis nisi.
</p>
</section>
<h2>Second Step</h2>
<section>
<p>
Donec mi sapien, hendrerit nec egestas a, rutrum vitae dolor. Nullam venenatis diam ac
ligula elementum pellentesque. In lobortis sollicitudin felis non eleifend. Morbi
tristique tellus est, sed tempor elit. Morbi varius, nulla quis condimentum dictum,
nisi elit condimentum magna, nec venenatis urna quam in nisi. Integer hendrerit sapien
a diam adipiscing consectetur. In euismod augue ullamcorper leo dignissim quis elementum
arcu porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo
velit, blandit ac tempor nec, ultrices id diam. Donec metus lacus, rhoncus sagittis
iaculis nec, malesuada a diam. Donec non pulvinar urna. Aliquam id velit lacus.
</p>
</section>
<h2>Third Step</h2>
<section>
<p>
Morbi ornare tellus at elit ultrices id dignissim lorem elementum. Sed eget nisl at justo
condimentum dapibus. Fusce eros justo, pellentesque non euismod ac, rutrum sed quam.
Ut non mi tortor. Vestibulum eleifend varius ullamcorper. Aliquam erat volutpat.
Donec diam massa, porta vel dictum sit amet, iaculis ac massa. Sed elementum dui
commodo lectus sollicitudin in auctor mauris venenatis.
</p>
</section>
<h2>Forth Step</h2>
<section>
<p>
Quisque at sem turpis, id sagittis diam. Suspendisse malesuada eros posuere mauris vehicula
vulputate. Aliquam sed sem tortor. Quisque sed felis ut mauris feugiat iaculis nec
ac lectus. Sed consequat vestibulum purus, imperdiet varius est pellentesque vitae.
Suspendisse consequat cursus eros, vitae tempus enim euismod non. Nullam ut commodo
tortor.
</p>
</section>
</div>
</div>
</div>
</div>
</div>
<script src="~/Contents/plugins/jquery-validation/jquery.validate.js"></script>
<script src="~/Contents/plugins/jquery-steps/jquery.steps.js"></script>
Related
I was given a test to replace all the div tags in an Html file with semantic Html5 tags. After replacing all the tags, my test failed in 2 places; I'll point them out below. In the test, it was also stated that the classes and id of the tags might give you a little context about the Tag that might be used the replace them.
Here is the initial code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 semantic codility task</title>
<meta name="description" content="HTML5 semantic codility task" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="top-menu">
<div class="menu-element" id="logo">
<a href="#">
<img alt="Codility" src="images/logo.png" />
</a>
</div>
<div class="menu-element">
About us
</div>
<div class="menu-element">
References
</div>
<div class="menu-element">
Contact
</div>
</div>
<div id="content-container">
<div id="sidepanel">
<h2 class="sidepanel-title">Integer a placerat arcu.</h2>
<p class="sidepanel-content">
Aenean elementum posuere feugiat. Nulla faucibus pharetra commodo. Integer eu nisi quis diam ullamcorper gravida
quis vel augue. Ut urna dui, venenatis vel dictum sit amet, lacinia ut massa. Nullam nec magna nisi. Donec sagittis
sem ligula, blandit fringilla arcu dictum vitae. Nam eget fermentum leo. Proin fermentum nibh sit amet quam
ultricies hendrerit. Integer sed neque tincidunt, volutpat sapien vel, pellentesque augue. Nullam quis velit eget
leo molestie lobortis et eu magna. Fusce leo augue, blandit sed purus vitae, tincidunt consectetur velit. Ut at
nibh augue. Nunc viverra laoreet interdum. Nunc mattis libero et diam dictum viverra. Nulla id odio mi. Sed eu ante
non nisl aliquet interdum at ut enim.
</p>
<p class="sidepanel-content">
Curabitur eleifend elementum tincidunt. Phasellus sit amet elit a massa sodales condimentum. Proin in lorem eu est
ornare volutpat. Donec nec turpis in eros pretium maximus. Curabitur pellentesque rutrum vehicula. Etiam eu
ultrices lorem, ac scelerisque lacus. Vivamus vestibulum mi eget nunc tincidunt mattis. Nam feugiat at diam sed
facilisis. Quisque bibendum, ante quis scelerisque pharetra, diam sem aliquam diam, a hendrerit dui orci eu ante.
Vestibulum volutpat augue sit amet bibendum commodo. Pellentesque convallis tincidunt dapibus. Sed imperdiet
tincidunt tortor vitae congue.
</p>
<p class="sidepanel-content">
Praesent eleifend massa velit, ut aliquet purus pretium quis. Vivamus euismod, arcu a varius euismod, arcu urna
lacinia nibh, quis eleifend lacus nibh a ligula. In efficitur et nisl in tristique. Vestibulum rutrum finibus
vulputate. Integer pharetra congue tortor ut luctus. Vivamus tempor, massa eu convallis rhoncus, orci dolor porta
velit, vel viverra tellus sapien id erat. Vivamus accumsan blandit neque, in viverra lorem pharetra in. Quisque nec
arcu euismod, mollis augue sed, porttitor dui. Proin sed iaculis odio. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Nam bibendum felis sit amet erat ornare fringilla.
</p>
</div>
<div id="content">
<div id="main-block">
<h1 id="main-title">Duis varius venenatis nulla et.</h1>
<p id="main-description">
Pellentesque nec dolor gravida, porta metus et, dignissim tellus. Vivamus facilisis erat eget condimentum
volutpat.
</p>
</div>
<div class="site-block">
<h2 class="subtitle">Aenean feugiat tellus vitae finibus laoreet.</h2>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices laoreet nisi, vitae commodo erat malesuada
quis. Etiam vitae libero euismod, commodo massa in, luctus nisi. Pellentesque aliquam leo mi, pulvinar porttitor
orci auctor vitae. Quisque sagittis, velit ac consequat sollicitudin, enim est varius ligula, sed vulputate odio
libero sit amet nunc. Nunc urna mauris, porttitor a vestibulum ac, fringilla aliquam dui. Sed fringilla venenatis
erat quis consectetur. Nam id sapien et massa dapibus dapibus. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Nam scelerisque nibh a risus ullamcorper, nec faucibus lectus gravida.
Vivamus id est purus. Donec imperdiet interdum auctor. Nunc in ante velit. Phasellus dictum et lectus ut
malesuada. Nullam eget ante sodales, elementum sem et, porta mi. Aliquam accumsan arcu at eros sagittis accumsan
nec non urna. Phasellus at diam non urna congue tempus in sit amet eros.
</p>
</div>
<div class="site-block">
<div class="image-container">
<img alt="article related image" id="main-image" src="images/image.png" />
<div class="image-caption">Mauris eget risus ullamcorper, facilisis lectus eget.</div>
</div>
</div>
</div>
</div>
<div id="copyright-container">
<div id="copyright-content">
<p class="copyright">Copyright 1999-2020.</p>
<p>by Codility ® All Rights Reserved.</p>
</div>
</div>
</body>
</html>
Here is the layout image :
Here is my final code with semantic changes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 semantic codility task</title>
<meta name="description" content="HTML5 semantic codility task" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<nav id="top-menu">
<span class="menu-element" id="logo">
<a href="#">
<img alt="Codility" src="images/logo.png" />
</a>
</span>
<span class="menu-element">
About us
</span>
<span class="menu-element">
References
</span>
<span class="menu-element">
Contact
</span>
</nav>
<main id="content-container">
<aside id="sidepanel">
<h2 class="sidepanel-title">Integer a placerat arcu.</h2>
<p class="sidepanel-content">
Aenean elementum posuere feugiat. Nulla faucibus pharetra commodo. Integer eu nisi quis diam ullamcorper gravida
quis vel augue. Ut urna dui, venenatis vel dictum sit amet, lacinia ut massa. Nullam nec magna nisi. Donec sagittis
sem ligula, blandit fringilla arcu dictum vitae. Nam eget fermentum leo. Proin fermentum nibh sit amet quam
ultricies hendrerit. Integer sed neque tincidunt, volutpat sapien vel, pellentesque augue. Nullam quis velit eget
leo molestie lobortis et eu magna. Fusce leo augue, blandit sed purus vitae, tincidunt consectetur velit. Ut at
nibh augue. Nunc viverra laoreet interdum. Nunc mattis libero et diam dictum viverra. Nulla id odio mi. Sed eu ante
non nisl aliquet interdum at ut enim.
</p>
<p class="sidepanel-content">
Curabitur eleifend elementum tincidunt. Phasellus sit amet elit a massa sodales condimentum. Proin in lorem eu est
ornare volutpat. Donec nec turpis in eros pretium maximus. Curabitur pellentesque rutrum vehicula. Etiam eu
ultrices lorem, ac scelerisque lacus. Vivamus vestibulum mi eget nunc tincidunt mattis. Nam feugiat at diam sed
facilisis. Quisque bibendum, ante quis scelerisque pharetra, diam sem aliquam diam, a hendrerit dui orci eu ante.
Vestibulum volutpat augue sit amet bibendum commodo. Pellentesque convallis tincidunt dapibus. Sed imperdiet
tincidunt tortor vitae congue.
</p>
<p class="sidepanel-content">
Praesent eleifend massa velit, ut aliquet purus pretium quis. Vivamus euismod, arcu a varius euismod, arcu urna
lacinia nibh, quis eleifend lacus nibh a ligula. In efficitur et nisl in tristique. Vestibulum rutrum finibus
vulputate. Integer pharetra congue tortor ut luctus. Vivamus tempor, massa eu convallis rhoncus, orci dolor porta
velit, vel viverra tellus sapien id erat. Vivamus accumsan blandit neque, in viverra lorem pharetra in. Quisque nec
arcu euismod, mollis augue sed, porttitor dui. Proin sed iaculis odio. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Nam bibendum felis sit amet erat ornare fringilla.
</p>
</aside>
<section id="content">
<section id="main-block">
<h1 id="main-title">Duis varius venenatis nulla et.</h1>
<p id="main-description">
Pellentesque nec dolor gravida, porta metus et, dignissim tellus. Vivamus facilisis erat eget condimentum
volutpat.
</p>
</section>
<section class="site-block">
<h2 class="subtitle">Aenean feugiat tellus vitae finibus laoreet.</h2>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices laoreet nisi, vitae commodo erat malesuada
quis. Etiam vitae libero euismod, commodo massa in, luctus nisi. Pellentesque aliquam leo mi, pulvinar porttitor
orci auctor vitae. Quisque sagittis, velit ac consequat sollicitudin, enim est varius ligula, sed vulputate odio
libero sit amet nunc. Nunc urna mauris, porttitor a vestibulum ac, fringilla aliquam dui. Sed fringilla venenatis
erat quis consectetur. Nam id sapien et massa dapibus dapibus. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Nam scelerisque nibh a risus ullamcorper, nec faucibus lectus gravida.
Vivamus id est purus. Donec imperdiet interdum auctor. Nunc in ante velit. Phasellus dictum et lectus ut
malesuada. Nullam eget ante sodales, elementum sem et, porta mi. Aliquam accumsan arcu at eros sagittis accumsan
nec non urna. Phasellus at diam non urna congue tempus in sit amet eros.
</p>
</section>
<section class="site-block">
<figure class="image-container">
<img alt="article related image" id="main-image" src="images/image.png" />
<figcaption class="image-caption">Mauris eget risus ullamcorper, facilisis lectus eget.</figcaption>
</figure>
</section>
</section>
</main>
<footer id="copyright-container">
<article id="copyright-content">
<p class="copyright">Copyright 1999-2020.</p>
<p>by Codility ® All Rights Reserved.</p>
</article>
</footer>
</body>
</html>
I was getting error with id main-block and class copyright, The error was like this :
AssertionError: xpath for id: main-block is incorrect: {'/html/body/main/article/section[1]'}, this means that html5 DOM structure with this tag is not correct for SEO rules (xpath algorithm code: https://gist.github.com/ergoithz/6cf043e3fdedd1b94fcf)
and same for copyright.
What do I need to replace main-block and copyright tags? Thanks for reading.
Honestly not sure, this seems like a very specific issue with the class you're in, but it may serve you to look at this page not from the viewpoint of changing the old version, but how you would write it from scratch so it's semantic from the getgo.
It looks like you have a <section> tag around two other sections, which is unnecessary, though not incorrect. You also have your <aside> inside your main, which doesn't make much sense as the stuff that goes in aside is meant to be not main content.
the problem with this is that semantics are meant to create more meaning in an html document, so it's hard to say when they are being used incorrectly, excluding obvious misuses. Obviously, the footer doesn't go in the body. Obviously, the header doesn't go below the footer. But who's to say that an article needs to go in a section? Or that an article can't have a section? No one. In fact, both layouts are correct.
The real answer is going to come from the class you're taking, not a stranger unfamiliar with the specifics of this class.
Every time you click the text, it refreshes the page. It is not supposed to be a hyperlink. It is just supposed to be regular text. I have attached an image and the code below. The navigation link is correct. You are supposed to be able to click on Home, Add Inventory, & View Inventory. But everything else should not be clickable.
Picture of what I am getting
<html>
<head>
<title>Test Run</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>Housing & Residence Life Inventory</h1>
</div>
<div id="content">
<div id="nav">
<h3>Navigation</h3>
<ul>
<li><a class = "selected" href="index.html">Home</li>
<li><a href="addinventory.html">Add Inventory</li>
<li><a href="">View Inventory</li>
</ul>
</div>
<div id="main">
<h2>Home Page</h2>
<div id = "homedescription">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis mauris et lorem vestibulum dignissim. Mauris accumsan augue quis vestibulum feugiat. Donec rutrum risus risus, at posuere dolor consequat ac. Ut at nulla in felis iaculis hendrerit. Duis sit amet scelerisque tellus. Morbi et ante eget tortor tempor pulvinar pulvinar non lorem. Proin felis quam, mattis sagittis sem eu, scelerisque laoreet nibh. Nullam rhoncus a nisi id porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Sed in dui vel ante fringilla sodales. Quisque eu finibus ipsum. Quisque sollicitudin velit et fringilla ultrices. Nunc feugiat elit vitae mauris blandit, sed varius metus tempor. Maecenas neque dui, viverra vel egestas fermentum, mollis at ante. Vivamus ut dolor sodales, dignissim urna eget, placerat lacus. Morbi rutrum tortor ac diam convallis, non congue sem maximus. Morbi vitae posuere turpis, non vestibulum diam.</p>
<p>In ac scelerisque leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam consequat lacus ac elit dictum, at lacinia nibh interdum. In hac habitasse platea dictumst. Maecenas pretium nibh vel sodales tincidunt. Aliquam molestie, quam eleifend dignissim sagittis, nunc lorem pellentesque augue, eu euismod neque libero vitae felis. Mauris vel dui sodales, vehicula lectus vel, vestibulum sapien. Vestibulum vehicula at lectus a viverra. Aliquam semper ac elit mollis vulputate. Sed condimentum quam ac libero luctus, ut sagittis quam faucibus. Fusce eu aliquet tortor. Sed euismod mollis hendrerit. Vivamus pellentesque venenatis tortor quis blandit. Pellentesque non maximus nibh.</p>
</div>
</div>
</div>
<div id="footer">
Copyright © 2021 Keith Baker
</div>
</div>
</body>
</html>
you need a closing tag for your <a> tag like this
<li><a class = "selected" href="index.html">Home</a></li>
<li>Add Inventory</li>
<li>View Inventory</li>
I'm trying to create a carousel slider with css, atm works fine on chrome/firefox/IE, it looks something like this:
Now I want the slider displays full on the screen since it's inside a container, so I added a trick to acomplish that:
margin-left:-2000px;
margin-right:-2000px;
padding-left:2000px;
padding-right:2000px;
background-color: #e2e7fe;
And ended looking something like that:
That works fine on chrome, but on firefox and IE can't fully scroll the content. Is there a better solution that applying negative margins and paddings or fix that issue somehow?
EDIT: I need the slider inside the container since this is an example from my real website where I have more sliders inside the web and not just one on top
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
body {
overflow-x: hidden;
background-color: #f0f0e8;
}
.container {
background-color: #e2e7fe;
}
.slider {
white-space: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
margin-left:-2000px;
margin-right:-2000px;
padding-left:2000px;
padding-right:2000px;
background-color: #e2e7fe;
}
.slide {
display: inline-block;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<ul class="slider">
<li class="slide"><img src="https://picsum.photos/id/1068/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/189/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/996/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/603/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/933/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/32/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/21/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/22/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/23/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/24/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/25/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/26/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/27/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/28/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/29/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/30/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/31/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/39/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/33/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/34/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/35/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/36/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/37/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/38/200/200"></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12">
<h1>Some content</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet purus gravida quis blandit turpis cursus in hac habitasse. Risus at ultrices mi tempus imperdiet nulla malesuada. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Vel pharetra vel turpis nunc eget lorem. Nulla pellentesque dignissim enim sit amet venenatis urna. Tincidunt eget nullam non nisi est sit amet facilisis. Ullamcorper sit amet risus nullam eget felis. Faucibus a pellentesque sit amet. Consectetur lorem donec massa sapien faucibus. Vitae suscipit tellus mauris a diam maecenas sed enim ut. Id velit ut tortor pretium viverra suspendisse potenti. Mi sit amet mauris commodo quis imperdiet. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. A lacus vestibulum sed arcu. Sed libero enim sed faucibus turpis in eu mi. Aenean et tortor at risus viverra. Varius morbi enim nunc faucibus a pellentesque. Egestas sed sed risus pretium quam vulputate dignissim suspendisse.
</p>
<p>
Malesuada fames ac turpis egestas maecenas pharetra convallis. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Enim facilisis gravida neque convallis a cras semper auctor neque. Eu scelerisque felis imperdiet proin. Mi sit amet mauris commodo quis imperdiet massa. Neque sodales ut etiam sit amet nisl purus in mollis. Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus. Sem fringilla ut morbi tincidunt augue interdum. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Sociis natoque penatibus et magnis. Dignissim convallis aenean et tortor at risus viverra. Feugiat in fermentum posuere urna. Faucibus scelerisque eleifend donec pretium vulputate sapien. Dolor purus non enim praesent elementum. Erat nam at lectus urna duis convallis convallis. Platea dictumst quisque sagittis purus. Ligula ullamcorper malesuada proin libero nunc consequat. Tortor condimentum lacinia quis vel eros donec ac odio tempor.
</p>
<p>
Tristique senectus et netus et malesuada fames ac. Congue nisi vitae suscipit tellus. Interdum consectetur libero id faucibus nisl tincidunt. Mauris vitae ultricies leo integer. Eros in cursus turpis massa tincidunt dui ut ornare lectus. In aliquam sem fringilla ut morbi tincidunt augue interdum velit. Pretium viverra suspendisse potenti nullam ac. Eu nisl nunc mi ipsum faucibus vitae aliquet. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Enim ut sem viverra aliquet eget sit. Dolor sit amet consectetur adipiscing. Amet nulla facilisi morbi tempus. Vulputate dignissim suspendisse in est ante in. Lectus urna duis convallis convallis tellus id. Vitae semper quis lectus nulla at volutpat diam ut. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Pretium quam vulputate dignissim suspendisse in est ante. Ac placerat vestibulum lectus mauris. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam.
</p>
<p>
Dui id ornare arcu odio. Sed id semper risus in. Amet consectetur adipiscing elit ut aliquam purus sit amet luctus. Est ullamcorper eget nulla facilisi etiam dignissim. Nibh praesent tristique magna sit amet. Turpis egestas pretium aenean pharetra. Maecenas accumsan lacus vel facilisis volutpat. A cras semper auctor neque vitae tempus quam. Ultricies mi eget mauris pharetra et ultrices neque. Enim praesent elementum facilisis leo vel fringilla. Dolor magna eget est lorem ipsum. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Ut tristique et egestas quis. Id cursus metus aliquam eleifend mi in. Rhoncus dolor purus non enim praesent elementum facilisis leo. Sed lectus vestibulum mattis ullamcorper. Senectus et netus et malesuada fames ac turpis. Vestibulum sed arcu non odio euismod. Sagittis id consectetur purus ut faucibus pulvinar elementum.
</p>
<p>
Eget mauris pharetra et ultrices neque ornare. Non sodales neque sodales ut etiam sit amet nisl. Enim ut tellus elementum sagittis vitae et leo duis ut. Augue lacus viverra vitae congue eu consequat. Purus semper eget duis at tellus at. Sed egestas egestas fringilla phasellus faucibus. Libero volutpat sed cras ornare. Venenatis lectus magna fringilla urna porttitor rhoncus. Dolor magna eget est lorem. Sed blandit libero volutpat sed cras ornare. Id cursus metus aliquam eleifend mi in nulla posuere.
</p>
<p>
Velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Ante in nibh mauris cursus mattis molestie. Sed elementum tempus egestas sed. Donec adipiscing tristique risus nec feugiat in fermentum posuere. Vitae semper quis lectus nulla at volutpat. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Sed libero enim sed faucibus turpis in. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Senectus et netus et malesuada fames ac. Dui vivamus arcu felis bibendum ut tristique et. Gravida quis blandit turpis cursus in hac habitasse platea. Viverra accumsan in nisl nisi. Vel risus commodo viverra maecenas accumsan lacus vel. Scelerisque eleifend donec pretium vulputate sapien.
</p>
<p>
Turpis egestas sed tempus urna. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Magna ac placerat vestibulum lectus mauris. Lorem ipsum dolor sit amet consectetur adipiscing elit. Consequat id porta nibh venenatis cras sed. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus. Diam quam nulla porttitor massa id neque. Justo eget magna fermentum iaculis eu non diam. Fermentum iaculis eu non diam phasellus. Aliquam ultrices sagittis orci a scelerisque purus semper. Sit amet nisl purus in mollis nunc sed id. Id aliquet risus feugiat in ante metus dictum at tempor. Quisque id diam vel quam elementum pulvinar etiam. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Venenatis a condimentum vitae sapien. Viverra adipiscing at in tellus integer feugiat scelerisque.
</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Since you don't want to take out the carousel slider div to be out of the container class. There is a fix for that too. I have used viewport width(vw) for it and then calculate it in the right way that the carousel will fit on full screen.
CSS:-
.slider {
white-space: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
margin: 0;
padding: 0;
background-color: #e2e7fe;
width: calc(100vw);
position: relative;
left: 34.5em;
transform: translateX(-50%);
}
But please note that my fix will work only in large screens only (lg) termed in bootstrap. For medium(md), small(sm), and extra small(xs) screens, you have to calculate by yourself with same calculation I used for lg. Just you have to set media query for different resolutions for left position.
Working Fiddle:- https://jsfiddle.net/szreLuwn/2/
Hope, it fulfills your requirement.
Thanks
I'm trying to assign different anchors to different divs, but they don't seem to be taking effect. I've tried using <a name="anchor">, <a id="anchor">, and <div id="anchor"> (which worked with some divs, but not all).
This is my current HTML:
<div class="about">
<a name="nabout"></a>
<div class="section">
<div class="section-title job-section-header section-header section-subheader">
<div class="section-bar"></div>
<img src="images/about-photo.png" class="left-image" />
</div>
<div class="section-body jobs">
<p class="section-subtext-md section-subtext section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis nulla a eros porttitor, ut congue elit commodo. Nunc ut dapibus elit. Suspendisse euismod rhoncus felis, id vulputate mauris posuere vitae. Praesent bibendum maximus nibh, nec
tempor diam blandit in. Praesent non metus in odio vehicula cursus vulputate quis quam. Nulla varius massa ac libero commodo imperdiet. Fusce tincidunt metus sapien, sed fringilla nibh vulputate eget. Suspendisse sodales nisi quis hendrerit porttitor.
Morbi in augue sapien. Maecenas ultricies, nisl vitae vehicula vulputate, nunc tellus sagittis turpis, nec laoreet quam velit non nunc. In aliquam libero a tellus commodo, at aliquet risus imperdiet. Fusce finibus a nulla et facilisis. Maecenas
condimentum sit amet velit et sodales. Duis mauris augue, feugiat non ornare pharetra, convallis nec metus. Integer vitae consequat dolor, at tristique lorem.</p>
<p class="section-subtext-md section-subtext section-text">Cras libero massa, fringilla id condimentum ut, aliquam ut nisi. Vestibulum ullamcorper commodo elit at commodo. Nullam dignissim id lacus sed faucibus. Quisque sollicitudin quam sit amet est facilisis tempor. Morbi vehicula quam et mauris faucibus
semper. Etiam vel est eu magna viverra viverra. Donec venenatis, nisl eget rhoncus auctor, lorem est gravida magna, ac consectetur velit libero at turpis. Vivamus at quam sed arcu eleifend suscipit non id mauris. Pellentesque tempor ornare imperdiet.
Morbi ornare luctus imperdiet. Fusce sagittis lorem ut elementum fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div style="clear: both;"></div>
</div>
</div>
Why does <a name> not work sometimes and what should I be using in this case?
The way that HTML anchors works is as follows.
When you give a div or any other DOM object an id attribute, you can then "link" to that object by specifying that id, with a # in your href, to have an a tag link to that tag.
For example:
HTML
Testing
...
<div id="testing">
<h1>Testing DIV</h1>
</div>
By clicking on the above <a> tag, the user's browser will scroll until the very top of the #testing div is at the top of the page, assuming the browser has space to scroll.
Try this
Test
.........
<a name="test"></a>
<h1>Testing</h1>
or this
Test
.......
<div id="test">
<h1>Test</h1>
</div>
I'm not 100% sure why it's not jumping to the location on load, but if you add this javascript
window.location.href = window.location.hash;
to the bottom of the page, that should fix your problem.
I am working on a small project whose front-end is built with the latest version of Bootstrap. I have my sections of the homepage, but I am stuck on making them behave the way I want.
<body>
<div class="container-fluid max-height">
<div class="row max-height">
<div class="col-md-2 col-sm-12 col-xs-12 site-nav">
<div class="row">
<div class="brand">
<a href="index.html">
<img src="http://placehold.it/200x320" class="img-responsive" alt="logo" />
</a>
</div><!-- .brand -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem libero, vulputate vel tellus eu, suscipit facilisis metus. Nulla tempus cursus elit, eget pellentesque risus euismod ut. Fusce sed sodales mauris. In velit arcu, blandit sed tempor vitae, feugiat eu erat. Phasellus ligula odio, porta in libero non, ultrices mollis purus. Duis sollicitudin aliquet nunc, ut dictum turpis laoreet eget. Phasellus eu neque efficitur, bibendum odio vitae, sagittis libero. Proin commodo efficitur magna ac sollicitudin. Aenean bibendum urna at diam accumsan tincidunt. Proin ac elit vitae augue rutrum convallis. Donec magna ex, tempor at libero quis, mattis pharetra nunc. Maecenas sit amet nisi in odio interdum interdum.</p>
</div><!-- .row -->
</div><!-- .col-md-2 -->
<div class="col-md-10 col-sm-12 site-content">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 info-bar">
<h2>SOME TITLE</h2>
</div><!-- .col-md-12 -->
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem libero, vulputate vel tellus eu, suscipit facilisis metus. Nulla tempus cursus elit, eget pellentesque risus euismod ut. Fusce sed sodales mauris. In velit arcu, blandit sed tempor vitae, feugiat eu erat. Phasellus ligula odio, porta in libero non, ultrices mollis purus. Duis sollicitudin aliquet nunc, ut dictum turpis laoreet eget. Phasellus eu neque efficitur, bibendum odio vitae, sagittis libero. Proin commodo efficitur magna ac sollicitudin. Aenean bibendum urna at diam accumsan tincidunt. Proin ac elit vitae augue rutrum convallis. Donec magna ex, tempor at libero quis, mattis pharetra nunc. Maecenas sit amet nisi in odio interdum interdum.</p>
<p>Quisque ligula ex, pellentesque sit amet ligula non, ullamcorper egestas nulla. Sed in sapien ut velit finibus scelerisque ac quis purus. Etiam libero nibh, euismod id augue quis, condimentum aliquam diam. Integer faucibus vitae velit sed iaculis. Praesent laoreet neque est, at pharetra nunc scelerisque sit amet. Curabitur fringilla ex a quam commodo, quis hendrerit ipsum ullamcorper. Vestibulum pretium leo odio, feugiat tristique augue laoreet id. Aenean lobortis, mi sit amet pellentesque condimentum, lectus velit gravida diam, a consequat arcu magna eget diam. Phasellus in iaculis dolor, nec rhoncus dolor.</p>
</div><!-- .col-md-6 -->
<div class="col-md-6">
<div class="article-photo">
<img src="http://placehold.it/500x350" class="img-responsive" alt="article" />
</div>
</div>
</div><!-- .row -->
</div><!-- .col-md-10 -->
</div><!-- .row -->
</div><!-- .container-fluid -->
</body>
Here is a JSFiddle.
I would like the title bar and sidebar to stay where they are and not scroll with the content. The only thing I want scrolling is the content (in blue).
How can I achieve this purely with CSS in Bootstrap?
If that top section is to be part of a dynamic page I would read about the Bootstrap Navbar (http://getbootstrap.com/components/#navbar). A very powerful tool that will be more dynamic than simple scroll styling for your page.
For a simple answer to your current fiddle you'll need to set the scroll to overflow and set a fixed height on the div(s) that you want to scroll. Adding these css attributes to the scrolling divs does what you describe.
style="overflow: scroll; max-height: 100px"
Fiddle here: http://jsfiddle.net/xb6k5vth/1/