The issue I'm having is that the two elements mafia and vampire don't align correctly. I'm able to retain the properties of the mafia element so that it looks like a box, but I can't do the same thing for the vampire element.
code:
div#boxes {
clear: both;
float: right;
width: 400px;
margin: 0 10px 10px;
vertical-align: top;
display: inline;
background-color: #fff;
border: 1px solid black;
height: 75px;
/* overflow: hidden; */
}
span#mafia {
clear: both;
float: left;
width: 199px;
margin: 0 -1px -1px;
vertical-align: top;
display: inline-block;
border: 1px solid rgb(153, 170, 181);
text-align: center;
position: relative;
top: -0.5px;
}
span#vampire {
clear: both;
/* float: initial; */
width: 50%;
margin: 0 -1px -1px;
vertical-align: top;
display: contents;
border: 1px solid rgb(153, 170, 181);
/* text-align: center; */
position: relative;
top: -0.5px;
/* margin-bottom: inherit; */
bottom: 50px;
padding-top: 50px;
}
div.rititle {
/* position: relative; */
vertical-align: top;
border-bottom: 1px solid rgb(153, 170, 181) !important;
float: left;
width: 200px;
/* margin-bottom: initial !important; */
text-align: center;
clear: both;
margin-left: auto;
display: inline-block;
font-size: 17px;
}
Style Attribute {
background-color: rgb(39, 44, 48);
color: rgb(230, 230, 230);
border-color: rgb(153, 170, 181);
}
span#mafia {
clear: both;
float: left;
width: 199px;
margin: 0 -1px -1px;
vertical-align: top;
display: inline-block;
border: 1px solid rgb(153, 170, 181);
text-align: center;
position: relative;
top: -0.5px;
}
Style Attribute {
background-color: rgb(39, 44, 48);
color: rgb(230, 230, 230);
border-color: rgb(153, 170, 181);
}
Style Attribute {
background-color: rgb(39, 44, 48);
color: rgb(230, 230, 230);
border-color: rgb(153, 170, 181);
}
Style Attribute {
background-color: rgb(39, 44, 48);
color: rgb(230, 230, 230);
border-color: rgb(153, 170, 181);
}
#container {
left: 0px;
color: #000;
width: 1000px;
min-width: 499px;
margin: 10px auto;
position: relative;
background-color: #FFF;
box-shadow: -2px 2px 5px #111;
}
Style Attribute {
background-color: rgb(39, 44, 48);
color: rgb(230, 230, 230);
border-color: rgb(153, 170, 181);
}
body {
color: #FFF;
background-color: #999;
font-family: Arial, sans-serif;
/* margin-bottom: 40px; */
}
.rititle {
margin-left: 10px;
font-weight: bold;
vertical-align: top;
}
* {
margin: 0px;
padding: 0px;
}
div {
display: block;
}
div#switch {
clear: both !important;
width: 200px !important;
margin: 0 0px 0px !important;
vertical-align: middle !important;
display: block !important;
text-align: center !important;
position: relative !important;
border: 1px solid rgb(153, 170, 181);
/*top: -76px;*/
float: right;
text-align: center !important;
border-bottom: 1px solid rgb(153, 170, 181) !important;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="boxes" style="background-color: rgb(39, 44, 48);color: rgb(230, 230, 230);border-color: rgb(153, 170, 181);"><span id="mafia" style="background-color: rgb(39, 44, 48); color: rgb(230, 230, 230); border-color: rgb(153, 170, 181);"><div class="rititle">Mafia</div><div style="font-size: 12px"><span class="rititle">Mafioso: </span>2. Cotton Mather</div>
<div style="font-size: 12px"><span class="rititle">Consort: </span>4. Edward Bishop</div>
<div style="font-size: 12px"><span class="rititle">Godfather: </span>7. Black Stain</div>
<div style="font-size: 12px"><span class="rititle">Consigliere: </span>10. bonr juice</div>
</span><span id="vampire" style="background-color: rgb(39, 44, 48); color: rgb(230, 230, 230); border-color: rgb(153, 170, 181);"><div id="switch" class="rititle">Coven</div><div style="font-size: 12px"><span class="rititle">Coven Leader: </span>1. Oppai Dragon</div>
<div
style="font-size: 12px"><span class="rititle">Medusa: </span>3. Jades Whoree</div>
<div style="font-size: 12px"><span class="rititle">Potion Master: </span>11. RainBow</div>
<div style="font-size: 12px"><span class="rititle">Necromancer: </span>13. DevilEvilSatan</div>
<div style="font-size: 12px"><span class="rititle">Necromancer: </span>13. DevilEvilSatan</div>
</span>
<div style="font-size: 12px"><span class="rititle">Necromancer: </span>13. DevilEvilSatan</div>
</div>
</body>
</html>
I am trying to align the two span elements called mafia and vampire along with their children elements like columns. Also, would it be possible to make it so that the height of the element boxes changes to fit the length of the longest column?
As simple as below using css flexbox;
Your code is sooo dirty, mostly redundant, false use of classes and styles.
.columns{
display: flex;
}
.columns .box{
flex: 1;
background: #000;
color: #fff;
border: 1px solid #f5f5f5;
text-align: center;
display: flex;
flex-direction: column;
}
.box .title{
font-weight: bold;
font-size: 15px;
padding: 5px;
border: 1px solid #f5f5f5;
}
<div class='columns'>
<div class='box'>
<span class='title'>Mafia</span>
</div>
<div class='box'>
<span class='title'>Coven</span>
<span>sssssss</span>
<span>sssssss</span>
<span>sssssss</span>
</div>
</div>
Related
Need to make lines opposite to each other, now the lines are under each other. Tried a lot of methods but nothing work, please help! Really stuck with that. See the code below and a picture that shows the desired result, idk what to do. Tried to add margin; top; bottom; padding, these methods didn't do anything.
Here's the CSS and HTML:
.crypto-card{
width: 250px;
height: 230px;
background: white;
-webkit-box-shadow: 0px 3px 8px 0px rgba(194,192,194,1);
-moz-box-shadow: 0px 3px 8px 0px rgba(194,192,194,1);
box-shadow: 0px 3px 2px 0px rgba(240,240,240,1);
border-radius: 6px;
transition: .3s;
margin-left: 15px;
margin-right: 25px;
margin-bottom: 20px;
border: 1px solid rgb(245, 245, 245);
}
.crypto-card:hover{
transform: translateY(-1px);
-webkit-box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
-moz-box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
}
.crypto-card .body{
width: 100%;
border-top: 1px solid rgb(240, 240, 240);
padding: 10px;
}
.crypto-card .logo-sprite{
width: 29px;
height: 29px;
margin: 10px;
}
.crypto-symbol{
border-left: 1px solid rgb(220, 220, 220);
padding-left: 10px;
font-size: 1.3rem;
/* font-family: 'Loto', sans-serif; */
letter-spacing: 5px;
text-transform: uppercase;
/* color: #3c3c3c; */
font-weight: 500;
color: rgb(70, 70, 70);
padding-bottom: 4px;
position: relative;
top: 4px;
}
.crypto-card .price-label{
width: 100%;
text-align: left;
color: rgb(190, 190, 190);
font-weight: 500;
font-size: .8rem;
}
.crypto-card .price{
font-size: 1.5rem;
font-weight: 100;
right: -60px;
top: 4px;
text-align: right;
}
<div class="d-flex justify-content-left" style="margin-top: 10px; padding-left: 5%; padding-right: 5%;">
<div class="row" style="">
<div class="crypto-card">
<span>
<img src="https://s2.coinmarketcap.com/static/img/coins/64x64/1.png" class="logo-sprite" width="16" height="16" alt="Bitcoin">
<span class="crypto-symbol">BTC</span>
</span>
<div class="body">
<span class="price">$3865.58</span>
<div class="price-label"><span class="title">Price</span></div>
<span class="volume">$67,585,868,137</span>
</div>
</div>
But I need it similar to this
Using a display: grid would make this super easy.
Here's and example:
* {
box-sizing: border-box;
}
.container {
width: 500px;
margin: auto;
padding: 20px;
}
.card {
display: grid;
grid-template-columns: 50px auto;
grid-template-rows: 50px 200px;
border: 1px solid #eee;
border-radius: 5px;
}
.card .image {
display: block;
align-self: stretch;
justify-self: stretch;
padding: 5px;
border: 1px solid #eee;
border-top: 0;
border-left: 0;
}
.card .header {
padding: 10px;
border-bottom: 1px solid #eee;
}
.card .side {
border-right: 1px solid #eee;
white-space: nowrap;
display: flex;
align-items: center;
}
.card .side .text {
rotate: -90deg;
translate:-12px 0;
}
.card .content {
padding: 10px;
}
<div class="card">
<img
src="https://s2.coinmarketcap.com/static/img/coins/64x64/1.png"
class="image"
alt="Bitcoin"
/>
<div class="header">BTC is a scam</div>
<div class="side">
<div class="text">BIG SCAM</div>
</div>
<div class="content">content in here</div>
</div>
I'm trying to design a notification and I want to add an icon before the text, but I'm not getting it! My code looks like this:
HTML
<html>
<head>
<title></title>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="notif-container">teste</div>
</body>
</html>
CSS
body {
background-color: white !important;
}
.template, .notification {
display: none;
}
.notif-container::before{
max-width: 5px;
max-height: 5px;
background-image: url(https://image.flaticon.com/icons/svg/1828/1828743.svg);
background-position: left;
}
.notif-container {
width: 20%;
position: absolute;
right: 15%;
display: flex;
flex-flow: row;
flex-wrap: wrap;
padding: 10px;
background-image: -webkit-linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-image: -moz-linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-image: -o-linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-image: linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-position: center;
color: #ffffff;
text-shadow: 1px 1px #000;
border-radius: 2px;
margin: 5px;
font: caption;
font-size: 12px;
font-weight: bold;
text-align: center;
}
Somebody knows what I'm doing wrong and how can I do it? I already tried various ways but without success
You need position: relative on the element with the class notif-container.
body {
background-color: white !important;
}
.template, .notification {
display: none;
}
.notif-container::before {
content: '';
width: 16px;/*set the width instead of the max-width*/
height: 16px;/*The same goes here*/
background-image: url(https://image.flaticon.com/icons/svg/1828/1828743.svg);
background-position: center;/*Add this*/
background-size: contain; /*Add this*/
}
.notif-container {
width: 20%;
position: relative;/*change this*/
display: flex;
flex-flow: row;
flex-wrap: wrap;
padding: 10px;
background-image: -webkit-linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-image: -moz-linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-image: -o-linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-image: linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-position: center;
color: #ffffff;
text-shadow: 1px 1px #000;
border-radius: 2px;
margin: 5px;
font: caption;
font-size: 12px;
font-weight: bold;
text-align: center;
}
<div class="notif-container">teste</div>
Here is a clean version using flex-end on the parent element.
.notif-container{
display: flex;
justify-content: flex-end;
padding: 2rem;
}
.notif-container button {
border: none;
position: relative;/*change this*/
padding: 10px 24px;
color: #ffffff;
background-image: -webkit-linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-image: -moz-linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-image: -o-linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-image: linear-gradient(rgb(28, 154, 212), rgb(0, 78, 167));
background-position: center;
text-shadow: 1px 1px #000;
border-radius: 2px;
margin: 5px;
font: caption;
font-size: 12px;
font-weight: bold;
}
.notif-container button::before {
content: '';
position: absolute;
left: 6px;
width: 16px;/*set the width instead of the max-width*/
height: 16px;/*The same goes here*/
background-image: url(https://image.flaticon.com/icons/svg/1828/1828743.svg);
background-position: center;/*Add this*/
background-size: contain; /*Add this*/
}
<div class="notif-container">
<button>teste</button>
</div>
I came across this issue where I cannot get mine top-box to organize the elements correctly. I've tried everything that I know off and cannot get it to work. I need to have my text 100% in middle and logo just to left but every time I try to do that the text moves to right and its offset. And the Navigation bar to be under the logo and text and that is centered like 100% of time every time I try.
I have a main div as a container, this top-box is a child.
<div class="top-box">
<div class="logo">
<a href="#">
<img src="Assets/Images/WebsiteLogo.png" alt="">
</a>
</div>
<div class="webname">
<a href="#">
<h1>Universal Web Designs</h1>
</a>
</div>
<div class="navigationbar">
<ul>
<li>Home</li>
<li>Designs</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</div>
</div>
Some CSS not all
.top-box {
display: flex;
width: 90%;
padding: 0;
margin: 0.5rem 0 0 0;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background: rgba(0, 0, 0, 0.75);
border-top: solid white 1px;
border-right: solid white 1px;
border-left: solid white 1px;
}
.logo {
margin: 0;
padding: 0;
border: solid 1px red;
/* background: rgba(255, 255, 255, 1); */
/* border-radius: 5rem; */
}
.logo img {
width: 5rem;
margin: 0;
/* background: rgba(255, 255, 255, 1); */
/* border-radius: 5rem; */
}
.webname {
}
.webname a {
text-decoration: none;
}
.webname h1 {
padding: 0;
margin: 0;
font-size: 3.5rem;
color: rgba(26, 184, 212, 1);
text-shadow: 4px 2px 10px gray;
border: solid 1px red;
}
.webname h1:hover {
color: gray;
text-shadow: 4px 2px 10px rgb(26, 184, 212);
}
.navigationbar {
width: 100%;
text-align: center;
padding: 0;
margin: 0.2rem 0 0 0;
border: solid 1px red;
/* border-top: solid rgba(255, 255, 255, 0.1) 1px; */
}
.navigationbar ul {
list-style-type: none;
}
.navigationbar li{
display: inline;
text-transform: uppercase;
padding: 0;
margin: 0 2rem;
}
.navigationbar a {
text-decoration: none;
font-size: 1.2rem;
color: white;
text-shadow: 2px rgb(26, 184, 212);
}
.navigationbar a:hover {
color: #dc3545;
text-decoration: underline;
}
Thanks
Solution to you question with CSS grid:
.top-box {
width: 90%;
padding: 0;
margin: 0.5rem 0 0 0;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background: rgba(0, 0, 0, 0.75);
border-top: solid white 1px;
border-right: solid white 1px;
border-left: solid white 1px;
}
.grid {
display: grid;
grid-template-columns: 1fr 555px 1fr;
}
.logo {
margin: 0;
padding: 0;
border: solid 1px red;
/* background: rgba(255, 255, 255, 1); */
/* border-radius: 5rem; */
}
.logo img {
width: 5rem;
margin: 0;
/* background: rgba(255, 255, 255, 1); */
/* border-radius: 5rem; */
}
.webname {
margin: 0 auto;
}
.webname a {
text-decoration: none;
}
.webname h1 {
padding: 0;
margin: 0;
font-size: 3.5rem;
color: rgba(26, 184, 212, 1);
text-shadow: 4px 2px 10px gray;
/* border: solid 1px red; */
}
.webname h1:hover {
color: gray;
text-shadow: 4px 2px 10px rgb(26, 184, 212);
}
.navigationbar {
width: 100%;
text-align: center;
padding: 0;
margin: 0.2rem 0 0 0;
border: solid 1px red;
/* border-top: solid rgba(255, 255, 255, 0.1) 1px; */
}
.navigationbar ul {
list-style-type: none;
}
.navigationbar li{
display: inline;
text-transform: uppercase;
padding: 0;
margin: 0 2rem;
}
.navigationbar a {
text-decoration: none;
font-size: 1.2rem;
color: white;
text-shadow: 2px rgb(26, 184, 212);
}
.navigationbar a:hover {
color: #dc3545;
text-decoration: underline;
}
.logo {
width: 40px;
height:40px;
margin-left: auto;
margin-right: 10px;
align-self: center;
}
<div class="top-box">
<div class="grid">
<div class="logo">
<a href="#">
<img src="Assets/Images/WebsiteLogo.png" alt="">
</a>
</div>
<div class="webname">
<a href="#">
<h1>Universal Web Designs</h1>
</a>
</div>
</div>
<div class="navigationbar">
<ul>
<li>Home</li>
<li>Designs</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</div>
</div>
I am trying to make a navigation bar on my website. I have tried changing the display type of the element holding the buttons, but nothing happens. The main thing I am doing is centering those buttons in the middle of the navbar. What should I do to make it look more natural? Thanks in advance.
Apparently I have to have more sentences too so this is a sentence. This is another sentence. This is another one.
/* import fonts */
#import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300');
html, body {
margin: 0;
background-color: rgb(236, 240, 241);
}
button:focus {
outline:0;
}
.mainBlock {
background-color: rgb(29,49,49);
}
.mainBlock h1 {
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 48pt;
padding-top: 20px;
margin-bottom: 0;
padding-bottom: 0;
color: rgb(236, 240, 241);
margin-top: 0;
}
.mainBlock h3 {
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 18pt;
color: rgb(236, 240, 241);
margin-bottom: 50px;
}
/* big button styles */
.mainButtons {
text-align: center;
}
.mainButtons input[type=submit] {
font-family: 'Open Sans', sans-serif;
font-size: 15pt;
text-align: center;
border: none;
width: 200px;
height: 40px;
margin: 10px;
border-radius: 3px;
color: rgba(255, 255, 255, 1);
position: static;
cursor: pointer;
transition: all 0.1s ease-out;
}
#browse {
background-color: rgb(41, 128, 185);
box-shadow: 0 10px 0 0 rgb(53, 93, 158);
}
#browse:hover {
box-shadow: 0 7px 0 0 rgb(53, 93, 158);
}
#create {
background-color: rgb(231, 76, 60);
box-shadow: 0 10px 0 0 rgb(192, 57, 43);
margin-bottom: 42px;
}
#create:hover {
box-shadow: 0 7px 0 0 rgb(192, 57, 43);
}
button:focus, input[type="submit"]:focus {
outline:0;
}
#navlistcontainer {
float: right;
padding-right: 10px;
}
#nav {
background-color: rgb(26, 188, 156);
font-family: 'Open Sans', sans-serif;
padding-top: 20px;
padding-bottom: 20px;
}
#homelink {
text-decoration: none;
color: white;
background-color: rgb(22, 160, 133);
margin-left: 10px;
padding: 10px;
}
#login {
margin-left: 10px;
}
.navbaritem {
border-radius: 100px;
border: none;
height: 40px;
width: 100px;
box-shadow: 0 3px 7px 3px rgba(0, 0, 0, 0.2);
cursor: pointer;
color: white;
background-color: rgb(52, 73, 94);
transition: all 0.1s ease-out;
}
.navbaritem:hover {
box-shadow: 0 5px 10px 4px rgba(0, 0, 0, 0.2);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debater</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<!-- Include NavBar -->
<link href="components/navbar.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav id="nav">
<i class="fa fa-home fa-lg" aria-hidden="true"></i> Home
<div id="navlistcontainer">
<button class="navbaritem" id="signup">SIGNUP</button>
<button class="navbaritem" id="login">LOGIN</button>
</div>
</nav>
<!-- Big Main Page Block -->
<div class="mainBlock">
<h1>Welcome to site</h1>
<h3>siteinfo<br>
moreinfo</h3>
<div class="buttonsWrapper">
<form class="mainButtons">
<input type="submit" value="Basdasds" id="browse">
<input type="submit" value="Cs" id="create" formaction="debate.php">
</form> <!-- Ends the buttons form -->
</div> <!-- Ends buttons wrapper -->
</div>
</body>
</html>
I think part of the problem you're having is that your nav doesn't contain the height of its children because the buttons to the right are floated. In order to solve that problem, you can clearfix it.
With the nav clearfixed, the 20px top and bottom padding will actually sit evenly around the buttons. Then you can fix the misalignment of the home link on the left by changing it to display: inline-block.
/* import fonts */
#import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300');
html,
body {
margin: 0;
background-color: rgb(236, 240, 241);
}
.clearfix::after { /* THIS IS NEW */
content: '';
display: table;
clear: both;
}
button:focus {
outline: 0;
}
.mainBlock {
background-color: rgb(29, 49, 49);
}
.mainBlock h1 {
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 48pt;
padding-top: 20px;
margin-bottom: 0;
padding-bottom: 0;
color: rgb(236, 240, 241);
margin-top: 0;
}
.mainBlock h3 {
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 18pt;
color: rgb(236, 240, 241);
margin-bottom: 50px;
}
/* big button styles */
.mainButtons {
text-align: center;
}
.mainButtons input[type=submit] {
font-family: 'Open Sans', sans-serif;
font-size: 15pt;
text-align: center;
border: none;
width: 200px;
height: 40px;
margin: 10px;
border-radius: 3px;
color: rgba(255, 255, 255, 1);
position: static;
cursor: pointer;
transition: all 0.1s ease-out;
}
#browse {
background-color: rgb(41, 128, 185);
box-shadow: 0 10px 0 0 rgb(53, 93, 158);
}
#browse:hover {
box-shadow: 0 7px 0 0 rgb(53, 93, 158);
}
#create {
background-color: rgb(231, 76, 60);
box-shadow: 0 10px 0 0 rgb(192, 57, 43);
margin-bottom: 42px;
}
#create:hover {
box-shadow: 0 7px 0 0 rgb(192, 57, 43);
}
button:focus,
input[type="submit"]:focus {
outline: 0;
}
#navlistcontainer {
float: right;
padding-right: 10px;
}
#nav {
background-color: rgb(26, 188, 156);
font-family: 'Open Sans', sans-serif;
padding-top: 20px;
padding-bottom: 20px;
}
#homelink {
text-decoration: none;
color: white;
background-color: rgb(22, 160, 133);
margin-left: 10px;
padding: 10px;
display: inline-block; /* THIS IS NEW */
}
#login {
margin-left: 10px;
}
.navbaritem {
border-radius: 100px;
border: none;
height: 40px;
width: 100px;
box-shadow: 0 3px 7px 3px rgba(0, 0, 0, 0.2);
cursor: pointer;
color: white;
background-color: rgb(52, 73, 94);
transition: all 0.1s ease-out;
}
.navbaritem:hover {
box-shadow: 0 5px 10px 4px rgba(0, 0, 0, 0.2);
}
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav id="nav" class="clearfix"> <!-- CLEARFIX CLASS ADDED TO #NAV -->
<i class="fa fa-home fa-lg" aria-hidden="true"></i> Home
<div id="navlistcontainer">
<button class="navbaritem" id="signup">SIGNUP</button>
<button class="navbaritem" id="login">LOGIN</button>
</div>
</nav>
<!-- Big Main Page Block -->
<div class="mainBlock">
<h1>Welcome to site</h1>
<h3>siteinfo<br> moreinfo
</h3>
<div class="buttonsWrapper">
<form class="mainButtons">
<input type="submit" value="Basdasds" id="browse">
<input type="submit" value="Cs" id="create" formaction="debate.php">
</form>
<!-- Ends the buttons form -->
</div>
<!-- Ends buttons wrapper -->
</div>
Another option is that you can use a flex display. That'll make sure your nav always contains its children, but it's a different way of doing things. With a flex display, floats don't do anything, so you have to find a different way to align your stuff to the right and left edges of the page. justify-content: space-between will do you nicely there.
/* import fonts */
#import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300');
html,
body {
margin: 0;
background-color: rgb(236, 240, 241);
}
button:focus {
outline: 0;
}
.mainBlock {
background-color: rgb(29, 49, 49);
}
.mainBlock h1 {
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 48pt;
padding-top: 20px;
margin-bottom: 0;
padding-bottom: 0;
color: rgb(236, 240, 241);
margin-top: 0;
}
.mainBlock h3 {
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 18pt;
color: rgb(236, 240, 241);
margin-bottom: 50px;
}
/* big button styles */
.mainButtons {
text-align: center;
}
.mainButtons input[type=submit] {
font-family: 'Open Sans', sans-serif;
font-size: 15pt;
text-align: center;
border: none;
width: 200px;
height: 40px;
margin: 10px;
border-radius: 3px;
color: rgba(255, 255, 255, 1);
position: static;
cursor: pointer;
transition: all 0.1s ease-out;
}
#browse {
background-color: rgb(41, 128, 185);
box-shadow: 0 10px 0 0 rgb(53, 93, 158);
}
#browse:hover {
box-shadow: 0 7px 0 0 rgb(53, 93, 158);
}
#create {
background-color: rgb(231, 76, 60);
box-shadow: 0 10px 0 0 rgb(192, 57, 43);
margin-bottom: 42px;
}
#create:hover {
box-shadow: 0 7px 0 0 rgb(192, 57, 43);
}
button:focus,
input[type="submit"]:focus {
outline: 0;
}
#navlistcontainer {
/*float: right;*/ /* WE DON'T NEED THIS ANY MORE */
padding-right: 10px;
}
#nav {
background-color: rgb(26, 188, 156);
font-family: 'Open Sans', sans-serif;
padding-top: 20px;
padding-bottom: 20px;
display: flex; /* NEW */
justify-content: space-between; /* NEW */
}
#homelink {
text-decoration: none;
color: white;
background-color: rgb(22, 160, 133);
margin-left: 10px;
padding: 10px;
}
#login {
margin-left: 10px;
}
.navbaritem {
border-radius: 100px;
border: none;
height: 40px;
width: 100px;
box-shadow: 0 3px 7px 3px rgba(0, 0, 0, 0.2);
cursor: pointer;
color: white;
background-color: rgb(52, 73, 94);
transition: all 0.1s ease-out;
}
.navbaritem:hover {
box-shadow: 0 5px 10px 4px rgba(0, 0, 0, 0.2);
}
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav id="nav" class="clearfix">
<i class="fa fa-home fa-lg" aria-hidden="true"></i> Home
<div id="navlistcontainer">
<button class="navbaritem" id="signup">SIGNUP</button>
<button class="navbaritem" id="login">LOGIN</button>
</div>
</nav>
<!-- Big Main Page Block -->
<div class="mainBlock">
<h1>Welcome to site</h1>
<h3>siteinfo<br> moreinfo
</h3>
<div class="buttonsWrapper">
<form class="mainButtons">
<input type="submit" value="Basdasds" id="browse">
<input type="submit" value="Cs" id="create" formaction="debate.php">
</form>
<!-- Ends the buttons form -->
</div>
<!-- Ends buttons wrapper -->
</div>
If you go the flex route, you could also kill the top and bottom padding on the nav and simply specify a height for it. Then, using the flex property align-items: center, your buttons will automatically vertically center themselves in the navbar.
/* import fonts */
#import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300');
html,
body {
margin: 0;
background-color: rgb(236, 240, 241);
}
button:focus {
outline: 0;
}
.mainBlock {
background-color: rgb(29, 49, 49);
}
.mainBlock h1 {
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 48pt;
padding-top: 20px;
margin-bottom: 0;
padding-bottom: 0;
color: rgb(236, 240, 241);
margin-top: 0;
}
.mainBlock h3 {
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 18pt;
color: rgb(236, 240, 241);
margin-bottom: 50px;
}
/* big button styles */
.mainButtons {
text-align: center;
}
.mainButtons input[type=submit] {
font-family: 'Open Sans', sans-serif;
font-size: 15pt;
text-align: center;
border: none;
width: 200px;
height: 40px;
margin: 10px;
border-radius: 3px;
color: rgba(255, 255, 255, 1);
position: static;
cursor: pointer;
transition: all 0.1s ease-out;
}
#browse {
background-color: rgb(41, 128, 185);
box-shadow: 0 10px 0 0 rgb(53, 93, 158);
}
#browse:hover {
box-shadow: 0 7px 0 0 rgb(53, 93, 158);
}
#create {
background-color: rgb(231, 76, 60);
box-shadow: 0 10px 0 0 rgb(192, 57, 43);
margin-bottom: 42px;
}
#create:hover {
box-shadow: 0 7px 0 0 rgb(192, 57, 43);
}
button:focus,
input[type="submit"]:focus {
outline: 0;
}
#navlistcontainer {
/*float: right;*/ /* WE DON'T NEED THIS ANY MORE */
padding-right: 10px;
}
#nav {
background-color: rgb(26, 188, 156);
font-family: 'Open Sans', sans-serif;
/*padding-top: 20px;*/ /* WE DON'T NEED THIS ANY MORE */
/*padding-bottom: 20px;*/ /* WE DON'T NEED THIS ANY MORE */
height: 80px; /* NEW */
display: flex; /* NEW */
justify-content: space-between; /* NEW */
align-items: center; /* NEW*/
}
#homelink {
text-decoration: none;
color: white;
background-color: rgb(22, 160, 133);
margin-left: 10px;
padding: 10px;
}
#login {
margin-left: 10px;
}
.navbaritem {
border-radius: 100px;
border: none;
height: 40px;
width: 100px;
box-shadow: 0 3px 7px 3px rgba(0, 0, 0, 0.2);
cursor: pointer;
color: white;
background-color: rgb(52, 73, 94);
transition: all 0.1s ease-out;
}
.navbaritem:hover {
box-shadow: 0 5px 10px 4px rgba(0, 0, 0, 0.2);
}
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav id="nav" class="clearfix">
<i class="fa fa-home fa-lg" aria-hidden="true"></i> Home
<div id="navlistcontainer">
<button class="navbaritem" id="signup">SIGNUP</button>
<button class="navbaritem" id="login">LOGIN</button>
</div>
</nav>
<!-- Big Main Page Block -->
<div class="mainBlock">
<h1>Welcome to site</h1>
<h3>siteinfo<br> moreinfo
</h3>
<div class="buttonsWrapper">
<form class="mainButtons">
<input type="submit" value="Basdasds" id="browse">
<input type="submit" value="Cs" id="create" formaction="debate.php">
</form>
<!-- Ends the buttons form -->
</div>
<!-- Ends buttons wrapper -->
</div>
Removing the padding: 25px on #nav and replacing it with line-height: 50px will hopefully fix your issue. It looks like you thought that the buttons would be aligned by their text and not the button itself. The padding was pushing both buttons down 25px, not just their text.
This question already has answers here:
Line before and after title over image [duplicate]
(2 answers)
Closed 7 years ago.
I am trying to draw two horizontal lines across a box:
http://codepen.io/anon/pen/gpZqOQ
I used a plugin to generate some code based on a design. However the end result is not optimized.
<h1 id="H1_1">
<span id="SPAN_2">Feedback</span>
</h1>
#H1_1 {
box-sizing: border-box;
clear: both;
color: rgb(64, 64, 64);
height: 45px;
position: relative;
text-align: center;
width: 1140px;
perspective-origin: 570px 22.5px;
transform-origin: 570px 22.5px;
border: 0px none rgb(64, 64, 64);
font: normal normal normal normal 15px/22.5px 'Source Sans Pro', sans-serif;
margin: 0px 0px 70px;
outline: rgb(64, 64, 64) none 0px;
}/*#H1_1*/
#H1_1:after {
box-sizing: border-box;
color: rgb(64, 64, 64);
display: block;
height: 1px;
left: 0px;
position: absolute;
text-align: center;
top: 22.5px;
width: 1140px;
align-self: stretch;
perspective-origin: 570px 0.5px;
transform-origin: 570px 0.5px;
content: '"' '"';
background: rgb(189, 195, 199) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(64, 64, 64);
font: normal normal normal normal 15px/22.5px 'Source Sans Pro', sans-serif;
outline: rgb(64, 64, 64) none 0px;
}/*#H1_1:after*/
#SPAN_2 {
box-sizing: border-box;
color: rgb(189, 195, 199);
display: inline-block;
height: 45px;
position: relative;
text-align: center;
text-transform: uppercase;
width: 108.890625px;
z-index: 10;
perspective-origin: 54.4375px 22.5px;
transform-origin: 54.4375px 22.5px;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 3px solid rgb(189, 195, 199);
font: normal normal bold normal 15px/normal Montserrat, sans-serif;
outline: rgb(189, 195, 199) none 0px;
padding: 10px 20px;
transition: all 0.2s ease 0s;
}/*#SPAN_2*/
Is there any other simpler way to achieve this via CSS?
<hr style=" width : 100%;">
<span id="SPAN_2">Feedback</span>
Apply following CSS
hr{
display: inline-block;
margin: 25px 0;
position: absolute;
}
#SPAN_2 {
position: absolute;
z-index: 2;
display: inline-block;
border: 3px solid rgb(189, 195, 199);
outline: rgb(189, 195, 199) none 0px;
padding: 10px 20px;
margin: 0 0 0 50%;
}
Try this:
<div>
bla
</div>
in combination with:
div {
padding: 80px;
background-color: red;
border-top: 5px double black;
border-bottom: 3px dotted black;
}
See http://jsfiddle.net/4ghvvke3/ to get the idea.
Or do I misunderstand your question, and do you wish to have a line behind your main box object?
I that case I advise background-image of 1px width with x-repeat, probably less bytes than all the CSS code.
Demo
using :before and :after like you have it, i added a classname instead of random ids
<h1 class="feedback">
<span>Feedback</span>
</h1>
css
.feedback {
position: relative;
text-align: center;
}
.feedback span {
box-sizing: border-box;
color: rgb(189, 195, 199);
display: inline-block;
height: 45px;
position: relative;
text-align: center;
text-transform: uppercase;
width: auto;
z-index: 10;
perspective-origin: 54.4375px 22.5px;
transform-origin: 54.4375px 22.5px;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 3px solid rgb(189, 195, 199);
font: normal normal bold normal 15px/normal Montserrat, sans-serif;
outline: rgb(189, 195, 199) none 0px;
padding: 10px 20px;
transition: all 0.2s ease 0s;
position: relative;
z-index: 1;
}
.feedback:before,
.feedback:after {
content: '';
display: inline-block;
border: 1px solid rgb(189, 195, 199);
width: 100%;
position: absolute;
z-index: 0;
left: 0;
}
.feedback:before {
top: 40%;
}
.feedback:after {
bottom: 40%;
}
I made a simple fiddle to demonstrate the simplest way of achieving this.
<div id="box">
<hr class="line1">
<hr class="line2">
</div>
And CSS:
#box {
width: 85%;
margin: 0 auto;
}
.line1 {
width: 100%;
}
.line2 {
width: 100%;
}
This uses the hr property to draw 2 lines horizontally, in this case taking up 100% width of the parent container.
Or something like this for thinner lines.
.container {
width: 100%;
margin-top:3em;
text-align:center;
}
.feedback_box {
color: rgb(189, 195, 199);
line-height:45px;
text-align: center;
text-transform: uppercase;
background: rgb(255, 255, 255);
border: 3px solid rgb(189, 195, 199);
font: normal normal bold normal 15px/normal Montserrat, sans-serif;
padding: 1em;
z-index:4;
position:relative;
}
.line1, .line2 {
border:0;
height:3px;
background:rgb(189, 195, 199);
}
.line1 {
margin-bottom:-20px;
}
.line2 {
margin-top:-20px;
}
<div class="container">
<hr class="line1">
<span class="feedback_box">Feedback</span>
<hr class="line2">
</div>