I've created the following banner below, using a triangle and rectangle in order to create the banner required over the image. However if the user zooms in on the browser these two containers have a gap between them. Any ideas how I could fix the two containers together or is there a better approach to writing this banner in general using CSS? Thanks in advance! :)
Code:
<html>
<style>
#triangle {
width: 0;
height: 0;
border-bottom: 150px solid red;
border-right: 50px solid transparent;
top: 8px;
position: relative;
}
#square {
background-color:red;
height:150px;
width:300px;
z-index: 3;
margin-left: 8px;
top: 8px;
position: relative;
color: white;
}
.align div {
display:inline-block;
float: left;
}
</style>
<div class="img">
<img src="IMAGE HERE" alt="test" width="800" height="150">
</div>
<div class="align">
<div id="square">
<h1>
Headline
</h1>
<p>
Some text here!
</p>
</div>
<div id="triangle"></div>
</div>
</html>
I did not see any white space between the rectangle and the triangle on my browser. However I cleaned your code so you can try this :
#triangle {
width: 0;
height: 0;
border-bottom: 150px solid red;
border-right: 50px solid transparent;
top: 8px;
position: relative;
}
#square {
background-color:red;
height:150px;
width:300px;
z-index: 3;
margin-left: 8px;
top: 8px;
position: relative;
color: white;
}
.align div{
display:inline-block;
float: left;
}
.align {
min-width:450px;
}
<div class="align">
<div id="square">
<h1>
Title
</h1>
<p>
Some text here.......
</p>
</div>
<div id="triangle"></div>
</div>
EDIT : Fixed the align at 400% zoom. Added min-width to .align .
This problem is browser dependent and not all browsers showing same problem. Chrome may show perfect but mozilla might show problem. Also, Use reset css to avoid any browser dependent css property.
Related
I tried this from this question: Text over image using CSS transitions.
It's working fine in both IE11 and Firefox Quantum and in both sites the animation/transition works perfectly but when I try to visualize it in Chrome the text that should appear beneath the image and eventually hover it goes to the bottom of the page. The console also shows me zero errors.
My question resumes in if it is a CSS absolute attribute problem or something else.
Here's my code:
.size {
height: 150px;
width: 200px;
border: solid 1px orange;
overflow: hidden;
position: relative
}
.pic:hover > .text {
height: 190px;
}
.text {
position: absolute;
width: 200px;
height: 50px;
bottom: -40px;
right: 0;
left: 0px;
transition: height 0.7s ease-out;
background-color: #fed136;
overflow: hidden;
border: solid 1px #fed136;
padding: 10px;
}
.text > h4 {
text-align: center;
}
.block {
margin: 10px 10px 50px 10px;
float: left;
}
<div class="row">
<div class="block">
<div class="pic animated zoomIn">
<img src="someimage.jpg" class="size" />
<div class="text">
<h4>Some Title</h4>
<p>Some text</p>
</div>
</div>
</div>
</div>
I'm using Bootstrap 3.3.5 and jQuery 2.1.4
I'm assuming that what you want is for the rollover text to be inside the image.
In this case I don't even know how it's working on IE11 or Firefox in your computer because here it fails on all browsers I have.
Your problem is basically that you are applying the CSS in the wrong element. Change .size to .pic in your CSS and it will get what you want.
Without position: relative inside .pic your position: absolute in .text is relative to the page itself (or the html element) and not the .pic element.
You also need overflow: hidden to hide any elements that go beyond the borders of the .pic element, thus hiding .text.
Added position relative & overflow as hidden to container div 'pic' and made height of div 'text' to zero. Its working fine in Chrome without any error and in IE too.
.size {
height: 150px;
width: 200px;
border: solid 1px orange;
overflow: hidden;
position:relative
}
.pic {
position:relative;
overflow:hidden;
}
.pic:hover > .text {
height: 190px;
}
.text {
position: absolute;
width: 200px;
height:0;
bottom: -40px;
right: 0;
left:0px;
transition: height 0.7s ease-out;
background-color: #fed136;
overflow: hidden;
border: solid 1px #fed136;
padding: 10px;
}
.text > h4 {
text-align:center;
}
.block {
margin:10px 10px 50px 10px;
float:left;
}
<div class="row">
<div class="block">
<div class="pic animated zoomIn">
<img src="someimage.jpg" class="size" />
<div class="text">
<h4>Some Title</h4>
<p>Some text</p>
</div>
</div>
</div>
</div>
You can add properties for diferent browsers. First clear your cash and see if the problem is realy only i Chrome. Then you can create something like that :
#media screen and (-webkit-min-device-pixel-ratio:0) {
.container {-chrome-:only(;
property:value;
);}
How do I place an image on top of a button with html and css?
<div>
<img src="photo.jpg">
<button>Text</button>
</div>
I guess it should be something like
div {
position: relative;
}
img {
position: absolute;
top: 10px;
}
but it acts a bit weird.
Is it possible to just have a normal div and then set the img to float on top of everything else in the div element?
I don't know what's your purpose exactly, if you want the image to take the whole line, make the button lay beneath, why don't set the CSS display attribute of the image to display:block;?
hello see the below one its simple with a few line code
<div style="position:relative;" >
<img src="http://www.industrydynamics.ca/images/skype_icon.png" width="100" height="100" >
<input type="button" name="" value="Button" style="position:absolute;width:80px;left:10px;top:120px;" >
</div>
You can use position: absolute with transform: translate() on img.
This calc(-100% - 1px) means
-100% or - height of element (img in this case) that you are performing transform on, so it will translate for its own height up on Y axis
-1px is for top border on div element.
div {
position: relative;
display: inline-block;
border: 1px solid black;
margin-top: 100px;
}
img {
position: absolute;
top: 0;
transform: translateY(calc(-100% - 1px));
}
<div>
<img src="http://placehold.it/50x50">
<button>Text</button>
</div>
Just to demonstrate if you have border of 5px then you should use -5px in calc.
div {
position: relative;
display: inline-block;
border: 5px solid black;
margin-top: 100px;
}
img {
position: absolute;
top: 0;
transform: translateY(calc(-100% - 5px));
}
<div>
<img src="http://placehold.it/50x50">
<button>Text</button>
</div>
#bottom{
background-repeat: repeat-x;
height:121px;
width: 984px;
margin-left: 20px;
margin-top: 13px;
}
#bottom .content{
width: 182px; /*328 co je 1/3 - 20margin left*/
height: 121px;
line-height: 20px;
margin-top: 0px;
margin-left: 9px;
margin-right:0px;
display:inline-block;
position:relative;
}
<div id="bottom">
<div class="content">
<img src="http://placehold.it/182x121"/>
<button>Text</button>
</div>
</div>
May be you are trying to achieve something like this.
.userIcon {
background: url('https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png') no-repeat;
height:20px;
width:20px;
background-size:20px;
top: 8px;
}
.left {
float:left;
}
.right {
float:right;
}
.clear{
clear:both;
}
.button{
padding:10px;
color: #FFF;
background-color: #0095ff;
border:1px solid #07c;
box-shadow: inset 0 1px 0 #66bfff;
}
.btnText{
margin:2px 0px 0px 10px;
}
<div>
<button class="button">
<span class="left userIcon"></span>
<span class="right btnText">Create user account</span>
<span class="clear"></span>
</button>
</div>
If you just want to make the image to come over the button, you can make the display as block
check the following snippet
div img{
display:block;
}
button{
text-align:center;
margin:40px;
padding:10px;
}
<div>
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png">
<button>Text</button>
</div>
Hope this helps
I'm struggling on a problem.
I have to put a border on element inside an image(I can't put an image due to reputation under 10) but that border should have the same width and height of that element.It should be responsive.I write the code based on bootstrap media screen resolution but when I reduced my page the wide becomes small at some specific screen resolution.That's the code.Thanks.
<div class="parent">
<img />
<span class="makeBorder"></span>
</div>
and the css:
.parent {
position: relative;
}
.makeBorder {
position: absolute;
top: 15px;
left: 23px;
border: 2px solid red;
width: 83%;
height: 83%;
}
What I finally do:
<div class="customClass"><img /></div>
.customClass{outline:1px solid red;outline-offset:-18px;}
Try this I hereby use a button on the image and it correctly work.Some of css property are no useful in this example denoted by //.
<html>
<head>
<style>
div{
background:url("1.jpg") no-repeat;
background-size:contain;//
height:500px;//height of div
width:500px;
}
button{
height:50px;
width:70px;
outline:red solid 4px;
margin:20px 20px;
}
</style>
</head>
<body>
<div>
<button >Hello</button>
</div>
</body>
</html>
<html>
<head>
<style>
div{
height:500px;
width:500px;
position:absolute;
}
button{
position:absolute;
height:50px;
width:70px;
outline:red solid 4px;
margin:20px 20px;
}
</style>
</head>
<body>
<div>
<img src="1.jpg">
</div>
<button >Hello</button>
</body>
</html>
use this code if you want to use 2 images then provide background image
z-index=-1;
use the above positioning property;
Here is the solution
HTML
<div class="parent">
<img src="/path/to/img/png" class="img-responsive" /> // Here I added a class img-responsive
<span class="makeBorder"></span>
</div>
CSS
.parent {
position: relative;
}
.makeBorder {
position: absolute;
top: 15%; // Here I use percentage instead of pixels
left: 23%; // Here I use percentage instead of pixels
border: 2px solid red;
width: 83%;
height: 83%;
}
NOTE: The point I want to make is use percentages instead of pixels so that your work/html become responsive !!
.parent {
position: relative;
}
.makeBorder {
position: absolute;
top: 81px;
left: 83px;
border: 2px solid red;
width: 55px;
height: 60px;
}
<div class="parent">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRBnmmAWOlqD-8ZjLvlkXoz0sSMOd7DiA5paUl7Ug2VBjXnnqKaHw" />
<span class="makeBorder"></span>
</div>
i suppose this is what you want to do
I have the following html:
<div class="article">
<img src="..." class="article-bg">
<h1 class="heading">Article Heading</h1>
<h2 class="author">Author Name</h2>
</div>
The article divs background image gets set dynamically, so setting the divs background in css is out, I have to use an image tag. I'm not too sure though how to use an img as the divs background, and at the same time have text over the img.
Also the height of the article div should always be 180px, I only have the following simple CSS:
.article {
height: 180px;
padding: 10px;
background-color: blue;
}
Thanks in advance for any tips!
You can do it by this way:
<div class="article">
<img src="http://www.bdembassyusa.org/uploads/images/beautiful-Bangladesh-23.jpg" class="article-bg">
<h1 class="heading">Article Heading</h1>
<h2 class="author">Author Name</h2>
</div>
Ad some more css below:
.article{
height: 180px;
padding: 10px;
background-color: blue;
overflow:hidden;
}
.article img{
position:absolute;
z-index:0;
width: 100%; // make the img fluid
height:200px;
margin:-10px;
object-fit: contain; // similar to `background-size: contain;`
}
.article h1,.article h2{
position:relative;
z-index:1;
}
Test it on jsfiddle:
http://jsfiddle.net/sarowerj/o9L72do0/
What you're looking for in z-index.
Using Z-index allows you to position one element above of the other. But do keep in mind that z-index does only work with positioned elements such as absolute or relative positioning.
You do specify a z-index as follows in the CSS:
.heading { position: absolute; top: 10px; left: 10px; z-index: 900; color: #fff; }
See this jsFiddle for a demo on how to use it:
You can use the CSS property object-fit for this.
However it is worth noting that this property has very little to no support on IE and Edge browser.
.conainer{
position: relative;
width: 500px;
height: 300px;
color: #ffffff;
overflow: hidden;
margin: auto;
}
.conainer img{
position: absolute;
top: 0;
left: 0;
transition: all 1s ease;
}
.conainer:hover img{
transform: scale(1.2);
}
.conainer .content{
position: relative;
z-index: 1;
}
.conainer .content h2{
color: white;
text-shadow: 3px 2px 10px #545454;
text-align: center;
}
<div class="conainer">
<div><img src="https://placeimg.com/640/480/nature" alt=""></div>
<div class="content">
<h2>Here's an example</h2>
</div>
</div>
You can use this code, to make <img> behave like a background image:
<img src="..." class="background-image" />
.background-image {
position: absolute;
z-index: -1;
min-width: 100%;
min-height: 100%;
left: 0;
top: 0;
pointer-events: none;
}
use
<div class="article" style="background: url(imageurl)">
</div>
I have a block <div> I want to define with precise pixel coordinates via position: absolute, but I want to position a heading above its parent <div>. If the font-size changes (or the user enlarges the text), the block <div> must stay in exactly the same place, but the heading may move up/down to accommodate the larger/smaller text.
Here is some sample code that, honestly, doesn't come close, but may help to illustrate the problem. It's just one of the variations I tried:
<!doctype html>
<html>
<head>
<title>Positioning Test</title>
<style>
#box1 { border: red 1px solid; }
#box1 h4 { margin: 0; color: blue }
.inner_box {
background: #aaf;
width: 400px;
height: 50px;
}
.target_pos {
position: absolute;
top: 50px;
left: 100px;
}
#marker {
width: 10px;
height: 10px;
background: red;
}
</style>
</head>
<body>
<div id="box1">
<h4>Heading</h4>
<div class="inner_box target_pos">
This is the <strong>inner_box</strong>.
</div>
</div>
<!-- Marks where the inner_box should begin -->
<div id="marker" class="target_pos"></div>
</body>
</html>
The idea is the blue inner_box must be positioned exactly at the marker (which it is), but the Heading text must be directly above it, and the red 1px border should enclose everything.
Here is how it looks in Firefox:
And here's how I would like it to look instead:
Since I have several of these boxes to work with, and their positions may change depending on viewport size, and the heading font/text will vary, I need a dynamic solution, here. I would prefer pure CSS3, but if JS is required, I could live with that.
I have created a fiddle for you that works for any font size, position and number of boxes.
http://jsfiddle.net/y73sqdr9/3/
Also
HTML
<div class="box target">
<h1>Headingggggggggg</h1>
<div class="inner">
This is the <strong>inner_box</strong>.
</div>
</div>
<div class="square target"></div>
<div class="box target2">
<h1>Headingggggggggg</h1>
<div class="inner">
This is the <strong>inner_box</strong>.
</div>
</div>
<div class="square target2"></div>
CSS
.box {
position: absolute;
border: 1px solid red;
border-top: none; }
.box h1 {
margin: -2em -1px -1px;
padding: .5em;
border: 1px solid red;
border-bottom: none;
line-height: 1; }
.box .inner {
padding: 1em;
background: #CCF; }
.square {
position: absolute;
width: 16px;
height: 16px;
background: red; }
.target { left: 100px; top: 150px; }
.target2 { left: 120px; top: 280px; }
I hope to have helped you!
How this is done:
The position id gives the position of the entire element.
The box class defines the width and height of the box and only has borders for bottom left and right leaving the top open because the header will be there
The header class height is set to zero as to not influence the box's position and is moved up 18 px
The h4 has borders on top left and right but not on the bottom so it will not block out the box
The html:
<!DOCTYPE html>
<html>
<head>
<title>Positioning Test</title>
<style>
.header{
position: relative;
bottom: 18px;
right:1px;
background: white;
height:0px;
}
.header h4{
width: 400px;
margin:0;
padding:0;
border: 1px red solid;
border-bottom:none;
}
.box{
border: 1px red solid;
border-top:none;
width: 400px;
height: 300px;
background: #aaf;
}
#position1 {
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<div id="position1" class="box">
<div class="header">
<h4>Title</h4>
</div>
<div class="inner">
I'm inside!
</div>
</div>
</body>
<html>
Firstly your body tags are are not wrapping your code.
Secondly your red box div should wrap all the other divs and be closed last. It closes early