The problem is I have to make div with aside class scrollable, but the right side with picture not.
For now it is not scrollable because position is not fixed (screenshot):
but if I add position:fixed; to aside class - it will be scrollable, but the right side will move left, which is bad.
body {
background-color: #2e7744;
overflow:hidden;
}
.aside {
height: 100%;
overflow-y: auto;
position:fixed;
}
<body>
<div class="container-fluid">
<div class="row">
<div class="aside col-lg-3">
<nav class="menu background sidebar card mb-4">
<ul class="nav flex-column">
<li class="nav-item">
<span class="nav-link" style="background-color: #71a4ff66">
<b class="header">Cat 1</b>
</span>
<ul class="background">
<li class="nav-item hover">
<a class="poster-link " href="/poster/index.php?pid=3">
<div>Pic 1</div>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<span class="nav-link">
<b class="header">Cat 2</b>
</span>
<ul class="background">
<li class="nav-item hover">
<a class="poster-link " href="/poster/index.php?pid=1">
<div>Text 1</div>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="col-sm-12 col-lg-12 col-xl-4 mt-4">
<div class="row">
<div class="col-sm-12">
Picture with text
</div>
</div>
</div>
</div>
</div>
</body>
Is there an option to solve this problem quick?
This HTML structure works perfectly on mobile, I have to preserver it somehow.
Any ideas?
What you need to do is encapsulate the menu pane in a div and then assign position fixed in menu pane class with respect to its parent div.
Below is the code to prove the same:
* {
margin: 0px;
padding: 0px;
font-family: 'arial';
}
.container-fluid {
width: 100%;
display: grid;
grid-template-columns: 30% 70%;
}
.left_pane {
background: black;
display: flex;
justify-content: center;
align-items: center;
}
.menu_pane {
top: 0;
left: 0;
position: fixed;
display: flex;
flex-direction: column;
overflow-y: scroll;
height: 100vh;
width: 30%;
}
.menu_pane a {
padding: 25px 20px;
background: black;
color: white;
border: 1px solid black;
text-align: center;
font-size: 50px;
text-decoration: none;
transition: 0.4s;
}
.menu_pane a:hover {
background: white;
color: black;
}
.right_pane {
display: flex;
flex-direction: column;
padding: 20px;
}
.content_pane {
padding: 20px 10px;
display: flex;
flex-direction: column;
}
.content_pane h1 {
font-size: 50px;
text-transform: uppercase;
padding-bottom: 20px;
}
.content_pane p {
font-size: 20px;
width: 70%;
}
<div class="container-fluid">
<div class="left_pane">
<div class="menu_pane">
Button 1
Button 2
Button 3
Button 4
Button 5
Button 6
Button 7
Button 8
Button 9
Button 10
Button 11
Button 12
</div>
</div>
<div class="right_pane">
<div class="content_pane">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content_pane">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content_pane">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content_pane">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content_pane">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="content_pane">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
Related
I am trying to make a sticky sidebar that stops at the bottom of a webpage's header image, but I'm unable to get it to work. I've recreated the issue in the snippet below and in this JSFiddle which might be easier to look at/test in.
The sidebar is looking how I want it, but when I scroll down it doesn't halt at the top of the page
.about {
margin-top: 50px;
}
h4 {
padding-left: 0.3rem;
}
.about-header-image {
background-size: cover !important;
background-color: #919191;
width: 100%;
border-radius: 0px !important;
padding-top: 3rem !important;
padding-bottom: 2rem !important;
margin-bottom: 0px;
margin-top: 42px !important;
}
.nav-with-bar ul {
list-style-type: none;
padding-left: 10px;
}
.nav-with-bar.aboutnav {
position: sticky;
margin-top: 25px;
padding: 0px;
bottom: 100%;
z-index: 100;
width: 150px;
}
.nav-with-bar h5 {
text-decoration: underline;
}
.nav-with-bar .nav-link:hover {
text-decoration: underline;
}
.nav-with-bar .nav-link.active {
border-right: 3px solid blue;
}
.nav-with-bar a {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
}
.nav-with-bar a:hover {
color: #064579;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet">
<div class="content">
<nav class="navbar fixed-top navbar-expand-lg bg-dark">
<div class="d-flex flex-grow-1 container-fluid pl-2">
<a class="navbar-brand text-white" href="/Index">
<span style="white-space: nowrap;" class="d-inline-block">Website</span>
</a>
</div>
</nav>
<div class="about-header-image" style="background-image: url(Assets/Wallpaper.jpg) !important;">
<div class="my-auto text-center">
<h1 style="font-family: 'Crimson Text', serif; font-size: 4em;" class="text-white d-inline-block">
Website Name
</h1>
</div>
</div>
<div class="h-100">
<div class="nav-with-bar aboutnav d-md-inline-block offset-1 col-2 d-none mr-3">
<h5>About Us</h5>
<ul>
<li>
Purpose</li>
<li>
Founding</li>
<li>
Future</li>
<li>
Contributors</li>
<li>
Contact</li>
</ul>
</div>
<div class="col-md-7 d-inline-block about">
<div id="purpose" style="font-size: x-large;">
<h4 class="mb-0">Filler Text</h4>
<hr class="nogap">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
I have marked all my edits in css.
.about {
margin-top: 50px;
}
h4 {
padding-left: 0.3rem;
}
.h-100 {
display: flex; /*add this it*/
}
.about-header-image {
background-size: cover !important;
background-color: #919191;
width: 100%;
border-radius: 0px !important;
padding-top: 3rem !important;
padding-bottom: 2rem !important;
margin-bottom: 0px;
margin-top: 42px !important;
}
.nav-with-bar ul {
list-style-type: none;
padding-left: 10px;
}
.nav-with-bar.aboutnav {
position: sticky;
top: 81px; /*add this it*/
margin-top: 25px;
padding: 0px;
bottom: 100%;
z-index: 100;
width: 150px;
display: flex!important; /*add this it*/
flex-direction: column; /*add this it*/
height: 100%; /*add this it*/
}
.nav-with-bar h5 {
text-decoration: underline;
}
.nav-with-bar .nav-link:hover {
text-decoration: underline;
}
.nav-with-bar .nav-link.active {
border-right: 3px solid blue;
}
.nav-with-bar a {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
}
.nav-with-bar a:hover {
color: #064579;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet">
<div class="content">
<nav class="navbar fixed-top navbar-expand-lg bg-dark">
<div class="d-flex flex-grow-1 container-fluid pl-2">
<a class="navbar-brand text-white" href="/Index">
<span style="white-space: nowrap;" class="d-inline-block">Website</span>
</a>
</div>
</nav>
<div class="about-header-image" style="background-image: url(Assets/Wallpaper.jpg) !important;">
<div class="my-auto text-center">
<h1 style="font-family: 'Crimson Text', serif; font-size: 4em;" class="text-white d-inline-block">
Website Name
</h1>
</div>
</div>
<div class="h-100">
<div class="nav-with-bar aboutnav d-md-inline-block offset-1 col-2 d-none mr-3">
<h5>About Us</h5>
<ul>
<li>
Purpose</li>
<li>
Founding</li>
<li>
Future</li>
<li>
Contributors</li>
<li>
Contact</li>
</ul>
</div>
<div class="col-md-7 d-inline-block about">
<div id="purpose" style="font-size: x-large;">
<h4 class="mb-0">Filler Text</h4>
<hr class="nogap">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
Currently I have this:
When I resize this container, the text is out of my box.
How my card is made:
<div class="container selfsizing nobackground">
<div class="row selfsizing">
<div class="col-sm nopadding">
<div class="d-flex justify-content-between">
<span style="font-weight: bold;">{{dashboard_card['card_title']}}</span>
<form method="post">
<button name="deleteCard" class="delete" type="submit" value="{{dashboard_card['id']}}">x</button>
</form>
</div>
<div class="d-flex justify-content-between card-text">
<span style="font-weight: bold;">{{dashboard_card['card_text']}}</span>
</div>
</div>
</div>
</div>
How can I hide the text, when I resize the div vertically?
You can use overflow:hidden; css property on the container.
.container{
overflow:hidden;
}
example
.container {
width: 300px;
background: orange;
padding: 10px;
margin: 20px auto;
}
.container.overflow-h {
width: 300px;
height: 50px;
background: orange;
overflow: hidden;
padding: 10px;
margin: 20px auto;
}
<div class="container overflow-h">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Hope this helps!
I've made a basic parallax website and I am looking to put a simple navigation bar on the top right of the screen. When I load up the website in my browser, the link (which at the moment is linked to #) won't allow me to click it until I reach the class .section. If it is touching any of the images that have the parallax effect, it becomes opaque, and won't allow me to click. I had a feeling it had something to do with bad placement, and even when I moved it around it seemed to have no effect. It also won't float to the right. Here is some of the HTML and CSS:
body, html {
height: 100%;
margin:0;
font-size: 16px;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.8em;
color:#666;
}
.navbar {
list-style: none;
color:#779cd8;
position:fixed;
float: right;
margin-right: 20px;
}
.pimg1, .pimg2, .pimg3{
position:relative;
opacity:0.70;
background-position: center;
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
}
.pimg1 {
background-image: url('../AlignedResonance/mountainsvg.svg');
min-height: 100%;
}
.pimg2 {
background-image: url('../AlignedResonance/tree.jpg');
min-height: 400px;
}
.pimg3 {
background-image: url('../AlignedResonance/lake.jpg');
min-height: 400px;
}
.section {
text-align:center;
padding: 50px 80px;
}
.section-light {
background-color: #f4f4f4;
color:#666;
}
.section-dark {
background-color: #282e34;
color:#ddd;
}
.ptext {
position:absolute;
top:50%;
width: 100%;
text-align: center;
color:black;
font-size: 27px;
letter-spacing: 8px;
text-transform:uppercase;
}
.ptext .border {
background-color: #111;
color: #fff;
padding:20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Aligned Resonance</title>
<link rel="stylesheet" type="text/css" href="../AlignedResonance/style.css">
</head>
<body>
<ul class="navbar">
<li>Home</li>
</ul>
<div class="pimg1">
<!-- class ptext -->
<div class="ptext">
<span>
Aligned Resonance
</span>
</div>
</div>
<section class="section section-light">
<h2>Section One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border">
Text 2
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border">
Text 3
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<div class="pimg1">
<div class="ptext">
<span>
Aligned Resonance
</span>
</div>
</div>
</body>
</html>
Sorry if I don't have a correct format etc., as I am new to HTML as well as this site.
Try updating the z-index for your navbar class:
.navbar {
list-style: none;
color:#779cd8;
position:fixed;
float: right;
margin-right: 20px;
z-index: 1;
}
I have three paragraphs with heading and each heading have a border-bottom which is on the left side.
I used h2:after{//CSS here } to display the border. I used left: 13.5%; for the first heading to display the border on the left side.I can use the left:25% for second and left:39% for the last heading to display the border but I know this is not a good way to display. Because If I used to like this then I have to use the media query for all the device to set the border.
I want to know which is the best way to use the border-bottom and all are display on the left side.
Getting the output
I need a output
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.heading {
margin-top: 20px;
margin-bottom: 30px;
}
.heading h2 {
font-size: 50px;
text-align: center;
}
.heading h2 span {
color: #0000ff;
}
.heading h2:after {
content: "";
border-bottom: 4px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 100px;
left: 13.5%;
transform: translateX(-13.5%);
padding-top: 10px;
}
<div class="container">
<div class="par_1">
<div class="heading">
<h2><span>Lorem ipsum </span>Lorem ipsum dolor sit amet</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="par_2">
<div class="heading">
<h2><span>Lorem ipsum</span>dolor sit amet</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="par_3">
<div class="heading">
<h2><span>dolor sit amet</span></h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
Simply apply it to the span instead of the h2 and no need to specify a specific value to left, simply make it 0 and also bottom to 0 (or any negative value if you want it to be lower)
[don't forget position:relative on span]
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.heading {
margin-top: 20px;
margin-bottom: 30px;
}
.heading h2 {
font-size: 50px;
text-align: center;
}
.heading h2 span {
color: #0000ff;
position:relative;
}
.heading h2 span:after {
content: "";
border-bottom: 4px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 100px;
left: 0;
bottom:0;
padding-top: 10px;
}
<div class="container">
<div class="par_1">
<div class="heading">
<h2><span>Lorem ipsum </span>Lorem ipsum dolor sit amet</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="par_2">
<div class="heading">
<h2><span>Lorem ipsum</span>dolor sit amet</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="par_3">
<div class="heading">
<h2><span>dolor sit amet</span></h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
You should put your pseudo element :after in your span because it covers the exact width of your heading text. Then you should give your span a relative positioning so it will become its parent. Then just give it a 0% left positioning so it will align with the left. Your code should look like this.
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
width: 1170px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.heading {
margin-top: 20px;
margin-bottom: 30px;
}
.heading h2 {
font-size: 50px;
text-align: center;
}
.heading h2 span {
color: #0000ff;
position: relative;
}
.heading h2 span:after {
content: "";
border-bottom: 4px solid #E43D32;
content: ' ';
position: absolute;
display: block;
width: 100px;
left: 0;
padding-top: 10px;
}
<div class="container">
<div class="par_1">
<div class="heading">
<h2><span>Lorem ipsum </span>Lorem ipsum dolor sit amet</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="par_2">
<div class="heading">
<h2><span>Lorem ipsum</span>dolor sit amet</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="par_3">
<div class="heading">
<h2><span>dolor sit amet</span></h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
I cannot get my menu bar to appear horizontally. I am still working on the whole page itself, but just need to focus on the #nav items not displaying correctly. Right now it is appearing centered and I would like it to be inline in the upper-right.
How can I fix this?
body {
background-image: url("http://i59.photobucket.com/albums/g304/ecarlson_2010/Mobile%20Uploads/2E3938F1-33FA-4CF1-A13A-F86E536A7CEA.jpg");
background-size: 30%;
background-repeat: no-repeat;
height: 500px;
top: 0;
font-family: cursive;
margin: 0 auto;
max-width: 500px;
background-color: black;
}
.left {
background-color: red;
}
a {
font-size: 15px;
}
#nav {
background-color: purple;
width: 15px;
height: 25px;
border-radius: 5px;
}
#nav li {
margin: 10px;
text-align: center;
float: right;
display: inline;
background-color: pink;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
<body>
<header>
<h1>Plant Tissue Culturing </h1>
<div id="nav">
<ul>
<li> HOW TO
</li>
<li> WHY
</li>
<li> HOW TO
</li>
</ul>
</div>
</header>
<h2>Micropropagation</h2>
<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div class="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<div class="third>
<p> " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
Just need to add display: inline-block; to your #nav li
#nav li {
margin: 10px;
float: left;
background-color: pink;
display: inline-block;
height: 25px;
border-radius: 5px;
}
jsfiddle
body {
background-image: url("http://i59.photobucket.com/albums/g304/ecarlson_2010/Mobile%20Uploads/2E3938F1-33FA-4CF1-A13A-F86E536A7CEA.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: cursive;
margin: 0 auto;
}
a {
font-size: 15px;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
float: right;
}
#nav li {
margin: 10px;
float: left;
background-color: pink;
display: inline-block;
height: 25px;
border-radius: 5px;
}
h2 {
position: relative;
}
<title>Plant Tissue Culturing</title>
<header>
<h1>Plant Tissue Culturing </h1>
<div id="nav">
<ul>
<li> HOW TO
</li>
<li> WHY
</li>
<li> WHERE
</li>
</ul>
<br/>
<br/>
<h2>Micropropagation</h2>
</div>
<br />
</header>
<body>
<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="third">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</body>