i have a Div that contain a img and a text
i want to use that Div like a button
here is my html code:
<div id="p6btnBack" class="btn">
<img id="p6btnCircleBack" src="img/back.png" class="btnCircle" />
Back
</div>
and css code is :
.btn {
position: fixed;
width: 10%;
top: 24%;
left: 2%;
height: 7%;
font-size: 25pt;
background-size: cover;
}
.btnCircle {
position: relative;
top: 0%;
left: 0%;
height:100%;
background-repeat: no-repeat;
background-size: contain;
}
i want to put "Back" text in middle vertical of div ...anybody know how i do taht ?
thx
css
write text-align:center; in .btn class
btn {
position: fixed;
width: 10%;
top: 24%;
left: 2%;
height: 7%;
font-size: 25pt;
background-size: cover;
text-align:center;
}
working fiddle
demo1
css
body {
width: 100%;
height: 100%;
}
div {
position:absolute; height:100%; width:100%;
display: table;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align:center;
}
html
<body>
<div>
<h1>Text</h1>
</div>
</body>
fiddle
the answer is :
CSS:
.btn{
position: fixed;
font-size: 25pt;
width: 11%;
top: 83%;
left: 48%;
height: 6%;
padding-top: 10px;
padding-left: 5%;
}
.btnCircle {
position: absolute;
top: 0%;
left: 3%;
height: 100%;
background-repeat: no-repeat;
}
HTML:
<div id="p6btnBack" class="btn">
<img id="p6btnCircleBack" src="img/back.png" class="btnCircle" />
Back
</div>
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 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'm new to web design, and am trying to make a single page website with 2 pages. When I place the code for the second page (in a div) underneath the first, it doesn't give me two web pages one under the other, but places all the img's etc of the second page over the first. I was wondering whether this has to do with me using percentages in the CSS. If so, what would you suggest me to do? The problem is, I was recommended to use percentages in order to develop a fluid layout (this hasn't worked out yet; I still have to figure this all out completely). Is there a way to fix the problem, and keep using percentages?
HTML FILE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>MySite</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body class="cateringpage">
<div class="container">
<div class="leavesimg">
<img src="leaves1.svg" alt="leaves" class="bananaleaves"></img>
</div>
<div class="cateringbannerimg">
<img src="cateringbanner.svg" alt="catering" class="catbanner"></img>
</div>
<div class="cateringputolblueimg">
<a href="cateringmenu.html">
<img src="cateringputolblue.svg" alt="cateringputo" class="catputo1" onmouseover="this.src='cateringputodblue.svg';" onmouseout="this.src='cateringputolblue.svg';" ></img>
</a>
</div>
</div>
<div id="pge2" class="cateringmenupage">
<div class="container">
<div class="greenboardflat1img">
<img src="greenboardflat1.png" alt="greenboard" class="greenboardflat1"></img>
</div>
<div class="cateringmenubannerimg">
<img src="cateringmenubanner.svg" alt="cateringbanner" class="cateringmenubanner"></img>
</div>
<div class="printiconwhiteimg">
<a href="DOMINIKSTEXT.pdf">
<img src="printiconwhite.svg" alt="print" class="piwhite" onmouseover="this.src='printiconred.svg';" onmouseout="this.src='printiconwhite.svg';" /></img>
</a>
</div>
<div class="bbcatlputoimg">
<a href="index.html">
<img src="bbcatlputo.svg" alt="backtomainmenu" class="bbcatlputo" onmouseover="this.src='bbcatdputo.svg';" onmouseout="this.src='bbcatlputo.svg';" /></img>
</a>
</div>
<div class="mmcat">
<p>home page</p>
</div>
</div>
</div>
</body>
</html>
CSS FILE:
.container {
width: 100%;
height: 100%;
}
body.cateringpage {
background-image: url("woodbackground.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
}
body.cateringmenupage {
background-image: url("woodbackground.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
}
.leavesimg {
position:absolute;
width: 95.3%;
height: 89.6%;
left: 2.5%;
bottom: 5%;
}
img.bananaleaves {
height: 100%;
width: 100%;
}
.cateringbannerimg {
position:absolute;
width: 43%;
height: auto;
left: 27.5%;
bottom: 26%;
}
img.catbanner {
height: 100%;
width: 100%;
}
.cateringputolblueimg {
position:absolute;
left: 16.25%;
width: 14.5%;
left: 42%;
bottom: 13%;
}
img.catputo1 {
height: 100%;
width: 100%;
}
.haloboximg {
position:absolute;
width: 29%;
height: auto;
right: 11%;
bottom: 11%;
}
img.hbox {
height: 100%;
width: 100%;
}
.greenboardflatimg {
position:absolute;
width: 45%;
height: auto;
left: 5%;
bottom: 2%;
}
img.gboard {
height: 100%;
width: 100%;
}
.dailylunchbannerimg {
position:absolute;
top: 15%;
width: 40%;
height: auto;
left: 7.5%;
}
img.dlbanner {
height: 100%;
width: 100%;
}
.dailylunchtxt {
font-family : Catatan Perjalanan;
font-size : 26px;
color : #FDFEFF;
color : rgb(253, 254, 255);
position: absolute;
top: 28%;
left: 8%;
}
.dlputolblueimg {
position:absolute;
left: 20%;
width: 14.5%;
bottom: 21.5%;
}
img.dlputo1 {
height: 100%;
width: 100%;
}
.tomainmenu {
font-family : Catatan Perjalanan;
font-size : 26px;
color : #FDFEFF;
color : rgb(253, 254, 255);
position: absolute;
bottom: 8%;
left: 10%;
}
.greenboardflat1img {
position:absolute;
width: 55%;
height: auto;
left: 22.5%;
top: 2%;
}
img.greenboardflat1 {
height: 100%;
width: 100%;
}
.cateringmenubannerimg {
position:absolute;
top: 12%;
width: 40%;
height: auto;
left: 30%;
}
img.cateringmenubanner {
height: 100%;
width: 100%;
}
.printiconwhiteimg {
position:absolute;
right: 7%;
width: 5.2%;
top: 7%;
}
img.piwhite {
height: 100%;
width: 100%;
}
.bbcatlputoimg {
position:absolute;
left: 7%;
width: 5%;
top: 7%;
}
img.bbcatlputo {
height: 100%;
width: 100%;
}
.mmcat {
font-family : Catatan Perjalanan;
font-size : 16px;
color : #0700D0;
color : rgb(7, 0, 208);
position: absolute;
left: 7.25%;
top: 14%;
}
Technically these aren't "pages," they are elements that take up 100% height/width. The problem is that your 100% height and width rules are relative to the html and body tags which do not currently have a defined height, so the "pages" are rendering with a height of 0.
If I'm understanding your question correctly, adding this CSS should resolve it:
html,body {
height:100%;
}
Additionally, in your CSS you have two different body classes defined. An HTML document can only have one set of html tags and one set of body tags, instead you should be assigning the "page" IDs/classes to two separate divs like this:
<body>
<div id="pge1" class="cateringpage">
<div class="container">
</div>
</div>
<div id="pge2" class="cateringmenupage">
<div class="container">
</div>
</div>
</body>
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
Look at the following JSFiddle
.container {
width: 100%;
background-color: yellow;
}
.classic {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
background-position: center center;
background-image: url("http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg");
background-size: contain;
background-repeat: no-repeat;
}
.classic-img {
display: block;
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
}
.classic-img img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.top-menu {
width: 100%;
height: 50px;
position: relative;
background-color: red;
}
.top-menu-buttons {
position: absolute;
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
width: 50%;
text-align: center;
}
.top-menu-buttons .button {
display: inline-block;
vertical-align: middle;
font-size: 25px;
color: white;
}
.top-menu-buttons span {
display: inline-block;
vertical-align: middle;
font-size: 25px;
color: white;
}
.bottom-menu {
width: 100%;
height: 50px;
position: relative;
background-color: green;
}
.bottom-menu-buttons {
position: absolute;
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
width: 80%;
text-align: center;
}
.bottom-menu-buttons .button {
display: inline-block;
vertical-align: middle;
font-size: 35px;
color: white;
padding-left: 10px;
padding-right: 10px;
}
<div class="list">
<a class="item">
<div id="container" class="container">
<div class="top-menu">
<div class="top-menu-buttons">
<button>-</button>
<span>20</span>
<button>+</button>
</div>
</div>
<div id="classic" class="classic">
<div id="classic-img" class="classic-img">
<img src="http://bc03.rp-online.de/polopoly_fs/1.4643662.1415087612!httpImage/2100575733.JPG_gen/derivatives/d540x303/2100575733.JPG" />
</div>
</div>
<div class="bottom-menu">
<div class="bottom-menu-buttons">
<button class="button button-icon ion-eye">1</button>
<button class="button button-icon ion-refresh">2</button>
<button class="button button-icon ion-crop">3</button>
<button class="button button-icon ion-android-options">4</button>
<button class="button button-icon ion-social-tumblr">5</button>
</div>
</div>
</a>
</div>
CSS:
What i want to achieve is something like the following:
The red area should be a top menu. It should not be a fixed top position it should just always be on top of the image.
As you can see the image has a white background and a black forground. It should look like a polaroid.
The green area should be a menu at the bottom but also not fixed to the bottom it should just always be underneath the image. If there is not enough space it should simply scroll not clinch or esize any of the divs. I guess the main problem is the div in the middle where the image with the background image is.
I try for ages now to get the correct css but unfortunately im very unexperienced and all i can do at the moment is try and error but i cant get it working.
remove position: absolute from .classic-img and .classic-img img
add margin: 100px auto; adjust 100px as per your need, also you have set background-size: contain and the aspect ratio of bg image is almost equal to the image, therefore you would see only small portion of bg image here in the fiddle - jsfiddle.net/18vg13dt/3
additionally if you want gap from left and right also the use - margin: 100px 50px; similarly according to your needs.
jsfiddle
I guess this is what you want?
.classic {
background: url("http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg")no-repeat center center;
background-repeat: no-repeat;
background-size: cover;
}
.classic-img {
padding: 10px;
box-sizing: border-box;
}
.classic-img img {
display:block;
width:100%;
height:100%;
}
You need to set the height for the class .classic-img
Try this :
.classic-img {
display: block;
position: relative; /*---absolute to relative*/
overflow: hidden;
width: 100%;
height: 100px; /*----Adjust the height---*/
top: 0%;
left: 0%;
}
If you still face the issue, do come back and let us know.