I am creating a website with a login and sign in feature, and want to place the buttons over a solid dark blue background above the gradient but below the buttons. When I try to create a shape, the buttons move down on the website to accommodate room for it, but I want the shape to be on a layer below the buttons but still visible. Is there any way of doing this in CSS?
If so, how? Thanks :)
Here is my CSS and HTML so far:
HTML:
html {
height: 100%;
background-size: cover;
background: #a5fcff;
background-repeat:no-repeat;
background: linear-gradient(#00033a, #a5fcff);
}
.signinbutton {
background-color: #458af9;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
display: block;
font-size: 75px;
margin: 4px 2px;
cursor: pointer;
transition-duration: 0.5s;
margin-left: auto;
margin-right: auto;
margin-top: 225px;
}
.signinbutton:hover {
background-color: #a7acb7;
}
.createaccbutton {
background-color: #458af9;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
display: block;
font-size: 75px;
margin: 4px 2px;
cursor: pointer;
transition-duration: 0.5s;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
.createaccbutton:hover {
background-color: #a7acb7;
}
<html>
<head>
<title>Debate Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class = "square"></div>
<button class = "signinbutton">SIGN IN</button>
<button class = "createaccbutton">SIGN UP</button>
</body>
</html>
UPDATE:
Sorry, I want the website screen to look like this:
Login Screen mock-up
But it currently looks like this:
Actual login screen so far
Use position: absolute; as mentioned above. If you end up with something on top of another (covering up the thing underneath) then you can use z-index: [number]; to specify what is on top of what.
You can position the element absolute relative to the html or another container.
example style:
.square {
position: absolute;
top: 0;
margin-left: auto;
height: 200px;
width: 200px;
background: #f00;
margin-right: auto;
left: 0;
right: 0;
}
Working example
1) First, edit your html, body style.
html {
height:100%
}
body {
background: #a5fcff;
background: linear-gradient(#00033a, #a5fcff); /* background first, followed by the other options */
background-size: cover;
background-repeat:no-repeat;
background-attachment: fixed /* for repeating gradient */
}
2) Customize .square element if you want.
.square {
position: absolute;
top:0; /* above the gradient */
left:0;margin-left:auto;right:0;margin-right:auto; /* center position:absolute element */
height: 200px;
width: 200px;
background: #0000ff
}
4) Add one margin line for buttons and remove others.
.signinbutton {
margin: 225px auto 0 auto; /* 225px for top, auto for right&left, 0px for bottom */
}
.createaccbutton {
margin: 100px auto 0 auto; /* 100px for top, auto for right&left, 0px for bottom */
}
Related
I am building a navigation bar that has a lot of options and special sections.
I worked with Twitter Bootstrap, but it is difficult to develop.
The nav html tag has 3 sections grouped in 3 divs (left, center, right).
I am having difficulty in centring horizontally the text and logo of the company in left div, anchors with navigation items in the right div.
I need the height of navigation bar to be set in the CSS and not the calculate the height based of the child elements.
This is the html:
.navbar {
overflow: hidden; /* Clips from content if it is bigger than the parent element */
background-color: #333;
position: fixed; /* Position of the navbar is fixed */
top: 0;
width: 100%;
height: 50px;
}
.left-navbar {
float: left;
background: cadetblue;
width: 230px;
height: 100%;
text-align: center;
}
.right-navbar {
float: right;
background: maroon;
height: 100%;
/* float: right;
position: absolute;
top: 50%; right: 0%;
transform: translate(-50%,-50%);
background: gold;
padding: 1.5rem; */
}
.center-navbar {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
background: gold;
padding: 1rem;
}
.left-navbar strong {
color: red;
padding: 10px 10px;
display:inline-block;
text-align: center;
vertical-align: center;
}
.left-navbar img {
width: 32px;
height: 32px;
padding: 10px 10px;
}
.navbar a {
float: right; /* Orientation of the element in the parent element */
display: block; /* All over top left right bottom it is a block - element has block/padding all over the embedded element */
color: #f2f2f2;
text-align: center;
padding: 14px 16px; /* 14px top and bottom, 16px right and left */
text-decoration: none; /* Could be underline, overline, line-through */
font-size: 17px;
}
/* Apply only for anchors inside the navbar class */
.navbar a:hover {
background: #ddd;
color: black;
}
input[type="text"]{ padding: 5px 5px; line-height: 28px; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar">
<div class="left-navbar">
<strong>Company</strong>
<img src="https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/newsvine-512.png"></p>
</div>
<div class="center-navbar">
<input type="text" id="name" name="name" required height="45px;"
minlength="4" maxlength="40" size="40">
</div>
<div class="right-navbar">
Home
News
Contact
</div>
</nav>
Any working fiddle with best practices is ideal for me.
Thank you!
You can use flexbox to achieve this
.right-navbar, .left-navbar{
display: flex;
justify-content: center;
align-items: center;
}
Here you have a codepen, let me know if that help!
Give .left-navbar - horizontal and vertical centering with display:flex;
.left-navbar {
display: flex;
float: left;
background: cadetblue;
width: 230px;
height: 100%;
text-align: center;
justify-content: center;
align-items: center;
}
Also, how do you want the right part of the navbar?
Flex-box is what you'll want to use here. Add display: flex to the .navbar and then add flex-grow: 1; to the center piece. This essentially says 'make this element span the remaining space in the flex container. Also, your height: 100% were unnecessary, so I removed them.
.navbar {
overflow: hidden; /* Clips from content if it is bigger than the parent element */
background-color: #333;
position: fixed; /* Position of the navbar is fixed */
top: 0;
width: 100%;
height: 50px;
display: flex;
}
.left-navbar {
background: cadetblue;
width: 230px;
text-align: center;
}
.right-navbar {
background: maroon;
}
.center-navbar {
background: gold;
padding: 1rem;
flex-grow: 1;
}
input[type="text"]{
padding: 5px 5px;
line-height: 28px;
width: 100%;
box-sizing: border-box;
}
I want to rotate entire body 90 degree counterclockwise. Here is what I did:
body, html {
position: relative;
padding: 0;
margin: 0;
height: 100%;
min-height: 100%;
max-height: 100%;
background: black;
}
.msg {
color: white;
font-size: 350%;
text-shadow: 4px 4px 15px gray;
margin: 10px 10px 10px 10px;
z-index: 1;
bottom: 0;
direction: ltr; /* lang */
position: absolute;
text-align: center;
width: 100%
}
.wrapper{
transform: rotate(-90deg);
transform-origin:bottom right;
position:absolute;
top:-100vw;
height:100vw;
width:100vh;
background-color:#000;
color:#fff;
overflow:auto;
}
<body id="body">
<div class='wrapper'>
<div id="caption" class="msg"> Heloooooo</div>
</div>
</body>
However the result is like the image below and the contents are off located towards the left by almost 50%. What am I missing?
You are missing right 0:
.rotate90counterclockwise{
transform: rotate(-90deg);
transform-origin:bottom right;
position:absolute;
top:-100vw;
right:0;
height:100vw;
width:100vh;
}
body, html {
position: relative;
padding: 0;
margin: 0;
height: 100%;
min-height: 100%;
max-height: 100%;
background: black;
}
.msg {
color: white;
font-size: 350%;
text-shadow: 4px 4px 15px gray;
margin: 10px 10px 10px 10px;
z-index: 1;
bottom: 0;
direction: ltr; /* lang */
position: absolute;
text-align: center;
width: 100%
}
<body id="body">
<div class='rotate90counterclockwise'>
<div id="caption" class="msg"> Heloooooo</div>
</div>
</body>
It's difficult what you are trying to do. I think you want to make some all page rotation effect for that. You want to rotate the body to be more easy to control. But it's tricky what you are trying to make. It's more safe to rotate individual elements because, if you rotate the body, it will not be like an image. We talk about coding and you need to change all the page code. Width is ok to control but the height is the tricky one because height is the whole web page.
This is what works for me but maybe just for one text message. When you have more complex things, it will be hard to control it. This is my point.
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<style>
body {
transform: rotate(-90deg);
transform-origin: bottom right;
position: absolute;
top: -75vmax;
left: -50vmax;
height: 100vh;
width: 100vw;
background-color: black;
overflow: auto;
}
h1.red {
text-align: center;
color: red;
}
</style>
</head>
<!-- BODY -->
<body>
<h1 class="red">TEST TXT!</h1>
</body>
</html>
SS of how is look on my screen
You rotated the body 90 degrees, anything in the body will also be rotated 90 degrees.
What are you trying to do? Why not just rotate the elements in the body 90 degrees.
Thanks for the help. I will look for more clear questions in the future.
Anyways, got it to work on code pen using the method I mentioned above. Code and link below.
HTML:
<body id="body">
<div class='wrapper'>
<div id="caption" class="msg">
<p>Site Banner</p>
</div>
</div>
<main></main>
</body>
CSS:
body, html {
padding: 0;
margin: 0;
height: 100%;
background-color: #000;
font-family:Lucida Console;
}
.msg {
float: right;
}
.msg > p {
margin: 0px;
padding: 0px;
overflow: visible;
transform: rotate(-90deg) translate(-120px, 120px);
color: white;
font-size: 60px;
text-shadow: 4px 4px 15px gray;
margin: 10px 10px 10px 10px;
direction: ltr; /* lang */
text-align: right;
}
.wrapper{
display: block;
background-color: #000;
width: 100%;
height: 100vh;
overflow: hidden;
}
main{
display: block;
height: 600px;
width: 100%;
background-color: #222222;
}
CodePen: Site Banner Upper Right
So I have this code here: http://jsfiddle.net/nUwgX/ which has a little arrow at the bottom. What I'd like to happen is when the window get's resized is to keep the arrow about 15% from the bottom of the screen but I'm not sure how I'd do that. Any help would be appreciated.
HTML:
<div class = "container">
<div class = "top-wrapper">
<a id = "name" href = "#">Bigfoot Games</a>
</div>
<div class = "bottom-wrapper">
<p>Content</p>
</div>
</div>
CSS:
.container {
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
padding: 0;
text-align: center;
}
.top-wrapper {
position: relative;
background: #0f0f0f;
height: auto;
height: 100%;
max-height: 900px;
width: 100%;
margin: 0 auto;
padding: 0;
display: table;
}
.top-wrapper:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(15, 15, 15, 0);
border-top-color: #0f0f0f;
border-width: 30px;
margin-left: -30px;
}
#name {
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 20px;
color: white;
font-size: 80px;
text-decoration: none;
margin: auto 0;
}
.bottom-wrapper {
background: white;
margin: 0 auto;
padding: 20px;
}
Edit: Okay, so saying that I wanted the arrow about 15% above is not what I meant! Ha! What I mean is, I want the .top-wrapper to be 100% so that it covers the whole window, and you scroll down to see the .bottom-wrapper - however when the screen is resized (other than my 1920 x 1080 resolution) the arrow get's hidden just out of sight, what I'd like is the arrow to be visible regardless of resolution and have the look (in terms of padding/distance) as a 1920 x 1080 resolution.
Change the css of .top-wrapper to only take up 85%, that leaves 15% for the "arrow" on the bottom to take up.
.top-wrapper {
...
height: 85%;
...
}
see the jsfiddle:
http://jsfiddle.net/nUwgX/1/
Change your .top-wrapper height to 85%
I changed just that in the jsfiddle and it maintains when the screen is resized. If that isn't what you are looking for, please elaborate on the question.
Good Luck!
If you want to keep your bottom-wrapper at the bottom fixed position ...
Replace your .bottom-wrapper class with below
.bottom-wrapper {
position:fixed;
bottom: 0px;
height: 15%;
width: 100%;
background-color: white;
margin: 0 auto;
}
.bottom-wrapper p{
padding-top: 20px;
}
Then change .top-wrapper:after to .bottom-wrapper:before
What I am trying to do is, placing the two div blocks, CV and Contact at the bottom of the page, and when hovered over it, they would cover the whole page like they do at this state. I tried to move them with margin-top property, but they didn't behave proper when i hovered on them. Also, I want no scroll bars that is whatever user's screen size is, the boxes always appear in corner of page. Is my solution is valid for this, or do i need some javascript to do these? Here is my jsfiddle:
http://jsfiddle.net/cR9NL/
what positions should I use in this situation: absolute or relative?
html code is still the same, below is my css for you and demo:
CSS
html, body { height: 100%; max-width: 100%; margin: 0; padding: 0; }
#container {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
#container div {
height: 25%;
width: 15%;
text-align: center;
}
#container>div:hover {
height: 100%;
width: 100%;
text-align: center;
position: absolute;
z-index: 5;
}
#upper-left{
background: #77cc00;
float: left;
border: solid 3px #99ee22;
}
#upper-right{
background: #ffdd22;
float: right;
border: solid 3px #ffff44;
}
#lower-right {
position: absolute;
bottom:0;
right: 0;
background: #55bbff;
border: solid 3px #77ddff;
}
#lower-left{
position: absolute;
bottom: 0;
left: 0;
background: #ff5522;
border: solid 3px #ff7744;
}
#container>div>p {
font-family: Tahoma;
margin: 28% auto;
font-weight: 900;
color: white;
font-size: 30px;
}
DEMO
http://jsfiddle.net/bartekbielawa/cR9NL/2/
Make the lower-left and lower-right divs positioned absolute, with 0 for the bottom value and 0 for the left and right values, respectively.
Fiddle :) :
position:absolute;
bottom:0;
right:0;
http://jsfiddle.net/cR9NL/1/
I am sure this is a complete oversight on my part, but I have a button I would like to the immediate right of an input box, my html is:
<input type="text" name="q" id="search" />
<input type="submit" name="submit" id="submit" value="Go!" />
and css is:
#main input {
margin: 30px auto auto 130px ;
positiom: absolute;
font-size: 18px;
background: #fff;
border: 3px;
padding: 6px;
z-index: 3;
}
#search {
float: left;
width: 550px;
}
#submit {
width: 60px;
}
#submit::-moz-focus-inner {
border: 0;
padding: 0;
}
The Go! button just sits directly below the left side of the submit box and any kind of margin tweaking is in vain bc it just stays there. Also tried making the position absolute and the button overlaps.
The Go! button will not position correctly - it is supposed to be to the right of my input box but it hangs below it instead.
How can I get it to position directly to the right my input box?
Thanks for any help!
EDIT:
html{
background: url(images/bg5.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#main{
width: 875px;
height: 350px;
background: url(images/form3.png) 0 0 no-repeat;
margin:250px auto;
z-index: 1;
}
#main form {
width: 850px;
height: 191px;
background: url(images/logo3.png) 0 0 no-repeat;
margin: -165px auto auto -90px;
position: absolute;
z-index: 2;
}
#text {
font-size: 30px;
color: #ffffff;
font-family: parisjetaime;
margin: 189px auto auto 130px ;
line-height: 30px;
}
#main input {
margin: 30px auto auto 130px ;
font-size: 18px;
background: #fff;
border: 3px;
padding: 6px;
z-index: 3;
}
#search {
width: 550px;
}
#submit {
width: 60px;
float: right;
}
#submit::-moz-focus-inner {
border: 0;
padding: 0;
}
Not sure if this is where your problem is, but it seems that by taking out margin: 130px auto auto 200px ; from #submit the Go! button is properly placed on the right of the search box.
Demo:
http://jsfiddle.net/3ykRD/
Edit
Solution: http://jsfiddle.net/H3gYM/1/
The #main input properties were overriding the #submit properties - in this case the margins are what made the Go! button be displaced. Placing !important cancels the override and then tweaking the margins fixed the problem.
Why absolutely position your inputs? Here is a slightly trimmed down code which will put them next to each-other. The float:left was causing the height dis-joint because it causes the two elements to no longer be in the same 'line'
#main input {
font-size: 18px;
background: #fff;
border: 3px;
padding: 6px;
z-index: 3;
}
#search {
width: 550px;
}
#submit {
width: 60px;
}
#submit::-moz-focus-inner {
border: 0;
padding: 0;
}
I think what you want is to place the button just right to the text box, right? If so You need to float the input button and the textbox to left too;
#textbox {
float: left;
}
#submit {
width: 60px;
float: left;
}
This always work for me :) Let me know if it worked!