How can I center this search field, by adding to the id #search?
I have tried to add both margin: 0 auto; and left: 50%; to #search, but neither works.
This is a good read... How To Center Anything With CSS
In your case just add width:265px;margin:auto and remove display:inline-block in #search.
Demo: http://codepen.io/anon/pen/ojbbmL
One solution is to add a container for search and using text-align: center:
#charset "utf-8";
/* CSS Document */
/* ---------- GENERAL ---------- */
body {
background: #61646d;
color: #000;
font: 14px/1.5em"Open Sans", sans-serif;
margin: 0;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
input {
border: none;
font-family: inherit;
font-size: inherit;
line-height: 1.5em;
margin: 0;
outline: none;
padding: 0;
-webkit-appearance: none;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ---------- SEARCH ---------- */
#search {
background: #42454e;
border-radius: 3px;
display: inline-block;
padding: 7px;
}
#search input {
float: left;
}
#search input[type="search"],
#search input[type="submit"] {
border-radius: 3px;
font-size: 12px;
}
#search input[type="search"] {
background: #fff;
color: #42454e;
min-width: 184px;
padding: 6px 8px;
}
#search input[type="submit"] {
background: #1bba9a;
color: #fff;
font-weight: bold;
margin-left: 7px;
padding: 6px 10px;
}
#search input[type="submit"]:hover {
background: #189e83;
}
#search input[type="search"]::-webkit-input-placeholder {
color: #42454e;
}
#search input[type="search"]:-moz-placeholder {
color: #42454e;
}
#search input[type="search"]:-ms-input-placeholder {
color: #42454e;
}
.searchCont {
text-align: center;
}
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Search</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="searchCont">
<div id="search">
<form action="javascript:void(0);" method="GET">
<fieldset class="clearfix">
<input type="search" name="search" value="What are you looking for?" onBlur="if(this.value=='')this.value='What are you looking for?'" onFocus="if(this.value=='What are you looking for?')this.value='' ">
<!-- JS because of IE support; better: placeholder="What are you looking for?" -->
<input type="submit" value="Search" class="button">
</fieldset>
</form>
</div>
<!-- end search -->
</div>
</body>
</html>
You just need to add a <div id="container"> before <div id="search"> , like below:
HTML:
<div id="container">
<div id="search">
<form action="javascript:void(0);" method="GET">
// same line of codes
</form>
</div> <!-- end search -->
</div> <!-- end container -->
And just add in css file the below code:
CSS:
#container{
width: 100%;
text-align: center;
}
Working code snippets:
#charset "utf-8";
/* CSS Document */
/* ---------- GENERAL ---------- */
body {
background: #61646d;
color: #000;
font: 14px/1.5em"Open Sans", sans-serif;
margin: 0;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
input {
border: none;
font-family: inherit;
font-size: inherit;
line-height: 1.5em;
margin: 0;
outline: none;
padding: 0;
-webkit-appearance: none;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
#container {
width: 100%;
text-align: center;
}
/* ---------- SEARCH ---------- */
#search {
background: #42454e;
border-radius: 3px;
display: inline-block;
padding: 7px;
margin: 0 auto;
}
#search input {
float: left;
}
#search input[type="search"],
#search input[type="submit"] {
border-radius: 3px;
font-size: 12px;
}
#search input[type="search"] {
background: #fff;
color: #42454e;
min-width: 184px;
padding: 6px 8px;
}
#search input[type="submit"] {
background: #1bba9a;
color: #fff;
font-weight: bold;
margin-left: 7px;
padding: 6px 10px;
}
#search input[type="submit"]:hover {
background: #189e83;
}
#search input[type="search"]::-webkit-input-placeholder {
color: #42454e;
}
#search input[type="search"]:-moz-placeholder {
color: #42454e;
}
#search input[type="search"]:-ms-input-placeholder {
color: #42454e;
}
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Search</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<div id="search">
<form action="javascript:void(0);" method="GET">
<fieldset class="clearfix">
<input type="search" name="search" value="What are you looking for?" onBlur="if(this.value=='')this.value='What are you looking for?'" onFocus="if(this.value=='What are you looking for?')this.value='' ">
<!-- JS because of IE support; better: placeholder="What are you looking for?" -->
<input type="submit" value="Search" class="button">
</fieldset>
</form>
</div>
<!-- end search -->
</div>
<!-- end container -->
</body>
</html>
Related
const forms = document.querySelector(".forms"),
pwShowHide = document.querySelectorAll(".eye-icon"),
links = document.querySelectorAll(".link");
pwShowHide.forEach(eyeIcon => {eyeIcon.addEventListener("click",() =>
{let pwFields = eyeIcon.parentElement.parentElement.querySelectorAll(".password");
pwFields.forEach(password => {
if(password.type === "password"){
password.type = "text";
eyeIcon.classList.replace("bx-hide","bx-show");
return;
}
password.type = "password";
eyeIcon.classList.replace("bx-show","bx-hide");
})
})
})
/* Font */
#import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#300;400;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito Sans', sans-serif;
}
.container{
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.form{
position: absolute;
max-width: 430px;
width: 100%;
padding: 30px;
}
.form.signup{
opacity: 0;
pointer-events: none;
}
header{
font-size: 28px;
font-weight: 600;
color: rgb(0, 0, 0);
text-align: center;
}
form{
margin-top: 30px;
}
form a{
color:#2b2b2b;
text-decoration: none;
}
form a:hover{
text-decoration: underline;
}
form .field{
height: 50px;
width: 340px;
margin-top: 20px;
position: relative;
}
.field input,
.field button{
height: 100%;
width: 100%;
border: none;
font-size: 16px;
font-weight: 400;
}
.field button{
color: white;
background-color: black;
cursor: pointer;
}
.field input{
outline: none;
padding: 0 15px;
border: 1px solid #cacaca;
/* Added code */
padding:4px 70px 4px 10px;
box-sizing: border-box;
}
.eye-icon{
position: absolute;
font-size: 18px;
color: #8b8b8b;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
padding: 5px;
background-color: white;
}
.form-link{
text-align: center;
margin-top: 10px;
}
.form-link span,
.form-link a{
font-size: 14px;
font-weight: 400;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page Title -->
<title>Login - LNEM</title>
<!-- CSS -->
<link rel="stylesheet" href="css/style.css"/>
<!-- Icon CSS -->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<section class="container forms">
<div class="form-content">
<header>Login</header>
<form action="#">
<div class="field input-field">
<!-- Email Address -->
<input type="text" class="login-input" name="email" placeholder="Email Address">
</div>
<div class="field input-field">
<input type="password" class="password" name="password" placeholder="Password">
<i class='bx bx-hide eye-icon'></i>
</div>
<div class="form-link">
Forgot Password?
</div>
<div class="field button-field">
<button>Sign In</button>
</div>
<div class="form-link">
<span>Don't have an account? Create Account</span>
</div>
</form>
</div>
</section>
<!-- Javascript -->
<script src="js/script.js"></script>
</body>
</html>
Im relatively new to CSS coding and whilst creating a login/register form for my coursework i noticed that within the password input field, the characters are appearing underneath the show/hide icon as shown below
is there any way to fix this?
I have visited a couple threads on this site and have found half the problem where padding was added, it has solved half the problem since it stops the vertical line ("|" <-- this thing) from going over the icon but once I show the password some characters still appear underneath the icon
So it seems to work for me when I change padding-right, but it's also possible that some css directives weren't applied because some html might have been missing.
/* Font */
#import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#300;400;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito Sans', sans-serif;
}
.field{
height: 50px;
width: 340px;
margin-top: 20px;
position: relative;
}
.field input,
.field button{
height: 100%;
width: 100%;
border: none;
font-size: 16px;
font-weight: 400;
}
.field button{
color: white;
background-color: black;
cursor: pointer;
}
.field input{
outline: none;
padding: 0 15px;
border: 1px solid #cacaca;
/* Added code */
padding:4px 40px 4px 10px;
box-sizing: border-box;
}
.eye-icon{
position: absolute;
font-size: 18px;
color: #8b8b8b;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
padding: 5px;
background-color: white;
}
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
<div class="field input-field">
<input type="password" class="password" name="password" placeholder="Password">
<i class='bx bx-hide eye-icon'></i>
</div>
Consider the following fiddle,
https://jsfiddle.net/r5ttk64r/2/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href="../css/tabs.css">
</head>
<body>
<div id="page-left">
<h1>Hello World 1</h1>
</div>
<div id="page-right">
<h1>Hello World 2</h1>
<div id="tabsdiv">
<div id="description" class="tab active"><span>DESCRIPTION</span></div>
<div id="specification" class="tab"><span>SPECIFICATION</span></div>
<div id="prodfamily" class="tab"><span>PRODUCT FAMILY</span></div>
<div id="reviews" class="tab"><span>REVIEWS & ARTICLES</span></div>
<div id="showrooms" class="tab"><span>SHOWROOMS</span></div>
</div>
<div id="tabcontentsdiv">
<section id="specificationcontent" class="tabcontent active">
<div id="content-left" class="specscolumn" style="height:auto; display:block; background:blue;">
<div style="display:block;" class="innerspecscolumn-left">
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
</div>
<div class="innerspecscolumn-right">
<p class="specvalue">LED</p>
</div>
</div>
<div id="content-right" class="specscolumn">
<div class="innerspecscolumn-left">
<p class="specname">CERTIFICATION</p>
</div>
<div class="innerspecscolumn-right">
<p class="specvalue">ETL</p>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
}
body {
font: 14px/1 'Open Sans', sans-serif;
color: black;
/*background: #eee;*/
}
h1 {
padding: 50px 0;
font-weight: 400;
text-align: center;
}
#page-left {
width: 35%;
float: left;
padding:40px;
}
#page-right {
width: 65%;
float: left;
padding:40px;
}
section {
display: none;
padding: 45px 10px 20px 10px;
border: 1px solid lightgray;
margin-top: -30px;
/*overflow: hidden;*/
}
#tabsdiv {
background: lightgray;
margin-right:10px;
margin-left: 10px;
height: 66px;
}
.tab {
width: 20%;
float:left;
text-align: center;
background:lightgray;
border-width: 1px 1px 1px 0;
border-color: grey;
border-style: solid;
line-height: 66px;
}
.tab:first-of-type {
border-left: 1px solid grey;
}
.tab:hover {
cursor: pointer;
}
.tab.active {
/*color: #555;*/
/*border: 1px solid #ddd;*/
/*border-top: 2px solid orange;*/
/*border-bottom: 1px solid #fff;*/
background:#99df5e;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label {
display: inline-block;
margin: 0;
padding: 25px 25px;
font-weight: 600;
text-align: center;
/*color: #bbb;*/
/*border: 1px solid transparent;*/
background: lightgray;
width:19.9%;
}
.tabcontent.active
{
display: block;
}
.specscolumn {
width: 50%;
float:left;
}
#content-left {
padding-right: 10px;
}
#content-right {
padding-left: 10px;
}
.innerspecscolumn-left {
width: 50%;
float:left;
}
.innerspecscolumn-right {
width: 50%;
float:right;
text-align: right;
}
.specname {
font-weight: bold;
}
#media screen and (max-width: 650px) {
label {
font-size: 0;
}
label:before {
margin: 0;
font-size: 18px;
}
}
#media screen and (max-width: 400px) {
label {
padding: 15px;
}
}
I've been trying to make the border expand along with the height of the blue box.
Making the divs display: block did not work.
Making the section as Overflow: hidden does make the border extend BUT pulls the border down. I need that margin-top:-30px in place so the border looks like it's coming out of the tabs and not starting right under it.
Any ideas?
I don't know if i get it right. A possible solution is to use the clearfix technique. If you want some element to "hold" the inner elements that "float" inside, use this snippet:
.clearfix::after {
display: block;
content: "";
clear: both;
}
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100vh;
}
body {
font: 14px/1 'Open Sans', sans-serif;
color: black;
/*background: #eee;*/
}
.clearfix::after {
display: block;
content: "";
clear: both;
}
h1 {
padding: 50px 0;
font-weight: 400;
text-align: center;
}
#page-left {
width: 35%;
float: left;
padding:40px;
}
#page-right {
width: 65%;
float: left;
padding:40px;
}
section {
display: none;
padding: 45px 10px 20px 10px;
border: 1px solid lightgray;
margin-top: -30px;
/*overflow: hidden;*/
}
#tabsdiv {
background: lightgray;
margin-right:10px;
margin-left: 10px;
height: 66px;
}
.tab {
width: 20%;
float:left;
text-align: center;
background:lightgray;
border-width: 1px 1px 1px 0;
border-color: grey;
border-style: solid;
line-height: 66px;
}
.tab:first-of-type {
border-left: 1px solid grey;
}
.tab:hover {
cursor: pointer;
}
.tab.active {
/*color: #555;*/
/*border: 1px solid #ddd;*/
/*border-top: 2px solid orange;*/
/*border-bottom: 1px solid #fff;*/
background:#99df5e;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label {
display: inline-block;
margin: 0;
padding: 25px 25px;
font-weight: 600;
text-align: center;
/*color: #bbb;*/
/*border: 1px solid transparent;*/
background: lightgray;
width:19.9%;
}
.tabcontent.active
{
display: block;
}
.specscolumn {
width: 50%;
float:left;
}
#content-left {
padding-right: 10px;
}
#content-right {
padding-left: 10px;
}
.innerspecscolumn-left {
width: 50%;
float:left;
}
.innerspecscolumn-right {
width: 50%;
float:right;
text-align: right;
}
.specname {
font-weight: bold;
}
#media screen and (max-width: 650px) {
label {
font-size: 0;
}
label:before {
margin: 0;
font-size: 18px;
}
}
#media screen and (max-width: 400px) {
label {
padding: 15px;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<div id="page-left">
<h1>Hello World 1</h1>
</div>
<div id="page-right">
<h1>Hello World 2</h1>
<div id="tabsdiv">
<div id="description" class="tab active"><span>DESCRIPTION</span></div>
<div id="specification" class="tab"><span>SPECIFICATION</span></div>
<div id="prodfamily" class="tab"><span>PRODUCT FAMILY</span></div>
<div id="reviews" class="tab"><span>REVIEWS & ARTICLES</span></div>
<div id="showrooms" class="tab"><span>SHOWROOMS</span></div>
</div>
<div id="tabcontentsdiv">
<section id="specificationcontent" class="tabcontent active clearfix">
<div id="content-left" class="specscolumn" style="height:auto; display:block; background:blue;">
<div style="display:block;" class="innerspecscolumn-left">
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
<p class="specname">TYPE</p>
</div>
<div class="innerspecscolumn-right">
<p class="specvalue">LED</p>
</div>
</div>
<div id="content-right" class="specscolumn">
<div class="innerspecscolumn-left">
<p class="specname">CERTIFICATION</p>
</div>
<div class="innerspecscolumn-right">
<p class="specvalue">ETL</p>
</div>
</div>
</section>
</div>
</div>
So in your case, just add the class clearfix to specificationcontent.
Hi there I have a horizontal menu with the logo in the center, can't seem to get it inline but still looks good in all browsers so far.
Now when in responsive mode I would like it to show the logo all the time at the top and the button to go underneath to show/hide the menu.
At the moment in responsive it hides the logo then when the Show Menu is clicked it shows the menu with the logo in the middle of the ul.
Here is the code so far a bit messy at the moment.
* {
margin: 0;
border: 0;
padding: 0;
}
body {
font-family: sans-serif;
margin: 5px;
background: #F1F6F8;
}
a {
font-weight: bold;
color: #3F5767;
text-decoration: none;
}
a:hover {
color: #524C56;
}
#wrapper {
max-width: 980px;
margin: 0 auto;
}
header {
width: 100%;
height: 100px;
top: 0;
left: 0;
}
/* Logo code can go here */
ul li a.logo {
background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center;
height:76px;
width:175px;
display:block;
padding:5px;
margin: 0 auto;
}
nav {
text-align: center;
}
li {
font-family: sans-serif;
font-size: 150%;
display: inline-block;
padding: 0 10px 0 10px;
}
nav ul li a {
color: #3F5767;
}
/* Start controls checkbox change button */
ul li a:hover + .hidden, .hidden:hover{ /* Maybe remove this */
display: block;
width: auto;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
.show-menu{
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
color: #3F5767;
background: #424242;
text-align: center;
padding: 3px o;
display: none;
}
.thing:before {
content: "Show Menu";
}
input[type=checkbox]:checked ~ .thing:before {
content: "Close Menu";
}
#media screen and (max-width: 760px) {
ul{position: static;
display: none;
}
li{
margin: 0 auto;
font-size: 100%;
padding: 0;
/*border-bottom: 2px solid #676767;*/
}
ul li, li a{
width: 100%;
font-size: 15px;
}
.show-menu{
display: block;
width: auto;
height: 30px;
padding: 3px 0 0 0;
}
}
/* End controls checkbox change button */
#media print {#ghostery-purple-box {display:none !important}}
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Coast Fm Tasmania</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<header>
<nav>
<input id="show-menu" role="button" type="checkbox">
<label for="show-menu" class="show-menu thing">   </label>
<ul id="menu">
<li>
Home</li>
<li>Events</li>
<li>On-Air</li>
<li>Gallery</li>
<li><a class="logo" href="index.html"></a></li>
<li>Sport</li>
<li>The Team</li>
<li>Sponsors</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
Also here is the Logo
Coast FM
Thanks
You can add another logo in a div that will be your "hidden logo".
<input id="show-menu" role="button" type="checkbox">
<div class="hidden">
<a class="hidden-logo" href="index.html"></a>
<label for="show-menu" class="show-menu thing">   </label>
</div>
Then you can display it and hide it whenever you wish.
.hidden {
display:flex;
justify-content: center;
background: #424242;
display:none;
}
#media screen and (max-width: 760px) {
.hidden {
display:flex;
}
}
.hidden-logo {
background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center;
height:23px;
background-size:50%;
width:175px;
display:block;
padding:5px;
}
Here is an example
https://jsfiddle.net/jrdkp7ph/2/
You can use jquery and add desired list dynamically
Do check code here for example: https://jsbin.com/zusunidupo/1/edit?css,js,output
Need to execute below code block every time when window resizes(in link provided executes on first load only)
if ($(window).width() < 760) {
$('<li><a class="logo" href="https://i.stack.imgur.com/1dcqW.png"><img border="0" src="https://i.stack.imgur.com/1dcqW.png" width="50" height="50"></a></li>').insertAfter($('li:eq(4)'))
}
else {
$("#menu").prepend('<li><a class="logo" href="https://i.stack.imgur.com/1dcqW.png"><img border="0" src="https://i.stack.imgur.com/1dcqW.png" width="50" height="50"></a></li>');
}
hey i think your html code many change just suggest improve
* {
margin: 0;
border: 0;
padding: 0;
}
body {
font-family: sans-serif;
margin: 5px;
background: #F1F6F8;
}
a {
font-weight: bold;
color: #3F5767;
text-decoration: none;
}
a:hover {
color: #524C56;
}
#wrapper {
max-width: 980px;
margin: 0 auto;
}
header {
width: 100%;
height: 100px;
top: 0;
left: 0;
}
/* Logo code can go here */
ul li a.logo {
background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center;
height:76px;
width:175px;
display:block;
padding:5px;
margin: 0 auto;
}
.logo {
background: url(https://i.stack.imgur.com/1dcqW.png) no-repeat center;
height:76px;
width:175px;
display:block;
padding:5px;
margin: 0 auto;
}
nav {
text-align: center;
}
li {
font-family: sans-serif;
font-size: 150%;
display: inline-block;
padding: 0 10px 0 10px;
}
nav ul li a {
color: #3F5767;
}
/* Start controls checkbox change button */
ul li a:hover + .hidden, .hidden:hover{ /* Maybe remove this */
display: block;
width: auto;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
.show-menu{
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
color: #3F5767;
background: #424242;
text-align: center;
padding: 3px o;
display: none;
}
.thing:before {
content: "Show Menu";
}
input[type=checkbox]:checked ~ .thing:before {
content: "Close Menu";
}
#media screen and (max-width: 760px) {
ul{position: static;
display: none;
}
ul li a.logo { display: none; }
li{
margin: 0 auto;
font-size: 100%;
padding: 0;
/*border-bottom: 2px solid #676767;*/
}
ul li, li a{
width: 100%;
font-size: 15px;
}
.show-menu{
display: block;
width: auto;
height: 30px;
padding: 3px 0 0 0;
}
}
/* End controls checkbox change button */
#media print {#ghostery-purple-box {display:none !important}}
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Coast Fm Tasmania</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<header>
<nav>
<input id="show-menu" role="button" type="checkbox">
<label for="show-menu" class="show-menu thing"> <a class="logo" href="index.html"></a>   </label>
<ul id="menu">
<li>
Home</li>
<li>Events</li>
<li>On-Air</li>
<li>Gallery</li>
<li><a class="logo" href="index.html"></a></li>
<li>Sport</li>
<li>The Team</li>
<li>Sponsors</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
Instead of showing label next to radio button, it is shown above it.
new.html.erb:
<div class="center jumbotron">
<h2><%= t(:creating_task) %></h2>
<%= form_for(#task, url: new_task_path) do |f| %>
...
<div>
<%= label :form_type, t(:multiple_choice) %>
<%= f.radio_button :form_type, '1' %>
<div class="reveal-if-active">
</div>
</div>
<div>
<%= label :form_type, t(:fill_gap) %>
<%= f.radio_button :form_type, '2' %>
<div class="reveal-if-active">
</div>
</div>
<% end %>
</div>
I am using bootstrap and even when I copy bootstrap example, which looks like this:
It looks like in picture above.
What could be the reason?
#EDIT
<h2>Tworzenie zadania</h2>
<form class="new_task" id="new_task" enctype="multipart/form-data" action="/pl/tasks/new" accept-charset="UTF-8" method="post"><input name="utf8" value="✓" type="hidden"><input name="authenticity_token" value="xxx" type="hidden">
<label for="text_Kategoria">Kategoria</label>
<select name="task[category]" id="task_category"><option value=""></option>
<option value="1">Test</option></select>
<label for="text_Obraz">Obraz</label>
<input name="task[asset_name]" id="task_asset_name" type="file">
<!-- dodać podgląd -->
<label for="text_Opis">Opis</label>
<textarea class="form-control" name="task[text]" id="task_text"></textarea>
<!-- dodać poprawne wyświetlanie równań -->
<label for="form_type_Rodzaj zadania">Rodzaj zadania</label>
<div>
<label for="form_type_Wielokrotny wybór">Wielokrotny wybór</label>
<input value="1" name="task[form_type]" id="task_form_type_1" type="radio">
<div class="reveal-if-active">
</div>
</div>
<div>
<label for="form_type_Wypełnianie luk">Wypełnianie luk</label>
<input value="2" name="task[form_type]" id="task_form_type_2" type="radio">
<div class="reveal-if-active">
</div>
</div>
</form>
CSS:
#import "bootstrap-sprockets";
#import "bootstrap";
/* universal */
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
/* header */
#test-name {
margin-right: 10px;
font-size: 1.7em;
color: #fff;
letter-spacing: -1px;
padding-top: 50px;
font-weight: bold;
float: left;
}
#user-link {
margin-right: 10px;
font-size: 1.7em;
color: #fff;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
float: right;
text-decoration: none;
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid #eaeaea;
color: #777;
}
footer a {
color: #555;
}
footer a:hover {
color: #222;
}
footer small {
float: left;
}
footer ul {
float: right;
list-style: none;
}
footer ul li {
float: left;
margin-left: 15px;
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
height: auto !important;
}
#error_explanation {
color: red;
ul {
color: red;
margin: 0 0 30px 0;
}
}
.field_with_errors {
#extend .has-error;
.form-control {
color: $state-danger-text;
}
}
.reveal-if-active {
opacity: 0;
max-height: 0;
overflow: hidden;
transform: scale(0.8);
transition: 0.5s;
input[type="radio"]:checked ~ &,
input[type="checkbox"]:checked ~ & {
opacity: 1;
max-height: 100px;
overflow: visible;
padding: 10px 20px;
transform: scale(1);
}
}
/* Users index */
.users {
list-style: none;
margin: 0;
li {
overflow: auto;
padding: 10px 0;
border-bottom: 1px solid $gray-lighter;
}
}
You can use display:inline-block like:
.new_task input[type="radio"] {
float : left;
width : auto;
}
I am aware of how to generally do a simple float left and float right footer to make to areas where I could easily have info. But basically I used the HTML5 Boilerplate and I believe when I attempt to split my footer and what not, it doesn't work due to previous styles applied. Now I am not a CSS expert so I could do with some little help, to just tell me how to get this basically functionality into my footer. Where its split 2cols, left align and right align.
HTML and CSS below. Thanks in advance guys!
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head id="Head1"><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><title>
Upper Control Limit
</title><meta name="description" /><meta name="author" /><meta name="viewport" content="width=device-width" /><link rel="stylesheet" href="css/style.css" />
<script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> Upgrade to a different browser or install Google Chrome Frame to experience this site
in all its glory.</p><![endif]-->
<div id="header-container">
<header class="wrapper clearfix">
<h1 id="title">Upper Control Limit</h1>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
<div id="main-container">
<form method="post" action="results.aspx?rows=1&cols=1" id="Form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjEwNDQyMTMxMw9kFgJmD2QWAgIDD2QWBgIFDw8WBB4IQ3NzQ2xhc3MFB0NvbEhlYWQeBF8hU0ICAmRkAgYPDxYEHwAFB1Jvd0hlYWQfAQICZGQCBw8PFgQfAAUJZ3JpZEJveGVzHwECAmRkZFJMwj+M1MRZQlpIMrfmxl1wwizJXzxaXt3WPYuj38Ui" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAU3pTMHOdDohz552i1I2Sebj31ljtDmerW1aPkEMZ51g8/Ho+MRtff8p07c9TjAQNmPZdj/gKuoitSwpD5a3CzSRHT3M0ARnCVeHCgDPQCHReQQJ8C8qTnXt96uJnOGYcQYMDuNwHVzarHWwfsDZ3nC" />
</div>
<div id="main" class="clearfix"><input type="submit" name="ctl00$btnCalc" value="Calculate" id="btnCalc" class="btn" /><input name="ctl00$txtrow_0_col_1" type="text" value="Col 1" id="txtrow_0_col_1" class="ColHead" /><input name="ctl00$txtrow_1_col_0" type="text" value="Series 1" id="txtrow_1_col_0" class="RowHead" /><input name="ctl00$txtrow_1_col_1" type="text" id="txtrow_1_col_1" class="gridBoxes" /></div></form>
</div> <!-- #main-container -->
<div id="footer-container">
<footer class="wrapper">
<h3 class="left">Copyright 2012 Data Exchange LTD</h3>
<h3 class="right">img here</h3>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script> window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/script.js"></script>
<script>
var _gaq = [['_setAccount', 'UA-17073042-4'], ['_trackPageview']];
(function (d, t) {
var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s)
} (document, 'script'));
</script>
</body>
</html>
CSS:
/* =============================================================================
HTML5 Boilerplate CSS: h5bp.com/css
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
/* ===== Initializr Styles =====================================================
Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
========================================================================== */
body{ font:16px/26px Helvetica, Helvetica Neue, Arial; }
.wrapper{
width:90%;
margin:0 5%;
}
/* ===================
ALL: Blue Theme
=================== */
#header-container{ border-bottom: 20px solid #22558b; }
#footer-container{ border-top: 20px solid #22558b; }
#main aside { border-top: 20px solid #22558b; }
#header-container,
#footer-container,
#main aside{
background:#2c6cb1;
}
#title{ color:white; }
::-moz-selection { background: #2c6cb1; color: #fff; text-shadow: none; }
::selection { background: #2c6cb1; color: #fff; text-shadow: none; }
/* ==============
MOBILE: Menu
============== */
nav a{
display:block;
margin-bottom:10px;
padding:15px 0;
background:#22558b;
color:white;
text-align:center;
text-decoration:none;
font-weight:bold;
}
nav a:hover, nav a:visited{
color:white;
}
nav a:hover{
text-decoration:underline;
}
/* ==============
MOBILE: Main
============== */
#main{
padding:30px 0;
}
#main article h1{
font-size:2em;
}
#main aside{
color:white;
padding:0px 5% 10px;
}
#footer-container footer{
color:white;
padding:20px 0;
clear:both;
}
/* ===============
ALL: IE Fixes
=============== */
.ie7 #title{ padding-top:20px; }
/* ===== Primary Styles ========================================================
Author: Christopher Leah of Happy Webs LTD - 07/2012
========================================================================== */
.btn{clear:left;float:left; width:79px; margin-left:5px; margin-bottom:2px;}
.ColHead{float:left; width:50px; margin-left:5px; background-color:#22558B;color:#ffffff;margin-bottom:2px;}
.RowHead{clear:left;float:left; width:75px; margin-left:5px;background-color:#2C6CB1;color:#ffffff;margin-bottom:2px;}
.gridBoxes{float:left; width:50px; margin-left:5px; margin-bottom:2px;}
.graph{margin-top:10px;float:left;}
h3.left { float: left; }
h3.right { float: right;}
/* =============================================================================
Media Queries
========================================================================== */
#media only screen and (min-width: 480px) {
/* ====================
INTERMEDIATE: Menu
==================== */
nav a{
float:left;
width:27%;
margin:0 1.7%;
padding:25px 2%;
margin-bottom:0;
}
nav li:first-child a{ margin-left:0; }
nav li:last-child a{ margin-right:0; }
/* ========================
INTERMEDIATE: IE Fixes
======================== */
nav ul li{
display:inline;
}
.oldie nav a{
margin:0 0.7%;
}
}
#media only screen and (min-width: 768px) {
/* ====================
WIDE: CSS3 Effects
==================== */
#header-container,
#main aside{
-webkit-box-shadow:0 5px 10px #aaa;
-moz-box-shadow:0 5px 10px #aaa;
box-shadow:0 5px 10px #aaa;
}
/* ============
WIDE: Menu
============ */
#title{
float:left;
}
nav{
float:right;
width:38%;
}
/* ============
WIDE: Main
============ */
#main article{
float:left;
width:57%;
}
#main aside{
float:right;
width:28%;
}
}
#media only screen and (min-width: 1140px) {
/* ===============
Maximal Width
=============== */
.wrapper{
width:1026px; /* 1140px - 10% for margins */
margin:0 auto;
}
}
/* =============================================================================
Non-Semantic Helper Classes
========================================================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* =============================================================================
Print Styles
========================================================================== */
#media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
#page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
What brains911 said will help, but I would also suggest including a clearfix in the <footer class="wrapper"> also.
So your code would look like this:
<footer class="wrapper clearfix">
...
</footer>
Let me know if that doesn't make sense.
h3.left { float: left; } and
h3.right { float: right;} look like they should be doing the job. You could try adding width:50% to each of them.
Can you use firebug to toggle off the other styles that are affecting the h3 elements and see if that is indeed the problem?