When i scroll on the website the image and nav bar mix together. The image goes through the navigation bar
and it looks like the background of the navigation bar is the image.
i put the position of the nav bar fixed and the z-index 1 and the div of the image position relative and z-index 0
<div class="header-top">
<span class="br">BR</span><span class="arch"> Architects</span>
<div class="meny">
Projects
About
Contact
</div>
</div>
<div id="home">
<div class="image">
<img src="skyscraper.jpg" alt="">
</div>
</div>
</html>
.header-top{
box-shadow: 0px 5px 8px -2px rgba(0,0,0,0.75);
position: fixed;
width: 100%;
top: 0;
left: 0;
padding: 6px 0px;
z-index: 1;
}
.meny{
float: right;
word-spacing: 26px;
padding: 0px 25px 0px 0px;
}
.meny-link{
color: black;
text-decoration: none;
letter-spacing: 3px;
}
.br{
padding: 0px 0px 0px 10px;
font-weight: bold;
}
#home{
position: relative;
top: 23px;
z-index: 0;
}
.image img{
width: 100%;
height: 675px;
}
You can simply add background: white; to .header-top if you don't want it being transparent.
Here's an example:
.header-top{
box-shadow: 0px 5px 8px -2px rgba(0,0,0,0.75);
position: fixed;
width: 100%;
top: 0;
left: 0;
padding: 6px 0px;
z-index: 1;
background: white;
}
.meny{
float: right;
word-spacing: 26px;
padding: 0px 25px 0px 0px;
}
.meny-link{
color: black;
text-decoration: none;
letter-spacing: 3px;
}
.br{
padding: 0px 0px 0px 10px;
font-weight: bold;
}
#home{
position: relative;
top: 23px;
z-index: 0;
}
.image img{
width: 100%;
height: 675px;
}
<div class="header-top">
<span class="br">BR</span><span class="arch"> Architects</span>
<div class="meny">
Projects
About
Contact
</div>
</div>
<div id="home">
<div class="image">
<img src="https://www.tommasocimarelli.com/wp-content/uploads/2020/01/skyscraper-manhattan.jpg" alt="">
</div>
</div>
Try to write a big number into property z-index to navbar like 99
Related
I want this button on top of the div box, but I have no idea what css code I should use.
This below is what I want to do, but I have no idea how to do
What I want to do
I tried a lot of different ways including padding and margin, but I can't get it to work.
.wrapper {
background: white;
}
.TEST1{
float:right;
position: relative;
}
<div class="wrapper row"
style="padding: 10px 30px; position: fixed; bottom: 0; border-top: 1px solid #ccc; box-shadow: 0px 2px 10px #888888;">
<button type="button" class="TEST1" id="TEST!">Close</button>
<p class="col-md-10"
astyle="color: #262626; font-size: 12px; line-height: 17px; letter-spacing: .1px; padding: 0 30px 0 0;">TEST TEST TEST
</p>
<button class="col-xs-12 col-md-2 btn-close-cookie-notification"
style="background-color: black; border: none; color: white; padding: 13px; cursor: pointer; max-height: 40px; font-size: 12px; position: relative;">OK</button>
</div>
Please, Check this code
HTML File
<div class="wrapper">
<div
class="row"
style="
padding: 10px 30px;
position: fixed;
bottom: 0;
border-top: 1px solid #ccc;
box-shadow: 0px 2px 10px #888888;
"
>
<button type="button" class="TEST1" id="TEST!">Close</button>
<p
class="col-md-10"
astyle="color: #262626; font-size: 12px; line-height: 17px; letter-spacing: .1px; padding: 0 30px 0 0;"
>
TEST TEST TEST
</p>
<button
class="col-xs-12 col-md-2 btn-close-cookie-notification"
style="
background-color: black;
border: none;
color: white;
padding: 13px;
cursor: pointer;
max-height: 40px;
font-size: 12px;
position: relative;
"
>
OK
</button>
</div>
</div>
CSS File
.wrapper {
background: white;
position: relative;
}
.TEST1 {
position: absolute;
top: -10px;
right: -10px;
z-index: 999;
}
Demo link: https://stackblitz.com/edit/web-platform-nd9jej?file=styles.css
Note: Please add top and right css according your usability.
.TEST1 {
position: absolute;
top: -22px;
right: 0;
}
THIS IS A RESPONSIVE DESIGN, MAKE SURE TO TURN ON TOGGLE DEVICE TOOLBAR ON YOUR BROWSER
I am trying to make a progress bar. First I want to increase the height of the transparent black background. I can't find a way to do that. I am confused. And secondly, I want to add spacing and align the 2nd and 3rd text properly.
/* progress bar */
.center {
height: 300px;
width: 100%;
position: absolute;
left: 50%;
margin-top: 140px;
transform: translate(-50%, -50%);
padding: 20px;
background-color: rgba(0, 0, 0, 0.678);
box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
border-radius: 10px;
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 20px 0;
}
/* skillbar languages */
.skillbar-html p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-html p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skillbar-css p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-css p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skill_percentage{
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}
<section>
<div class="center">
<h1 id="progress">Progress</h1>
<div class="skillbar-html">
<p>HTML</p>
<p>90%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;"></div>
</div>
<div class="skillbar-css">
<p>CSS</p>
<p>70%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;"></div>
</div>
<div class="skillbar-javascript">
<p>JavaScript</p>
<p>50%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</section>
</section>
You can take advantage of the <br> element in your HTML.
Line break and tab elements can be used when you need a little more control over how the browser renders the text. The <BR> element is used to force a line break.
-W3.org
/* progress bar */
.center {
height: 300px;
width: 100%;
position: absolute;
left: 50%;
margin-top: 140px;
transform: translate(-50%, -50%);
padding: 20px;
background-color: rgba(0, 0, 0, 0.678);
box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
border-radius: 10px;
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 20px 0;
}
/* skillbar languages */
.skillbar-html p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-html p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skillbar-css p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-css p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skill_percentage{
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}
<section>
<div class="center">
<h1 id="progress">Progress</h1>
<br>
<div class="skillbar-html">
<p>HTML</p>
<p>90%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;"></div>
</div>
<br>
<div class="skillbar-css">
<p>CSS</p>
<p>70%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;"></div>
</div>
<br>
<div class="skillbar-javascript">
<p>JavaScript</p>
<p>50%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;"></div>
</div>
</div>
</div>
</div>
</div>
</section>
The Height: - I noticed a fixed height of 300px, and that you were centering the parent div by using margins and translations in your CSS. I went ahead and removed those margins and translations, also removed your absolute positioning. You can adjust your fixed height of 300px to expand the grey background. For this example, I made it 100 view height.
/* progress bar */
.center {
height: 100vh;
width: 100%;
padding: 20px;
position: relative;
background-color: rgba(0, 0, 0, 0.678);
box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
border-radius: 10px;
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 20px 0;
}
/* skillbar languages */
.skillbar-html p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-html p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skillbar-css p{
color: #fff;
text-transform: uppercase;
margin: 0 0 10px;
padding: 0;
font-weight: bold;
letter-spacing: 3px;
}
.skillbar-css p:nth-child(2){
float: right;
position: relative;
top: -30px;
}
.skill_percentage{
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}
<section>
<div class="center">
<h1 id="progress">Progress</h1>
<br>
<div class="skillbar-html">
<p>HTML</p>
<p>90%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;"></div>
</div>
<br>
<div class="skillbar-css">
<p>CSS</p>
<p>70%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;"></div>
</div>
<br>
<div class="skillbar-javascript">
<p>JavaScript</p>
<p>50%</p>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;"></div>
</div>
</div>
</div>
</div>
</div>
</section>
If I understood properly, what you want to increase the height is for that black bar containing your actual progress bar, right? If that's the case, I think this should work:
.skill-percentage {
height: x (here you place how much height you want);
}
That should give you the height that you want.
And, in order to add the spacing, you can take advantage of CSS padding or margin, depending on what you exactly need.
I'll give you a small snippet here so you can see exactly what I mean. Note that I modified a bit your HTML to fit what you wanted to do, but this may not be necessary on your original file.
/* progress bar */
* {
margin: 0;
padding: 0;
}
.center {
height: 500px;
width: 100%;
background-color: rgba(0, 0, 0, 0.678);
color: white;
}
.center #progress{
margin: 0px;
padding: 0;
color: #fff;
text-transform: uppercase;
letter-spacing: 8px;
border-radius: 20px;
height: auto;
background-color: rgba(0, 0, 0, 0);
}
.skillbar{
box-sizing: border-box;
width: 100%;
margin: 0;
}
/* skillbar languages */
.text-container {
display: flex;
width: 100%;
justify-content: space-between;
}
.text-container p {
padding: 0 40px; /* this is the one that changes the position of your text. Be carefull, you don't want this to change the position too much, just a bit, if you need to change the full position, better try something like grid, or modifying the flex */
}
.skillbar-html {
display: flex;
flex-direction: column;
justify-content: center;
}
.skillbar-html p {
margin: 10px;
}
.skillbar-html > div {
margin: 10px;
}
.skillbar-css {
display: flex;
flex-direction: column;
justify-content: center;
}
.skillbar-css p {
margin: 10px;
}
.skillbar-css > div {
margin: 10px;
}
.skillbar-javascript {
display: flex;
flex-direction: column;
justify-content: center;
}
.skillbar-javascript p {
margin: 10px;
}
.skillbar-javascript > div {
margin: 10px;
}
.skill_percentage{
height: 20px; /* this is the one that changes your height, now it's changing nothing, but you can modify the height by changing this value */
background-color: #262626;
padding: 4px;
box-sizing: border-box;
border: 1px solid #0fffb7;
border-radius: 6px;
}
.skill_level{
background-color: #0fffb7;
width: 100%;
height: 10px;
border-radius: 6px;
}
<section>
<div class="center">
<h1 id="progress">Progress</h1>
<div class="skillbar-html">
<div class="text-container">
<p>HTML</p>
<p>90%</p>
</div>
<div class="skill_percentage">
<div class="skill_level" style="width: 90%;">
</div>
</div>
</div>
<div class="skillbar-css">
<div class="text-container">
<p>CSS</p>
<p>70%</p>
</div>
<div class="skill_percentage">
<div class="skill_level" style="width: 80%;">
</div>
</div>
</div>
<div class="skillbar-javascript">
<div class="text-container">
<p>JavaScript</p>
<p>50%</p>
</div>
<div class="skill_percentage">
<div class="skill_level" style="width: 50%;">
</div>
</div>
</div>
</div>
</section>
<ul class="child ">
<div style="text-align:right;"> <li class="nameBar">{{patientInfo.data.fname}} {{patientInfo.data.lname}}</li></div>
<li class="age">{{patientInfo.data.age}}|{{ patientInfo.data.gender}}</li>
<img class="breadcrumb-image" src="assets/images/user/user6.jpg" alt="...">
<li class='uhid'>UHID: {{patientInfo.data.uhid}}</li>
<li class="address">{{patientInfo.data.city}}</li>
</ul>
CSS:
.nameBar{
color:#00bcd4;
font-weight:bold;
margin: -7px 0px 0px -100px;
position: absolute;
font-size: 12px;
text-transform: capitalize;
}
.uhid{
margin:-39px 0px 0px 58px;
color:#00bcd4;
font-weight:bold;
font-size: 12px;
}
.age{
margin: 15px 0px 0px -35px;
font-size: 10px;
position: absolute;
}
.address{
margin: 4px 0px 0px 59px;
font-size: 10px;
}
.child {
position: fixed;
top: 72px;
left: 50px;
padding: 1em;
margin: 0px 0px 0px 571px;
}
.li{
border-width: 1px;
text-align:center;
float:left;
}
Always I need to start the name from right side of the image I tried with margin-right:calc(50% -(somePx)) not able to fix that name lable near the image as right side Uhid and place can any help me out in this thanks
it's not a good idea to use too much margins and absolute positioning.
take a look at this and change it to your needs.
.child {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 1em;
display: flex;
justify-content: center;
}
.child>img {
width: 40px;
height: 40px;
margin: 0 5px;
}
.nameBar {
text-transform: capitalize;
}
.bold {
color: #00bcd4;
font-weight: bold;
font-size: 12px;
}
.small {
font-size: 10px;
}
.left,
.right {
line-height: 20px;
padding-top: 5px;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
<div class="child">
<div class="right">
<div class="nameBar bold">John Doe</div>
<div class="age small">26 Male</div>
</div>
<img src="https://picsum.photos/40" alt="...">
<div class="left">
<div class='uhid bold'>UHID: 1234</div>
<div class="address small">Paris</div>
</div>
</div>
I'm trying to make the child divs (option-info) stay just below the parent div but also give them 100% width.
Now the children are centered and have 100% but aren't positioned relative to the parent div. Is there a way to give the child div absolute width but relative positioning vertically in CSS and HTML? Thanks in advance!
Here's the HTML:
<div id="container">
<div class="option-container">
<div class="header">hardware</div>
<div class="option-info">test</div>
</div>
<div class="option-container">
<div class="header">design</div>
<div class="option-info">test</div>
</div>
<div class="option-container">
<div class="header">software</div>
<div class="option-info">test</div>
</div>
<div class="option-container">
<div class="header">gaming</div>
<div class="option-info">test</div>
</div>
</div>
Here's the CSS:
.header {
display: inline-block;
position: relative;
background-color: rgb(81, 154, 226);
font-size: 2.3em;
height: 100px;
color: white;
font-family: 'saira', arial;
text-shadow: 2px 2px #2280dd;
width: 250px;
text-align: center;
text-transform: uppercase;
margin: auto;
top: 70px;
-webkit-box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75);
box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75);
z-index: 1;
line-height: 100px;
}
#container {
text-align: center;
width: 100%;
}
.option-container {
display: inline-block;
width: 250px;
margin: 22px 22px 100px 22px;
}
.option-info {
display: inline-block;
position: absolute;
width: 100%;
font-family: 'roboto', arial;
font-size: 1.3em;
text-align: center;
right: 0;
left: 0;
}
Would something like this work for you? I took the option-info element out of the HTML and used the :after pseudo to insert the text in the desired (if I understood correctly) location.
.header {
display: inline-block;
position: relative;
background-color: rgb(81, 154, 226);
font-size: 2.3em;
height: 100px;
color: white;
font-family: 'saira', arial;
text-shadow: 2px 2px #2280dd;
width: 250px;
text-align: center;
text-transform: uppercase;
margin: auto;
top: 70px;
-webkit-box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75);
box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75);
z-index: 1;
line-height: 100px;
}
#container {
text-align: center;
width: 100%;
}
.option-container {
display: inline-block;
width: 250px;
margin: 22px 22px 100px 22px;
position: relative;
}
.option-container:after {
width: 100%;
position: absolute;
padding: 10px 0;
content: 'test';
bottom: -120px;
left: 0;
z-index: 9999;
font-family: 'roboto', arial;
font-size: 1.3em;
text-align: center;
}
<div id="container">
<div class="option-container">
<div class="header">hardware</div>
</div>
<div class="option-container">
<div class="header">design</div>
</div>
<div class="option-container">
<div class="header">software</div>
</div>
<div class="option-container">
<div class="header">gaming</div>
</div>
</div>
So I tried restructuring the HTML and this is what I came up with, and this is exactly what I was looking for!
<div class="option-container">
<div class="header">hardware</div>
<div class="info-container">
<div class="option-info">test</div>
</div>
</div>
<div class="option-container">
<div class="header">design</div>
<div class="info-container">
<div class="option-info">test</div>
</div>
</div>
<div class="option-container">
<div class="header">software</div>
<div class="info-container">
<div class="option-info">test</div>
</div>
</div>
<div class="option-container">
<div class="header">gaming</div>
<div class="info-container">
<div class="option-info">test</div>
</div>
</div>
And I just changed two things with the CSS:
.info-container {
position: absolute;
width: 100%;
right: 0;
left: 0;
height: 100%;
}
.option-info {
display: inline-block;
position: relative;
width: 100%;
font-family: 'roboto', arial;
font-size: 1.3em;
text-align: center;
color: black;
color: rgba(0, 0, 0, 0.9);
margin: auto;
top: 100px;
}
EDIT: I appreciate the answers, but it seems I fixed my own problem.
So here is my HTML code in question.
<script type="text/css">
.slider-holder {
background-color:transparent;
}
.slider-bg {
min-height: 295px;
position: relative;
z-index: 1;
border-bottom:0px;
}
.slider {
height: 295px;
padding: 1px 17px 0;
margin: 0 auto;
position: relative;
background: transparent;
}
.slider .items,
.slider .items2 {
position: relative;
height: 293px;
float: left;
}
.slider .items div.item,
.slider .items2 div.item{
height: 293px;
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.slider .slider-text {
width: 720px;
position: relative;
z-index: 2;
padding: 70px 0 0;
}
.slider .slider-text, .slider .slider-text p {
background-color: inherit;
color: #fff;
font-size: 32px;
line-height: 33px;
}
.slider .slider-text.smaller p
{
font-size:24px;
}
.slider .slider-text p { padding: 0 0 10px; }
.slider .slider-text a.slider-btn {
background: #58940a url('img/btn/slider-btn.png') no-repeat 8px 7px;
display: block;
float: left;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0px 0px 40px #666;
-moz-box-shadow: 0px 0px 40px #666;
box-shadow: 0px 0px 40px #666;
padding: 6px 10px 6px 32px;
color: #fff;
font-size: 15px;
line-height: 20px;
height: 20px;
}
.slider .slider-img {
position: absolute;
bottom: 0px;
padding: 0 5px 0 0;
z-index: 1;
left:-312px;
zoom: 1;
}
.slider .slidetabs {
position: absolute;
left:375px;
bottom: 27px;
z-index: 3;
}
.slider .slidetabs a {
background: url('img/elem/thumbnail-disc.png') no-repeat left top;
display: block;
width: 11px;
height: 11px;
float: left;
margin: 0 6px 0 0;
}
.slider .slidetabs a:hover, .slider .slidetabs a.current { background-position: left bottom; }
</script>
<div class="slider-holder">
<div class="slider-bg">
<!--begin:slider-->
<div class="slider">
<div class="items">
<!--begin:item-->
<div class="item" style="display: none; ">
<div class="slider-text"></div>
<div class="slider-img">
<img src="image.jpg" alt="" width="1600" height="294" align="center">
</div>
</div>
<!--end:item-->
<!--begin:item-->
<div class="item" style="display: none; ">
<div class="slider-text smaller"></div>
<div class="slider-img">
<img src="image2.jpg" alt="" width="1600" height="294" align="center">
</div>
</div>
<!--end:item-->
<!--begin:item-->
<div class="item" style="display: block; ">
<div class="slider-text"></div>
<div class="slider-img">
<a href="http://www.link.com" target="_blank">
<img src="image.jpeg" alt="" width="1600" height="294" align="center">
</a>
</div>
</div>
<!--end:item-->
</div>
<div class="slidetabs">
</div>
</div>
<!--end:slider-->
</div>
</div>
The problem with this particular setup is that the img is bigger than the div (which is intentional. And this setup works in most browswers except IE8. It gets cut off at the .slider-holder box (or at least it appears to).
Found out that a caching plugin was breaking the site. carry on.