This is what I have:
I want it to be:
Code snippet:
.test0 {
float: left;
width: 0%;
height: 100px;
}
<div class="test0">
<img src="../arrow.png" height="30px" width="100px">
</div>
Really not able to fix this all day.
You can use positioning to achieve this. You need to make the parent div relative and the child have a position of absolute.
See Codepen
CSS
.test0 {
position: relative;
float: left;
width: 0%;
height: 100px;
}
.test0 img {
position: absolute;
left: -20px;
}
Related
I'm building a website with HTML and CSS. I'm trying to make 4 images contained in a white rectangle, and when those images get clicked it takes you to another part of the page.
Unfortunately, only the last of the 4 images actually takes you to the other part of the page. The other 3 can't even be clicked on. If I delete the last image and the div class it's contained in, the "new" last picture will now work even though it did not previously work before.
I'm pretty sure this is a CSS problem, as when I commented out the CSS code of the rectangle div all the images were working links (though they were jumbled up as the CSS code for their parent class was commented out).
This is the CSS code of the rectangle class and the images contained in it:
#rectangle {
background: white;
width: 1000px;
height: 500px;
position: absolute;
left: 500px;
top: 200px;
text-align: center;
}
#rectangle h1 {
font-size: 50px;
position: relative;
top: 10px;
}
#rectangle .hardware {
position: relative;
top: 50px;
right: 340px;
}
#rectangle .software {
position: relative;
bottom: 200px;
right: 100px;
}
#rectangle .config {
position: relative;
bottom: 450px;
left: 120px;
}
#rectangle .code {
position: relative;
bottom: 700px;
left: 350px;
}
<div id="rectangle">
<h1>Welcome to the docs.</h1>
<h3>Learn how to build your own Olympia</h3>
<div class="hardware">
<img src="../assets/img/hardware.png" height="200px" width="200px" />
<p><b>Hardware</b></p>
</div>
<div class="software">
<img src="../assets/img/software.png" height="200px" width="200px" />
<p><b>Software</b></p>
</div>
<div class="config">
<img src="../assets/img/gear.png" height="200px" width="200px" />
<p><b>Config</b></p>
</div>
<div class="code">
<img src="../assets/img/code.png" height="200px" width="200px" />
<p><b>Code</b></p>
</div>
</div>
Any advice? Thank you!
change
position:relative;
with
display:inline-block;
like this:
#rectangle .software {
/* position: relative;*/
display: inline-block;
bottom: 200px;
right: 100px;
}
#rectangle .config {
/* position: relative;*/
display: inline-block;
bottom: 450px;
left: 120px;
}
#rectangle .code {
/* position: relative;*/
display: inline-block;
bottom: 700px;
left: 350px;
}
Just remove text-align: center; property from #rectangle
This happens because the last div covers the others. Therefore when you hover the other boxes, you are actually hovering the div of the last box.
Usually, using the dev tools in google chrome you can see what's happening actually.
Right click -> Inspect
I'm trying to create something in JQuery Mobile, however I need to be able to position a button from the center. Right now, the button is positioned from the top-left corner, and as such if I resize the window, everything is horribly off-center.
<body>
<button>Button</button>
<div />
</body>
div {
position: absolute;
width: 200px;
height: 200px;
background-color: black;
}
button {
position: absolute;
top: 200px;
left: 200px;
}
Fiddle: http://jsfiddle.net/chpt3x1v/4/
I couldn't get JQM working in JSFiddle (didn't know how without it showing loads of errors), so I just used a regular button, but the same premise applies.
TWO IMAGES:
As you can see, it is completely off-center.
UPDATED ANSWER:
You need to give the button a set width and height, and then set the top margin to negative one half the height, and the left margin to negative half the width:
Updated DEMO
<div class="thediv"></div>
<button data-role="none" class="theButton">Button</button>
.thediv {
position: absolute;
width: 200px;
height: 200px;
background-color: black;
}
.theButton {
position: fixed; /* or absolute */
top: 200px;
left: 200px;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
}
ORIGINAL ANSWER:
You can use fixed positioning and a negative margin to keep it centered:
<div data-role="page" id="page1">
<div role="main" class="ui-content">
<div class="centered"><button>Button</button></div>
</div>
</div>
.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
background-color: black;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
}
.centered button {
margin: 0 !important;
height: 100%;
}
Updated FIDDLE
Firstly your code doesn't have an opening tag. Secondly, you need to have the parent element, i.e. the div, positioned as relative.
Third, you've positioned your button to the very edge of the div by using the same dimensions. Try:
<body>
<div>
<button>Button</button>
<div />
</body>
div {
position: relative;
width: 200px;
height: 200px;
background-color: black;
}
button {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
}
The z-index property will allow the button to overlay the div.
i want Responsive div inside responsive image as below
any help would be appreciated.
i am not good at css:(
If someone wants to do this without it been responsive it can be done like this.
Make the screen a background image and then use a relative positioned iframe.
i added a YouTube iframe to the screen in the demo.
Demo
.outer {
background-image: url('http://northwestpassageapp.com/wp-content/themes/relish_theme/img/ipad_border.png');
width:800px;
height:596px;
}
.inner {
position: relative;
background-color:;
left: 120px;
top: 68px;
width:550px;
height:405px;
}
............
<div class="outer"><iframe class="inner"></iframe>
you could even use a 2 or 3px border-radius to match the image.
demo - http://jsfiddle.net/ey9ykhwd/3/
use percentage for placing the content div parent should be positioned relative
.content {
position: absolute;
width: 68.7%;
height: 67.6%;
background: Red;
left: 15%;
top: 11%;
}
.cont {
position: relative;
}
img {
width: 100%;
}
.content {
position: absolute;
width: 68.7%;
height: 67.6%;
background: Red;
left: 15%;
top: 11%;
}
}
<div class="cont">
<img src="http://northwestpassageapp.com/wp-content/themes/relish_theme/img/ipad_border.png" />
<div class="content">content here</div>
</div>
I need an image to be resized to fit in inside a div. This div must, necessarely, no matter what, be an position: absolute; div. Apart from the image have 100% from its greatest dimension, it should be centered in the other way.
I could resize to fit it, but can't center. I tried to make it inline and use vertical-align, but it didn't work.
Since code worth more than words, check my fiddle example.
This is the code from the jsfiddle:
CSS:
.relative {
width: 400px;
height: 400px;
position: relative;
<!-- Next is not important, only to display better -->
display: block;
background-color: green;
border: 3px solid yellow;
margin-bottom: 10px;
}
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
HTML:
<div class="relative">
<div class="absolute">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/>
</div>
</div>
<div class="relative">
<div class="absolute">
<img src="http://us.123rf.com/400wm/400/400/pashok/pashok1101/pashok110100126/8578310-vertical-shot-of-cute-red-cat.jpg"/>
</div>
</div>
you may put the image to background instead of an img tag.
<div class="absolute">
<img src="//upload.wikimedia.org/wikipedia/commons/5/52/Spacer.gif">
</div>
.absolute {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
however, if you can set a fixed height for the div, you can use this:
.absolute { line-height:360px; }
.absolute img { vertical-align:middle; }
Only for semi-new browsers:
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Absolutely position all the things!
transform still needs browser prefixes I hear. -webkit- works for me.
http://jsfiddle.net/rudiedirkx/G9Z7U/1/
Maybe I did not understand the question…
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
line-height:350px; //new
}
img {
position:relative;
display:inline-block; // new
vertical-align:middle; // new
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
I am looking for a pure CSS way of having a container div automatically adjust it's width and height based on what content is inside it, for the purposes of centring the aforementioned content within another div.
I have tried setting the height and width to auto, but that doesn't help.
Any help you can offer would be much appreciated.
Thanks in advance.
The CSS:
.imageThumbnails {
position: relative;
margin: auto;
height: auto;
width: auto;
}
.imageThumbnailOne {
position: relative;
float: left;
height: 78px;
width: 91px;
background-image: url("thumbnail1.png");
}
.imageThumbnailTwo {
position: relative;
float: left;
height: 80px;
width: 76px;
background-image: url("thumbnail2.png");
margin-left: 29px;
}
.imageThumbnailThree {
position: relative;
float: left;
height: 76px;
width: 89px;
background-image: url("thumbnail3.png");
margin-left: 29px;
}
The HTML:
<div class="imageThumbnailsContainer">
<div class="imageThumbnails">
<div class="thumbnailOne"><a></a></div>
<div class="thumbnailTwo"><a></a></div>
<div class="thumbnailThree"><a></a></div>
</div>
</div>
You need to clear the .imageThumbnails div. You can do that with .imageThumbnails { overflow: hidden; } You can also remove the position: relative from everything.