I have a problem, I don't want the image / logo to belong to a certain section, but rather to place it in the middle of the two sections, how can I do that?
<body>
<section class="parent" style="height: 400px; background-color: blue">
<div class="boxparent" style=" top: 10px;">
</div>
</section>
<img src="https://place-hold.it/100x100.jpg/666/fff/000" style="position: absolute;background-color: #254543;z-index: 1; left: 25%; ">
<section class="parent" style="height: 400px; background-color: yellow;">
<div class="boxparent">
</div>
</section>
</body>
A more accurate method to bring it to the exact center. Wrap both of your parent sections inside a wrapper so that the absolute image can be relative to the wrapper. This fixes the image to be inside the wrapper always. Then for the img you can use calc to calculate the left and top positions of the image. With this, the image will be at the 50% distance from both top and left to align it to center. - 50px is here because the width of the given image is 100x100 which means you need to deduct 50px from both top and left to align it to the exact center.
Checkout the snippet below.
.parent-wrapper {
position: relative;
}
img {
position: absolute;
background-color: red;
z-index: 1;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
.parent-a {
height: 100px;
background-color: blue;
}
.parent-b {
height: 100px;
background-color: yellow;
}
<body>
<div class="parent-wrapper">
<section class="parent-a"></section>
<img src="https://place-hold.it/100x100.jpg/666/fff/000">
<section class="parent-b"></section>
</div>
</body>
Enjoy :)
If you want vertically center of both section
top: 350px; // Since 400px is height of first section and 100px of image (400 - 50)px
if you also want horizontally and vertically center of both section
left: 50%;
transform: translate(-50%);
img {
position: absolute;
top: 350px;
left: 50%;
transform: translate(-50%);
}
<section class="parent" style="height: 400px; background-color: blue">
<div class="boxparent" style=" top: 10px;">
</div>
</section>
<img src="https://place-hold.it/100x100.jpg/666/fff/000" style="position: absolute;background-color: #254543;z-index: 1;">
<section class="parent" style="height: 400px; background-color: yellow;">
<div class="boxparent">
</div>
</section>
You can simply place your image in upper section then apply just few css styles to to your image. I recommend to use external stylesheet for styling. However you are using inline styles then do it as follows;
<body>
<section class="parent" style="height: 400px; background-color: blue">
<div class="boxparent" style=" top: 10px;">
</div>
<img src="https://place-hold.it/100x100.jpg/666/fff/000" style="background-color: #254543; position: relative;top: 350px;left: 45%;">
</section>
<section class="parent" style="height: 400px; background-color: yellow;">
<div class="boxparent">
</div>
</section>
Related
This is how it looks so far:
And this is what I need to achieve:
<section class="section sub-masthead--TC2"></section>
<section class="section qualifiers--Q1"></section>
The first <section class=sub-masthead--TC2> element contains the image in some nested divs. With the design above is very clear what I need. I already set position: relative to both sections and z-index: 1 to the upper section and z-index: 3 to the down one but it doesn't work.
This is the whole HTML for the section that contains the image:
<section class="section sub-masthead--TC2">
<div class="sub-masthead__wrapper">
<div class="sub-masthead__tiles">
<div class="sub-masthead-item">
<div class="sub-masthead-item__content">
<div class="sub-masthead-item__copy">
<p><!-- text --></p>
</div>
</div>
<div class="sub-masthead-item__image-container">
<!-- IMAGE HERE -->
<img class="sub-masthead-item__image" src="assets/images/bg_phone-unique.png" alt="" role="img">
</div>
</div>
</div>
</div>
</section>
Here is my try. I have created an example for you to follow along.
First add position: relative to the parent element of both sections or if there is none then the body.
Then add position absolute to image section and manipulate top values.
.sub-masthead--TC2 {
position: absolute;
top: 40px;
right: 0;
}
Result:
.wrapperDiv {
position: relative;
}
.sub-masthead--TC2 {
width: 100%;
height: 100px;
background-color: tomato;
}
.qualifiers--Q1{
width: 300px;
height: 300px;
position: absolute;
top: 40px;
right: 0;
border: 1px solid #000;
padding: 20px;
}
img{
width: 100%;
height: auto;
}
<div class ="wrapperDiv">
<section class="section sub-masthead--TC2"></section>
<section class="section qualifiers--Q1">
<img src="https://placeimg.com/640/480/any" />
</section>
</div>
Using Bootstrap3, I'm trying to position my div beside some text.
CODE:
<h1>Text</h1>
<div style="position: relative; display: inline-block">
<div style="width: 40px; position: absolute">
<div style="padding-top: 100%;overflow: hidden; background-color: darkblue;">
</div>
</div>
<div style="width: 30px; position: absolute">
<div style="padding-top: 100%; overflow: hidden; background-color: #f8ff15;">
</div>
</div>
</div>
codepen: https://codepen.io/anon/pen/ddORed
I just want to use this div like a span icon.
So moreover, I wonder how to make my div's height be responsive to the height of text or text typhograpy .
How to do it?
Just put that DIV - but better as a SPAN - (which you already correctly defined as an inline-block) INTO the h1 tag (BTW: no h1 inside p!) and add vertical-align:top;, so it aligns with the upper border of the text line:
<h1>Text
<span style="position: relative; display: inline-block;vertical-align:top;">
<div style="width: 40px; position: absolute">
<div style="padding-top: 100%;overflow: hidden; background-color: darkblue;">
</div>
</div>
<div style="width: 30px; position: absolute">
<div style="padding-top: 100%; overflow: hidden; background-color: #f8ff15;">
</div>
</div>
</span>
</h1>
https://codepen.io/anon/pen/yvVogM
Not exactly sure what you want to do by you can do this by using linear-gradient as background and no need to use all this markup:
h1 {
display: inline-block;
padding-right: 50px;
background:
linear-gradient(to right, #f8ff15, #f8ff15) calc(100% - 10px) 0/ 30px calc(100% - 10px) no-repeat,
linear-gradient(to right, darkblue, darkblue) 100% 0/ 40px 100% no-repeat;
}
<h1>Text</h1>
<br>
<h1>another<br> text</h1>
You can just move your divs before you text and set the position to absolute.
https://codepen.io/anon/pen/MQboRj
<div style="position: absolute; display: inline-block">
<div style="width: 40px; position: absolute">
<div style="padding-top: 100%;overflow: hidden; background-color: darkblue;">
</div>
</div>
<div style="width: 30px; position: absolute">
<div style="padding-top: 100%; overflow: hidden; background-color: #f8ff15;">
</div>
</div>
</div><h1 style="padding-left:50px;">Here is what I want to position my blue and yellow square. And also I hope my square's height be equal to Text's height</h1></div>
I am using bootstrap and the page width is NOT fixed.
I would like to display a contact form div (grey box below) like this:
So the grey contact form is sort of floating over the blue and white divs.
Thanks!
Here's what I have been trying to do: http://jsfiddle.net/w69j4xam/
<div class="header">
Header
</div>
<div class="content">
<div class="bluediv">
Some text here
</div>
<div class="whitediv">
Some more text here
</div>
<div class="contactform">
Contact Form<br/><br/><br/><br/>
</div>
</div>
body{
padding: 20px;
}
.header{
height: 50px;
background-color: green;
}
.content{}
.bluediv{
height: 150px;
background-color: #AFEEEE;
}
.whitediv{
height: 180px;
background-color: #FFF;
}
.contactform{
background-color: grey;
width: 100px;
position: absolute;
}
In terms of your jfiddle example, all you need to add is a right and a top.
.contactform{
right:50px;
top:100px;
background-color: grey;
width: 100px;
position: absolute;
}
http://jsfiddle.net/w69j4xam/2/
Position the outer div however you want, then position the inner divs using absolute. They'll all stack up.
<style type="text/css">
.inner {
position: absolute;
}
</style>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
</div>
Is there a plugin to do this or method to do this?
See, I have this site and if you scroll to the bottom, you'll see a map. What I want to do is to place a small box on top of the map, just like an overlay that will contain contact information.
Edit: Box will be on top of the watery part. :)
You can try this:
<div class="section" id="contact">
<div style="width:100px; height:200px; background:#ccc;z-index:999999;position:absolute;">test</div>
</div>
Add a div after your section div as my above code...and position set as you want from top and left..(eg: Add this - top:"you need"; left:"you need";)
Good luck
Something like this (without using inline styles obviously):
<div id="googleMapContainer" style="height: 400px; position: relative;">
<div id="overlay" style="height: 300px; width: 25%; max-width: 340px; position: absolute; top: 50px; left: 0px; background-color: rgba(0, 0, 0, 0.7); box-sizing: border-box; padding: 20px; color: #ffffff;">
<p><a style="color: #f1f1f1;">Here's a link in your overlay</a></p>
</div>
<div class="google_map" id="map_canvas" style="width: 100%; height: 400px; margin: 0;"></div>
</div>
I have created the following
http://jsfiddle.net/fcW66/1/
CSS
.div_wrapper {
float: left;
width: 100px;
background: 3333;
margin: 15px;
background: #cacaca;
z-index: 1;
}
.div_two {
display: none;
height: 120px;
background: #444;
z-index: 999;
}
.div_one:hover .div_two {
display: block;
}
HTML
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<br style="clear:both;" />
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
When you hover over it shows the description, but it pushes the other divs further. I have tried giving the div_wrapper a fixed width, which fixes that problem but when the div2 appears it shows under the next div that is under it. I tried adding a z-index and it did not change anything. I need the div_two to show over the top of the divs that are below it and not change the layout.
If you want white-space in the location of the object BEFORE hover, you would use visibility, not display.
visibility:hidden, instead of display:none
and visibility:visible, instead of dislpay:block
You should use position: absolute to position this div. Absolutely positioned elements do not take up space within their container preventing them from pushing other elements around.
In most cases such as this, you will want to set the parent element to position: relative as well, so that the absolute element can be positioned relative to its parent instead of the whole document.
http://jsfiddle.net/fcW66/7/
.div_one{
position: relative;
}
.div_two {
/* ... */
position: absolute;
width: 100%;
}
You can use position: absolute; to accomplish this.
Here's a fiddle http://jsfiddle.net/QbAzY/
Add position:absolute; and width: 100px; to your .div_two rules
.div_two {
display: none;
height: 120px;
background: #444;
z-index: 999;
position:absolute;
width: 100px;
}
jsFiddle example
z-index only applies to positioned elements, so by setting position:absolute on your .div_two elements it not only allows the z-index to work, but it takes those elements out of the normal flow of the document and won't push the other divs down. Note that you also have two background rules on your .div_wrapper element, and a z-index rule that isn't doing anything.