Good afternoon guys,
I'm working on a small project for my job and they have asked me to make a map and pinpoint specific cities. I have finished it on my pc and I'm trying to make sure that when I load it up onto another pc (such as their laptops) that the points stay in place. I hope this is enough information for what I am trying to do as this is my first post. Any and all help would be greatly appreciated.
The basics of the code is:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>States/Cities</title>
</head>
<style media="screen">
html,body{
background-color: #AADAFE;
}
.Vegasdot{
height: 10px;
width: 10px;
border-radius: 50%;
background-color: black;
top: 246px;
left: 306px;
position: absolute;
z-index: 2;
}
.SaltLakedot{
height: 10px;
width: 10px;
border-radius: 50%;
background-color: black;
top: 88px;
left: 395px;
position: absolute;
z-index: 2;
}
.Phoenixdot{
height: 10px;
width: 10px;
border-radius: 50%;
background-color: black;
top: 333px;
left: 386px;
position: absolute;
z-index: 2;
}
.statesMap{
padding-top:3%;
padding-left:12%;
position: absolute;
z-index: 1;
}
<img src="StatesGIMP.png" alt="States Map"
class="statesMap" usemap="#States">
<span class="Vegasdot"></span>
<span class="SaltLakedot"></span>
<span class="Phoenixdot"></span>
There are a couple of things going on here.
First, position: absolute; is relative to its parent container. so if you wrap your image and dots in a wrapper div, you can position your dots relative to this .wrapper. This .wrapper needs position: relative; in order to function as the relative parent to position: absolute; children
Second, you will need to position your dots with percentages so that they scale with the image
Third, we apply a transform: translate(-50%,-50%) which is relative to the height and width of itself. This will make it so that the center of the dot is what we are positioning, so that when the image scales the center of the dot stays the same
Also, we can DRY up your css by moving the common rules into a .dot class
example: https://codepen.io/tylerfowle/pen/MrwreX
HTML:
<div class="wrapper">
<img src="http://ontheworldmap.com/usa/usa-states-map.jpg" alt="States Map"
class="statesMap" usemap="#States">
<span class="Vegasdot dot"></span>
<span class="SaltLakedot dot"></span>
<span class="Phoenixdot dot"></span>
</div>
CSS:
html,body{
background-color: #AADAFE;
}
.wrapper {
position: relative;
}
.dot {
height: 10px;
width: 10px;
border-radius: 50%;
background: black;
z-index: 2;
position: absolute;
transform: translate(-50%,-50%);
}
.Vegasdot{
top: 48%;
left: 17%;
}
.SaltLakedot{
top: 37%;
left: 24.5%;
}
.Phoenixdot{
top: 60%;
left: 22%;
}
.statesMap{
width: 100%;
z-index: 1;
}
Related
I have a banner div element that has a picture overlapping it. I want to have my text not be overlapped by the image, but am having issues.
Example of the problem:
Here is what my html looks like:
.header-banner-container {
background: #221E1F;
position: relative;
width: 100%;
height: 11vh;
top: 38px;
z-index: -1;
}
.header-logo {
position: absolute;
padding-left: 3px;
height: 89px;
width: 92px;
}
.banner-text {
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: white;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<img class="header-logo img" src="../../../assets/CatPicture.png">
<div class="container-fluid header-banner-container">
<span class="banner-text">There is a cat above me</span>
</div>
My questions are:
Should the image be in the container-fluid div, as a best practice? Or is having it outside the banner as I do currently, correct?
How can I get the text to not be overlapped by the image?
Thanks for any advice for the questions, and any other advice you may have!
If the image is a logo or something that belongs in the header, then yes, you should keep the image in the header container, and the text too. You could resolve the issue of the overlapping text easily by simply increasing the vh of the container div and moving the banner-text top attribute down slightly this way.
However, if the case is other than above, and you want to keep the text in that position but make it visible, then you could move the banner text out of the text and position it absolutely from the top. As-is, adjusting the z-index to 0 (e.g.) while it is still within the container div would have no effect as the container div's z-index of -1 would take precedence, and if adjusted higher, would overlap the image also.
Hope this helps
.header-banner-container {
background: #221E1F;
position: relative;
width: 100%;
height: 11vh;
top: 38px;
z-index: -1;
}
.header-logo {
position: absolute;
padding-left: 3px;
height: 89px;
width: 92px;
}
.banner-text {
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: white;
position: absolute;
transform: translateY(-50%);
top: 70px;
z-index: 0;
}
<img class="header-logo img" src="http://ssl.gstatic.com/images/icons/gplus-32.png">
<div class="container-fluid header-banner-container">
</div>
<span class="banner-text">There is a cat above me</span>
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Example</title>
<style>
.header-banner-container {
background: #221E1F;
position: relative;
width: 100%;
height: 11vh;
top: 38px;
z-index: -1;
}
.header-logo {
position: absolute;
padding-left: 3px;
height: 89px;
width: 92px;
border-radius: 100%;
}
.banner-text {
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: white;
position: absolute;
transform: translateY(-50%);
top: 49px;
z-index: 0;
left: 50px;
text-shadow: 0px 3px 3px black;
}
</style>
</head>
<body>
<img class="header-logo img" src="https://image.freepik.com/free-vector/geometric-background_23-2148064464.jpg">
<div class="container-fluid header-banner-container">
</div>
<span class="banner-text">There is a cat above me</span>
</body>
</html>
This question already has answers here:
How to center a "position: absolute" element
(31 answers)
Closed 4 years ago.
I am trying to position my button in the center left:50% top:50% but it ends up more than 50%. its a video background i am trying to do with overlay. i have the video tag in a is set to position: absolute; other text are position fine until when it comes to the button. i am thinking it's probably the way i position the video background but i'm not sure.i could really use some help on this thanks.
CSS
/*----Global----*/
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
html,body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.fullscreen-video-wrap{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
opacity: 0.5;
}
.travel{
position: absolute;
top: 10px;
left: 16px;
z-index: -1;
font-size:18px;
font-family: Raleway;
}
.blue{
color: rgb(0, 119, 255);
}
.motto{
position: absolute;
top: 27px;
left: 16px;
z-index: -1;
font-size:14px;
font-family: Abril Fatface;
}
.destination{
position: absolute;
text-align: center;
top: 50%;
left: 0;
width: 100%;
z-index: -1;
font-family: Raleway;
font-size: 18px;
}
.quotes{
position: absolute;
text-align: center;
top:55%;
left: 0
width:100%;
z-index: -1;
font-family:Raleway;
font-size: 14px;
}
.button{
position: absolute;
text-align: center;
top: 60%;
left: 50%;
z-index: -1;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Traveling.com</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="New.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
#import url('https://fonts.googleapis.com/css?family=Raleway');
#import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
</style>
<body>
<div class="fullscreen-video-wrap">
<video autoplay muted loop >
<source src="videos/sunrise_01.mp4" type="video/mp4">
</video>
</div>
<div class="header-content"></div>
<h1 class="travel">Traveling<span class="blue">.com</span></h1>
<p class="motto"><i>Travel <span class="blue">Beautifully</span></i></p>
<h4 class="destination">Find your destination</h4>
<p class="quotes">“A lie can travel half way around the world while the truth is putting on its shoes.”
― Mark Twain</p>
<button class="button">Sign up</button>
</body>
</html>
You can use a transform to translate the element -50%, this should work
.button{
position: absolute;
text-align: center;
top: 60%;
left: 50%;
transform: translateX(-50%); /*Added*/
z-index: -1;
}
Let me know if that help!
Edit
When you give to an element with position: absolute; a left: 50% it's never gonna be centered really, it will push him to the 50% of the father element, look at this picture
What I did adding transform: translateX(-50%); is move the element over itself -50%
Hope this helps you to understand, here you can find more information about translateX() function, and you can read about the transform property too.
everybody
I have problem with responsive map (this is only image not real map). I try to stick div element on this map for example: my mark(div) is on Paris but when I resize window mark is in other country :D I want stick this element for this one country. I try like this:
HTML:
<div class="container-fluid map">
<div class="circle"></div>
</div>
CSS:
.map {
background-image: url(../images/only-map.png);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 500px;
width: 100%;
position: relative;
}
.circle {
width: 10px;
height: 10px;
background-color: #fff;
position: absolute;
top: 200px;
right: 400px;
float: right;
}
I try with position absolute, fixed. Background size cover,contain, 100% 100%, but still not working.
Thank for every advance
You can do something like this:
HTML:
<div class="map rel">
<div class="dot abs">
</div>
</div>
CSS:
.map{
width: 500px;
height: 500px;
background-color: blue;
}
.dot{
width: 20px;
height: 20px;
background-color: red;
}
.rel{
position: relative;
}
.abs{
position: absolute;
top: 8px;
left: 8px;
}
You can play around with it here. Hope that helps.
you need to use a position in percentage
.circle {
position: absolute;
top: 40%;
left: 50%;
}
but keep in mind that your circle will be centered on it's corner, wich you can prevent by adjusting your percentages and setting:
.circle {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%); //else only the upper-left corner of the circle div will be centered on paris)
}
as it has been said, it's always hard to help without seeing the actual image and result, but this might work
I am a CSS beginner.
I want a half transparent centered div with the main content. Below it should be a fixed div containing the table of contents.
Below is my attempt on this. This works with a certain browser size. But when the size of the browser window changes, the table of content moves.
I want the table of contents to stay at a fixed distance to the main div.
jsFiddle link
With this window size everything looks ok:
Decreasing the window size moves toc under content div:
html
<html>
<head>
<title>Testpage</title>
<link rel='stylesheet' href='css/testpage.css'>
</head>
<body>
<div id="contenttable">
<h1>Contents</h1>
Content 01<br>
</div>
<div id="content">
some text
</div>
</body>
</html>
css:
#content{
height: 1000px;
width: 320px;
position: relative;
top: 50px;
left: 50%;
margin-left: -160px;
background-color: cyan;
}
#contenttable{
padding: 12px;
width:100%;
height:200px;
position: fixed;
background-color: yellow;
top: 125px;
left: 6%;
}
#contenttable a{
position: relative;
top: 0px;
left: 66%;
}
#contenttable h1{
position: relative;
top: 0px;
left: 66%;
}
You can use an inner div absolutely positioned inside the fixed TOC, and set its position.
Use CSS3 Calc to elaborate the right position for your main content.
Use opacity for transparency, and avoid setting the height of the main content div for automatic overflow handing.
Demo: http://jsfiddle.net/vMAQz/1/
CSS
#contenttable {
padding: 12px;
width:100%;
height:200px;
position: fixed;
background-color: yellow;
top: 125px;
}
#innerContent {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 100px;
padding: 30px;
}
#content {
padding: 10px;
opacity: 0.8;
width: 320px;
position: relative;
top: 50px;
left: calc(100% - 480px);
background-color: cyan;
}
HTML
<div id="contenttable">
<div id="innerContent">
<h1>Contents</h1>
Content 01
<br/>
</div>
</div>
<div id="content">
some text
</div>
all you need to do is change the width of the content div
#content{
height: 1000px;
width: 30%;
position: relative;
top: 50px;
left: 50%;
margin-left: -160px;
background-color: cyan;
}
I've run into a bit of an issue while using z-index. When I add z-index to an id so that it does not overlap another div I have, it makes the image highlight on click, like it would on a double click.
This only happens in Firefox. In Chrome and IE 9,8 and 7, it does not highlight on click. I am using Firefox 17.0.1. What might be causing this? My ids CSS looks like this:
#brand-content, #brand-content>img
{
width:100%;
height:100%;
position: relative;
top:0px;
z-index:-1;
}
The HTML I have on the page is just:
<head>
<link rel="stylesheet" type="text/css" href="../stylesheet.css">
</head>
<body>
<?php
include ("../includes/sidebar.php");
?>
<div id="brand-content">
<img src="../images/IMG_78707.jpg">
</div>
</body>
Here's a guess demo for what you want: http://jsfiddle.net/YVw58/2/
HTML Part:
<div id="parent">
This is parent.
<div id="compare">compare</div>
<div id="childBelow">below</div>
<div id="childUp">up</div>
</div>
CSS Part:
#parent {
background-color: #f66;
}
#childBelow {
background-color: #6f6;
height: 80px;
width: 160px;
position: absolute;
left: 0px;
top: 100px;
z-index: -1;
}#parent {
background-color: #f66;
}
#childBelow {
background-color: #6f6;
height: 80px;
width: 160px;
position: absolute;
left: 0px;
top: 100px;
z-index: -1;
}
#childUp {
background-color: #66f;
height: 80px;
width: 160px;
position: absolute;
left: 0px;
top: 20px;
}
#compare {
position: absolute;
left: 50px;
top: 50px;
background-color: #ccc;
width: 160px;
height: 80px;
}
#childUp {
background-color: #66f;
height: 80px;
width: 160px;
position: absolute;
left: 0px;
top: 20px;
}
#compare {
position: absolute;
left: 50px;
top: 50px;
background-color: #ccc;
width: 160px;
height: 80px;
}
Of course, different result is caused by the version of web broswers. I've tested on Firefox 13.0.1, Chrome 23.0, Opera 12.0 and IE 9.0, all of which have the expected result.
Another thing you should pay attention to is that elements with smaller z-index will not receive events (e.g.: mouse click) if the event area is covered by elements with larger z-index, as shown in the demo before.
You may also have a look at z-index for more details at http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/.