Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I want to add 3 green circles with the :before pseudo-element in order to show the in-stock-status of my products similar to below:
http://www.chililips.com/LACOSTE-Lounge-Pant-Schlafhose-lang-gruen
I only know how to apply ONE circle, but how can I add three or more? I also thought of using HTML characters, but there are no green circles...
Box shadows...no pseudo-elements required. Unless you want to.
.blob {
width: 50px;
height: 50px;
background: lime;
border-radius: 50%;
margin: 3em 15em;
box-shadow: 5em 0em 0 lime, 10em 0em 0 lime;
}
<div class="blob"></div>
If you are using font icons you can simply add like single one instead of three same content
.fa-circle:before {
content: "\f111" "\f111" "\f111";
}
This is an example of fontawosome icon,you can manage space between icons by letter-spacing
OR
If you are using image for icon, then just take image with three icons or use multiple background images like background: background1, background 2, ..., backgroundN;
Read more about multiple background images
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 last year.
Improve this question
I am wondering how to do this in css :
enter image description here
Basically, I can do everything out of it. But I dont manage to recreate the halo surroundering the borders. Could you please advise ? :)
EDIT :
I am quite stuck at making the border with the fading
This effect can be achieved with box-shadows like so:
.box {
margin: 20px;
padding: 20px;
background: lightgreen;
width: 200px;
}
.halo {
-webkit-box-shadow: 0px 0px 7px 11px rgba(255,165,28,0.59);
box-shadow: 0px 0px 7px 11px rgba(255,165,28,0.59);
}
<div class="box halo">Hello There, I am a box, play with my colours to get different results, use the last two pixel values to play with the size and blur.</div>
In order to learn more about box shadows in CSS, you can find its documentation here: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Okay, so this is a first - my CSS is working in all tested browsers...except Chrome.
I am attempting to render a simple circle in a div.
Example is: http://redappledev2.wpengine.com/ The login icon in the upper right hand corner of the header (circle with the user image).
In Firefox, IE, Safari the circle renders as a typical circle.
The current css is: border-radius: 25px; but the expected result also occurs when the css is border-radius: 50%;
From what I can peg down - it looks like in Chrome the problem is that the parent container - an A tag - the height is to short which is based on it's font size - currently 20px. The font size cannot be increased, but in testing when I increase the size - the a tag's height increases and the circle border is rendered as a true circle and not an eclipse.
Am I missing something? Is there a better way of rendering the circle border around the user icon?
Thank you!
It looks like if you change div.icon-circle from display:inline to display:inline-block things start to appear as you intend in Chrome.
I just used the DOM inspector to tweak some of your styles and got to a circle with the following style rule:
.icon-circle{
border:1px solid #627F9A;
border-radius: 25px;
display: inline-block;
padding: 0px 5px 2px 4px;
position: relative;
top: 2px;
}
Good luck with your site
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 7 years ago.
Improve this question
Please how to do this chart in HTML and CSS ??
Where the circles are buttons ..
Use the following:
Your basic circle:
.circle {
width: 100px;
height: 100px;
border-radius: 50px; /*Make it a circle (border-radius = 1/2*width & height)*/
background-color: hotPink;
border: none;
}
<button class="circle">Motion Detection</button>
<!-- Using a button to generate the circle -->
Then use position: absolute; with the left and right properties to position the circles.
Have a `Live positioned in the middle of your page with:
<style>
#text {
font-family: MyFont, sans-serif;
color: white;
}
<style>
For the lines I would use divs, and give them a height of 2px and a width of what ever (350px for example.) For the positioning, again use the position property (learn how to use it here: w3schools.com/css/css_positioning.asp) – joe_young just now edit
Use the above to help you create what you want, but as has already been said,
This is not a code generating service, try yourself and ask questions about the code you're having trouble with.
In other words, have a go, come back to us when you have tried and have a specific problem.
Good luck
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
My background Image navbar isn't showing properly. If you notice, the gradient for the navbar doesn't display properly. The top half should be a light gray and the bottom half should be a darker gray. When the page firsts loads you can see it appear but then it all goes gray and loses the gradient look.
My site is usahvacsupply.com and I just edited my background-image to be bigger to fit for a 1600 width resolution. Here is a picture of my background image http://tinypic.com/view.php?pic=20ge8nl&s=5. Any help would be much appreciated.
Here is my css code for the background.
html, body{
margin: auto;
background-image:url('/images/Testing1/bg2.jpg');
background-repeat: no-repeat;
background-position:top center;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
min-width:1600px;
min-height:1400px;
top: 0;
left: 0;
}
Removing the float:left on div with ID lol seems to fix it.
Your table element #body has a background which is obscuring the gradient. Remove it and the gradient in your background appears.
Original
#body {
background-color: #F5F5F5;
overflow-y: scroll;
}
Modified
#body {
overflow-y: scroll;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm getting a big whitespace on top of my page only in firefox. I tried to inspect all elements and can't find anything wrong with it. I also checked for uncollapsing margin but can't find any.
I'm using HTML5, modernzr and jquery.
Website URL : http://devvanickcom.vanickurl.com/
This appears to be a Firefox bug (#451791). The margin collapse is done wrong. It collapses through hr.clear, as it has no height/padding/border, resulting in 90px of margin above hr.clear, but it also applies the correct margin of 90px below the floating element.
Any fix that would ordinarily prevent margin collapse will stop this behavior. For example, setting hr.clear { height: 1px } pushes everything back up, but it also shifts things down a pixel, which is undesirable. An interesting fix is to set header { padding-top: .001em }. This won't add enough padding to actually shift things visually, but it counts enough to prevent the margin from collapsing beyond the boundaries of header.
Alternatively, you could just rewrite your code to avoid this structure.
Just change the position property in the #logo class of your css, set it to:
position: relative, the class would look like:
#logo {
background: url("/Content/images/sprite.png") repeat-x scroll left top transparent;
display: block;
height: 85px;
position: relative;
text-indent: -9999px;
top: -20px;
width: 180px;
}
after that you need to change the header nav class, (margin was 90px on top)
header nav {
margin: 40px 0 5px;
padding: 0;
text-align: center;
}
Then just need to adapt it exactly the way you need it, it will look like this on firefox:
It's very bizarre. I guess the easiest and best way would be, like animuson said, to remove <hr class="clear"> under <div id="contact-toggler-wrapper"> . It did the trick without affecting the layout.