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>
Related
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>
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'm trying to get the first initial first section to take up the whole height of the page.
I've tried this question here: Making a div fit the initial screen but I cannot get it to work, everything just overlaps.
My nav bar is centered on the first section and will stick to the top when the page is scrolled, I just need the first part to take up the whole page.
Like this:
Spotify also do it on their website
My HTML:
Title
<body>
<span id="top"></span>
<div id="floater"></div>
<div id="centered">
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="navbar">
<a class="navbar" href="#about">about</a> <a class="navbar" href="#portfolio">portfolio</a> <a class="navbar" href="#top"><img src="/media/nav/logo.png" alt="Logo" /></a> <a class="navbar" href="#social">social</a> <a class="navbar" href="#contact">contact</a>
</div>
</div>
</div>
</div>
<div>
<a>Random Text here, blah blah blah!</a>
</div>
</body>
My CSS
html,body{
border: 0;
margin: 0;
padding: 0;
height:100%;
width:100%;
}
#floater {
position:relative; float:left;
height:50%; margin-bottom:-25px;
width:1px;
}
#centered {
position:relative; clear:left;
height:50px;
margin:0 auto;
}
#sticky_navigation_wrapper {
width:100%; height:50px;
}
#sticky_navigation {
width:100%; height:50px; background-color:rgb(241, 241, 241); text-align:center; -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999;
}
I think the best solution, which I use on sites like this, would be to wrap each section in a containing div (or , if all your target browsers support it or you don't mind using a html5 shiv).
like so
<div class="section">
<p>Hello World</p>
</div>
<div class="section">
<p>Hello World</p>
</div>
You can then give that div height: 100% and width: 100% like...
.section{
height: 100%;
width: 100%;
}
You can see it all put together in this jsfiddle: http://jsfiddle.net/Ucetz/
I do this to my webpages all the time. Just add a containing div with the position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; style. That should give you a shade like area to cover the whole webpage. You can then put whatever you want inside that div.
To center vertically, do a little math and use a div. Thus, if the height of your div is going to be 400px then make the position: fixed again with the same specifications above, except change the top to 50% and then margin-top a negative value to half of the height. So, in this case it would be margin-top: -200px;
<div id="container" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;">
<div id="otherstuff" style="position: fixed; top: 50%; left: 0px; width: 100%; height: 400px; margin-top: -200px;"> I am a verticall centered div! :)
</div>
</div>
and then for your navigation bar after you get passed the first layer, put that on position: fixed; as well, just make sure it is above the code given above. That way, it appears on the bottom.
<div style="position: fixed; top: 0px; left: 0px; height: 70px; width: 100%;">Your navigation content</div>
<!-- THE CODE GIVEN ABOVE SHOULD GO HERE -->
Be sure to include height: 100% in the style for the HTML and BODY tags. Then set the height of the sections.
Use Viewport Height.
Set the height of your div (also works with section) to whatever percentage you want your div to fill up the screen.
.section_div {
/* fill up 85% of screen heigth */
height: 85vh;
/* fill up 100% of screen width */
width: 100vw;
/* you can also use min-height instead of height. */
}
Firstly, I would like to show you a image(made in paint).
Okay "current" is what I have now. I want to place a box over the image to the right, with black background, and then have text inside this box.
I tried myself using z-index and so, but without any success. Here's what I tried:
<div> <!-- start div for image -->
<img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image -->
</div> <!-- end div -->
<div style="z-index: 1; width: 300px; background: #000; position: relative;">
<div style="margin: auto;">
text text text
</div>
</div>
but this didnt turn out any good. How can i do this?
Something like this?
http://jsfiddle.net/QGMPB/1/
HTML:
<div id="wrap">
<img src="http://jsfiddle.net/img/logo.png" />
<div id="text">text</div>
</div>
CSS
#wrap {
position:relative; /* make this relative to have the inner div absolute without breaking out */
width: 200px; /* fix the width or else it'll be the entire page's width */
background: silver;
border: 1px solid grey
}
#text {
position: absolute;
width: 40px;
right: 0;
top: 0;
bottom: 0;
background: black;
color:white
}
Your code is messy and overcomplicated for such a simple issue, you can simplify it a lot by only using two elements. The simpler the better.
Please specify if you need the <img> tag.
HTML:
<div id="golf_course">
<div class="text_wrap_right">
text text text text
</div>
</div>
CSS:
#golf_course
{
background-image: url(http://ww1.prweb.com/prfiles/2006/12/13/491548/ThaiGolfCourse.JPG);
background-position: 0 -200px;
width: 900px;
height: 259px;
border: 5px solid #000;
}
.text_wrap_right
{
width: 300px;
height: 100%;
float: right;
background: #000;
color: #fff;
border-left: 2px solid #000;
}
And an example for you here: http://jsfiddle.net/Kyle_Sevenoaks/WQT6G/
I prefer a simple and more semantic HTML5 solution
HTML:
<figure>
<img src="..." />
<figcaption>text text text ... </figcaption>
</figure>
CSS:
figure {
position : relative;
z-index : 1;
width : 860px;
height : 240px;
}
figcaption {
position : absolute;
z-index : 1;
top : 0;
right : 0;
width : 200px;
height : 240px;
background : #000;
}
Use position:absolute to overlap 2 divs. You have to play with left and top properties to adjust its position.
<div style="position:absolute"> <!-- start div for image -->
<img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image -->
</div> <!-- end div -->
<div style="position:absolute; z-index: 1; width: 300px; background: #000; position: relative; left:3%; top:85%">
<div style="margin: auto;">text text text</div>
</div>
You need to put that text div inside the div that contains the image.. then set top and right to 0px and position absolute. take some hints from here: http://jsfiddle.net/U25XQ/1/
The following example shows how this can be done, please let me know if it is not what you mean: Example.
z-index only works for positioned elements (position: (absolute|fixed|relative)). So you have to position your elements. For example
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; z-index: 0; height: 100px; width: 300px;">
<img src="http://w3schools.com/images/w3cert.gif" />
</div>
<div style="z-index: 1; width: 200px; background: #000; position: absolute; left: 100px; color: #fff;">
<div style="margin: auto;">text text text</div>
</div>
</div>
should work.
For writing text over image you put image in background style and alt text like this-
<img scr="" alt="text"/>
<style>
.img{background-image:url('IMAGE_URL'); }
</style>
I have the following code:
<HTML>
<head>
<style>div{border:dashed 1px silver}</style>
</head>
<BODY style="background: #fff;">
<div style="position: absolute; background: #0f0; width: 256px; height: 96px; overflow: scroll;">
<DIV style=" display: inline-block;position: relative;top: 64px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #f00;"></DIV>
<DIV style="float: left">First</DIV>
<div style="clear: both;"></div></DIV>
<DIV style=" display: inline-block;position: relative;top: 96px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #0f0;"></DIV>
<DIV style="float: left">Second</DIV><div style="clear: both;"></div></DIV>
</div>
</BODY>
</HTML>
The second div isn't positioned on the 32 x position unless I remove the display: inline-block property, which I need. Is there a way around this?
Edit: it seems to work if I remove display: inline-block, but then the scrollbars will appear horizontally (as the div takes some invisible space).
You should use the way position:absolute elements are displayed when inside position:relative.
In addition, to avoid the horizontal scroll bar, use overflow-y.
Working example: http://jsbin.com/uveni3
When using "inline-block" properties, you should always start your HTML opening tag in a DTD format. placing one there should resolve this.