I styled up this checkbox to look like a switch. I would like to put the words "ON" and "OFF" inside of it. That's what I'm having trouble with.
Here is the codepen: http://codepen.io/anon/pen/BKMErO
CSS:
.switch-field {
display: table-cell;
vertical-align: middle;
}
input.switch {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
input.switch + label {
background-color: #f0f0f0;
border: 1px solid #ccc;
display: block;
position: relative;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.switch + label, input.switch + label:before, input.switch + label:after {
-webkit-border-radius: 2.4em;
-moz-border-radius: 2.4em;
-ms-border-radius: 2.4em;
-o-border-radius: 2.4em;
border-radius: 2.4em;
}
input.switch + label {
background-color: #f0f0f0;
border: 1px solid #ccc;
width: 4.8em;
height: 2.4em;
overflow: hidden;
}
input.switch + label:before, input.switch + label:after {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
content: "";
}
input.switch + label:before {
background-color: #bbb;
right: 0;
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
-o-transition: background 0.3s;
transition: background 0.3s;
}
input.switch + label:after {
background-color: #fff;
width: 2.4em;
width: calc(2.4em - 2px);
-webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
-webkit-transition: margin 0.3s;
-moz-transition: margin 0.3s;
-o-transition: margin 0.3s;
transition: margin 0.3s;
}
input.switch:checked + label:before {
background-color: green;
}
input.switch:checked + label:after {
margin-left: 2.5em;
}
HTML:
<div class="switch-field">
<input id="cmn-toggle-1" class="switch" type="checkbox">
<label for="cmn-toggle-1"></label>
</div><!-- /.switch-field -->
Give this a try
http://codepen.io/Atula/pen/ZWwdmm?editors=0100
css
content: 'ON';
padding: 10px 0;
text-align:center;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.switch-field {
display: table-cell;
vertical-align: middle;
}
input.switch {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
input.switch + label {
background-color: #f0f0f0;
border: 1px solid #ccc;
display: block;
position: relative;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.switch + label, input.switch + label:before, input.switch + label:after {
-webkit-border-radius: 2.4em;
-moz-border-radius: 2.4em;
-ms-border-radius: 2.4em;
-o-border-radius: 2.4em;
border-radius: 2.4em;
}
input.switch + label {
background-color: #f0f0f0;
border: 1px solid #ccc;
width: 4.8em;
height: 2.4em;
overflow: hidden;
}
input.switch + label:before, input.switch + label:after {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
content: "";
}
input.switch + label:before {
background-color: #bbb;
right: 0;
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
-o-transition: background 0.3s;
transition: background 0.3s;
}
input.switch + label:after {
background-color: #fff;
width: 2.4em;
width: calc(2.4em - 2px);
-webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
-webkit-transition: margin 0.3s;
-moz-transition: margin 0.3s;
-o-transition: margin 0.3s;
transition: margin 0.3s;
}
input.switch:checked + label:before {
background-color: green;
content :'ON';
text-align :left;
color:#fff;
padding:5px
}
input.switch:checked + label:after {
margin-left: 2.5em;
text-align :right;
}
</style>
</head>
<body>
<div class="switch-field">
<input id="cmn-toggle-1" class="switch" type="checkbox">
<label for="cmn-toggle-1"></label>
</div><!-- /.switch-field -->
</body>
</html>
Related
I'm trying to get a css menu working but want to use vuejs/nuxt-link instead of a traditional a href as this is a single page application Im trying to learn how to build
I have the following
How do I convert this to work with nuxt-link instead of a href
Thanks
HTML I currently have
<nav class="radial">
<input type="checkbox" id="menu" checked>
About
Resume
Blog
Github
a
<label for="menu" class='fa-bars'>Menu</label>
</nav>
I'd like to use (for example) in my html, assuming this is possible.
<nuxt-link :to="'/about'"><fa icon="bars" /></nuxt-link>
The css I currently have is as follows
nav.radial {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
top: -2.5rem;
width: 3rem;
height: 3rem;
margin: 0 100px;
}
nav.radial input {
display: none;
}
nav.radial > label,
nav.radial > a {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #21618C;
color: white;
text-align: center;
font-size: 0;
line-height: 3rem;
}
nav.radial label:before,
nav.radial a:before {
font-size: 1.2rem;
color: white;
}
nav.radial a {
color: transparent;
text-decoration: none;
box-sizing: border-box;
}
nav.radial label {
border-radius: 0 0 1.5rem 1.5rem;
cursor: pointer;
box-sizing: border-box;
border-bottom: 0.25rem solid #2f2f2f;
box-shadow: 0 0.1875rem rgba(0, 0, 0, 0.25);
transition: border-bottom 0.25s, box-shadow 0.5s;
}
nav.radial input:checked ~ label {
border-bottom-width: 1px;
box-shadow: none;
}
nav.radial a[href] {
transition: top 0.1s, left 0.25s, opacity 1s, box-shadow 0.25s;
border-radius: 1.5rem;
opacity: 0;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
border-bottom: 1px solid #888;
box-sizing: border-box;
}
nav.radial a[href]:hover {
background-color: #E6EDF2;
border-bottom-color: #2c7768;
}
nav.radial input:checked ~ a[href] {
transition: top 1s, left 0.6s, box-shadow 1s, background-color 0.25s, border-bottom-color 0.25s, border-bottom-width 0.25s;
opacity: 1;
}
nav.radial a[href]:hover {
border-bottom-width: 0.25rem;
}
nav.radial input:checked ~ a[href]:nth-of-type(1),
nav.radial input:checked ~ a[href]:nth-of-type(5) {
box-shadow: 0 -0.1875rem 0.375rem rgba(0, 0, 0, 0.25);
}
nav.radial input:checked ~ a[href]:nth-of-type(1) {
left: -4.72707721rem;
top: 0.83351125rem;
}
nav.radial input:checked ~ a[href]:nth-of-type(2) {
left: -3.08538053rem;
top: 3.67701333rem;
}
nav.radial input:checked ~ a[href]:nth-of-type(3) {
left: 0rem;
top: 4.8rem;
}
nav.radial input:checked ~ a[href]:nth-of-type(4) {
left: 3.08538053rem;
top: 3.67701333rem;
}
nav.radial input:checked ~ a[href]:nth-of-type(5) {
left: 4.72707721rem;
top: 0.83351125rem;
}
many thanks for any assistance in advance
Im used Toggle Switch i need to put switch open and close label behind the switch , look image 01 and image 02 you can understand my issue,
this is a two type Open and closed Switch Open after displayed open Switch Closed after displayed Closed, please look the working snippet
how can i fix it,
please help me to fix this
Thanks
Image 01- current view
Image 02 - i need like this
.onoffswitch1 {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch1-checkbox {
display: none;
}
.onoffswitch1-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 30px;
}
.onoffswitch1-inner {
display: block; width: 200%; margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch1-inner:before, .onoffswitch1-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
border-radius: 30px;
box-shadow: 0px 15px 0px rgba(0,0,0,0.08) inset;
}
.onoffswitch1-inner:before {
content: "YES";
padding-left: 10px;
background-color: #2FCCFF; color: #FFFFFF;
border-radius: 30px 0 0 30px;
}
.onoffswitch1-inner:after {
content: "NO";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
border-radius: 0 30px 30px 0;
}
.onoffswitch1-switch {
display: block; width: 30px; margin: 0px;
background: #FFFFFF;
border: 2px solid #999999; border-radius: 30px;
position: absolute; top: 0; bottom: 0; right: 56px;
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
box-shadow: 0 1px 1px white inset;
}
.onoffswitch1-checkbox:checked + .onoffswitch1-label .onoffswitch1-inner {
margin-left: 0;
}
.onoffswitch1-checkbox:checked + .onoffswitch1-label .onoffswitch1-switch {
right: 0px;
}
<div class="onoffswitch1">
<input type="checkbox" name="onoffswitch1" class="onoffswitch1-checkbox" id="myonoffswitch1" checked>
<label class="onoffswitch1-label" for="myonoffswitch1">
<span class="onoffswitch1-inner"></span>
<span class="onoffswitch1-switch"></span>
</label>
</div>
Please check if this is what you need. You may have to tweak the colors and the position of the text.
.onoffswitch1 {
width: 90px;
}
.onoffswitch1-checkbox {
display: none;
}
.onoffswitch1-label {
display: inline-block;
cursor: pointer;
border: 2px solid #999999;
border-radius: 30px;
width: 90px;
height: 2em;
background: darkgray;
position: relative;
margin-top: 2em;
}
.onoffswitch1-checkbox:checked + .onoffswitch1-label {
background: lightblue;
}
.onoffswitch1-checkbox:checked+.onoffswitch1-label:before {
content: "OPEN";
position: absolute;
top: -1.5em;
left: 0;
}
.onoffswitch1-checkbox+.onoffswitch1-label:before {
content: "CLOSED";
position: absolute;
top: -1.5em;
left: 0;
}
.onoffswitch1-switch {
display: block;
width: 30px;
margin: 0px;
background: #FFFFFF;
border: 2px solid #999999;
border-radius: 30px;
position: absolute;
top: 0;
bottom: 0;
right: 56px;
-moz-transition: all 0.3s ease-in 0s;
-webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
background-image: -moz-linear-gradient(center top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 80%);
background-image: -webkit-linear-gradient(center top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 80%);
background-image: -o-linear-gradient(center top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 80%);
background-image: linear-gradient(center top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 80%);
box-shadow: 0 1px 1px white inset;
}
.onoffswitch1-checkbox:checked+.onoffswitch1-label .onoffswitch1-inner {
margin-left: 0;
}
.onoffswitch1-checkbox:checked+.onoffswitch1-label .onoffswitch1-switch {
right: 0px;
}
<div class="onoffswitch1">
<input type="checkbox" name="onoffswitch1" class="onoffswitch1-checkbox" id="myonoffswitch1" checked>
<label class="onoffswitch1-label" for="myonoffswitch1">
<span class="onoffswitch1-inner"></span>
<span class="onoffswitch1-switch"></span>
</label>
</div>
Try this.
<div class="switchcontainer">
<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"><span class="on">ON</span><span class="off">OFF</span></div></label>
</div>
.switchcontainer{
margin-top:25px;
}
.switchcontainer .on{
margin-top:-25px;
color:green;
}
.switchcontainer .off{
margin-top:-25px;
color:red;
}
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
border: 2px solid #999999;
border-radius: 30px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #EEEEEE;
-webkit-transition: .4s;
transition: .4s;
box-shadow: 0px 15px 0px rgba(0,0,0,0.08) inset;
}
.slider:before {
content: "";
height: 30px;
width: 26px;
left: 0px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
display: block;
width: 30px;
margin: 0px;
background: #FFFFFF;
border: 2px solid #999999;
border-radius: 30px;
position: absolute;
top: 0;
bottom: 0;
right: 56px;
-moz-transition: all 0.3s ease-in 0s;
-webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%);
box-shadow: 0 1px 1px white inset;
}
input:checked + .slider {
background-color: #2FCCFF;
box-shadow: 0px 15px 0px rgba(0,0,0,0.08) inset;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
/*------ ADDED CSS ---------*/
.on
{
display: none;
}
.on, .off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .on
{display: block;}
input:checked + .slider .off
{display: none;}
/*--------- END --------*/
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
https://jsfiddle.net/gnanavelr/8LqLczyh/1/
I create a switch button for you check this out
this is the html
<div class="switch">
<input class="toggle" id="toggle-1" type="checkbox" >
<label class="c-label-switch" for="toggle-1"></label>
<label class="c-label" for="toggle-1">Remember password </label>
</div>
and this is the css
.switch {
display: block;
}
.switch span {
display: inline-block;
color: #141414;
margin-top: 0px;
font-size: 14px;
font-weight: bold;
}
.switch .c-label {
padding: 0px;
vertical-align: middle;
}
.toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.toggle + label {
display: inline-block;
position: relative;
cursor: pointer;
border-radius: 15px;
width: 70px;
height: 30px;
overflow: hidden;
line-height: 4px;
margin-bottom: 0px;
vertical-align: middle;
margin-right: 10px;
}
.c-label-switch {
border: 1px solid #d1d1d1;
}
.toggle + label:before, .toggle + label:after {
display: block;
border-radius: 20px;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
padding: 12px 12px 12px 9px;
color: #FFF;
font-family: 'Source Sans Pro';
}
.toggle + label:before {
content: "No";
right: 0px;
background-color: #ddd;
text-indent: -93px;
margin-left: 0px;
line-height: 5px;
font-size: 10px;
}
.toggle + label:after {
content: "Yes";
text-indent: 35px;
width: 6px;
background-color: #fff;
margin: 1px;
text-shadow: 0 1px 0 #fff;
margin-left: 1px;
font-size: 10px;
color: #141414;
}
.toggle:checked + label:before {
background-color: #0065b3;
text-indent: 0;
}
.toggle:checked + label:after {
margin-left: 41px;
box-shadow: none;
}
.toggle + label:before, .toggle + label:after {
transition: All 0.5s ease;
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
}
I made a custom checkbox with css. For the checked icon i use Google's material icons. Now the only problem is that the icon is not vertically centered. How do I do that?
HTML:
<input type="checkbox" id="remember">
<label for="remember">Angemeldet bleiben</label>
CSS:
/* Basic Styling
----------------------------------------------------------------------------------------------------*/
input[type="radio"],
input[type="checkbox"] {
display: none;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
margin-right: 20px;
padding-left: 30px;
cursor: pointer;
display: inline-block;
position: relative;
}
input[type="radio"] + label:before,
input[type="checkbox"] + label:before,
input[type="radio"] + label:after,
input[type="checkbox"] + label:after {
width: 20px;
height: 20px;
content: '';
top: 0;
left: 0;
color: #fafafa;
text-align: center;
position: absolute;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/* Radios
----------------------------------------------------------------------------------------------------*/
input[type="radio"] + label:before {
border: 1px solid #eee;
border-radius: 50%;
box-shadow: inset 0 0 0 0.4em #fafafa, inset 0 0 0 1em #fafafa;
}
input[type="radio"] + label:hover:before {
border: 1px solid #eee;
border-radius: 50%;
box-shadow: inset 0 0 0 0.4em #fafafa, inset 0 0 0 1em #eee;
}
input[type="radio"]:checked + label:before {
border: 1px solid #2196F3;
border-radius: 50%;
box-shadow: inset 0 0 0 0.4em #fafafa, inset 0 0 0 1em #2196F3;
}
/* Checkboxes
----------------------------------------------------------------------------------------------------*/
input[type="checkbox"] + label:before {
font-family: 'Material Icons';
font-size: 18px;
content: '\E876';
border: 1px solid #eee;
border-radius: 2px;
background: #fafafa;
}
input[type="checkbox"] + label:hover:before {
color: #eee;
}
input[type="checkbox"]:checked + label:before {
color: #2196F3;
}
Here is what it looks like:
There are few ways to do that, but in my opinion, the best solution is with CSS vertical-align Property.
Required reading on THIS link.
Use line-height property.
input[type="radio"] + label:before,
input[type="checkbox"] + label:before,
input[type="radio"] + label:after,
input[type="checkbox"] + label:after {line-height: 19px;}
Demo:http://jsfiddle.net/k3zLj0w4/
Ive been trying to put in this image but the issue i'm getting here is that the image keeps on passing the footer and I cant seem to solve it. Please help me out. The image size for the "batmanshop" is width=890 and height=2000.
Here is the CSS code and below is the HTML code
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/background.png);
margin: 0;
padding: 0;
color: #000;
}
IMG.titleImage {
margin-left: 300px;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
word-wrap: break-word;
}
a img {
border: none;
}
a:link {
color: black;
}
a:visited {
color: #6E6C64;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
height:100%;
background-color: #FFF;
margin: 0 auto;
}
.header {
background-image:url(images/headerbg.png);
height:140px;
}
.content {
width:100%;
height:100%;
background-color: white;
}
.footer {
padding: 10px 0;
background-color: #F1F8E0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
//Navigation Bar
.nav, .nav ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 1;
}
.nav {
/* Layout & positioning */
position: relative;
margin: auto; /* Centering the menu */
height: 46px;
width: 960px;
text-align: center;
/* Background & effects */
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
background: #65c0bb;
background-image:url(images/navImage.png);
}
.nav>li {
margin: 0;
line-height: 1;
padding: 0;
display: inline;
position: relative;
margin: 0 12px;
}
.nav::after, .nav::before {
content: "";
display: block;
position: absolute;
top: 6px;
height: 0px;
width: 0px;
border: 23px solid #65c0bb;
z-index: -1;
}
/* The left ribbon */
.nav::before {
border-left-color: transparent;
left: -30px;
}
/* The right ribbon */
.nav::after {
border-right-color: transparent;
right: -30px;
}
.nav>li>a {
display: inline-block;
padding: 15px 20px;
position: relative;
font-family: 'Oswald', sans-serif;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-o-transition: color .3s linear;
-ms-transition: color .3s linear;
transition: color .3s linear;
}
.nav>li>a:hover, .nav>li:hover>a {
color: #eae8a5;
}
.nav>li>a::after {
content: "";
height: 15px;
width: 15px;
position: absolute;
right: -20px;
top: 16px;
display: block;
}
.nav>li:last-child>a::after {
display: none;
}
.nav ul {
position: absolute;
left: -9999px;
padding-top: 10px;
border-bottom: 1px solid #ccc;
opacity: 0;
-webkit-transition: opacity .3s linear;
-moz-transition: opacity .3s linear;
-o-transition: opacity .3s linear;
-ms-transition: opacity .3s linear;
}
.nav>li:hover>ul {
left: 0;
opacity: 1;
top: 30px;
}
.nav ul li:hover>ul {
left: 150px;
opacity: 1;
top: -11px;
padding-left: 12px;
border-bottom: 0;
box-shadow: none;
}
.nav ul li {
display: block;
position: relative;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: 150px;
text-align: justify;
z-index: 9;
background: #eee;
box-shadow: 3px 4px 0 rgba(0, 0, 0, .1);
-webkit-transition: background .3s linear;
-moz-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
}
.nav ul li a {
font-family: "Oswald", sans-serif;
font-size: 14px;
text-decoration: none;
display: block;
padding: 7px 12px 7px 20px;
color: #65c0bb;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-ms-transition: color .3s linear;
-o-transition: color .3s linear;
}
.nav ul li:hover>a, .nav ul li a:hover {
color: #4db6b0;
}
.nav ul li:hover {
background: #f7f7f7;
}
.nav ul ul li:last-child {
border-bottom: 1px solid #ccc;
}
.nav ul ul li {
box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);
}
.nav ul::after, .nav ul::before {
content: "";
display: block;
z-index: 1;
position: absolute;
height: 9px;
width: 9px;
}
.nav>li>ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 5px;
left: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.nav>li>ul::before {
height: 1px;
width: 12px;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 10px;
left: 24px;
z-index: 99;
}
.nav ul ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 20px;
left: 8px;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
.nav ul ul::before {
height: 10px;
width: 1px;
background: #eee;
z-index: 99;
top: 20px;
left: 12px;
}
.titleImage2 {
margin-left: 250px;
}
.birthdayDream {
padding-right: 15px;
padding-left: 15px;
float: right;
}
p1 {
display: block;
margin-top: 30px;
padding-right: 15px;
padding-left: 15px;
}
form {
margin-left: auto;
margin-right: auto;s
display:inline-block;
width:600px;
}
input {
float:right;
margin-right: 50px;
clear:both;
}
input2 {
float:left;
}
.row {
margin-left: 200px;
}
.batmanImage {
margin-left: 180px;
}
.batmanshop {
height:auto;
margin: 0 auto;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css">
<title>Birthday Planner - Home</title>
</head>
<body>
<div class="container">
<div class="header">
</div>
<ul class="nav">
<li>
Home
</li>
<li>
Themes
<ul>
<li>Boys Party Theme</li>
<li>Girls Party Theme</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
<li>Sign Up</li>
</ul>
<div class="content">
<br/>
<IMG class="batmanImage">
<img src="images/batmantitle.jpg" name="Title" width="600" height="206">
</IMG>
<p>All you need to do is select the desired theme and provide us the necessary details. We will do the rest. The items listed below are what will be provided when you order this theme. Don't need to worry about anything else. Just a click of a button and we will get our team to handle the rest for you.
</p>
<IMG class="batmanshop">
<img src="images/batmanshop.jpg" name="Title">
</IMG>
</div>
<div class="footer">
<div class="navigationbar">
<ul class="nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Terms and Conditions
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Whatever you want to achieve, you can not do that :
<IMG class="batmanshop">
<img src="images/batmanshop.jpg" name="Title">
</IMG>
I replaced that by: <img class="batmanshop" src="images/batmanshop.jpg" name="Title" />
Anyway, even with your code, I do not see the image passing over the footer.
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/background.png);
margin: 0;
padding: 0;
color: #000;
}
IMG.titleImage {
margin-left: 300px;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
word-wrap: break-word;
}
a img {
border: none;
}
a:link {
color: black;
}
a:visited {
color: #6E6C64;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 960px;
height:100%;
background-color: #FFF;
margin: 0 auto;
}
.header {
background-image:url(images/headerbg.png);
height:140px;
}
.content {
width:100%;
height:100%;
background-color: white;
}
.footer {
padding: 10px 0;
background-color: #F1F8E0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
//Navigation Bar
.nav, .nav ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 1;
}
.nav {
/* Layout & positioning */
position: relative;
margin: auto; /* Centering the menu */
height: 46px;
width: 960px;
text-align: center;
/* Background & effects */
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
background: #65c0bb;
background-image:url(images/navImage.png);
}
.nav>li {
margin: 0;
line-height: 1;
padding: 0;
display: inline;
position: relative;
margin: 0 12px;
}
.nav::after, .nav::before {
content: "";
display: block;
position: absolute;
top: 6px;
height: 0px;
width: 0px;
border: 23px solid #65c0bb;
z-index: -1;
}
/* The left ribbon */
.nav::before {
border-left-color: transparent;
left: -30px;
}
/* The right ribbon */
.nav::after {
border-right-color: transparent;
right: -30px;
}
.nav>li>a {
display: inline-block;
padding: 15px 20px;
position: relative;
font-family: 'Oswald', sans-serif;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-o-transition: color .3s linear;
-ms-transition: color .3s linear;
transition: color .3s linear;
}
.nav>li>a:hover, .nav>li:hover>a {
color: #eae8a5;
}
.nav>li>a::after {
content: "";
height: 15px;
width: 15px;
position: absolute;
right: -20px;
top: 16px;
display: block;
}
.nav>li:last-child>a::after {
display: none;
}
.nav ul {
position: absolute;
left: -9999px;
padding-top: 10px;
border-bottom: 1px solid #ccc;
opacity: 0;
-webkit-transition: opacity .3s linear;
-moz-transition: opacity .3s linear;
-o-transition: opacity .3s linear;
-ms-transition: opacity .3s linear;
}
.nav>li:hover>ul {
left: 0;
opacity: 1;
top: 30px;
}
.nav ul li:hover>ul {
left: 150px;
opacity: 1;
top: -11px;
padding-left: 12px;
border-bottom: 0;
box-shadow: none;
}
.nav ul li {
display: block;
position: relative;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: 150px;
text-align: justify;
z-index: 9;
background: #eee;
box-shadow: 3px 4px 0 rgba(0, 0, 0, .1);
-webkit-transition: background .3s linear;
-moz-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
}
.nav ul li a {
font-family: "Oswald", sans-serif;
font-size: 14px;
text-decoration: none;
display: block;
padding: 7px 12px 7px 20px;
color: #65c0bb;
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-ms-transition: color .3s linear;
-o-transition: color .3s linear;
}
.nav ul li:hover>a, .nav ul li a:hover {
color: #4db6b0;
}
.nav ul li:hover {
background: #f7f7f7;
}
.nav ul ul li:last-child {
border-bottom: 1px solid #ccc;
}
.nav ul ul li {
box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);
}
.nav ul::after, .nav ul::before {
content: "";
display: block;
z-index: 1;
position: absolute;
height: 9px;
width: 9px;
}
.nav>li>ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 5px;
left: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.nav>li>ul::before {
height: 1px;
width: 12px;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 10px;
left: 24px;
z-index: 99;
}
.nav ul ul::after {
border: 1px solid #ccc;
background: #eee;
border-right: 0;
border-bottom: 0;
top: 20px;
left: 8px;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
.nav ul ul::before {
height: 10px;
width: 1px;
background: #eee;
z-index: 99;
top: 20px;
left: 12px;
}
.titleImage2 {
margin-left: 250px;
}
.birthdayDream {
padding-right: 15px;
padding-left: 15px;
float: right;
}
p1 {
display: block;
margin-top: 30px;
padding-right: 15px;
padding-left: 15px;
}
form {
margin-left: auto;
margin-right: auto;s
display:inline-block;
width:600px;
}
input {
float:right;
margin-right: 50px;
clear:both;
}
input2 {
float:left;
}
.row {
margin-left: 200px;
}
.batmanImage {
margin-left: 180px;
}
.batmanshop {
height:auto;
margin: 0 auto;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css">
<title>Birthday Planner - Home</title>
</head>
<body>
<div class="container">
<div class="header">
</div>
<ul class="nav">
<li>
Home
</li>
<li>
Themes
<ul>
<li>Boys Party Theme</li>
<li>Girls Party Theme</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>Login</li>
<li>Sign Up</li>
</ul>
<div class="content">
<br/>
<IMG class="batmanImage">
<img src="images/batmantitle.jpg" name="Title" width="600" height="206">
</IMG>
<p>All you need to do is select the desired theme and provide us the necessary details. We will do the rest. The items listed below are what will be provided when you order this theme. Don't need to worry about anything else. Just a click of a button and we will get our team to handle the rest for you.
</p>
<img class="batmanshop" src="http://placehold.it/890x2000&text=Batmanshop" name="Title" />
</div>
<div class="footer">
<div class="navigationbar">
<ul class="nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Terms and Conditions
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I am attempting to create a CSS3 hover menu that transitions out and shows sub menus below it. The problem I am having is that I can't position the submenus below each other. Currently, I have this effect - http://jsfiddle.net/7pz3g/1/
Here is the HTML markup -
<nav id="navbar">
<ul class="iconContainer">
<li>
<i class="fa fa-home fa-lg"></i>
<ul id="wrapperFirst" class="extMenu">
<li><h3>Testing</h3></li>
<li>SubMenu
<ul id="wrapperSecond" class="subMenu">
<li><h3>ORGANIZATIONS</h3></li>
<li>Reddit</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
CSS MarkUp -
li {
list-style: none;
}
#navbar {
background-color: #333333;
position: fixed;
text-align: center;
left: 0;
top: 0;
height: 100%;
z-index: 100;
width: 60px;
display: table;
}
#navbar .iconContainer li {
color: white;
padding: 0 2%;
border-bottom: 1px solid rgba(255, 255, 255, .2);
cursor: pointer;
height: 60px;
}
#navbar .iconContainer li:first-child {
border-top: 1px solid rgba(255, 255, 255, .2);
}
#navbar i {
text-decoration: none;
color: white;
line-height: 60px;
font-size: 1.5em;
text-shadow: 1px 1px 1px #000;
width: 60px;
opacity: .5;
}
#navbar .iconContainer {
padding: 0;
margin: 0;
display: table-cell;
vertical-align: middle;
z-index: 510;
}
#navbar li:hover i {
background-color: #222222;
opacity: 1;
}
#navbar li:hover #wrapperFirst.extMenu {
left: 60px;
}
#wrapperFirst.extMenu {
background-color: #222;
height: 100%;
left: -1000px;
position: fixed;
top: 0;
bottom: 0;
width: 250px;
padding: 0px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#wrapperFirst.extMenu .raq {
text-align: right;
float: right;
color: #75A4C7;
}
#wrapperFirst.extMenu li:hover #wrapperSecond.subMenu {
left: 311px;
}
#wrapperFirst.extMenu li {
padding: 10px 20px;
text-align: left;
height: auto;
text-decoration: none;
line-height: 40px;
font-size: 1em;
text-shadow: 1px 1px 1px #000;
color: white;
opacity: 1;
border-bottom: 1px solid rgba(255, 255, 255, .2);
cursor: pointer;
}
#wrapperFirst.extMenu li:first-child {
border-top: 1px solid rgba(255, 255, 255, .2);
}
#wrapperSecond.subMenu {
display:table-cell;
background-color: #222;
height: 100%;
left: -1000px;
position: fixed;
top: 0;
bottom: 0;
width: 600px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#wrapperSecond.subMenu h3 {
text-align: center;
}
#wrapperSecond.subMenu .subtitle {
font-family: 'SourceSansProRegular';
font-size: .6em;
}
#wrapperSecond.subMenu li a {
text-decoration: none;
color: #75A4C7;
line-height: 40px;
font-size: 1em;
text-shadow: 1px 1px 1px #000;
}
#wrapperSecond.subMenu li {
padding: 10px 20px;
text-align: left;
height: auto;
text-decoration: none;
line-height: 40px;
font-size: 1em;
text-shadow: 1px 1px 1px #000;
color: white;
opacity: 1;
border-bottom: 1px solid rgba(255, 255, 255, .2);
cursor: pointer;
}
#wrapperSecond.subMenu li {
opacity: 1;
}
#wrapperSecond.subMenu {
width: 600px;
opacity: 1;
}
#wrapperSecond.subMenu h3 {
text-align: center;
}
#wrapperSecond.subMenu .subtitle {
font-family: 'SourceSansProRegular';
font-size: .6em;
}
#wrapperSecond.subMenu li a {
text-decoration: none;
color: #75A4C7;
line-height: 40px;
font-size: 1em;
text-shadow: 1px 1px 1px #000;
}
I would like to have each submenu transition below their root menus, but yet still stay on top of the other elements on the page. Any ideas? Thanks!!!
http://jsfiddle.net/ypzcG/
#wrapperSecond.subMenu li {
opacity: 1;
position: relative;
margin-top: 70px;
}