I have two graphical elements: One Badge for a Region (EUW) and a Sold Out Stamp. I want that the stamp is in front of the region badge. I always thought that this is something where I can use z-index but this just doesn't work for me.
Here is an image of my problem:
My CSS:
.region-badge {
position: absolute;
top: 26px;
right: 26px;
background: url(../images/region_badge.png) no-repeat;
height: 47px;
width: 47px;
display: block;
line-height: 47px;
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 12px;
font-weight: bold;
z-index: 1;
}
.sold-out {
position:relative;
}
.sold-out::before{
content: url(../images/sold_out_stamp2.png);
transform: scale(.5);
position:absolute;
z-index: 40;
top:-50px;
left:70px;
}
My HTML:
<div class="rotate sold-out">
<a href="images/packages/background01.jpg" rel="imagebox" title="SockMonkee">
<img src="images/packages/background01.jpg" alt=""/></a>
</div>
<div class="region-badge">euw</div>
try this.,
<div class="rotate sold-out">
<a href="images/packages/background01.jpg" rel="imagebox" title="SockMonkee">
<img src="images/packages/background01.jpg" alt=""/>
</a>
<div class="region-badge">euw</div>
</div>
Related
I' m super new at html and css. I started to learn yesterday.
I want to top-centered a text in an image.
Here is my html and css codes but I don't figure it out how to do it.
HTML
<div class="button">
<a href="#" class="building">
<img src="{% static 'images/imal.svg' %}" alt="buildinglogo">
<h3>Lastik İmal</h3>
</a>
CSS
.building h3{
font-family: Montserrat;
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 49px;
text-align: center;
align-items: center;
color: var(--white);
background-color: var(--black);
}
Here is my output:
This is what i want:
As suggested byMinal Chauhan you can use position: absolute; top: 50px; left: 50px;
.building h3{
font-family: Montserrat;
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 49px;
text-align: center;
align-items: center;
color: var(--white);
background-color: var(--black);
position: absolute;
top: 50px;
left: 50px;
}
<div class="button">
<a href="#" class="building">
<img src="https://picsum.photos/300/400" alt="buildinglogo">
<h3>Lastik İmal</h3>
</a>
</div>
I changed the html and css codes like below and problem solved;
HTML
<div class="button">
<a href="#" class="building">
<img src="{% static 'images/imal.svg' %}" alt="buildinglogo">
<h3>Lastik İmal</h3>
</a>
CSS
.building h3{
position: absolute;
font-family: Montserrat;
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 49px;
text-align: center;
color: var(--white);
background-color: var(--black);
margin-left: 25px;
margin-top: 47px;
}
Add position: absolute; to .building h3
.building img {
width: 100%;
}
.building h3 {
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 49px;
text-align: center;
align-items: center;
position: absolute;
top: 0;
width: 100%;
}
<div class="button">
<a href="#" class="building">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="buildinglogo">
<h3>Lastik İmal</h3>
</a>
</div>
<p>Text content</p>
You should use relative on parent element to position child element.
I made comments in code.
a {
position: relative;
display: inline-block; // you need that for a tag's width / height value
}
a img {
position: relative; // you need that to position h3 properly
z-index: 1
}
a h3 {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
<a href="#">
<img src="//via.placeholder.com/250x400">
<h3>Lastik İmal</h3>
</a>
#image-text{
position:absolute;
left:25%;
top:5%;
}
<!-- HTML-->
<div id="container">
<img src="" alt="Image">
<div id="image-text"> Text </div>
</div>
The above snippet might help you to solve your problem. Adjust CSS left and top values according to your page structure. For further study read:
https://www.w3schools.com/howto/howto_css_image_text_blocks.asp
https://www.geeksforgeeks.org/how-to-place-text-on-image-using-html-and-css/
I've got three images that need to be displayed horizontally with no gaps between them and a link on top of each one they also need to be scalable to the window size. Currently there are gaps between them.
Here is all of the relevant code I've got so far:
.callout-container {
position: relative;
bottom: 480px;
right: 0px;
}
.callout {
position: relative;
float: left;
Width: 33.3%;
}
.button-1 {
position: absolute;
top: 160px;
right: 1420px;
color: white;
background-color: rgb(224, 99, 38);
padding: 10px;
padding-left: 100px;
padding-right: 100px;
font-family: Futura;
font-size: 20pt;
opacity: 0.9;
}
.button-2 {
position: absolute;
top: 160px;
right: 825px;
color: white;
background-color: rgb(224, 99, 38);
padding: 10px;
padding-left: 100px;
padding-right: 100px;
font-family: Futura;
opacity: 0.9;
font-size: 20pt;
}
.button-3 {
position: absolute;
top: 160px;
right: 220px;
color: white;
background-color: rgb(224, 99, 38);
padding: 10px;
padding-left: 100px;
padding-right: 100px;
font-family: Futura;
opacity: 0.9;
font-size: 20pt;
}
<div class="callout-container">
<div>
<div class="callout-one callout">
<img src="callout_1.png" alt="">
</div>
<div class="callout-two callout">
<img src="callout_2.png" alt="">
</div>
<div class="callout-three callout">
<img src="callout_3.png" alt="">
</div>
</div>
<div>
<div>
<a href="" class="button-1" style="text-decoration:none;">
Property Owner?
</a>
</div>
<div>
<a href="" class="button-2" style="text-decoration:none;">
City Visitor?
</a>
</div>
<div>
<a href="" class="button-3" style="text-decoration:none;">
Teacher?
</a>
</div>
</div>
</div>
Edit: also here is a screenshot of how it is currently displayed.
screenshot
if I understand well, you want the links to be aligned with the images?
I create a jsFiddle to test.
https://jsfiddle.net/mp9007/aL27fxm3/
I think i'm close to want you want:
<div class="callout-container">
<div>
<div class="callout-one callout">
Property Owner?
<!-- image -->
</div>
<div class="callout-two callout">
City visitor?
<!-- image -->
</div>
<div class="callout-three callout">
Teacher?
<!-- image -->
</div>
</div>
And then remove the absolute/right alignement from the css button class
.button-3{
position: absolute;
top: 160px;
//right: 220px;
color: white;
background-color: rgb(224, 99, 38);
padding: 10px;
padding-left: 100px;
padding-right: 100px;
font-family: Futura;
opacity: 0.9;
font-size: 20pt;
}
I've created a left navigation bar using buttons. I'm trying to reduce the hyperlink area to just the background image. Also, another issue I'm having is the elements overlaying the background image are taking precedence over the hyperlink, so the button is not actually clickable. Page for reference
http://www.auburn.edu/administration/facilities/home-page/index.html
Hyperlink area
Here's the background image area
.img-responsive {
display: block;
padding: 0;
margin: 0;
}
.background:hover .head {
color: #d76e08;
}
.overlay {
position: absolute;
z-index: 1;
top: 0;
left: 0;
color: white;
}
.icon {
padding-top: 15px;
padding-left: 40px;
}
.head {
margin-top: -75px;
padding-left: 120px;
}
.content {
margin-top: -5px;
padding-left: 120px;
padding-right: 35px;
}
<div class="row">
<div class="col-sm-12">
<div class="background">
<a href="../Collin/misc/issues/index.html">
<img alt="background" class="img-responsive" src="buttons/images/button.png" />
</a>
<div class="overlay">
<div class="icon">
<img alt="test" class="img-responsive" src="buttons/images/info-icon.png" />
</div>
<p class="head">Ask Facilities</p>
<p class="content">Here will be text about the button. .</p>
</div>
</div>
</div>
</div>
I'm trying to reduce the hyperlink area to just the background image.
Your markup is incredibly complex for what you are displaying.
You could have something like:
<ul>
<li>
<a>
<h2></h2>
<p></p>
</a>
</li>
<li>
<a>
<h2></h2>
<p></p>
</a>
</li>
</ul>
and add the image and the gradient using CSS.
I would use a single link tag for your button and leverage CSS gradients for the background:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.button {
background-image: linear-gradient(to bottom, #3D85C6, #07355F 50%, #07355F);
background-size: 100% 200%;
border-radius: 4px;
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
transition: all 150ms ease-in-out;
}
.button:hover,
.button:focus,
.button:active {
background-position: 0 50%;
}
.button-icon {
float: left;
margin-right: 15px;
}
.button-content {
overflow: hidden;
}
.button-title {
font-size: 18px;
font-weight: bold;
}
.button-description {
font-size: 16px;
}
<a class="button" href="../Collin/misc/issues/index.html">
<div class="button-icon">
<img src="http://satyr.io/72/white?brand=github" alt=""/>
</div>
<div class="button-content">
<p class="button-title">Ask Facilities</p>
<p class="button-description">Here will be text about the button…</p>
</div>
</a>
Also here http://jsbin.com/rikisemawe/edit?html,css,output
The elements in OP were stacked in the markup, there were no nested components of the button. That would explain the unusual position coords and large padding.
Instead of <img>, background-image is used. Changed some of the tags to a real <button>, <h4> instead of <p>, etc.
SNIPPET
.button {
position: relative;
min-width: 350px;
max-width: 100%;
min-height: 95px;
height: auto;
padding: 5px 10px;
border: 0 none transparent;
border-radius: 6px;
background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/button.png)no-repeat;
background-size: cover;
}
.background:hover .head {
color: #d76e08;
}
.text {
padding: 0 5px;
position: absolute;
left: 85px;
top: 5px;
text-align: left;
color: #def;
text-decoration: none;
}
.button:hover,
.text:hover {
text-decoration: none;
color: #def;
}
.button:hover .head {
color: gold;
}
.icon {
width: 75px;
height: 75px;
position: absolute;
top: calc(50% - 37.5px);
background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/service-icon.png)no-repeat;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-12">
<button class="button">
<div class="icon"></div>
<a class='text'>
<h4 class="head">Ask Facilities</h4>
<p class="content">Here will be text about the button.</p>
</a>
</button>
</div>
</div>
It seems like no matter what I do I just can't get some text with a black background to centre vertically. The problem is that sometimes the text is on one line and sometimes it is on two or even three. I'm trying to get it to automatically adjust but I just can't.
I have tried numerous approaches such as those listed on here.
Here is my code I am trying to centre:
.infogrid {
display: inline-block;
position: relative;
bottom: 45px;
right: 0;
margin: 0px 1% -100% 1%;
width: 98%;
background-color: #F6F6F6;
}
.infogrid ul {
margin: 0;
padding: 0;
text-align: center;
}
.infogrid li {
display: inline-block;
position: relative;
background-color: white;
width: 320px;
margin: 1vw;
height: 320px;
transition: transform 0.4s;
box-shadow: 0.2vh 0vh 0.8vh #888888;
}
.infogrid li:hover {
transform: scale(1.05, 1.05);
}
.tilewrappertext {
display: inline-block;
color: white;
visibility: hidden;
z-index: 1;
width: 100%;
text-align: center;
font-family: "Century Gothic", "Arial", "Sans-Serif";
background-color: black;
opacity: 0.75;
font-size: 2.2em;
}
#tilewrapper:hover .tilewrappertext {
visibility: visible;
}
<div class="infogrid">
<ul>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile1.png" width="96%">
<h3 class="tilewrappertext">Half price facials</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile2.png" width="96%">
<h3 class="tilewrappertext">1/4 off massages</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile3.png" width="96%">
<h3 class="tilewrappertext">20/3 off hot rocks</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile4.png" width="96%">
<h3 class="tilewrappertext">20/3 off nails</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile5.png" width="96%">
<h3 class="tilewrappertext">Free use of sauna with treatment</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile6.png" width="96%">
<h3 class="tilewrappertext">Free use of jacuzzi with treatment</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile7.png" width="96%">
<h3 class="tilewrappertext">1/20 off eyes</h3>
</div>
</li>
<li>
<div id="tilewrapper">
<img id="automargins" src="content/tile8.png" width="96%">
<h3 class="tilewrappertext">1/20 off hair</h3>
</div>
</li>
</ul>
</div>
The text appears when the image is hovered over.
Since your li is already position relative, you can add the following css rules to the h3 to center it vertically within the li.:
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0;
Example here: http://codepen.io/nicerhugs/details/dMGMEv/
The top will move the top of the h3 halfway down the li, and the transform will correct for the height of the li itself. Getting rid of the margin will take away that weird mystery space that makes it appear to be lower than it really is.
Just go with the Jess's answer. Here is another method to do this using pseudo element aka ghost element in css.
You have to give absolute position to image. add a :after element to div#tilewrapper and make it display inline-block, also make the h3 tag inline-block and apply vertical-align: middle, it will position vertically middle. Little complicate to understand but anyway Here is the code . :)
.infogrid {
display: inline-block;
position: relative;
bottom: 45px;
right: 0;
margin: 0px 1% -100% 1%;
width: 98%;
background-color: #F6F6F6;
}
.infogrid ul {
margin: 0;
padding: 0;
text-align: center;
}
.infogrid li {
display: inline-block;
position: relative;
background-color: white;
width: 320px;
margin: 1vw;
height: 320px;
transition: transform 0.4s;
box-shadow: 0.2vh 0vh 0.8vh #888888;
}
.infogrid li:hover {
transform: scale(1.05, 1.05);
}
.tilewrappertext {
display: inline-block;
color: white;
visibility: hidden;
z-index: 1;
width: 100%;
text-align: center;
font-family: "Century Gothic", "Arial", "Sans-Serif";
background-color: black;
opacity: 0.75;
font-size: 2.2em;
}
#tilewrapper:hover .tilewrappertext {
visibility: visible;
}
.infogrid{
margin-top: 50px;
}
img {
max-height: 320px;
position: absolute;
}
div#tilewrapper{
height: 100%;
}
.tilewrappertext {
display: inline-block;
color: white;
visibility: hidden;
z-index: 1;
width: 100%;
text-align: center;
font-family: "Century Gothic", "Arial", "Sans-Serif";
background-color: black;
opacity: 0.75;
font-size: 2.2em;
vertical-align: middle;
display: inline-block;
vertical-align: middle;
width: calc(100% - 4px);
}
div#tilewrapper:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -5px;
}
<div class="infogrid">
<ul>
<li>
<div id="tilewrapper">
<img id="automargins" src="http://1.bp.blogspot.com/-fqGa-MyjVHY/UZPYekbmfHI/AAAAAAAABrg/CC4q0AQsY9o/s320/air-baloon.jpg" width="96%">
<h3 class="tilewrappertext">Half price facials</h3>
</div>
</li>
</ul>
</div>
Okay so I am trying to integrate a link into the flow of the paragraph (directly to the right of '1.' but for some reason it is not showing up? How do I make it integrate into the flow.
Here is a http://jsfiddle.net/5CMfv/ for reference
Thanks
<div id="home-infobox">
<div class="infobox_picture">
<img src="images/image1.png" width="91" height="90">
<a style="position:absolute; padding-left:30px;"><h1>Image1</h1><p>Kappa kappa kaap 1. <p>more</p></a>
</div>
<div class="infobox_picture">
<img src="images/news.jpg" width="92" height="90">
<a style="position:absolute; padding-left:30px;"><h1>NEWS</h1><p>DKappakpapapapa</p> </a>
</div>
<div class="infobox_picture">
<img src="images/314.JPG" width="93" height="90">
<a style="position:absolute; padding-left:30px;"><h1>The Team</h1><p>KappaKappa </p> </a>
</div>
</div>
#home-infobox{
height: 335px;
background-color:#425eb4;
background-repeat: no-repeat;
background-position: left top;
width: 450px;
float: left;
position: absolute;
top:250px;
left:80px;
}
#home-infobox{
height: 335px;
background-color:#425eb4;
background-repeat: no-repeat;
background-position: left top;
width: 450px;
float: left;
position: absolute;
top:250px;
left:80px;
}
.infobox_picture {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
clear: both;
background-position: center bottom;
background-repeat: no-repeat;
background-color: white;
height: 90px;
position: relative;
}
.home-infobox ~ .home-infobox:before {
content: '';
position: absolute;
left: 0;
top: -8px;
width: 100%;
border-top: 1px solid black;
}
#home_infobox p a{
color: #3B4B7E;
text-decoration: none;
z-index:999;
position:relative;
}
#home_infobox p a:hover{
color: #475883;
text-decoration: underline;
}
h1 {font-family:'Montserrat', sans-serif; font-size:15px; position:relative; z- index:999}
h2 {font-family: 'Montserrat', sans-serif; font-size:25px; position:relative;}
h3 {font-family:'Montserrat', sans-serif; font-size:15px; position:relative; z-index:999}
You have invalid HTML:
<p>Kappa kappa kaap 1.<p>more</p>
should be:
<p>Kappa kappa kaap 1. more</p>
On further inspection, you have other HTML issues as well.
http://validator.w3.org/
You can do it like this:
<div class="infobox_picture">
<img src="images/image1.png" width="91" height="90">
<div style="display:inline-block; position:absolute; padding-left:30px;">
<h1>Image1</h1>
<p>Kappa kappa kaap 1.</p>
<p>more</p>
</div>
</div>
An a element always has to have an href attribute. It's better to put an 'a' inside a text element. So, i'va put a div element on de place where you had an 'a' element, and added the display:inline-block css-property to make this block element behave somewhat like the inline 'a' element.