Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm going to make a progress bar.
When it's 0%, you can't see anything. From 1%, I would like to put a flag on the progress bar and let you know how far it has progressed. At 100 percent, this flag disappears. This flag is in image form and I don't know how to code it. Progress is received in JavaScript. Should I write position:relative, position:absolute in the div container?
.progressbar {
width: 100%;
border: 1px solid black;
border-radius: 5px;
height: 24px;
}
.icon {
width: 24px;
height: 24px;
position: absolute;
right: -12px;
opacity: .5;
}
.progress {
width: 50%;
background-color: green;
position: relative;
height: 24px;
}
<div class="progressbar">
<div class="progress">
<img class="icon" src="https://loremicon.com/ngon/128/128/811932708408/jpg">
</div>
</div>
Here's the gist. Style as you please.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
How can I make a so-called mask out of a div. Hello I am looking for a solution to my problem and would be very grateful if someone could help me. I want you to see a background only through a div. If someone could help me I would be very grateful. Thanks a lot. Alex.
I think you are looking for something like this. Set the background div with an image then make the background color of the divs on top of it white, with only 1 of the divs not having a background set, allowing you to look through it.
Here is an example in JSfiddle https://jsfiddle.net/9yL1p2oq/
HTML
<body>
<div class="background">
<div class="toparea"></div>
<div class="left"></div>
<div class="window"></div>
<div class="right"></div>
<div class="bottomarea"></div>
</div>
</body>
CSS
body {
margin: 0;
}
.background {
background-image: url('https://i.pinimg.com/originals/99/bb/69/99bb69e4680b0bc9c4c806f5f0f87ad5.png');
background-attachment: fixed;
float: left;
width: 100%;
height: 800px;
}
.toparea, .left, .right, .bottomarea {
background: #fff;
}
.toparea, .bottomarea {
float: left;
width: 100%;
height: 350px;
}
.left, .window, .right {
float: left;
width: 33.333%;
height: 350px;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have one search field. When click on on that field (focused), it should provide solid blue colored outline and while forming this outline, it should transition from right to left as provided in the image.
I've made a solution that uses a little more HTML...
.text-input {
margin: 3px;
width: 200px;
}
.parent-border{
background-color: blue;
width: 215px;
border-radius: 6px;
}
.border {
background-color: white;
width: 100%;
transition: 0.5s;
border-radius: 5px;
}
.border:focus-within{
width: 0%;
}
*:focus {
outline: none;
}
<div class="parent-border">
<div class="border">
<input class="text-input"></input>
</div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am creating a website and have designed the header
The Red and Blue is an image
The Yellow is a navigation bar
The circle is a logo
My issue is that I am unable to put the logo in div of the image and the nav div at the same time. Is this even possible or should I consider a new design. Perhaps I am looking at this incorrectly.
Your question is about having the same image on both the nav and that div.
Pen here!
You can do it easily with background-image and set the same image aswell.
background-image: url(http://s.glbimg.com/jo/g1/f/original/2016/05/02/palestinian-gaza-daily_life_mohammed_abed_afp.jpg);
background-size: cover;
backgroud-position: center center;
This can be achieved using pure CSS. This is a possible approach to get what you want:
#one {
height: 100px;
background-color: blue;
}
#two {
position: relative;
width: 50px;
height: 50px;
background-color: red;
border-radius: 100px;
transform: translateY(40px);
margin: 0 auto;
z-index: 1;
}
#three {
position: relative;
height: 30px;
background-color: yellow;
bottom: -20px;
}
<div id="one">
<div id="two">
</div>
<div id="three">
</div>
</div>
Replace divs with any block element and it should work too. Otherwise, you'll need to set display: block.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I want add a new label for <img> html element like this:
Is there some JS plugin to do this o something similar in CSS ?
You can do something like this using css
#par {
position: relative;
}
#par img {
width: 200px;
height: 200px;
}
#tri {
left: 0;
top: 0;
position: absolute;
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
#tri:before {
content: 'New';
position: absolute;
left: 23px;
top: -68px;
transform: rotate(-45deg);
}
<div id="par">
<img src="https://pixabay.com/static/uploads/photo/2016/01/23/16/02/experimental-1157660_960_720.png" />
<div id="tri"></div>
</div>
For more css shapes take a look at here
I've not found plugins to do that, but you can do it from scratch, take a look at this tutorial http://www.inserthtml.com/2012/03/creating-css-image-ribbons/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have problem with position of element in Chrome.
Site: http://isedo.pl/projekty/gladness/
Navigation to slider with team running down. But when click on link in header and other link on site presses the element at a good place.
In Firefox is OK.
#edit
slider + navigate code: http://pastebin.com/ckPUeBaG
css:
#teamSlider{
margin: 20px 0 0 0;
float: left;
}
#snav{
float: right;
width: 35px;
height: 250px;
background: #818181;
margin: 20px 0 0 0;
}
#snavl{
background: url('../images/cnav_left.png') no-repeat top left;
height: 48px;
width: 35px;
cursor: pointer;
}
#snavr{
background: url('../images/cnav_right.png') no-repeat top left;
height: 48px;
width: 35px;
cursor: pointer;
}
.teamSlider is too big. It has a width of 3800px. This doesn't leave any room for .snav. I would make a container and then set the position of .snav absolutely.