.holderDiv{
position: relative;
}
.shadowSimulation{
position: absolute;
background-color: black;
height: 60%;
width: 611px;
bottom: -10px;
left: -10px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="holderDiv">
<img class="confidentalMainImage" src="http://i.imgur.com/SoHn5gF.jpg">
<div class="shadowSimulation"></div>
</div>
</body>
</html>
I have attached an image of what I need to get.
In the code sample, I have tried with z-index but still not a result.
I need to get the black part back to the image. That's it.
I found answer myself, the solution was to give position: relative to an image and higher z-index: as well.
Have you tried to add a shadow directly to the image or the div that contains it?
It maybe a better solution because of problems with different web browsers.
Here is a codepen with a modified example, and code below, hope it helps
css:
.holderDiv {
position: relative;
margin-left: 30px;
margin-bottom: 30px;
width: 611px;
box-shadow: -20px 20px 0 Gray;
}
Related
My goal here is to create an image slideshow. I'm trying to add the left and right arrows on each side, however my right arrow won't fit in the div. I'm kind of a beginner so bear with me, I was following w3 schools on the slideshow tutorial to make sense of things. I don't want to copy literally everything from w3 schools but like i said i'm a beginner and i'm trying to make sense of things. My next goal is to move on to js and try to solve things there myself.
<html>
<head>
<title>Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="myscript.js"></script>
</head>
<body>
<div class="container">
<div class="regular-img" >
<img id="city" src="NYC.jpg">
</div>
<div class="regular-img" >
<img id="king" src="KING.jpg">
</div>
<a id="prev">❮</a>
<a id="fwd">❯</a>
</div>
</body>
</html>
````
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
background-color: yellow;
height: 65vh;
width: 95vw;
margin: 75px auto;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
.regular-img {
display: none;
}
a {
cursor: pointer;
/* color: white;
opacity: 0.7; */
position: absolute;
top: 50%;
font-size: 18px;
user-select: none;
font-weight: bold;
padding: 16px;
margin-top: -22px;
width: auto;
}
#fwd {
right: 0;
}
enter code here
Okay, the fellow developer no need to be afraid just add position: relative to .container and you will be good to go. It is because when you give something a position absolute it will relate to the closest parent element whose position is relative. if none is present it will relate to the HTML element so by adding a relative property to the .container right arrow will relate to its parent container and will stay in the container. Google the difference between position relative and absolute and you will have a better understanding
The solution here is very simple. You have added position: absolute; to the arrows. But you didn't add position: relative; to the parent div.
All you have to do is add this :
.container {
position: relative;
}
So this is the how the page looks, I would love to place the map below the coordinates field in the form? I am bit new to the styling so can you guys please help me achieve this. The raw source from the webpage has been pasted below in the js fiddle link.
<div>
<p class="hilite">Example of code</p>
</div>
<div>
<span class="hilite">More example of code</span>
</div>
.hilite {
background-color: yellow;
}
This above code is just dummy code to post this question with a minimal reproducible example.
Remove the absolute positioning from your map and give it some height:
https://jsfiddle.net/Sixtus78/wvpc9mt3/3/
<style>
#mapDiv {
z-index: 1;
background-color: grey;
box-shadow: 3px 3px 10px 1px;
overflow: hidden;
height: 300px;
}
</style>
Welcome!
To shift the map below the coordinate field remove the following css from the #mapDiv
position: absolute;
z-index: 1;
top: 30%;
bottom: 10%;
right: 5%;
left: 60%;
and just add the css
#mapDiv {
height: 300px;
width :300px;
}
Because of position:absolute and other properties like top,left it was not working.
Hope this might help you.
I'm trying to create an arch using just CSS. I've looked into various "inset border-radius" questions, but all of them show how to inset corners, not the middle section of an object.
I'm looking for a way to inverse the middle of an object to create an arch like a bridge.
Included is an example image to show the sort of thing I'm trying to achieve.
Edit:
An important part of this arch is that it will be placed over other objects. Simply whiting it out isn't a solution, rather just a temporary hack. See image below for more on that.
You could accomplish with radial gradients. I’ve put an example up on JSFiddle: http://jsfiddle.net/17ohey9h/
The basic idea is to have a big overlay (generated content clipped to the container with overflow: hidden) and then to give it a background of a radial gradient with a hard stop for the transition. We can do this by setting two stops at the same position, but with opposite translucencies:
radial-gradient(ellipse at center, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%)
You can obviously play around with the colours and positionings, the general idea holds. I’ve also only provided the W3C syntax for this. You’ll need to add in the older versions dependent on how far back your required browser support goes.
Given the images you've posted, you might consider another approach to this, such as this: http://codepen.io/pageaffairs/pen/lpLHg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {background: red; padding-top: 100px; width: 400px; text-align: center; overflow: hidden;}
img {border-radius: 200px/30px ; display: block; margin: 0 0 -30px -10px;}
</style>
</head>
<body>
<div>
<img src="http://placeimg.com/420/420/any">
</div>
</body>
</html>
Another way to solve it, using box-shadow
.overlay::after {
content: "";
position: absolute;
width: 100%;
height: 50%;
top: 30px;
border-radius: 50%;
box-shadow: 0px -100px 0px 72px red;
}
fiddle
Reusing Robin fiddle :-)
Html :
<div class="wrapper">
<div class="rectangle"></div>
<div class="egg"></div>
</div>
CSS :
.wrapper {
width:200px;
height:100px;
overflow:hidden;
position:relative;
}
.rectangle{
width:200px;
height:100px;
background-color:red;
}
.egg {
width:200px;
height:100px;
border-radius:50%;
background-color:#fff;
position:absolute;
top:56px;
}
and the fiddle :
http://jsfiddle.net/h1gjefk7/
You could do it like this: http://codepen.io/pageaffairs/pen/wpaFm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
width: 230px;
height: 120px;
background: red;
position: relative;
overflow: hidden;
}
div:after {
content:"";
width: 260px;
height: 50px;
background: #fff;
border-radius: 100% 100% 0 0;
position: absolute;
bottom:0;
left: -15px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
I'm an inexperienced HTML learner, so please bear with me.
I'm trying to make a <div> (#banner) stay in the center of the browser even if resized; so I figured I would need another <div> as the #container of the entire browser.
#banner needs to extend its width 100% so I had to use the absolute position.
Even though I have already looked at several other posts here in stackoverflow - I can't figure how to implement their solutions to my particular case.
HTML
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div>
<div id="banner">
</div>
</div>
</body>
</html>
CSS
#container{
}
#banner{
background-color: #e51400;
height: 400px;
position: absolute;
left: 0px;
right: 0px;
font-weight: bold;
text-align: center;
vertical-align:middle;
}
This is basically what I'm trying to accomplish
Do I really need another <div> besides #banner in order to put it in the center ?
Well, I was able to answer my own question due to the tremendous amount of replies I got. Anyways, thanks to this page I was able to tweak the code to how I need it in this case.
Here's my final code:
CSS
#container {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
background-color:black;
}
#banner {
height: 400px;
position: absolute;
top: -200px; //needs to the negative value of half the height
left: 0px;
right: 0px;
background-color:red;
}
I have a row of icons that need to be at the bottom of the page, they also need to be fixed. Simple, right? Not. When you position them fixed, the icons fall into one another so only one icon shows. Well there goes that, but there also goes the chance of placing them at the bottom of the page since I need
#icons {
position:fixed;
bottom:0;
}
I could always manually place them, but this means they cant be fixed like I need them too, and I would have to declare it for different browsers. Help?
Link to website: Roseannebarr.tumblr.com
Here is an example of my HTML
<div id="outer">
{block:Photo}
<img id="block" src="http://static.tumblr.com/ux4v5bf/vYSlebvt2/photo.png">
<div id="tooltip">
{LinkOpenTag}<img id="photo" src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Photo}
</div>
Fixed position is what it says, 'fixed', and you are using the same position for all of them.
The best way is not to use position:fixed in #outer, instead try with display:inline; and better yet, I see they are inside #holder, use fixed in #holder and modify #tooltip so it can be shown above because it is what is showing the content.
For example:
#holder {
bottom: 0px;
left: -382.5px;
margin: 0px auto 0px 50%;
margin-left: 50%;
position: fixed;
width: 765px;
}
#tooltip {
background: #6CB4E2;
border-top: 30px solid white;
display: none;
left: 50%;
margin-left: -382px;
padding: 10px;
position: absolute;
bottom: 51px;
width: 745px;
}
#outer {
background: #6CB4E2;
bottom: 0px;
display: inline;
float: left;
margin-top: -8px;
}
I would wrap your icons in a div like this:
<div id="myicons_container">
<img src="icon1.gif">
<img src="icon2.gif">
<img src="icon3.gif">
<img src="icon4.gif">
<img src="icon5.gif">
</div>
<style type="text/css" media="screen">
#myicons_container {
position: fixed;
bottom: 0;
}
</style>
Edit : Per your comment, I would suggest re-writing your code to collect the icons in a container element. But, you might get away with this (haven't tested in any browsers):
<style type="text/css" media="screen">
.block {
width: 50px;
height: 50px;
float: left;
position: fixed;
bottom: 0;
}
</style>
Note: you have to give floated items a width and height.
One other note, in your code, you will have multiple elements with the same ID attribute. This is a no-no. You'll need to change it to a class like I've done in the CSS above.