How to make the image overlap the navbar(nav-pills) below it?Here it the link to fiddle http://jsfiddle.net/arpittomar/5Ledeorr/
To summarize:
<div class="container">
<div class="row" id="overlap">
<div class="col-md-10 col-md-offset-1">
<img src="http://placehold.it/200x100" class="img-thumbnail">
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="internal_navbar">
<ul class="nav nav-pills">
<li>Timeline</li>
<li>About</li>
<li>Friends</li>
<li>Photos</li>
</ul>
</div>
</div>
</div>
</div>
Here i want to make the image overlap the ul elements below it.
You can use position: absolute for the <ul> and the <img> and z-index: 1 for the <img>:
.nav-pills, .img-thumbnail {
position: absolute;
}
.img-thumbnail {
z-index: 1;
}
JSFiddle
You need to use absolute position for the image tag and whichever component you want on top just add z-index:1 to it
.img-thumbnail{
position:absolute;
z-index:1;
}
I think this wil work for you for demo check http://jsfiddle.net/5Ledeorr/5/
Related
I want to align this link to right bottom. I already tried adding the below CSS but it only align in the container. I want it to be align in the hero-area.
.rt {
position: absolute;
right: 0px;
bottom: 0px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="hero-area hero-style-03 christian-hero-bg">
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-7 ml-auto">
<div class="hero-content text-left">
<h2 class="text-black">Text1 </h2>
<div class="ht-btn-area section-space--mt_40 rt">
x
</div>
</div>
</div>
</div>
</div>
</div>
Please check following, as i have changed container to container-fluid because you want it under hero-area.
a.hero-btn {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
<div class="hero-area hero-style-03 christian-hero-bg">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 col-md-7 ml-auto">
<div class="hero-content text-left">
<h2 class="text-black">Text1 </h2>
<div class="ht-btn-area section-space--mt_40 rt">
x
</div>
</div>
</div>
</div>
</div>
</div>
Add Bootstrap's position:relative class, position-relative to your hero's classes:
.rt
{
position:absolute;
right:0px;
bottom:0px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="position-relative hero-area hero-style-03 christian-hero-bg">
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-7 ml-auto">
<div class="hero-content text-left">
<h2 class="text-black">Text1 </h2>
<div class="ht-btn-area section-space--mt_40 rt">
x
</div>
</div>
</div>
</div>
</div>
</div>
Absolutely positioned elements are positioned with respect to their closest positioned (non-static) ancestor, so setting position: relative on the hero makes the x move in relation to it instead of the body.
Yor master div position is up-left for fixing this problem you most give rt class to your master div.
Example
.rt
{
position:absolute;
right:0px;
bottom:0px;
}
<div class="hero-area hero-style-03 christian-hero-bg rt">
...
</div>
Or you most give all page space to div
my html page has this unwanted white patch in the bottom and I don't know why. I don't want to be able to scroll down that long. It stays there regardless by default. it dissapears when I hover on the left(front) element but reappears when I hover on the right(behind) element.
here is the codepen : https://codepen.io/aronnora/pen/ExjJrag
<nav class="nav_bar">
<img src="580b57fcd9996e24bc43c4f8.png" alt="logo" class="logo" id="logo">
<div class="trans" id="trans"> trans energy solutions </div>
<ul class="ul">
<li class="li1">Home</li>
<li class="li2">About Us</li>
<li class="li3">Products</li>
<li class="li4">Services</li>
<li class="li5">Facility</li>
<li class="li6">Testing</li>
<li class="li7">Clients</li>
<li class="li8">Contact</li>
</ul>
</nav>
<div class="white">
</div>
<div class="pro">
<div class="text">
PRODUCTS
</div>
</div>
<div class="total">
<div class="one">
<img src="liquid-immersed-distribution-transformers-768x784.png" alt="kakashi" class="Kakashi" height="300rem"></img>
<div class="downtextone">
時メユ郎護ヲテ写藤くクッル起稲ロチ製資ヌ米更ナ池天ワア由時テ栃94探容ケニ災逮はぴ氷可難智む。能ざラくな静盟ごぼじ不注更ルモト点究サトケ別意マワ抜博写ミ元
</div>
</div>
<div class="two">
<img src="transtech-2.png" alt="madara" class="Madara" height="300rem"></img>
<div class="downtexttwo">
時メユ郎護ヲテ写藤くクッル起稲ロチ製資ヌ米更ナ池天ワア由時テ栃94探容ケニ災逮はぴ氷可難智む。能ざラくな静盟ごぼじ不
</div>
</div>
</div>
your div takes a default height as it's content. so just add overflow:hidden; to class (.tow)
.two {
height: 58.29rem;
width: 45rem;
transition: opacity 1s;
background-color: black;
position: absolute;
z-index: 10;
overflow: hidden;
}
I have the following:
http://jsfiddle.net/B6dFk/embedded/result/
Excerpts:
HTML:
<div id="aboutback">
This is a background
</div>
<div id="workback">
This is another background
</div>
<div id="wrapper">
<div id="innerwrapper">
<div id="nav">
<div id="about" class="menu1">
<p>About</p>
</div>
<div id="aboutsub">
<div id="team" class="menu2">
<p>Team</p>
</div>
<div id="experience" class="menu2">
<p>Experience</p>
</div>
<div id="difference" class="menu2">
<p>Difference</p>
</div>
</div>
<div id="work" class="menu1">
<p>Work</p>
</div>
<div id="worksub">
<div id="services" class="menu2">
<p>Services</p>
</div>
<div id="ourprocess" class="menu2">
<p>Our Process</p>
</div>
</div>
<div id="portfolio" class="menu1">
<p>Portfolio</p>
</div>
<div id="contact" class="menu1">
<p>Contact</p>
</div>
</div>
<div id="outerviewer">
<div id="innerviewer">
<p>
Filler
</p>
</div>
</div>
</div>
CSS
#aboutback
{
position: absolute;
background: #11ac92;
min-height: 100%;
width: 100%;
top: 0;
z-index: -1;
}
I want the #aboutback and the #workback to take up the full background at all times. These will have images in them which i will animate using jquery.
The problem is, when the window isn't full page(so the scrollbar appears) and you scroll down, you see the white nothingness of despair.
It's worth noting I have tried setting the position of the body tag which alters the effect but does not fix it. For example, position:absolute; will push everything left and leave a white space on the right.
Any simple solutions, please?
body{
height:100%;
overflow:hidden;
}
html{height:100%;}
body{height:100%;}
divclass{height:100%;}
I need to boorstrap full width navbar in 940px container and after header like this pic. How to ?
Code in jsfiddle
This is how you would do it in a "bootstrappy" way...
/* put the stuff you want NOT to span 100% in a container */
<div class="container">
/* wrap the grouping in a row */
<div class="row">
/* left center and right classes are unneeded.*/
/* Just used to show color in the fiddle */
<div class="span3 left">Header Left</div>
<div class="span6 center">Header Center</div>
<div class="span3 right">Header Right</div>
</div>
</div>
/* navbar outside the container will span 100% */
<div class="navbar">
<div class="container">
<div class="navbar-inner">
<div class="span12">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
</div>
/* back into a container so it doesn't span the full width */
<div class="container">
<div class="row">
<div class="span12 content">Content</div>
</div>
</div>
DEMO
EDIT: Updated to reflect requirements of navlinks inside container.
You need a container, to hold the header and the content.
For example:
<div class="container">
<div id="headerleft"></div>
<div id="header"></div>
<div id="headerright"></div>
</div>
<div id="nav"></div>
<div class="container">
<div id="content"></div>
</div>
And the CSS would be similar to this:
.container { width: 75%; }
#nav { width: 100%; }
I have a list that I want to fill the width of the container but there seems to be a small gap at the end for some reason.
The CSS is lengthy so here is the html
<div class="line clearfix no-margin">
<div class="container">
<header>
<div class="logo col-4">
<img src="#" />
<h1 class="logo">Name</h1>
</div>
<div class="nav clearfix">
<ul>
<li><span id="head-icon"></span>About Us</li>
<li><span id="wrench-icon"></span>Services</li>
<li><span id="email-icon"></span>Contact</li>
</ul>
</div>
</header>
</div>
</div>
Demo
I can't seem to figure out where that gap is coming from.
It's because of the margin-left: -3px; in .nav li!
See the updated Fiddle: http://jsfiddle.net/VRtnA/18/
Try removing margin-left: -3px; in .nav li.