I've looked for a previous answer that helped me but couldn't find one.
HTML:
<section id="pane_one">
<h1 id="logo">lel</h1>
<h2 id="hello"><span>Hello.</span> You’ve reached my page.</h2>
</section>
CSS:
section#pane_one {
display: block;
position: relative;
width: 100%;
text-align: center;
min-height: 450px;
height: 700px;
}
h1#logo {
position: absolute;
z-index: 0;
width: 200px;
height: 200px;
background-color: #000;
text-indent: -9999px;
top: 35%;
left: 44.5%;
margin-top: -65px;
margin-left: -33px;
background: url('https://i.imgur.com/RMQi9Js.jpg') center center no-repeat;
background-size: 100%;
border-radius: 50%;
border: solid black;
}
How do I set it up so that no matter the zoom of the page, the div/image is always horizontally aligned with the text below it?
The site is: http://libeclipse.me/
<html>
<head>
<style>
section#pane_one {
display: block;
position: relative;
width: 100%;
text-align: center;
min-height: 450px;
height: 700px;
}
h1#logo {
position:relative;
z-index: 0;
width: 200px;
height: 200px;
background-color: #000;
text-indent: -9999px;
top: 200px;
display: inline-block;
background: url('https://i.imgur.com/RMQi9Js.jpg') center center no-repeat;
background-size: 100%;
border-radius: 50%;
border: solid black;
}
h2#hello {
position:absolute;
top:0px;
width:100%;
margin:auto;
}
</style>
</head>
<body>
<section id="pane_one">
<h1 id="logo">lel</h1>
<h2 id="hello"><span>Hello.</span> You’ve reached my page.</h2>
</section>
</body>
<html>
Review this and make note of the margin:auto (Centered the h2text in absolute position) and display:inline-block(Centered the bunny image).
Removed the left % and margins that were present from h1#logo.
Enjoy.
Thanks.
On the h1#logo rule change the left to 50% and the margin-left to -100px
Related
Good morning everyone
How can I place the different DIVs on top of each other?
I have a row that contains left and right DIVs.
In the right I have image and in the left text.
I also have a DIV that needs to be placed between the text and the background.
I've tried and gotten a few things, but I can't get the right DIV sticky-top in the right place.
I don't want to use Java but only CSS
.infosite-container {
margin: 0 auto;
width: 100%;
position: relative;
}
.infosite-container .row {
display: table;
}
.infosite-container [class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
.sticky-top {
height: 150px;
width: 150px;
position: absolute;
background: red;
top: 50%;
left: 50%;
z-index: 999;
transform: translate(-50%, -50%);
}
.infosite-left-content {
padding-top: 175px;
padding-bottom: 175px;
padding-left: 120px;
text-align: left;
background-image: url(../../images/img-01.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
min-height: 680px;
/* height: 680px; */
z-index: 99;
}
.infosite-right-content {
padding-top: 175px;
padding-bottom: 175px;
padding-right: 120px;
padding-left: 60px;
text-align: left;
background-color: #bebebe;
min-height: 680px;
/* height: 680px; */
position: relative;
z-index: 99;
}
.uptxt {
position: relative;
z-index: 9999;
}
<section class="infosite" id="infosite-section">
<div class="container-fluid infosite-container">
<div class="row">
<div class="col-md-6 infosite-left-content">
<div class="">
</div>
</div>
<div class="sticky-top">
<p>Sticky Top</p>
</div>
<div class="col-md-6 infosite-right-content">
<div class="uptxt">
</div>
</div>
</div>
</div>
</section>
Can I get some help. I am sorry but I am not an expert.
Thanks
It's not working because you're parent is way larger than it's child. Because the div's could have different widths I suggest you to put the sticky-top div into the infosite-left-content class.
Like this:
<div class="container-fluid infosite-container">
<div class="row">
<div class="col-md-6 infosite-left-content">
<div class="sticky-top">
<p>Sticky Top</p>
</div>
</div>
<div class="col-md-6 infosite-right-content">
<div class="uptxt">
</div>
</div>
</div>
</div>
</section>
Second you need to adjust you css accordingly:
/* InfoSite ---------------------------------- */
.infosite-container {
margin: 0 auto;
width: 100%;
position:relative;
}
.infosite-container .row {
display: table;
}
.infosite-container [class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
.sticky-top {
height: 150px;
width: 150px;
position: absolute;
background:red;
top:50%;
right:-75px;
z-index:999;
transform: translateY(-50%)
}
.infosite-left-content {
position: relative;
background-color: blue;
padding-top: 175px;
padding-bottom: 175px;
padding-left: 120px;
text-align: left;
background-image: url(../../images/img-01.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
min-height: 680px;
/* height: 680px; */
z-index:100;
}
.infosite-right-content {
padding-top: 175px;
padding-bottom: 175px;
padding-right: 120px;
padding-left: 60px;
text-align: left;
background-color: #bebebe;
min-height: 680px;
/* height: 680px; */
position: relative;
z-index:99;
}
.uptxt {
position: relative;
z-index:9999;
}
/* ---------------------------------------------- */
I hope this works for you :D
Thank you for your response and possible solution.
Unfortunately it doesn't work as I would like, the sticky DIV stays on top of everything and not between the two divs.
I attach a picture of the result of how I would like its visualization.
Insert the sticky DIV between the background and the descriptive text that should appear as the last layer.
A possible solution is to use a single background DIV, ok it works, but I would like to have two of them so I can insert two images for example.
Thanks
Your css should be like this:
.infosite-container {
margin: 0 auto;
width: 100%;
position:relative;
}
.infosite-container .row {
display: table;
}
.infosite-container [class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
.sticky-top {
height: 150px;
width: 150px;
position: absolute;
background:red;
top:50%;
right:-75px;
z-index:500;
transform: translateY(-50%)
}
.infosite-left-content {
position: relative;
background-color: blue;
padding-top: 175px;
padding-bottom: 175px;
padding-left: 120px;
text-align: left;
background-image: url(../../images/img-01.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
min-height: 680px;
/* height: 680px; */
z-index:100;
}
.infosite-right-content {
padding-top: 175px;
padding-bottom: 175px;
padding-right: 120px;
padding-left: 60px;
text-align: left;
background-color: #bebebe;
min-height: 680px;
/* height: 680px; */
position: relative;
z-index:900;
}
.uptxt {
position: relative;
z-index:9999;
}
You can change the order in which the elements are stacked on top of each other with z-index - the greater it is, the higher the element will be !
I'm having a very difficult time getting my image centered and responsive without overlapping my text. How do I fix this.
View the issue here
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 50%;
left:50%;
overflow: visible;
}
img.logo {
position: relative;
max-width: 100%;
max-height: 100%;
margin-top: -50%;
margin-left: -50%;
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="bg3.jpg" /></div>
You have position absolute in your div so you can adjust the top value
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 200px; /* just a sample with a fixed pixel value */
left:50%;
overflow: visible;
}
or try using
position: relative;
That image should probably be a background instead.
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 40px;
margin: 0px;
width: 100%;
background: url('http://kenwheeler.github.io/slick/img/fonz1.png') center top no-repeat;
background-size: contain;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
Or you can move that image behind the text by modifying the z-index.
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 50%;
left: 50%;
overflow: visible;
}
img.logo {
position: relative;
max-width: 100%;
max-height: 100%;
margin-top: -50%;
margin-left: -50%;
z-index: -1;
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="http://kenwheeler.github.io/slick/img/fonz1.png" /></div>
It's because of the positioning of your elements.
If you want to have a fixed header your content needs to be pushed down the height of your header. Do this by wrapping your content in a container, and giving it a margin-top equal to the height of your header.
header {
position: fixed;
height: 100px;
}
.content-container {
position: relative;
margin-top: 100px;
}
And your HTML:
<header></header>
<div class="content-container">
</div>
Give your content-container the position: relative. If you want to center items in the center you can either use flexbox or give it a margin: 0px auto;.
Position relative means it's positioned relative to other elements.
Some other things I noticed in your code which could be done better/cleaner:
Use the units em or rem for font-size
It's not necessary to prefix your classes with the element (div.shadow -> .shadow and img.logo -> .logo)
Also I would recommend ordering your CSS following the CSS Box Model. This opts for much cleaner code and better readability.
This means you will get something like this:
.class {
// Positioning first
position: relative;
top: 0;
right: 0;
z-index: 1;
// It's size
width: 500px;
height: 500px;
// It's margin
margin: 0px auto;
// It's border
border: 1px solid blue;
// It's padding
padding: 2em 0;
// Content styling
color: #676766;
background: blue;
}
I don't know why you have written this complex css. It can be possible by some easy css coding.
<style>
div.shadow {
width: 100%;
float: left;
text-align: center;
}
img.logo {
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
width: 100%;
float: left;
}
</style>
I want to display a dashboard using a card layout. Ideally, I want to achieve the following layout.:
HTML File:
<div id="overallCanvasWrapper" class="statistic-container">
<p ng-show="emptyAlltimeStats">No data available for given filters</p>
<div ng-show="!emptyAlltimeStats">
<div class="header-piechart">Pie Chart</div>
<canvas id="pieCombined" class="chart chart-pie" chart-data="combinedData" chart-labels="labels" chart-options="options"
chart-colours="colours">
</canvas>
<div class="chart-legend">
<ul>
<li class="blue">Blue</li>
<li class="red">Red</li>
</ul>
</div>
</div>
</div>
CSS file:
canvas{
width: 100% !important;
max-width: 450px;
height: auto !important;
}
.statistic-container {
padding: 10px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
padding-left: 5px;
padding-right: 5px;
height: 340px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-color: rgba(240,240,240,0.8);
background-blend-mode: soft-light;
}
.blue:before { background-color: #00aef3; }
.red:before { background-color: #d8171e; }
.chart-legend li:before {
display: block;
width: 5px;
height: 16px;
position: absolute;
left: 0;
top: 3px;
content: "";
}
However, I want to place chart-legend in the center (horizontally and Vertically) of the remaining part of the card even when the window is resized. How can I achieve that?
give the canvas element a fixed width (ex: width=300px) and use the rules margin:auto; for example:
canvas{
width: 200px;
margin-left: auto;
margin-right:auto;
}
.!emptyAlltimeStats{
text-align:center;
}
achieve centre alignment of div using position: absolute;
canvas{
width: 100% !important;
max-width: 450px;
height: auto !important;
position: relative;
}
.statistic-container {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: auto;
}
I have a div which has a background of a map. The map is centred and has a background size of 'contain'. The page is responsive so when the window resizes, so does the map. I need to be able to have a div on top of a certain country on the map, and on resize of the background map, the div stays directly on top of it.
So far I have
<div id="map-holder">
<div class="content">
<div class="placeholder"></div>
</div>
</div>
The div with the class of placeholder is the div i wish to keep on top of a certain country. The div with map-holder for ID is the div with the map background. Content is just to keep it all in place.
CSS
.content {
text-align: center;
width: 1200px;
margin: 0 auto;}
#map-holder {
position: relative;
height: 1000px;
width: 100%;
background: #F0F0F0;
background-image: url(../images/image-mapster.min.png);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
padding: 30px;
}
.placeholder {
position: absolute;
right: 30px;
background: #fff;
width: 80px;
height: 50px;
border: 1px solid #000;
margin: 5px;
padding: 5px;
padding: 0;
cursor: pointer;
}
.placeholder img {
width: 100%;
height: 100%;
padding: 0;
}
.placeholder:before {
position: absolute;
top: 30%;
left: 45%;
font-weight: bold;
content: '+';
}
The only solution I can think if actually putting an image over the map.
You can do this by having multiple CSS backgrounds. Just change your code for #map-holder to this:
#map-holder {
position: relative;
height: 500px;
width: 500px;
background: #F0F0F0;
background-image: url(this_image_goes_on_top.png), url(your_map.jpg);
background-size: contain, contain;
background-position: center center, center center;
background-repeat: no-repeat, no-repeat;
padding: 30px;
}
I made a little JSFiddle out of your code for demonstration: https://jsfiddle.net/zamofL9g/1/
Basically, it's a little difficult, as I recall, when using background images.
Since the image is, technically speaking "content" you can use an inline image and suitable wrapping divs. The 'pins' can then be positioned using % based positioning values.
Here's a Codepen demo I made some time ago. This one has a tooltip too!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.map {
width: 90%;
margin: 10px auto;
position: relative;
}
.map img {
max-width: 100%;
}
.box {
width: 2%;
height: 5%;
background-image: url(http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
#pin-1 {
top: 25%;
left: 38%;
}
.box:hover > .pin-text {
display: block;
}
.pin-text {
position: absolute;
top: -25%;
left: 110%;
width: 300%;
display: none;
}
.pin-text h3 {
color: white;
text-shadow: 1px 1px 1px #000;
}
<div class="map">
<img src="http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg" alt="" />
<div id="pin-1" class="box">
<div class="pin-text">
<h3>My House</h3>
</div>
</div>
</div>
I seem to be having a slight problem here. My divs dont show up in the web page. I tried changing the position of the div to absolute but it still dosen't show up.
Here is my code:
body {
background: url("http://fux-media.com/yz/skyline_exp1.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.header {
background-color: #DADAC8;
width: 900px;
height: 10%;
position: relative;
border-radius: 7px;
margin-top: -100px;
margin-left: 170px;
z-index: 500;
}
img {
border-radius: 70%;
border: 1px solid;
margin-left: 40%;
height: 175px;
width: 175px;
position: relative;
z-index: 1;
}
<img src="http://farm5.static.flickr.com/4118/4890853985_b34231ccfb_o.jpg" />
<div class="header"></div>
in your css add this
html, body { height: 100%; width: 100%; margin: 0; }
I've converted your example code into a code snippet and it seems to work fine. What exactly seems to be wrong? Are you missing the .header <div>? In that case give it some content or give it a fixed width. How should the .header look?
body {
background: url("http://fux-media.com/yz/skyline_exp1.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.header {
background-color: #DADAC8;
width: 900px;
height: 10%;
position: relative;
border-radius: 7px;
margin-top: -100px;
margin-left: 170px;
z-index: 500;
}
img {
border-radius: 70%;
border: 1px solid;
margin-left: 40%;
height: 175px;
width: 175px;
position: relative;
z-index: 1;
}
<img src="http://farm5.static.flickr.com/4118/4890853985_b34231ccfb_o.jpg" />
<div class="header"></div>
Your div is present there. But it doesn't have any contents that's why it is not visible.
Add some content in it like text etc. or add some padding to the 'header' class. Then you will be able to see it.