I am trying to get these two buttons to align side by side, in the center of the page both vertically and horizontally.
I have been fiddling with it for hours trying everything and I just can't get it to both center align to the page and line up side by side
I was hoping someone could point me in the right direction. Thank you..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
body{ margin:0;
font:normal 75% Arial, Helvetica, sans-serif;
background-color:grey;}
canvas{ display: block; vertical-align: bottom; }
/* ---- particles.js container ---- */
#particles-js{ position:absolute; width: 100%;
height: 45%;
background-image: url("star-sky.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
z-index: -2;}
.count-particles{
position: absolute;
top: 48px;
left: 0;
width: 80px;
color: #13E8E9;
font-size: .8em;
text-align: left;
text-indent: 4px;
line-height: 14px;
padding-bottom: 2px;
font-family: Helvetica, Arial, sans-serif; font-weight: bold; }
.js-count-particles{ font-size: 1.1em; }
#stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; }
#stats{ border-radius: 3px 3px 0 0; overflow: hidden; }
.count-particles {
border-radius: 0 0 3px 3px;
}
h1 {
color:white;
text-align: center;
}
button {
border-color:white;
border-width: 2px;
display: inline-flex;
justify-content: center;
position: absolute;
top: 45%;
transform: translate(-50%, -50%);
border-color:white;
border-width: 2px;
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
}
/* add glow to button *\
</style>
</head>
<body>
<div>
<h1><button>GitHub</button></h1>
<h1><button>Test</button></h1>
<div>
<div class="particlesdiv2" id="particles-js"></div>
<div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</div>
<script> particlesJS("particles-js", {"particles":{"number":{"value":80,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;
</script>
</body>
</html>
There is no float: center. Put a container element around them and apply text-align: center to that one for the horizontal alignment.
In the following snippet I did that plus defined the h1 elements as inline-block, plus some other settings -> see the last three CSS rules.
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
background-color: grey;
}
canvas {
display: block;
vertical-align: bottom;
}
/* ---- particles.js container ---- */
#particles-js {
position: absolute;
width: 100%;
height: 45%;
background-image: url("star-sky.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
z-index: -2;
}
.count-particles {
position: absolute;
top: 48px;
left: 0;
width: 80px;
color: #13E8E9;
font-size: .8em;
text-align: left;
text-indent: 4px;
line-height: 14px;
padding-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
}
.js-count-particles {
font-size: 1.1em;
}
#stats,
.count-particles {
-webkit-user-select: none;
margin-top: 5px;
margin-left: 5px;
}
#stats {
border-radius: 3px 3px 0 0;
overflow: hidden;
}
.count-particles {
border-radius: 0 0 3px 3px;
}
h1 {
color: white;
text-align: center;
}
.button-container {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.button-container h1 {
display: inline-block;
}
button {
border-color: white;
border-width: 2px;
display: inline-flex;
justify-content: center;
border-color: white;
border-width: 2px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="button-container">
<h1><button>GitHub</button></h1>
<h1><button>Test</button></h1>
</div>
<div class="particlesdiv2" id="particles-js"></div>
<div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</div>
Related
When I try to go from mobile to desktop screen , navigation does not show up.I am pretty much a beginner in frontend, so any hint on this is welcome.
I did responsive part for header links to show from 50em screeen width, but i could not show it appropriately.Still not sure(do not know) how to get this to work.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sunnyside agency landing page_challenge_1</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght#600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght#700;900&display=swap" rel="stylesheet">
</head>
<body>
<!--HEADER-->
<header>
<nav>
<a href="#">
<img src="./images/logo.svg" alt="Sunnyside logo" class="logo">
</a>
<a href="#" class="header__menu">
<span></span>
<span></span>
<span></span>
</a>
<div class="header__links">
About
Services
Projects
Contact
</div>
</nav>
</header>
<!--HERO-->
<section class="home__hero">
<div class="container">
<h1 class="title">We are Creatives</h1>
<img src="./images/icon-arrow-down.svg" alt="down arrow" class="hero__arrow">
</div>
</section>
<!--ABOUT-->
<section class="about__cta">
<div class="container">
<div class="about__card bg__spec__img__1">
</div>
<div class="about__card">
<h4 class="transform__title">Transform your brand</h4>
<p class="transform__par">We are a full-service creative agency specializing
in helping brands grow fast.Engage your clients
through compelling visuals that do most of the marketing
for you.
</p>
Learn More
</div>
<div class="about__card bg__spec__img__2">
<img src="./images/mobile/image-stand-out.jpg" alt="Call to action image">
</div>
<div class="about__card">
<h4 class="standout__title">Stand out to the right audience</h4>
<p class="standout__par">Using a collaborative formula of designers, researchers,
photographers, videographers, and copywriters, we'll
build and extend your brain in digital places.
</p>
</div>
<div class="about__card graphic__design__card">
<h4>Graphic Design</h4>
<p>Great design makes you memorable.We deliver artwork
that underscores your brand message and captures
potential client's attention.
</p>
</div>
<div class="about__card photo__card">
<h4>Photography</h4>
<p>Increase your credibility by getting the most stunning,
high-quality photos that improve your business image.
</p>
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
Here is my CSS(not finished, in progress):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* font-family: 'Fraunces', serif;
font-family: 'Barlow', sans-serif; */
/* global styles
---------------- */
img {
max-width: 100%;
height: auto;
}
.container {
width: 100%;
margin: 0 auto;
}
/* typography
------------- */
.transform__title,
.standout__title {
font-size: 1.8rem;
font-weight: 900;
font-family: 'Fraunces', serif;
margin: 2.5em 1em 1.5em 1em;
text-align: center;
width: 55vw;
}
.transform__par,
.standout__par {
font-family: 'Barlow', sans-serif;
font-weight: 600;
line-height: 1.6;
text-align: center;
padding-bottom: 1.5em;
margin: 0em 1em 1em 1em;
width: 60vw;
font-size: 1.125em;
color: hsl(232, 10%, 55%);
}
/* buttons
--------- */
.btn {
border: none;
outline: none;
background: white;
text-decoration: none;
text-transform: uppercase;
padding: 0.6em 1.75em;
border-radius: 50px;
font-family: 'Fraunces', serif;
font-weight: 900;
color: hsl(212, 27%, 19%);
}
.btn__cta {
padding-bottom: 2em;
background: transparent;
}
#media (min-width: 50em) {
.btn {
font-size: 0.925em
}
.header__text {
font-size: 0.925em;
}
}
#media (min-width: 60em) {
.btn {
font-size: 1em;
}
}
/* header
--------- */
header {
position: absolute;
left: 0;
right: 0;
}
nav {
height: 7vh;
width: 100%;
padding: 2.5em 1.5em;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__menu {
position: absolute;
right: 5%;
top: 50%;
transform: translate(5%, -50%);
}
span {
display: block;
width: 25px;
height: 2px;
background: white;
margin: 5px;
transition: all 400ms ease-in-out;
}
.header__links {
font-size: 1.125em;
font-family: 'Barlow', sans-serif;
font-weight: 200;
z-index: 98;
}
.header__text {
text-decoration: none;
color: white;
font-weight: 200;
z-index: 99;
}
.header__text:hover {
color: #eee;
}
.header__text:not(:last-child) {
margin-right: 1.125em;
}
/* header===responsive
-------------------- */
#media screen and (min-width: 23.4375em) {
body {
overflow-x: hidden;
}
.header__links {
display: none;
position: absolute;
top: 110%;
right: 50%;
transform: translateX(160%);
transition: transform 400ms ease-in-out;
background: white;
width: 90vw;
height: 40vh;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.header__links::after {
content: '';
position: absolute;
top: -1em;
right: 0em;
border-width: 1em;
border-style: solid;
border-color: transparent white transparent transparent;
}
.header__text {
color: hsl(213, 9%, 39%);
}
.header__text:hover {
color: hsl(210, 4%, 67%);
}
.btn {
background: hsl(51, 100%, 49%);
}
}
/* mobileMenu
------------- */
.burgerActive {
transform: translateX(50%);
}
.header__menu.anim span:nth-child(1) {
transform: translate(5px, 8px) rotate(135deg);
}
.header__menu.anim span:nth-child(2) {
opacity: 0;
}
.header__menu.anim span:nth-child(3) {
transform: translate(5px, -8px) rotate(-135deg);
}
/* ----------------------------- */
#media screen and (min-width: 50em) {
.header__links {
display: block;
}
.header__menu {
display: none;
}
}
/* home-hero
------------ */
.home__hero {
background-image: url('./images/mobile/image-header.jpg');
padding: 10em 0;
background-repeat: no-repeat;
background-size: cover;
background-position: bottom 20% right;
font-family: 'Fraunces', serif;
}
.title {
color: hsl(0, 0%, 100%);
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 3rem;
padding-bottom: 3.5em;
}
.container {
position: relative;
}
.hero__arrow {
position: absolute;
right: 50%;
top: 60%;
transform: translateX(50%);
}
/* about
------------ */
.about__cta {
display: grid;
grid-template-columns: auto;
}
.about__card {
width: 100%;
border: 2px solid red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.bg__spec__img__1 {
background-image: url('./images/mobile/image-transform.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
min-height: 45vh;
}
Your <nav> element in the header has a height of 0, according to chrome inspector.
Culprit appears to be some combination of the following styles on .header__links being applied in this media query: #media screen and (min-width: 23.4375em):
position: absolute;
transform: translateX(160%);
height: 40vh;
If I remove the above styles then I can see the desktop header, so my guess is you'll need to add an additional media query (with a larger, more desktop-appropriate min-width value) that overrides those styles with something more like what you're going for for your desktop UI. You'll likely need to play around with it to get it to look right.
I want my text in the three link boxes to be vertically aligned in the middle - but they won't for some reason?
I also want the entire div each of the three sport options sit in, to be a clickable box. I have made "marathon" div clickable, but it messes up the alignment
What are these 2 problems ocurring?
*{
margin: 0;
padding: 0;
}/*
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}*/
html,
body {
height:100%;
width: 100%;
}
.parent-container {
min-height:100%;
width: 100%;
position:relative;
background: black;
text-align: center;
margin: 0 auto;
}
.child-container{
margin: 0 auto;
width: 80%;
height: 60%;
display:flex;
justify-content: center;
left: 10%;
top: 20%;
background: black;
position: absolute;
flex-direction: column;
align-items: center;
border-radius: 0%;
border: 2px solid #39ff14 ;
font-family: 'Montserrat';
}
.Marathon {
top: 17.5%;
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
margin-top: auto;
}
.Marathon:hover{
background: grey;
}
.Hockey:hover{
background: grey;
}
.Cycling:hover{
background: grey;
}
.Hockey {
border: 2px solid #39ff14 ;
width: 50%;
height: 10%;
top: 45%;margin-top: auto;
}
.Cycling {
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
top: 72.5%;
margin-top:auto;
margin-bottom:auto;
}
h1{
color:#39ff14;
font-family: 'Nunito';
padding-top: 5%;
text-align: left;
margin-left: 10%;
}
a{
text-decoration: none;
}
.child-container a{
color: #39ff14;
text-decoration: none;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="5">
<link type="text/css" rel="stylesheet" href="Styles.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<title>My Map App</title>
</head>
<body>
<div class="parent-container">
<h1>My Map App</h1>
<div class="child-container">
<div class="Marathon">Marathon</div>
<div class="Hockey">Hockey</div>
<div class="Cycling">Cycling</div>
</div>
</div>
</body>
</html>
Also, I want my web app to show up nicely on my mobile. Currently, my web app shows nicely on my PC, but when I open on mobile, the title "My Map App" is tiny! How can I resolve this?
Thanks in advance
PS, very new to this!
You should remove all those individual styles for Hockey, Cycling, and Marathon. And add this to your .child-container style:
flex-direction: column;
align-items: center;
Though I wouldn't recommend something so general, a more global style for your links could look something like this:
.child-container > * {
padding: 12px 10%;
border: solid 2px #39ff14;
min-width: 150px;
margin-bottom: 20px;
}
Lastly, add this to the head of your document so mobile isn't so zoomed out:
<meta name="viewport" content="width=device-width, initial-scale=1">
Your Code has a minor syntax error. Make sure to keep track of tags. In this case, the div tag was accidentally placed after the anchor tag in the marathon section of the html. If you have a bug with an html element- go to that class to see why it is different from the others.
*{
margin: 0;
padding: 0;
}/*
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}*/
html,
body {
height:100%;
width: 100%;
}
.parent-container {
min-height:100%;
width: 100%;
position:relative;
background: black;
text-align: center;
margin: 0 auto;
}
.child-container{
margin: 0 auto;
width: 80%;
height: 60%;
display:flex;
justify-content: center;
left: 10%;
top: 20%;
background: black;
position: absolute;
border-radius: 0%;
border: 2px solid #39ff14 ;
font-family: 'Montserrat';
}
.Marathon {
padding: 0;
position: absolute;
top: 17.5%;
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
color: #39ff14;
vertical-align: middle;
margin-top: auto;
border-radius: 0%;
}
.Marathon:hover{
background: grey;
}
.Hockey:hover{
background: grey;
}
.Cycling:hover{
background: grey;
}
.Hockey {
padding: 0;
position: absolute;
top: 45%;
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
color: #39ff14;
vertical-align: middle;
margin-top: auto;
border-radius: 0%;
}
.Cycling {
padding: 0;
position: absolute;
top: 72.5%;
height: 10%;
width: 50%;
border: 2px solid #39ff14 ;
color: #39ff14;
vertical-align: middle;
margin-top: auto;
border-radius: 0%;
}
.parent-container h1{
color:#39ff14;
font-family: 'Nunito';
padding-top: 5%;
text-align: left;
margin-left: 10%;
}
a{
text-decoration: none;
}
.child-container a{
color: #39ff14;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="5">
<link type="text/css" rel="stylesheet" href="Styles.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<title>My Map App</title>
</head>
<body>
<div class="parent-container">
<h1>My Map App</h1>
<div class="child-container">
<div class="Marathon">Marathon</div>
<div class="Hockey">Hockey</div>
<div class="Cycling">Cycling</div>
</div>
</div>
</body>
</html>
You probably want to change the box styles so that they look nicer.
As for the mobile vs desktop problem look into this:
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
How about something super simple as this?
<a> //This will act as your button container
<p>Cycling</p> // Here goes the name
</a>
Give style of Button to your <a>, hence it will function as a button.
Keep CSS as simple as you could.
* {
background: black;
}
.parent-container {
margin: 40px;
}
.parent-container h1 {
font-size: 30px;
color: #39ff14;
}
.child-container {
display: flex;
flex-direction: column;
border: 2px solid #39ff14;
padding-top: 20px;
}
.child-container a {
flex: 1;
border: 2px solid #39ff14;
margin: 0px auto 20px auto;
width: 30%;
text-decoration: none;
}
.Marathon {
text-align: center;
color: #39ff14;
margin: 0;
height: 40px;
line-height: 40px;
}
.Hockey {
color: #39ff14;
text-align: center;
margin: 0;
height: 40px;
line-height: 40px;
}
.Cycling {
color: #39ff14;
text-align: center;
margin: 0;
height: 40px;
line-height: 40px;
}
<div class="parent-container">
<h1>My Map App</h1>
<div class="child-container">
<a href="marathon.php">
<p class="Marathon">Marathon</p>
</a>
<a href="hockey.php">
<p class="Hockey">Hockey</p>
</a>
<a href="cycling.php">
<p class="Cycling">Cycling</p>
</a>
</div>
</div>
So I have this front page and I'm trying to have the button align towards the middle like below the text, but I've tried adding margins and it won't move. Any tips?
.parallax {
height: 100vh;
width: 100%;
background-color: #C4CBCA;
background-attachment: scroll; /*fixed: image scrolls; scroll: image stays*/
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.create {
background-color: #a4cdd1;
color: white;
min-width: 214px;
border: none;
height: 43px;
display: inline-block;
float: right;
font: 700 15px Lato, arial, helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
align-items: center;
padding: 13px 15px 10px;
/*margin-left: 300px;*/
/*margin-top: 10px;*/
border: none;
cursor: pointer;
}
#animated-example {
font: 700 30px Lato, arial, helvetica, sans-serif;
color: #5D5F71;
float: right;
margin-top: 200px;
margin-right: 20px;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: linear;
}
#keyframes lightSpeedIn {
0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
}
.lightSpeedIn {
animation-name: lightSpeedIn;
animation-timing-function: ease-out;
}
.animated.lightSpeedIn {
animation-duration: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>front page</title>
<link rel="stylesheet" href="front.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Raleway">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow">
</head>
<body>
<div class="parallax">
<div id="animated-example" class="animated lightSpeedIn">
<p>SOME TEXT HERE</p>
</div>
<div class="photo">
<img src="macmockup.png" style="width:675px; height:675px; margin-left:20px; margin-top:15px;">
</div>
<div class="create">
Create Template
</div>
</div>
</body>
</html>
So whats killing you here is the float right it is overriding anything you add after that.
Now i don't think this is the best solution but if you remove the float you can then add whatever margin left you need to get the button to move.
something to look into for you would be bootstrap, it is a much cleaner way to format a lot of this http://getbootstrap.com/
Try to do this Remove float: right from .create
<div class="create_wrapper">
<div class="create">
Create Template
</div>
</div>
CSS
.create {
background-color: #a4cdd1;
color: white;
min-width: 214px;
border: none;
height: 43px;
display: inline-block;
font: 700 15px Lato, arial, helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
align-items: center;
padding: 13px 15px 10px;
margin: auto;
border: none;
cursor: pointer;
}
.create_wrapper {
width: 100%;
text-align: center
}
Try to align .create to center if you want it in the middle.
.create{ text-align: center; }
add following css on your style:
.parallax {
position: relative;
}
.create {
position: absolute;
bottom: 0;
right:0;
}
check live http://codepen.io/sifulislam/pen/qaAjgY
How can I push the button down just after the text, as it stands now, it is stuck at the top before the text. It should go after the text:
Current result:
Desired result:
Here is the HTML/CSS markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
/*--------------------------------------------------------------------------------------------------
CUSTOM ALERT BOX
--------------------------------------------------------------------------------------------------*/
#alertBox_container {
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid #808080;
position: relative;
color: rgb(11,63,113);
}
#alertBox {
height: 100px;
width: 400px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: Arial;
font-size: 9pt;
}
#alertBox_titlebar {
line-height:24px;
width: 100%;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
font-weight: bold;
}
.alertBox_Button {
color: #464646;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color:#ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
}
.alertBox_Button:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
#alertBox_close {
line-height: 10px;
width: 18px;
font-size: 8pt;
font-weight: bold;
margin-top: 2px;
margin-right: 2px;
padding-left: 2px;
padding-top: 2px;
position:absolute;
top:0;
right:0;
}
#alertBox_text {
position: absolute;
width: 100%;
height: auto;
top: 50%;
text-align: center;
}
#alertBox_div_btn_OK {
position: absolute;
width: 100%;
height: auto;
text-align: center;
}
#alertBox_btn_OK {
height: 20px;
width: 50px;
font-size: 9pt;
}
</style>
</head>
<body>
<!-- Start of custom alertbox -->
<div id="alertBox">
<div id="alertBox_container">
<div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
<div><input class="alertBox_Button" id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
<div id="alertBox_text">Searching the database...</div>
<div id="alertBox_div_btn_OK"><input class="alertBox_Button" id="alertBox_btn_OK" type="button" value="OK" onclick="alertBox_hide()"></div>
</div>
</div>
</div>
<!-- End of custom alertbox -->
</body>
</html>
I don't see any reason why you are positioning the elements absolutely within the box. Get rid of that:
http://jsfiddle.net/qysTW/1
#alertBox_text {
width: 100%;
height: auto;
text-align: center;
}
#alertBox_div_btn_OK {
width: 100%;
height: auto;
text-align: center;
}
You can then use margin to space them out properly. Even the width and height shouldn't be needed unless there's something else on your greater page which this is overriding.
I want to display the range input slider in "Vertical".
i use this code to display vertical -webkit-appearance: slider-vertical it displays the slider but css is not working it showing ordinary inputrange slider.
Can anyone help me how to do that .
this is my code
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;"/>
<title>How to style an HTML5 range input with CSS</title>
<style type="text/css" media="screen">
body {
font-family: Helvetica, sans-serif;
margin: 0;
padding: 10px;
}
input[type='range'] {
-webkit-appearance: slider-vertical !important;
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #333;
background-color: #157DEC;
display: block;
height: 15px;
left: 10px;
margin: -100px 0 0 100px;
position: absolute;
right: 10px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
-webkit-border-radius: 10px;
background-color: #FFFFFF;
background-image: -webkit-gradient(circular, left top, left bottom, from(##FFFFFF), to(#AAA));
border: 1px solid #999;
height: 33px;
width: 33px;
}
#range {
display: block;
font-size: 200%;
font-weight: bold;
margin: -58px -12px 107px 4px ;
text-align: center;
}
p {
position: absolute;
bottom: 0;
left: 10px;
font-size: 10px;
right: 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<span id="range">0</span>
<input type=range name=salary min="0" max="5" value="0" step="1" onchange="showValue(this.value)" />
</div>
<script type="text/javascript">
function showValue(newValue) {
document.getElementById("range").innerHTML=newValue;
}
</script>
</body>
</html>
Don't of height in your css. You forcing to a fixed dimension.
here is my suggestion for your style
body {
font-family: Helvetica, sans-serif;
margin: 0;
padding: 10px;
overflow:hidden;
}
input[type='range'] {
-webkit-appearance: slider-vertical;/*comment this to see the result*/
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #333;
background-color: #157DEC;
display: block;
/*height: 15px;*/
left: 10px;
/*margin: -100px 0 0 100px;*/
/*position: absolute;*/
right: 10px;
margin-top:50px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
-webkit-border-radius: 10px;
background-color: #FFFFFF;
background-image: -webkit-gradient(circular, left top, left bottom, from(##FFFFFF), to(#AAA));
border: 1px solid #999;
/* height: 33px;*/
width: 33px;
}
#range {
display: block;
font-size: 200%;
font-weight: bold;
margin: -58px -12px 107px 4px ;
text-align: center;
}
p {
position: absolute;
bottom: 0;
left: 10px;
font-size: 10px;
right: 10px;
text-align: center;
}
A here is a preview on fiddle: http://jsfiddle.net/QXzLT/