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
Related
I have a web application that is going to become a app for smartphones . so it must be too Responsive .
and now my question :
I have a parent div and 4 Child .I want to get down last one till it make a visual like below with parent's bottom border :
-----( content )-----
[This is the Result I got For an specific Resolution . I want it to be for all Resolution :
should I add 'height' to parent for this or not?
there is a simple code . how can I make it like image I Attached for all Resolutions ?
<style>
#parent{
border-bottom : 2px solid;
}
#child{
pading:10px;
border-radius:30px;
}
</style>
and html like this :
<div id="parent">
<span style="">
Content
</span>
</div>
Do it like this:
.parent {
position: relative;
height: 200px;
width: 100%;
}
.content {
border: 2px solid tomato;
padding: 10px;
border-radius: 30px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: white
}
.line {
width: 100%;
position: absolute;
border-bottom: 2px solid tomato;
bottom: 20px;
}
<div class="parent">
<div class="line"></div>
<div class="content">
Content
</div>
</div>
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'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.
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
I have the code which got me three circles connected by two lines. Have a look here: JSFIDDLE
Here is my code:
HTML
<div class="form-group">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="circle" style="float:left;"></div>
<div id="horizontal" style="float:left;"></div>
<div class="circle" style="float: right;"></div>
<div id="horizontal" style="float: right;"></div>
<div class="circle"></div>
</div>
<div class="col-md-4"></div>
</div>
</div>
CSS
#horizontal
{
width: 230px;
border-bottom: 2px solid #CCCCCC;
padding-top: 6px;
}
.circle {
background: #CCCCCC;
width: 15px;
height: 15px;
border-radius: 50%;
border:1px solid #CCCCCC;
}
But this wont be responsive as i am setting width component to it. Is there anyway i can make it responsive using twitter bootstrap.
Using #media queries wont help for this case. Any help will be appreciated.
For info:
You could use a background-image or gradient too : DEMO
CSS revisited
.form-group {
background:linear-gradient(to top,#cccccc,#cccccc) repeat-x center;/* gradient can be replace for a 1pixel gray image */
background-size:2px 2px;
min-width:50px;/* keep those 3 15px boxes on one line */
}
.circle {
background: #CCCCCC;
width: 15px;
height: 15px;
border-radius: 50%;
border:1px solid #CCCCCC;
margin:auto;
}
& less HTML
<div class="form-group">
<div class="circle" style="float:left"></div>
<div class="circle" style="float: right;"></div>
<div class="circle"></div>
</div>
The simplest solution contains two divs and two pseudo elements. position: absolute keeps the circles over the parents border and position: relative keeps the circles positioned relative to the parent.
Have an example!
HTML
<div class="parent"><div class="child"></div></div>
CSS
* {
margin:0;
padding:0;
}
.parent {
margin:100px 0 0;
width:100%;
border-bottom:2px solid #CCC;
position:relative;
z-index:-1;
}
.parent:before,.parent:after,.child {
background:#CCC;
width:15px;
height:15px;
border-radius:50%;
border:1px solid #CCC;
position:absolute;
content:'';
top:-8px;
}
.parent:before {
left:0;
}
.parent:after {
right:0;
}
.child {
left:50%;
margin-left:-8px;
}
Try this:
html:
<div class="responsive-circle"><i></i></div>
css:
.responsive-circle {
height: 2px;
background-color: #CCC;
overflow: visible;
position: relative;
}
.responsive-circle:before,
.responsive-circle:after,
.responsive-circle > i {
background: #CCCCCC;
width: 15px;
height: 15px;
border-radius: 50%;
border:1px solid #CCCCCC;
position: absolute;
content: "";
top: -7px;
}
.responsive-circle:after {
right: 0;
}
.responsive-circle > i {
left: 50%;
left: calc(50% - 9px);
}
demo: http://jsfiddle.net/m787ydjz/