I am developing a site and almost the only thing that's left is a slide number indicator. The problem can be viewed in this link:
URL:
http://parimpex.sem.lv/logistics-insurance/
VirusTotal:
https://www.virustotal.com/#/url/f270075d5d8e26607cd6f06b49459e0c99a6a6c09369ffa2f77d8e23ee5d178f/detection
The current slide indicator looks like this:
https://i.imgur.com/HkCUXta.png
The end result is supposed to look like this: https://i.imgur.com/CfdZtOS.png
I have tried using multiple circular box-borders, but that didn't do it.
The white part of the indicator is done, but there has to be a transparent space, and then an orange border.
Please guide!
Your solutions is here:
<div class="circle"></div>
and CSS:
.circle {
display: inline-block;
border-radius: 10px;
width: 10px;
height: 10px;
border: 5px solid #000;
background-color: #fff;
box-shadow: 0px 0px 1px 2px #fff;
}
https://jsfiddle.net/9dbza1px/1/
Add this to your css
.global_slider .flickity-page-dots .dot {
position: relative;
}
.global_slider .flickity-page-dots .dot.is-selected:before {
content: '';
width: 25px;
height: 25px;
position: absolute;
left: -5px;
top: -5px;
border-radius: 50%;
border: 1px solid yellow;
}
Related
As you can see on this link there is en block with a little point on the left side
I was wondering if there is not just a class to make a block with a little point on the left. Without using css? just like class="img-circle" for example where it makes it round.
this pointer
HTML
<div class="triangle">here we talk!!</div>
CSS:
.triangle{
position: relative;
width: 100px;
height: 100px;
color: white;
background-color: rgba(0,0,0,.8);
}
.triangle:after{
position: absolute;
left:-10px;
top: 18px;
content: '';
width: 0;
height: 0;
border-right: solid 10px rgba(0,0,0,.8);
border-bottom: solid 10px transparent;
border-top: solid 10px transparent;
}
Explain:
in the div you create the square in css I define it...
in :after I defined the triangle
If you want to change the background color you have to change both of them
Hello I was recently browsing around some demo for websites for client. And saw a really cool thing I liked. So I try to inspect in the browser to see if I replicate the effect on my own. And I have no idea how they did it.
here is the link to the demo
http://www.templatemonster.com/demo/45057.html
And here is a n image to show what I'm talking about.
They have these squares with an overflow at the bottom looking like multiple elements.
I was able to grab the HTML/CSS and replicate the just one box without the overflow. But I can't figure out how to make it look like stacked boxes, nor can I find where the code is.
I tried to replicate using JSFidle as you can see here
HTML
<div class="span2"><div class="service-box boxed green"><figure class="icon"><i class="icon-file-alt"></i></figure><div class="service-box_body"><h2 class="title">Accounting valuations</h2></div></div> </div>
.service-box.boxed {
border-radius: 0px;
box-shadow: none;
padding: 25px 15px;
margin-bottom: 30px;
text-align: center;
position: relative;
background: none repeat scroll 0% 0% #F1F6F9;
overflow: visible;
border: 1px solid #C5D0D2;
}
http://jsfiddle.net/w1defmkz/
You're pretty close but missing the :before and :after pseudo elements:
.service-box.boxed:before, .service-box.boxed:after {
content: "";
display: block;
position: absolute;
left: 1px;
right: 1px;
bottom: -4px;
height: 2px;
background: #f1f6f9;
border: 1px solid #c5d0d2;
border-top: none;
}
.service-box.boxed:before, .service-box.boxed:after {
content: "";
display: block;
position: absolute;
left: 1px;
right: 1px;
bottom: -4px;
height: 2px;
background: #f1f6f9;
border: 1px solid #c5d0d2;
border-top: none;
}
.service-box.boxed:after {
left: 3px;
right: 3px;
bottom: -7px;
}
Here's an updated fiddle: http://jsfiddle.net/w1defmkz/1/
Well, The user has added two more divisions, made them absolute.
You see, the whole span (class = "span2") is positioned relative.
This is the css for the one of them...
content: "";
display: block;
position: absolute;
left: 1px;
right: 1px;
bottom: -4px;
height: 2px;
background: #f1f6f9;
border: 1px solid #c5d0d2;
border-top: none;
Js Fiddle: http://jsfiddle.net/3my6rhgL/
I'm trying to position a 10px height orange bar on the top of my HTML banner. When I put in the code the orange bar is displayed, but it's displayed on the top of the window. How do I move it so it's displayed on the top of the HTML banner? I'd like it in the "Top 10 Wi-Fi Routers" banner
see my jsfiddle: http://jsfiddle.net/huskydawgs/tKn9f/77/
<div id="wrapper-landing">
<p>
A Wi-Fi router is at the center of most people's home networks, but not every router is a good one. It's been a while since we last looked at the best Wi-Fi routers on the market, this week we want to take a fresh look and build a better top five list.</p>
<div class="box-promo-row">
<div class="box-promo-orange"></div>
<h3>
Top 10 Wi-Fi Routers</h3>
<span class="box-promo-content">
The last time we talked about Wi-Fi routers, 802.11ac wasn't really a thing yet, and now that it is and routers that support it have come down in price, it's time to take a fresh look. This week we want to know which routers you think offer the best combination of speed, range, features, customization options, and as always, bang for the buck.</span>
</div>
</div>
</div>
#wrapper-landing {
width: 916px;
margin: 0 auto 50px auto;
padding: 0;
}
#wrapper-landing p {
color: rgb(102, 102, 102);
font-family: 'SegoeRegular',Helvetica,Arial,sans-serif;
font-size: 1.1em;
line-height: 1.6em;
}
.box-promo-row {
width:893px;
margin: 0;
padding: 30px;
border-left: 1px solid #e2e3e4;
border-right: 1px solid #e2e3e4;
border-bottom: 1px solid #e2e3e4;
margin-top: 0;
margin-bottom: 0;
background-color: #e2e3e4;
box-shadow: 1px 2px 0px rgba (0,0,0,0.15);
}
.box-promo-row h3 {
font-family:SegoeBold, Helvetica, Arial;
font-size:1.3em;
color:#2251a4;
margin: 0 0 2px 0;
}
.box-promo-content {
color: #616161;
font-family: 'SegoeRegular',Helvetica,Arial,sans-serif;
font-size: 1em;
line-height: 1em;
}
.box-form-body {
display: inline-block;
width: 100%;
}
.box-promo-orange {
position: absolute;
content: "";
width: 100%;
height: 10px;
background: #f66511;
left: -1px;
top: 0;
z-index: 20px;
border: 1px solid #f66511;
}
You'd have to use relative positioning on .box-promo-row
or
you don't use a separate element at all and use an orange border?
.box-promo-now{
border-top: 10px solid orange;
}
please update this code with your CSS and the orange line will come just above the header..
.box-promo-row {
position:relative; /*Added this line*/
width:893px;
margin: 0;
padding: 30px;
border-left: 1px solid #e2e3e4;
border-right: 1px solid #e2e3e4;
border-bottom: 1px solid #e2e3e4;
margin-top: 0;
margin-bottom: 0;
background-color: #e2e3e4;
box-shadow: 1px 2px 0px rgba (0,0,0,0.15);
}
.box-promo-row:before {
position: absolute;
content: " ";
width: 100%;
height: 10px;
background: #f66511;
left: -1px;
top: 0;
z-index: 20px;
border: 1px solid #f66511;
}
Here is the Working Demo. http://jsfiddle.net/kheema/tKn9f/87/
Your .box-promo-orange CSS should set position: relative instead of absolute. Absolute means it positions it relative to the whole page. Relative positions it relative to the parent container (in this case box-promo-row).
Use
.box-promo-row {
position: relative;
}
i have three <div>s and want to move the second one up.
Currently i'm doing this with position: relative; top: -20px; - That works pretty well.
Only downside is: There's a gap (of 20px) between the second <div> and the third <div> (which is under the second div).
So, i want to keep the border around all three divs, so that top: -20px is not an alternative for the third row.
I have this illustrated here: http://jsfiddle.net/w2PGF/1/
My Markup:
<div id="border">
<div class="firstRow">foo</div>
<div class="secondRow">bar</div>
<div class="thirdRow">foobar</div>
</div>
My CSS:
#border {
border: 5px solid #000;
}
.firstRow {
background-color: cyan;
border: 3px solid red;
height: 50px;
}
.secondRow {
position: relative;
top: -20px;
border: 3px solid yellow;
background-color: grey;
height: 50px;
}
.thirdRow {
background-color: blue;
border: 3px solid blue;
height: 50px;
}
Thanks in advance.
.secondRow { margin-bottom: -20px }
Remove the position: relative and instead of top: -20px you should add margin-top: -20px
Like so: fiddle
You need to remove the top: -20px and add margin-top: -20px to .secondRow
So .secondRow would look like this:
.
secondRow {
margin-top: -20px;
border: 3px solid yellow;
background-color: grey;
height: 50px;
}
Check this JSFiddle: http://jsfiddle.net/w2PGF/6/
Imagine (or if you can't imagine, watch) this piece of code:
<div class="block"></div>
<style>
.block {
width: 10px;
height: 10px;
display: block;
background-color: red;
border: 1px solid #000000;
border-bottom: 0;
}
</style>
Now look at the bottom line. This is my problem; I want the left and right border to be 1px longer (so the bottom border is the part between the left border and right border).
Is it possible to accomplish this??
This is a way to do it, since the box model does not support what you need, using only one div:
<div class="block"><div></div></div>
and the css:
.block {
width: 10px;
height: 10px;
border: 1px solid #000000;
border-bottom: 0;
padding-bottom: 1px;
}
.block div {
width: 10px;
height: 10px;
background-color: red;
}
This will extend the black border on the left and right side with 1px.
Try this :)
http://jsfiddle.net/z6ASC/
This is possible if you have two containers, one for the outside left/right borders, and one for the inside bottom-border. I've put together a demo showing this.
DEMO:
http://wecodesign.com/demos/stackoverflow-7074782.htm
<style type="text/css">
#borderOutside {
height: 200px;
width: 300px;
border:1px solid #900;
border-bottom: none;
padding-bottom: 5px; /*this is the gap at the bottom*/
}
#borderInside {
height: 100%;
border-bottom: 1px solid #900;
}
</style>
<div id="borderOutside">
<div id="borderInside"><!--Your Content--></div>
</div>
It can be done without adding any extraneous elements in your HTML via this strategy:
.block {
position: relative;
width: 10px;
height: 10px;
display: block;
background-color: red;
}
.block:before {
position: absolute;
content: '';
width: 10px;
height: 11px;
top: -1px;
left: -1px;
border: 1px solid #000;
border-bottom: none;
}
The pseudo element :before is only supported from IE8, but works in all other major browsers.