Want to make hr like this img1
and
img2
don't known how to achieve this.
I'm pretty sure that using an <hr> is not the recommended way to do that. You could just try:
<div><img src='http://i.stack.imgur.com/Llk2U.png'><div>
Or use a css class to make it a bit more elegant:
.whybuyfromus
{
background: url('http://i.stack.imgur.com/Llk2U.png') no-repeat;
height: 101px;
background-size: contain;
}
<div class="whybuyfromus" />
I know that this already has an accepted answer but I wanted to see if it was possible to make a fully responsive version with CSS. I found a solution using flexbox:
.fancy-hr {
display: flex;
background-image:
url(http://i.imgur.com/ZmheWg5.png),
url(http://i.imgur.com/ph3e3OT.png);
background-size: 115px 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
height: 37px;
box-sizing: border-box;
padding: 0 115px;
}
.fancy-hr:before,
.fancy-hr:after {
content: "";
flex: 1;
background: url(http://i.imgur.com/NBus6Hr.png) repeat-x;
}
.fancy-hr span {
display: inline-block;
height: 100%;
line-height: 37px;
}
.fancy-hr span:before,
.fancy-hr span:after {
content: "";
width: 10px;
height: 100%;
display: inline-block;
}
.fancy-hr span:before {
background-image: url(http://i.imgur.com/wMU1oDn.png);
float: left;
}
.fancy-hr span:after {
background-image: url(http://i.imgur.com/4Q2el3J.png);
float: right;
}
<div class="fancy-hr"><span>Text here</span></div>
try this one:
.hr {
background-image: url(http://i.stack.imgur.com/Llk2U.png);
height: 100px;
background-repeat: no-repeat;
background-size: 100%;
}
<div class="hr" />
Related
please how do I set a linear-gradient to a text-decoration-color property in css. I've been trying to implement it but it's not working
[what I actually wanted it to look like](https://i.stack.imgur.com/QDKhi.jpg)
p{
background-image: linear-gradient(90deg,rgb(98,60,49)0,rgb(255,255,255) 100%);
background-repeat: no-repeat;
background-position-y: bottom;
background-size:100% 15%;
width:fit-content;
}
<p>This is text with a gradient decoration</p>
Something like this could work. Backgrounds should be your friend in this situation.
The best way (in my opinion) is a ::before or just a div to do the same effect. Ex:
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
p {
position: relative;
font-size: 40px;
}
p::before {
content: "";
position: absolute;
top: 100%;
width: 100%;
left: 0;
height: 5px;
border-radius: 2px;
background: linear-gradient(111.3deg, #9c27b0 9.6%, #00bcd4 93.6%);
}
<div class="container">
<p>I love CSS</p>
</div>
Reference
I have a css sprite which I need to place as a background image to the right of some text. Like an external link icon. Also i want the text to be full width followed by the image.
My Css Is As Follows:
.container
{
width:1247px;
background-color:#444;
}
.container a
{
background: transparent url(http://i.imgur.com/s5rf9GY.png) no-repeat;
height: 30px;
width: 30px;
display: block;
}
.container .external
{
background-position: -491px 2px;
}
.container .mail
{
background-position: -526px 0px;
}
The fiddle link is below:
http://jsfiddle.net/6dw31962/
Please Help.
Thanks In Advance
Try this.
.container {
width:1247px;
/*height:30px;*/
}
.container a {
display: block;
position: relative;
margin-bottom: 15px;
}
.container a:after {
background: transparent url(http://i.imgur.com/s5rf9GY.png) no-repeat;
height: 30px;
width: 30px;
display: inline-flex;
content: '';
position: absolute;
top: -5px;
background-position: -455px 0;
}
.container .external {
background-position: -491px 2px;
}
.container .mail {
background-position: -526px 0px;
}
<div class="container">
<a class="external" href="http://somelink.com/">MyLink</a>
<a class="mail" href="gmail.com">Mail To Us</a>
</div>
I was wondering how to center 3 divs inside a div.
Here is my code example
body {
position: fixed;
height: 100%;
width: 100%;
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
float: left;
text-align: center;
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div id="container">
<div id="plaatje1" class="plaatje">
</div>
<div id="plaatje2" class="plaatje">
</div>
<div id="plaatje3" class="plaatje">
</div>
</div>
The problem is, there is still a white space on the right hand-side of the picture, I have marked it so you know what i'm talking about.
It also needs to scale, so if I resize the window, that the third image doesn't pops below the first or that the space exists when I resize it fully.
Any help is appreciated.
I have created a jsFiddle which demonstrates how you can do this using flexbox. It doesn't require floating the elements and gives you with exactly what you're looking for.
I have added a wrapper around the images (.images) and given it the flex properties required to align its contents, then removed the floats and a few other unnecessary things.
Here is the browser support for flexbox: caniuse:flexbox
body {
position: fixed;
height: 100%;
width: 100%;
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
}
.images {
height: 90%;
display: flex;
justify-content: center;
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
}
<div id="container">
<div class="images">
<div id="plaatje1" class="plaatje"></div>
<div id="plaatje2" class="plaatje"></div>
<div id="plaatje3" class="plaatje"></div>
</div>
</div>
You could just simply try adding text-align:center; to your container div
There are many ways to do this, and you should probably start with http://www.w3schools.com/css/css_align.asp - this elementary level question often gets flagged as not appropriate for SO.
But! Welcome. Here's one way you could do this - I've added comments to explain what's going on. Basically your float: left by definition made the .plaatjes impossible to center; and the text-align: center needs to be on the containing element
body {
position: fixed; /* probably don't actually want */
height: 100%;
width: 100%;
margin: 0; /* add */
}
#container {
border: 3px solid black;
height: 90%;
width: 90%;
margin-left: 5%;
text-align: center; /* add */
}
.plaatje {
width: 30%;
height: 70%;
border: 2px solid black;
/* float: left; // remove
text-align: center;*/
display: inline-block; /* add */
}
#plaatje1 {
background-image: url("http://image.prntscr.com/image/c3d5dbc04f664a3386b372d8e4ceb4c7.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje2 {
background-image: url("http://image.prntscr.com/image/2bcfd124f98a448cbae822337818ff4e.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
#plaatje3 {
background-image: url("http://image.prntscr.com/image/e1b7059d626f47cb94535bbba9887cc1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div id="container">
<div id="plaatje1" class="plaatje">
</div><div id="plaatje2" class="plaatje">
</div><div id="plaatje3" class="plaatje">
</div>
</div>
<!-- removed spaces between the divs -->
Im using a platform that only accepts html / css in line, and i was asked to make somehow a dropdown menu, where when i hover on one element, it resize it and there is an image show on it. The problem is that when i hover on one element, i cant hover and resize the second one, unless i take the mouse over this.
I tried to move backwards the hover elements with z index -1, but the transition got really bugged and goes up and down constantly.
<div id="mapa-expanduno"></div>
<div id="mapa-expanddos"></div>
<div id="mapa-expandtres"></div>
<div id="mapa-expandcuatro"></div>
<style type="text/css">
div {
position: absolute;
}
#mapa-expanduno {
border: 1px solid blue;
margin-left: 55px;
width: 110px;
height: 125px;
}
#mapa-expanduno:hover {
width:914px;
height: 450px;
margin-left: 0px;
background: url();
background-repeat: no-repeat;
}
#mapa-expanddos {
border: 1px solid red;
margin-left: 286px;
width: 110px;
height: 125px;
}
#mapa-expanddos:hover {
width:914px;
height: 450px;
z-index: -1;
margin-left: 0px;
background: url();
background-repeat: no-repeat;
}
#mapa-expandtres {
border: 1px solid lightgreen;
margin-left: 518px;
width: 110px;
height: 125px;
}
#mapa-expandtres:hover {
width:914px;
height: 450px;
z-index: -1;
margin-left: 0px;
background: url();
background-repeat: no-repeat;
}
#mapa-expandcuatro {
border: 1px solid black;
margin-left: 750px;
width: 110px;
height: 125px;
}
#mapa-expandcuatro:hover {
width:914px;
height: 450px;
margin-left: 0px;
background: url();
background-repeat: no-repeat;
}
</style>
Demo
Thanks on advice.
I'd switch to a sibling relationship:
div {
position: absolute;
}
.outer {
cursor: pointer;
width: 110px;
height: 125px;
}
.inner {
position: fixed;
top: 0;
left: 0;
width: 914px;
height: 450px;
z-index: -1;
display: none;
}
#mapa-expanduno {
border: 1px solid blue;
margin-left: 10%;
}
#mapa-expanduno:hover + .inner {
display: block;
background: url(http://lorempixel.com/1200/900/nature/4);
background-repeat: no-repeat;
}
#mapa-expanddos {
border: 1px solid red;
margin-left: 30%;
}
#mapa-expanddos:hover + .inner {
display: block;
background: url(http://lorempixel.com/1200/900/nature/3);
background-repeat: no-repeat;
}
#mapa-expandtres {
border: 1px solid lightgreen;
margin-left: 50%;
}
#mapa-expandtres:hover + .inner {
display: block;
background: url(http://lorempixel.com/1200/900/nature/2);
background-repeat: no-repeat;
}
#mapa-expandcuatro {
border: 1px solid black;
margin-left: 70%;
}
#mapa-expandcuatro:hover + .inner {
display: block;
background: url(http://lorempixel.com/1200/900/nature/1);
background-repeat: no-repeat;
}
<div class="outer" id="mapa-expanduno"></div>
<div class="inner"></div>
<div class="outer" id="mapa-expanddos"></div>
<div class="inner"></div>
<div class="outer" id="mapa-expandtres"></div>
<div class="inner"></div>
<div class="outer" id="mapa-expandcuatro"></div>
<div class="inner"></div>
<div id="preloader" style="position: absolute; left: -999em;">
<img src="http://lorempixel.com/1200/900/nature/3" />
<img src="http://lorempixel.com/1200/900/nature/4" />
<img src="http://lorempixel.com/1200/900/nature/1" />
<img src="http://lorempixel.com/1200/900/nature/2" />
</div>
JSFiddle demo
Here's a version with some transitions.
I don't know if this is helpful because the question is unclear, but I'll attempt to help.
It is hard to know exactly what's going on here without your HTML.
You can add a "> [desired element to change]" selector after your ":hover" selector.
so it would be something like
parent_element{
margin-left: 750px;
width: 110px;
height: 125px;
background: url();
background-repeat: no-repeat;
}
parent_element:hover > child_element{
width:914px;
height: 450px;
margin-left: 0px;
background: url();
background-repeat: no-repeat;
}
If it is not a child element you will have to use JavaScript to make the changes.
You might also consider using transitions in your css, which would make the box grow.
I have a div which has a background of a map. The map is centred and has a background size of 'contain'. The page is responsive so when the window resizes, so does the map. I need to be able to have a div on top of a certain country on the map, and on resize of the background map, the div stays directly on top of it.
So far I have
<div id="map-holder">
<div class="content">
<div class="placeholder"></div>
</div>
</div>
The div with the class of placeholder is the div i wish to keep on top of a certain country. The div with map-holder for ID is the div with the map background. Content is just to keep it all in place.
CSS
.content {
text-align: center;
width: 1200px;
margin: 0 auto;}
#map-holder {
position: relative;
height: 1000px;
width: 100%;
background: #F0F0F0;
background-image: url(../images/image-mapster.min.png);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
padding: 30px;
}
.placeholder {
position: absolute;
right: 30px;
background: #fff;
width: 80px;
height: 50px;
border: 1px solid #000;
margin: 5px;
padding: 5px;
padding: 0;
cursor: pointer;
}
.placeholder img {
width: 100%;
height: 100%;
padding: 0;
}
.placeholder:before {
position: absolute;
top: 30%;
left: 45%;
font-weight: bold;
content: '+';
}
The only solution I can think if actually putting an image over the map.
You can do this by having multiple CSS backgrounds. Just change your code for #map-holder to this:
#map-holder {
position: relative;
height: 500px;
width: 500px;
background: #F0F0F0;
background-image: url(this_image_goes_on_top.png), url(your_map.jpg);
background-size: contain, contain;
background-position: center center, center center;
background-repeat: no-repeat, no-repeat;
padding: 30px;
}
I made a little JSFiddle out of your code for demonstration: https://jsfiddle.net/zamofL9g/1/
Basically, it's a little difficult, as I recall, when using background images.
Since the image is, technically speaking "content" you can use an inline image and suitable wrapping divs. The 'pins' can then be positioned using % based positioning values.
Here's a Codepen demo I made some time ago. This one has a tooltip too!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.map {
width: 90%;
margin: 10px auto;
position: relative;
}
.map img {
max-width: 100%;
}
.box {
width: 2%;
height: 5%;
background-image: url(http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
#pin-1 {
top: 25%;
left: 38%;
}
.box:hover > .pin-text {
display: block;
}
.pin-text {
position: absolute;
top: -25%;
left: 110%;
width: 300%;
display: none;
}
.pin-text h3 {
color: white;
text-shadow: 1px 1px 1px #000;
}
<div class="map">
<img src="http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg" alt="" />
<div id="pin-1" class="box">
<div class="pin-text">
<h3>My House</h3>
</div>
</div>
</div>