May I please know how can I align the login button to the center of the page? I can't seem to do it althoughI've tried many suggestions from previous posts like this.
Need help on this.
body {
background: white;
margin: 0;
font-family: Arial;
}
.wrapper {
text-align: center;
}
.buttonlogin {
position: absolute;
top: 50%;
}
button {
background-color: FireBrick;
color: white;
padding: 16px 25px;
margin: auto;
border: none;
cursor: pointer;
width: 100%;
border-radius: 8px;
display: block;
margin: 0 auto;
}
button:hover {
opacity: 0.8;
}
<body>
<div class="wrapper">
<button class="buttonlogin" onclick="document.getElementById('id01').style.display='block'" style="width:10%;">Login</button>
</div>
</body>
You've given your button a position of absolute, so you're looking to also apply left: 50%. However, you probably actually also want to subtract the offset from your width, so that the element remains perfectly in the center. In this case, you're looking for left: 45%, as the element has a width of 10%. The same goes for top, which can be calculated with calc(50% - (48px / 2)):
body {
background: white;
margin: 0;
font-family: Arial;
}
.wrapper {
text-align: center;
}
.buttonlogin {
position: absolute;
top: calc(50% - (48px / 2));
left: 45%; /*calc(50% - (10% / 2)); */
}
button {
background-color: FireBrick;
color: white;
padding: 16px 25px;
margin: auto;
border: none;
cursor: pointer;
width: 100%;
border-radius: 8px;
display: block;
margin: 0 auto;
}
button:hover {
opacity: 0.8;
}
<body>
<div class="wrapper">
<button class="buttonlogin" onclick="document.getElementById('id01').style.display='block'" style="width:10%;">Login</button>
</div>
</body>
Hope this helps :)
Is this what you want?
.buttonlogin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This put the button at the center of the html.
body {
background: white;
margin: 0;
font-family: Arial;
}
.buttonlogin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
button {
background-color: FireBrick;
color: white;
padding: 16px 25px;
margin: auto;
border: none;
cursor: pointer;
width: 100%;
border-radius: 8px;
display: block;
margin: 0 auto;
}
button:hover {
opacity: 0.8;
}
<body>
<button class="buttonlogin" onclick="document.getElementById('id01').style.display='block'" style="width:10%;">Login</button>
</body>
Add this:
button {
left : 50%;
}
.wrapper{
display: flex;
justify-content: center;}
<div class="wrapper">
<button> Sample </button>
</div>
.wrapper{
display: flex;
justify-content: center;
}
<body>
<table style="width:100%;height:100%">
<tr><td style="text-align:center;vertical-align:middle">
<button>Click me</button>
</td></tr>
</table>
</body>
Related
When minimized and scaled to different positions some the text and background shift to different spots making text shift off the screen or on top of other text or links.
body,
html {
margin: 0;
padding: 0;
}
.gamepage {
position: relative;
height: 100vh;
width: 100vw;
background-size: 100%;
}
/* tabbar */
.header {
position: sticky;
top: 0px;
left: 0px;
height: 10vh;
width: 100%;
background: url("https://www.waukeepubliclibrary.org/sites/default/files/Event%20Images/Teen%20Events/MurderMystery_TopBanner-1024x265.jpg") no-repeat 50% 50%;
background-size: cover;
z-index: 2;
}
#home {
position: absolute;
top: 0px;
left: 0px;
border-style: groove;
}
#how2play {
position: absolute;
top: 0px;
left: 47px;
border-style: groove;
}
#character {
position: absolute;
top: 0px;
left: 137px;
border-style: groove;
}
/* link format */
a:link,
a:visited {
color: white;
text-decoration: none;
font-weight: bold;
}
/* background */
.background {
positon: absolute;
background: url("https://imagevars.gulfnews.com/2021/07/05/shutterstock_1016099710-1625487358677_17a7698bad7_large.jpg") no-repeat;
height: 100%;
width: 100%;
top: 72px;
left: 8px;
background-size: cover;
z-index: 1;
}
#title {
color: white;
position: absolute;
top: 90px;
left: 5px;
font-size: 35px;
font-family: Courier New;
}
#text {
color: white;
position: absolute;
top: 125px;
left: 25px;
}
#playbutton {
color: black;
position: absolute;
top: 360px;
left: 660px;
font-size: 55px;
font-weight: bold;
transform: rotate(-7deg);
border: 5px;
border-style: double;
}
<body>
<div class="gamepage">
<div class="header">
<div id="home">
Home
</div>
<div id="how2play">
How to Play
</div>
<div id="character">
Character List
</div>
</div>
<div class="background">
<div id="title">Murder Mystery</div>
<div id="text">Find the murderer, before it's too late...</div>
<a href="homepage/thegame1.html">
<div id="playbutton">Play Now</div>
</a>
</div>
</div>
</body>
I've Tried
Changing all values to %'s
Changing all the values using vh and vw.
This fixed some of the problem but not all
Played around with the absolute and relative positioning/adding div parent tags
All this is very new to me so there might be a simple solution I don't know of
Your HTML and CSS should look something like the example below.
Here I have swapped out your IDs for semantic HTML elements, and absolute positioned elements for modern flexbox/grid
Look into flexbox and grid for single axis and dual axis positioning
body {
display: grid;
grid-template-rows: 30% 1fr;
min-height: 100vh;
margin: 0;
color: white;
background-color: black;
}
header {
background: url("https://www.waukeepubliclibrary.org/sites/default/files/Event%20Images/Teen%20Events/MurderMystery_TopBanner-1024x265.jpg") no-repeat 50% 50%;
background-size: cover;
}
header ul {
display: flex;
gap: 1rem;
min-height: 10vh;
list-style: none;
}
a:link,
a:visited {
display: inline-block; /* Allows for padding and your rotation of [Play Now] */
color: inherit;
padding: .2em .5em;
background: #000b;
text-decoration: none;
font-weight: bold;
}
main {
background: url("https://imagevars.gulfnews.com/2021/07/05/shutterstock_1016099710-1625487358677_17a7698bad7_large.jpg") no-repeat;
padding: 2rem;
background-size: cover;
}
h1 {
font-size: 2.5rem;
font-family: Courier New;
}
.playbutton {
color: black;
font-size: 3.5rem;
font-weight: bold;
transform: rotate(-7deg);
border: 5px;
border-style: double;
}
<!-- Use semantic HTML instead of divs with IDs -->
<header>
<nav>
<ul>
<li>
Home
</li>
<li>
How to Play
</li>
<li>
Character List
</li>
</ul>
</nav>
</header>
<main>
<h1>Murder Mystery</h1>
<p id="text">Find the murderer, before it's too late...</p>
Play Now
</main>
I have a quite simple website. It scans for pictures via php and then displays them one at a time with two buttons on top. The bottons are used to switch back and forth between them.
On the very top of the page there are a couple of links, but I can not click them. When I double klick them, the picture gets highlighted instead of the text my cursor is above. I have tried it without js and php and the issue is still there.
I am not very experienced in HTML. I think it might be something about the z-index, but I cannot fix it.
body {
background-color: #FFFFFFf
}
.menup1 {
float: left;
padding-left: 5.5%;
box-sizing: border-box;
font-size: 35px;
background: #fffff;
color: black;
}
a {
color: black;
cursor: pointer;
}
p {
color: black;
}
.listelemt {}
ul {
float: left;
font-size: 40px;
padding-top: 10px;
}
ul li {
padding-top: 15px;
}
.container {
position: relative;
width: 100%;
padding-top: 200px;
}
.container .btnF {
position: absolute;
top: 50%;
left: 50%;
transform: translate(600%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
.container .btnB {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-675%, -50%);
-ms-transform: translate(105%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
<div class="menup1">Vorspeise</div>
<div class="menup1">Suppen</div>
<div class="menup1">Dessert</div>
<div class="menup1">Kuchen</div>
<div class="menup1">Hauptgänge</div>
<div class="menup1">Konditorei</div>
<div class="container">
<img id="rezept" src="1.jpg" height=auto width=100%/>
<button class="btnF" id="btnF">+</button>
<button class="btnB" id="btnB">-</button>
</div>
I hope you can help me out here. I could manage to work out all the js and php things involved, but languages that don't follow programming rules... Not my best part.
The reason you have the box over the links is the floats aren't being cleared. That means the box that contains the links collapses, which is probably why you need to add so much padding. If you add clear: both to the container you will be able to click the links.
If you want to keep everything else the same I suggest adding a wrapper around the menu and setting position: relative, then you can give that a z-index greater than the container.
The menu buttons which are both position: absolute then need higher z-index too.
.menu {
position: relative;
z-index: 2;
}
.menup1 {
float: left;
padding-left: 5.5%;
box-sizing: border-box;
font-size: 35px;
background: #fffff;
color: black;
}
a {
color: black;
cursor: pointer;
}
p {
color: black;
}
.listelemt {}
ul {
float: left;
font-size: 40px;
padding-top: 10px;
}
ul li {
padding-top: 15px;
}
.container {
position: relative;
z-index: 1;
width: 100%;
padding-top: 200px;
}
.container .btnF {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
transform: translate(600%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
.container .btnB {
position: absolute;
z-index: 4;
top: 50%;
left: 50%;
transform: translate(-675%, -50%);
-ms-transform: translate(105%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
<div class="menu">
<div class="menup1">Vorspeise</div>
<div class="menup1">Suppen</div>
<div class="menup1">Dessert</div>
<div class="menup1">Kuchen</div>
<div class="menup1">Hauptgänge</div>
<div class="menup1">Konditorei</div>
</div>
<div class="container">
<img id="rezept" src="1.jpg" height=auto width=100%/>
<button class="btnF" id="btnF">+</button>
<button class="btnB" id="btnB">-</button>
</div>
The problem isn't with z-index, but rather that your container is overlapping your menu items. To correct this, replace padding-top: 200px with margin-top: 200px, and give the container float: left. Alternatively, if you don't want to add any 'offset' with your container, you can clear the float before initialising it with clear: left on the container.
Also note that both your body and .menup1 have invalid background-colours; when specifying hex codes, you must either specify three, four or six letters/digits. Five is invalid.
Both of these have been fixed in the following:
body {
background-color: #ffffff;
}
.menup1 {
float: left;
padding-left: 5.5%;
box-sizing: border-box;
font-size: 35px;
background: #ffffff;
color: black;
}
a {
color: black;
cursor: pointer;
}
p {
color: black;
}
.listelemt {}
ul {
float: left;
font-size: 40px;
padding-top: 10px;
}
ul li {
padding-top: 15px;
}
.container {
position: relative;
float: left;
width: 100%;
margin-top: 200px;
}
.container .btnF {
position: absolute;
top: 50%;
left: 50%;
transform: translate(600%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
.container .btnB {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-675%, -50%);
-ms-transform: translate(105%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
<div class="menup1">Vorspeise</div>
<div class="menup1">Suppen</div>
<div class="menup1">Dessert</div>
<div class="menup1">Kuchen</div>
<div class="menup1">Hauptgänge</div>
<div class="menup1">Konditorei</div>
<div class="container">
<img id="rezept" src="1.jpg" height=auto width=100%/>
<button class="btnF" id="btnF">+</button>
<button class="btnB" id="btnB">-</button>
</div>
So i'm trying to have a div with text appear on a parent div when a mouse hovers the parent, all was going well and good until I encountered a problem where the text ("VISIT") was no longer centering when the font size is changed to be larger.
.project-box {
width: 1000px;
background-color: white;
height: 350px;
margin: auto;
box-shadow: 0px 2px 5px 0px #737373;
}
.project-image {
width: 400px;
height: 260px;
margin-left: 30px;
background-color: #f1f1f0;
position: relative;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.slidein-content {
display: none;
background-color: #ff9933;
z-index: 1;
width: 400px;
height: 50px;
position: absolute;
bottom: 0;
text-align: center;
}
.project-image:hover .slidein-content {
display: block;
}
.visit {
font-family: 'Montserrat', sans-serif, Arial;
color: white;
letter-spacing: 1px;
font-size: 2em;
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<p class="visit">VISIT</p>
</div>
</div>
</div>
As you can see, the text "VISIT" is aligned properly horizontally, but not vertically. Anyone know a solution?
Try using a <span> element instead of a <p> element. So modify your code to this:
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<span class="visit">VISIT</span>
</div>
</div>
</div>
That should help center it or at least get you in the right direction. I tested this on jsfiddle here. You may need to play around with the margin or padding a bit, but the problem you're having is because of the <p> element.
Set a line-height=0 on .visit
.project-box {
width: 1000px;
background-color: white;
height: 350px;
margin: auto;
box-shadow: 0px 2px 5px 0px #737373;
}
.project-image {
width: 400px;
height: 260px;
margin-left: 30px;
background-color: #f1f1f0;
position: relative;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.slidein-content {
display: none;
background-color: #ff9933;
z-index: 1;
width: 400px;
height: 50px;
position: absolute;
bottom: 0;
text-align: center;
}
.project-image:hover .slidein-content {
display: block;
bottom:0;
}
.visit {
font-family: 'Montserrat', sans-serif, Arial;
color: white;
letter-spacing: 1px;
font-size: 2em;
line-height:0;
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<p class="visit">VISIT</p>
</div>
</div>
</div>
Add top:50%; and transform: translateY(-50%); to .slidein-content, erase the bottom:0 from it and add amargin: 0 to .visit (I don't know from where, but it has a 32px top- and bottom-margin, which you have to reset to 0 that way.)
.project-box {
width: 1000px;
background-color: white;
height: 350px;
margin: auto;
box-shadow: 0px 2px 5px 0px #737373;
}
.project-image {
width: 400px;
height: 260px;
margin-left: 30px;
background-color: #f1f1f0;
position: relative;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.slidein-content {
display: none;
background-color: #ff9933;
z-index: 1;
width: 400px;
height: 50px;
position: absolute;
top:50%;
transform: translateY(-50%);
text-align: center;
}
.project-image:hover .slidein-content {
display: block;
}
.visit {
font-family: 'Montserrat', sans-serif, Arial;
color: white;
letter-spacing: 1px;
font-size: 2em;
line-height: 2em;
margin: 0;
}
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<p class="visit">VISIT</p>
</div>
</div>
</div>
I am running into an issue where my contact-section-left is not centering in the parent div. This is not a vertical-align: top issue. You can see the border-right white line, that is showing how much the height extends for the contact-section-left div is, but I am it to be the same size as the right side with the image (sorry the example doesn't have the image).
I am not sure if I am going for the wrong approach here or what, but I am wanting it to look like the paint image I made below.
Any ideas?
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#contact-section {
width: 100%;
background: #00a16d;
}
#contact-section-wrap {
padding: 2%;
}
#contact-section-left, #contact-section-right {
height: 100%;
display: inline-block;
color: #FFF;
font-size: 1.5em;
padding: 1% 0;
position: relative;
}
#contact-section-left {
width: 60%;
border-right: 1px solid #FFF;
font-style: italic;
}
#contact-section-right {
width: 30%;
text-align: center;
}
#contact-img {
background-image: url("../icons/envelope.png");
background-repeat: no-repeat;
background-size: auto;
margin: 0 auto;
display: block;
width: 128px;
height: 128px;
position: relative;
}
#contact-width {
width: 200%;
font-size: 2em;
}
.total-width {
width: 100%;
}
<div id="contact-section">
<div id="contact-section-wrap">
<div id="contact-section-left">
<div class="total-center total-width">Tell us more about your project.</div>
</div><div id="contact-section-right">
<div id="contact-img"><span class="total-center" id="contact-width">Contact us</span></div>
</div>
</div>
</div>
Your entire code can be simplified as follows. I use a pseudo element for the vertical line in between, and shift the position with order via flexbox.
jsFiddle
#contact-section {
display: flex;
justify-content: space-around;
align-items: center;
color: #FFF;
background: #00a16d;
padding: 1em 2em;
}
#contact-section:before {
content: "";
flex: 0 0 1px;
height: 2em;
background: #fff;
order: 2;
}
#contact-section-left {
font-size: 1.5em;
order: 1;
font-style: italic;
}
#contact-section-right {
background: url("https://i.imgur.com/cLMHUZE.png") center / contain no-repeat;
font-size: 2em;
order: 3;
padding: .5em 0;
}
<div id="contact-section">
<div id="contact-section-left">Tell us more about your project.</div>
<div id="contact-section-right">Contact us</div>
</div>
Assiging display: flex; align-items: center; to the parent of the left/right sections will display them side-by-side and center them vertically. Then if you move the border-right from the left (shorter) element to a border-right of the right (taller) element, the line should look more like you want it.
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#contact-section {
width: 100%;
background: #00a16d;
}
#contact-section-wrap {
padding: 2%;
display: flex;
align-items: center;
}
#contact-section-left, #contact-section-right {
height: 100%;
display: inline-block;
color: #FFF;
font-size: 1.5em;
padding: 1% 0;
position: relative;
}
#contact-section-left {
width: 60%;
font-style: italic;
}
#contact-section-right {
width: 30%;
text-align: center;
border-left: 1px solid #FFF;
}
#contact-img {
background-image: url("../icons/envelope.png");
background-repeat: no-repeat;
background-size: auto;
margin: 0 auto;
display: block;
width: 128px;
height: 128px;
position: relative;
}
#contact-width {
width: 200%;
font-size: 2em;
}
.total-width {
width: 100%;
}
<div id="contact-section">
<div id="contact-section-wrap">
<div id="contact-section-left">
<div class="total-center total-width">Tell us more about your project.</div>
</div><div id="contact-section-right">
<div id="contact-img"><span class="total-center" id="contact-width">Contact us</span></div>
</div>
</div>
</div>
Your #contact-section-wrap doesn't have a height. The height: 100%s you are setting aren't really doing anything. They still rely on a parent height to have any idea what they're getting 100% of.
Try setting a height on #contact-section-wrap.
I need to create a separator with text in the middle. By middle I mean both centered horizontally and vertically - there are many examples of this technique using pseudo elements or an extra span in the middle.
Here's some code I would normally use - uses the span method:
h2.centre-line
{
width:40%;
text-align:center;
border-bottom:0.1rem solid #ccc;
line-height:0.1em;
margin:2.5rem 30%;
}
h2.centre-line span
{
background-color:#fff;
padding:0 1rem;
}
<h2 class="centre-line"><span>Text</span></h2>
The problem I have with all of the examples I have found so far is that the text is on a transparent background with margin spacing around it. However what I want to do is place the text in a container with height and keep it centered, like this:
At the moment I've been unable to adapt my code sucessfully and not come across any further suitable examples to follow.
Any ideas?
Your request is a little unclear as it's not stated what this 'separator' is supposed to be separating.
However, vertical & horizontal centering can be achieved by using absolute positioning.
The 'line behind' is achieved by a pseduo-element.
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wrap {
height: 200px;
position: relative;
background: lightgrey;
margin: 5px;
}
h2.centre-line {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
width: 40%;
transform: translate(-50%, -50%);
}
h2.centre-line:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
top: 50%;
left: 0;
z-index: -1;
background: red;
}
h2.centre-line span {
background-color: lightblue;
padding: 1rem;
display: inline-block;
}
<div class="wrap">
<h2 class="centre-line"><span>Text</span></h2>
</div>
JSfiddle Demo with another wrapper with greater height.
Use an hr? something like this: http://liveweave.com/42IlZQ
hr {
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr:after {
content: "§";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}
<div class="container">
<hr class="hr-text" data-content="AND">
</div>
<style type="text/css">
.container {
max-width: 50%;
margin: 40px auto;
}
.hr-text {
line-height: 1em;
position: relative;
outline: 0;
border: 0;
color: black;
text-align: center;
height: 1.5em;
opacity: .5;
}
.hr-text:before {
content: '';
background: linear-gradient(to right, transparent, #818078, transparent);
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
}
.hr-text:after {
content: attr(data-content);
position: relative;
display: inline-block;
color: black;
padding: 0 .5em;
line-height: 1.5em;
color: #818078;
background-color: #fcfcfa;`enter code here`
}
</style>`enter code here`