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.
Related
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've a search box created in CSS. When I click its icon, it displays input bar. It works perfectly. The only problem is when I click it, it opens input bar in right side area of search icon. I wanted to open it to left side of the icon. How I can do that?
Here's the code I am using:
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%
}
input::-webkit-search-cancel-button,
input::-webkit-search-decoration {
display: none;
}
input[type=search] {
background: var(--search-color);
border: solid 1px var(--bg-color);
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66cc75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5)
}
#sv2 input[type=search] {
width: 24px;
padding-left: 10px;
color: transparent;
cursor: pointer;
outline: 0
}
#sv2 input[type=search]:hover {
background-color: var(--bg-color)
}
#sv2 input[type=search]:focus {
width: 160px;
padding-left: 32px;
color: var(--font-color);
background-color: var(--bg-color);
cursor: auto
}
#sv2 input:-moz-placeholder {
color: transparent
}
#sv2 input::-webkit-input-placeholder {
color: transparent
}
<form method="get" action="https://www.example.com/" id="sv2">
<input name="s" id="s" size="30" type="search" placeholder="Search example.com">
</form>
Thanks for your help!
To change the size from right to left, you have to move the whole page with direction: rtl; Adjust it.
body {
background: #fff;
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
direction: rtl;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
h1 {
font: 1.7em;
line-height: 110%;
color: #000;
}
p {
margin: 0 0 20px;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* Demo 2 */
#demo-2 input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-2 input[type=search]:hover {
background-color: #fff;
}
#demo-2 input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-2 input:-moz-placeholder {
color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
color: transparent;
}
<h1>Expandable Search Form</h1>
<p>Pen by Prinzadi</p>
<h3>Demo 1</h3>
<form>
<input type="search" placeholder="Search">
</form>
<h3>Demo 2</h3>
<form id="demo-2">
<input type="search" placeholder="Search">
</form>
Or adjust it by setting the input with the position: absolute; and setting the right:0;.
body {
background: #fff;
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
width: 100%;
max-width: 96%;
margin: 0 auto;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
h1 {
font: 1.7em;
line-height: 110%;
color: #000;
}
p {
margin: 0 0 20px;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
#myForm {
position: relative;
width: 160px;
}
#myForm input[type=search] {
position: absolute;
right: 0;
}
<h1>Expandable Search Form</h1>
<p>Pen by Prinzadi</p>
<h3>Demo 1</h3>
<form id="myForm">
<input type="search" placeholder="Search">
</form>
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>
I'm having some issues with my code.
I added this button to my HTML page and CSS with the styling of the button class and the hover effect:
.buton4e {
background-color: #383f95;
border: none;
border-radius: 8px;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bold;
cursor: pointer;
font-size: 16px;
}
.buton4e:hover {
background-color: #383f95;
border: none;
border-radius: 8px;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bold;
font-size: 16px;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 40px 0 rgba(0, 0, 0, 0.19);
}
.intro-header {
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
color: #f8f8f8;
background: url(../img/background.jpg) no-repeat center center;
background-size: cover;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-message>h1 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
font-size: 5em;
}
.intro-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.intro-message>h3 {
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}
<!-- Header -->
<header class="intro-header">
<div class="container">
<div class="intro-message">
<br /><br /><br />
<h3>90% of IT companies believe they need to partner to grow.<br /> Join <b>Channeliser</b> - the global network for building IT partnerships.</h3>
<hr class="intro-divider">
<button class="buton4e">JOIN FOR FREE</button>
</div>
</div>
</header>
The problem is that the effect works when I hover the button but there when the button is static it has no styling
*EDIT:
Sorry for not posting all the code.
This should be sufficient for the things I'm trying to modify.
Thanks in advance.
.styledButton {
font-family: Arial;
width: 100px;
height: 50px;
color: black;
background-color: grey;
border: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.styledButton:hover {
color: white;
background-color: black;
}
.styledButton:active {
opacity: 0.5;
}
<button class = "styledButton">Click Me!</button>
This should help. Any click animations I have trouble with.
I'm using the Nathan Smith Grid System and everything I wrap with the "container_12" class has a white background. What I want is it to be transparent.
Example: http://jsfiddle.net/JordanSimps/RZvxn/1/
HTML:
<!-- Beginning of the blue top header -->
<div class="top-header-wrap">
<div class="container_12">
<div class="top-header">
<div class="grid_2">
<img class="hover" src="http://www.dubstepcast.com/images/phone.png" /> (586) 997-9490
</div>
<div class="grid_3">
<img src="http://www.dubstepcast.com/images/mail.png" /> info#experienceheritage.org
</div>
<div id="social">
<div class="grid_7">
<ul>
<li id="twitter"><img id="twitter" src="http://www.dubstepcast.com/images/twitter.png" /></li>
<li id="pinterest"><img id="pinterest" src="http://www.dubstepcast.com/images/pinterest.png" /></li>
<li id="facebook"><img id="facebook" src="http://www.dubstepcast.com/images/facebook.png" /></li>
<li id="google"><img id="google" src="http://www.dubstepcast.com/images/google.png" /></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- End of the blue top header -->
<!-- Beginning of the second header - Logo & Navigation buttons -->
<div class="container_12">
<div class="bottom-header">
<!-- LOGO BEGINS HERE -->
<div class="grid_2">
<p><img class="logo" src="http://www.dubstepcast.com/images/logo2.png" /></p>
</div>
<!-- LOGO ENDS HERE -->
<!-- NAVIGATION BUTTONS BEGIN HERE -->
<div class="grid_8 prefix_2">
<ul class='navbar navbar-horizontal'>
<a href="#" id="panel-1" class="drop-shadow raised">
Home
</a>
<a href="#" id="panel-2">
FAQ's
</a>
<a href="#" id="panel-3">
Invite
</a>
<a href="#" id="panel-4">
Contact
</a>
</ul>
</div>
<!-- NAVIGATION BUTTONS END HERE -->
</div>
</div>
<!-- End of the second header - Logo & Navigation buttons -->
CSS:
#charset "UTF-8";
/* CSS Document */
body {
background-image: url('http://www.dubstepcast.com/images/bg.jpg');
background-repeat: repeat-x repeat-y;
color: #333;
font-size: 11px;
height: auto;
padding-bottom: 20px;
}
a {
color: #fff;
text-decoration: none;
}
h1 {
font-family: Georgia, serif;
font-weight: normal;
padding-top: 20px;
text-align: center;
}
h2 {
padding-top: 20px;
text-align: center;
}
p {
border: 1px solid #666;
overflow: hidden;
padding: 10px 0;
text-align: center;
}
/* HEADER */
/* TOP HEADER */
.top-header {
color: #FFF;
font-family: "Helvetica";
font-weight: bold;
font-size: 12px;
background: #11A1B1;
height: 43px;
padding-top: 15px;
}
.top-header a {
color: #FFF;
font-family: "Helvetica";
font-weight: bold;
font-size: 12px;
text-decoration: none;
}
.top-header a:hover {
color: #D3582D;
text-decoration: none;
}
.top-header-wrap {
border-top: solid 3px #32BED0;
background: #11A1B1;
height: 58px;
}
/* SOCIAL ICONS */
#social {
height: 35px;
}
#social li {
display: inline;
}
/* TWITTER */
#social ul #twitter a {
background-image: url('http://www.dubstepcast.com/images/twitter.png');
width: 18px;
height: 18px;
}
#social ul #twitter a:hover {
background-image: url('http://www.dubstepcast.com/images/twitter.png');
width: 18px;
height: 18px;
}
/* PINTEREST */
#social ul #pinterest a {
background-image: url('http://www.dubstepcast.com/images/pinterest.png');
width: 18px;
height: 18px;
}
#social ul #pinterest a:hover {
background-image: url('http://www.dubstepcast.com/images/pinterest_active.png');
width: 18px;
height: 18px;
}
/* FACEBOOK */
#social {
text-align: right;
}
#social ul #facebook a {
background-image: url('http://www.dubstepcast.com/images/facebook.png');
width: 18px;
height: 18px;
}
#social ul #facebook a:hover {
background-image: url('http://www.dubstepcast.com/images/facebook_active.png');
width: 18px;
height: 18px;
}
/* GOOGLE */
#social ul #google a {
background-image: url('http://www.dubstepcast.com/images/google.png');
width: 18px;
height: 18px;
}
#social ul #google a:hover {
background-image: url('http://www.dubstepcast.com/images/google_active.png');
width: 18px;
height: 18px;
}
/* BOTTOM HEADER */
.bottom-header {
margin-top: 10px;
height: 155px;
}
.bottom-header img {
margin-top: 25px;
}
.drop-shadow {
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
}
.drop-shadow p {
font-size:16px;
font-weight:bold;
}
/*
* Kwicks: Sexy Sliding Panels for jQuery - v2.1.0
* http://devsmash.com/projects/navbar
*
* Copyright 2013 Jeremy Martin (jmar777)
* Contributors: Duke Speer (Duke3D)
* Released under the MIT license
* http://www.opensource.org/licenses/mit-license.php
*/
.navbar {
height: 100px;
display: block;
list-style-type: none;
list-style: none;
position: relative;
margin: 55px 0 0 25px;
padding: 0;
}
.navbar > a {
font-weight: 400;
font-family: "Helvetica";
letter-spacing: 1px;
border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
-o-border-radius: 0px 0px 5px 5px;
-webkit-box-shadow: 0 10px 15px -8px rgba(62, 62, 62, 0.5), 0 1px 4px rgba(62, 62, 62, 0.2), 0 0 40px rgba(62, 62, 62, 0) inset;
-moz-box-shadow: 0 10px 15px -8px rgba(62, 62, 62, 0.5), 0 1px 4px rgba(62, 62, 62, 0.2), 0 0 40px rgba(62, 62, 62, 0) inset;
box-shadow: 0 10px 15px -8px rgba(62, 62, 62, 0.5), 0 1px 4px rgba(62, 62, 62, 0.2), 0 0 40px rgba(62, 62, 62, 0) inset;
font-size: 16px;
width: 125px;
height: 18px;
margin-left: 5px;
float: left;
text-align: center;
padding: 25px 0 30px 0;
}
.navbar > a p {
font-family: "Helvetica";
font-weight: lighter;
color: #11A1B1;
margin-top: 4px;
font-size: 10px;
letter-spacing: normal;
}
.navbar > a:hover p {
color: #11A1B1;
}
.navbar > a:hover {
color: #D3582D;
}
.navbar > * {
display: block;
overflow: hidden;
padding: 0;
margin: 0;
}
.navbar.navbar-processed > * {
margin: 0;
position: absolute;
}
.navbar-horizontal > * {
float: left;
}
.navbar-horizontal > :first-child {
margin-left: 0;
}
.navbar-vertical > :first-child {
margin-top: 0;
}
#panel-1 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
#panel-2 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
#panel-3 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
#panel-4 {
background-color: #464646;
border-top: solid 3px #11A1B1;
}
/* GIVES THE DROP-SHADOW ON THE NAVIGATION BUTTONS MORE OF A REALISTIC LOOK */
.drop-shadow {
position: relative;
float: left;
width: 40%;
padding: 1em;
margin: 2em 10px 4em;
background: #FFF;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before, .drop-shadow:after {
content: "";
position: absolute;
z-index: -2;
}
.drop-shadow p {
font-size: 16px;
font-weight: bold;
}
According to your jsfiddle the following CSS rules are being applied to container_12 in the demo.css file
.container_12, .container_16, .container_24 {
background-color: #fff; /* Makes the background white */
background-repeat: repeat-y;
margin-bottom: 20px;
}
So you can either remove these or overwrite them with
.container_12 {
background: none
}
add this to css
.container_12{
background: transparent;
}
as per firebug, this is line 2 of demo.css
.container_12, .container_16, .container_24 {
background-color: #FFFFFF;
background-repeat: repeat-y;
margin-bottom: 20px;
}
so use
#div.container_12 {
background-color: transparent;
}
to override it with greater specificity
You have background-color: #fff; set in demo.css
Change it to background-color: transparent;