I have a few images below each other in a page and want to add span overlay text over an image vertically instead of horizontally.My current code shows(on iPhone screen) the span overlay text horizontally but I want to display it vertically and readable from bottom to top.Hope you guys help me. Thanks
<html>
<head>
<style>
</style>
<script>
//here I get the items information from db using ajax method and construct the item information blocks and append it to div called demo
</script>
</head>
<body>
<div id="demo">
<strong>1)Item 1</strong><br>
<div style="text-align: right;">70<br> </div>
<div style="position: relative; z-index: 1;">
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/8e2d81eb3e854642b5dca97600fd73c7_9366/Firebird_Track_Pants_Black_ED6897_25_model.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> </div>
<span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px">SOLD OUT</span>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br>
https://www.mywebsite.com/item1.html
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>
<strong>2)Item 2</strong><br>
<div style="text-align: right;">65<br> </div>
<div style="position: relative; z-index: 1;">
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/bf500e3fd9c74e458cf4aaf00125990a_9366/Firebird_Track_Pants_Blue_FM3813_01_laydown.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;">
<span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px"></span></div>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br>
https://www.mywebsite.com/item2.html
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>
</body>
</html>
You really need to start using CSS outside of your HTML inline style writing, among other things.
Read here why inline transform didn't work for you:
CSS transform doesn't work on inline elements
I have set your position to position: absolute;
<div id="demo">
<strong>1)Item 1</strong><br>
<div style="text-align: right;">70<br> </div>
<div style="position: relative; z-index: 1;"></div>
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/8e2d81eb3e854642b5dca97600fd73c7_9366/Firebird_Track_Pants_Black_ED6897_25_model.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;">
<span id="overlay_text" style="
transform: rotate(270deg);
position: absolute;
top: +90px;
z-index: 3;
background-color:white;
line-height:50px"> SOLD OUT </span>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br>
https://www.mywebsite.com/item1.html
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>
<strong>2)Item 2</strong><br>
<div style="text-align: right;">65<br> </div>
<div style="position: relative; z-index: 1;"></div>
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/bf500e3fd9c74e458cf4aaf00125990a_9366/Firebird_Track_Pants_Blue_FM3813_01_laydown.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;">
<span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px"></span>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br>
https://www.mywebsite.com/item2.html
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------
Css transforms Css Transforms and transform origin couldn't hurt either Transform Origin here is a quick example.
.wrapper{
height: 500px;
width: 500px;
position:relative;
background: rgb(220,220,220);
}
.wrapper span{
position:absolute;
top:100px;
left: 20px;
font-size: 20px;
font-weight: bold;
/*important part below*/
transform: rotate(-90deg);
transform-origin: top left;
}
<div class="wrapper">
<span>Sold Out</span>
</div>
So using your code it would be something like:
<html>
<head>
<style>
</style>
<script>
//here I get the items information from db using ajax method and construct the item information blocks and append it to div called demo
</script>
</head>
<body>
<div id="demo">
<strong>1)Item 1</strong><br>
<div style="text-align: right;">70<br> </div>
<div style="position: relative; z-index: 1;">
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/8e2d81eb3e854642b5dca97600fd73c7_9366/Firebird_Track_Pants_Black_ED6897_25_model.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> </div>
<span id="overlay_text" style="position: relative; z-index: 3;background-color:white;transform: rotate(-90deg);
transform-origin: top left; display:inline-block;
top: 100px;left: 10px">SOLD OUT</span>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br>
https://www.mywebsite.com/item1.html
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>
<strong>2)Item 2</strong><br>
<div style="text-align: right;">65<br> </div>
<div style="position: relative; z-index: 1;">
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/bf500e3fd9c74e458cf4aaf00125990a_9366/Firebird_Track_Pants_Blue_FM3813_01_laydown.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;">
<span id="overlay_text" style="position: relative; z-index: 3;background-color:white;transform: rotate(-90deg);
transform-origin: top left; display:inline-block;
top: 100px;left: 10px">Sold Out</span></div>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br>
https://www.mywebsite.com/item2.html
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>
</body>
</html>
Related
I have a wordpress site and I am using the spacious theme. And what I want to archive is just a green box under de image slider. So the code of the image slider is like this:
<section id="featured-slider">
<div class="slider-cycle" style="height: 465.922px;">
<nav id="controllers" class="clearfix">
<a class="active"/>
<a class=""/>
<a class=""/>
<a class=""/>
<a class=""/>
</nav>
<div class="slides displayblock cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 99; opacity: 1; display: block; visibility: visible;">
<figure>
<img class="lazy loaded" width="1500" height="655" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-1-meeuwen-1500-655-slider-2.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-1-meeuwen-1500-655-slider-2.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/doe-mee-2/" title="">Doe mee</a>
</div>
</div>
<div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden; opacity: 0; display: block;">
<figure>
<img class="lazy loaded" width="4950" height="2162" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/Mensen-in-het-park-Den-Haag.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/Mensen-in-het-park-Den-Haag.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/steun-ons/" title="">Steun ons</a>
</div>
</div>
<div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 96; visibility: hidden; opacity: 0; display: block;">
<figure>
<img class="lazy loaded" width="4350" height="1899" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-3-zomer-Den-Haag-kinderen-spelen-slider.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/slide-3-zomer-Den-Haag-kinderen-spelen-slider.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/verbind-op-locatie-of-thema/" title="">Verbind op locatie of thema</a>
</div>
</div>
<div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 95; visibility: hidden; opacity: 0; display: block;">
<figure>
<img class="lazy loaded" width="4799" height="2095" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/terras-vol-Den-Haag-blur-TEST-5250-2095-TEST.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/terras-vol-Den-Haag-blur-TEST-5250-2095-TEST.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/word-lid/" title="">Word lid en één van ons</a>
</div>
</div>
<div class="slides displaynone cycle-slide" style="position: absolute; top: 0px; left: 0px; z-index: 100; visibility: hidden; opacity: 0; display: block;">
<figure>
<img class="lazy loaded" width="4200" height="1834" alt="" src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/surfers-strand-test-4200-1834-ICARUS-2.png" data-src="https://www.nieuwdenhaag.nl/wp-content/uploads/2022/07/surfers-strand-test-4200-1834-ICARUS-2.png" data-was-processed="true">
</figure>
<div class="entry-container">
<div class="clearfix"/>
<a class="slider-read-more-button" href="https://www.nieuwdenhaag.nl/evenementen/" title="">Evenementen >>> agenda</a>
</div>
</div>
</div>
</section>
And I try it with css like this:
#featured-slider img {
border-bottom: 70px solid #72BF44;
width: 1067x;
height: 466px;
}
But this is not the correct way. Because the images are transforming. And also the greenbox takes space from the images.
And I also want to have some text in the green box.
So I have added a image how it have to look like.
With the text in the green box. And I am using the Guttenberg layout for editing the pages.
if I do it with the option: "Custom HTML" in the Gutenberg page.
It already looks better. But how to make this full width. Like the images above?
There is a class inner-wrap:
<div class="inner-wrap">
<div id="primary">
<div id="content" class="clearfix">
<div style="background:#72BF44;height:70px;width: 100%;"></div>
</div>
with the css:
.inner-wrap {
width: 94%;
}
.inner-wrap {
margin: 0 auto;
max-width: 1218px;
}
So how to overrule the inner-wrap, so that the greenbox has the full widht of the images?
Add an "Custom HTML" block with this content:
<div style="background:#72BF44;height:70px"></div>
My code works fine in Chrome, however when I run it in Firefox, there is a problem. My webpage has 2 roman style columns ( each column consists of 2 images, a top and a bottom )that run vertically from the bottom of the header to the top of the footer. But in Firefox they stop about 30px from the top of the footer, leaving a gap.
My code does not include any vender prefixer's, but when I ran my CSS through Autoprefixer.com it did not add any either. Here is the code that seems to be affected.
<!--Roman Columns-->
<div class="content">
<div id="col_topleft">
<img src="imagesC/col_topleft.png" alt="column" height="420" width="60">
</div>
<div id="col_topright">
<img src="imagesC/col_topright.png" alt="column" height="420" width="60">
</div>
<div id="col_bottleft">
<img src="imagesC/col_bottleft.png" alt="column" height="685" width="60">
</div>
<div id="col_bottright">
<img src="imagesC/col_bottright.png" alt="column" height="685" width="60">
</div>
/*Roman Columns*/
#col_topleft {position: absolute;
top: 220px;
left: 25px;
}
#col_topright {position: absolute;
top: 220px;
right: 25px;
}
#col_bottleft {position: absolute;
top: 640px;
left: 25px;
}
#col_bottright {position: absolute;
top: 640px;
right: 25px;
}
This should fix the problem.
First add a div with position:relative than drop your content inside that div
<div style="position:relative;">
<div style="position:absolute"> <!-- your content div -->
</div>
</div>
Question is very simple becuase there is sample markup which is showing a problem.
How can i make input type="file" clickable in following example? I tried to work with z-index but it seems to do nothing here.
<html>
<div style="z-index: 0">
<img src="#" width="350" style="position: absolute;" />
<canvas width="350" style="border: thick; position: absolute"></canvas>
</div>
<div style="z-index: 10">
<input type="file" />
</div>
</html>
You need to set position with z-index, or it will not work.
// HTML
<div class="canvas">
<img src="#" width="350" />
<canvas width="350"></canvas>
</div>
<div class="file">
<input type="file" />
</div>
// CSS
.canvas {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.file {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
http://codepen.io/paulcredmond/pen/yakkkY
JSFIDDLE: http://jsfiddle.net/5nd6bexc/1/
I am trying to position a div (the contact us form) next to the contactus button, that is not the parent.
I know how to achieve that if the div is a parent(for instance the contactus is already placed in the page using that)
the best i got is this:
.managed-form {
background-color:#5B8F22;
width: 311px;
height: 369px;
z-index:99;
float: right;
margin: -75% 0% 0% 55%;
position:absolute;
display:none;
}
but it's not right because it positioning according to the parent div
HTML CODE
...........
...........
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 top-area">
<div class="managed-area row">
<div class="block-wrapper sliderblock">
<div class="block">
<div class="owl-carousel">
<div class="item slide">
<img src="/xcf.png" class="slide-image" />
<div class="slide-content">
<h2>Slide 1</h2>
<div class="managed-content">
<p>This is slide 1</p>
</div>
</div>
</div>
<div class="item slide">
<img src="cfv.png" class="slide-image" />
<div class="slide-content">
<h2>Slide 2</h2>
<div class="managed-content">
<p>This is slide 2</p>
</div>
</div>
</div>
</div> <span class="ContactForm" id="ContactForm">CONTACT US ∨ </span>
</div>
<div class="color-stripe color-stripe-2"></div>
</div>
</div>
.............
.............
.............
<div class="managed-form">
<div class="ContactForm-Heading">Contact Us</div>
<div class="ContactForm-Subheading"> <div class="managed-form">
<div class="ContactForm-Heading">Contact Us</div>
<div class="ContactForm-Subheading"></div>
<hr />
<div >
<hr />
<div >
......
</div>
Well, if the button has a fixed width and you want the space between the button and the form to be a fixed width, you just add them. The example code below would leave a 100px space between the 2 elements.
.button: {
position: absolute;
right: 0;
width: 20px;
}
.form {
position: absolute;
right: 120px;
}
On the other hand, if you want the space between the button and the form to be a percentage, you should do the following:
.button: {
position: absolute;
right: 0;
width: 20px;
}
.form {
margin-right: 20%;
position: absolute;
right: 20px;
}
How to place class small_icons in the center of tpt_box horizontally?
<div id="tpt_box" style="position: fixed;top:0px;left:2px;background-color: transparent;color:white;
z-index: 999; width: 100%;">
<div class="small_icons" style="">
<span class="count" id="mytimer" >0</span>
<span class="status" id="status" ></span>
<span class="refresh" id="refresh" onclick="window.location.reload();" ></span>
<span class="chat" id="chat" onclick="chatme();" ></span>
<span class="fullscreen" id="myfullscreen" onclick="enterFullScreen();"></span>
<span class="endcall_btn" id="disconnectcall"></span>
<!-- Contents -->
<span class="content_popup" id="content_popup" onclick="content_popup();" ></span>
</div>
</div>
There might be so many possible ways to achieve the expected result, the easiest way would be
Add style=" ...; text-align: center;" to the outer div.
Add style="display-inline: block;" to the inner div.
<div id="tpt_box" style="position: fixed;top:0px;left:2px;background-color: transparent; color: white; z-index: 999; width: 100%; text-align: center">
<div class="small_icons" style="display: inline-block;">
try this
#tpt_box{
height: 300px;
position: fixed;top:0px;left:2px;background-color: transparent;color:white;
z-index: 999; width: 100%;
}
.small_icons{
postion: absolute;
top: 50%;
left: 50%;
}