I found this tabbed content and so far set it up but for the life of me cannot figure out how to change the colour of the tab to a difference colour when you hover over it.
I thought it would be the tabs label:hover but it doesn't seem to be.
My code is here:
body, html {
height: 100%;
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: 100;
background: #ffffff;
text-align: center;
font-family: helvetica;
}
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 670px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
border-radius: 0px 0px 0 0;
color: #ffffff;
font-size: 18px;
font-weight: normal;
font-family: helvetica;
background: #f3f3f3;
cursor: pointer;
position: relative;
top: 3px;
-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;
}
.tabs label:hover {
background: #9eab05);
top: 1px;
}
/* LABEL COLOURS */
[id^=tab]:checked + label {
background: #e3ba12;
color: white;
top: 0;
}
[id^=tabfindme]:checked + label {
background: #e3ba12;
color: white;
top: 0;
}
[id^=tabtwitter]:checked + label {
background: #0085a1;
color: white;
top: 0;
}
[id^=tabtv]:checked + label {
background: #6a2150;
color: white;
top: 0;
}
[id^=tabteach]:checked + label {
background: #d10373;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
/* CONTENT COLOURS */
.findmecontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #e3ba12;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s; }
.twittercontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #0085a1;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.tvcontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #6a2150;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.teachcontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #d10373;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tabfindme">
<label for="tabfindme">FIND ME</label>
<div id="tab-content1" class="findmecontent animated fadeIn">
You can find me at the following venues:
<ul>
<li>BBC Television Centre</li>
<li>OutBurst Festival</li>
</ul>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tabtwitter">
<label for="tabtwitter">TWITTER</label>
<div id="tab-content2" class="twittercontent animated fadeIn">
Twitterfeed
</div>
</li>
<li>
<input type="radio" name="tabs" id="tabtv">
<label for="tabtv">TELEVISION</label>
<div id="tab-content3" class="tvcontent animated fadeIn">
Click the links to see me on TV
<ul>
<li>BBC Television Centre</li>
<li>ITV</li>
</ul>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tabteach">
<label for="tabteach">HOW I TEACH</label>
<div id="tab-content4" class="teachcontent animated fadeIn">
How I teach
</div>
</li>
</li>
.tabs label:hover {
background: #9eab05;
top: 1px;
}
there is a ")" <-- remove it
fiddle
http://jsfiddle.net/n5ura/
body, html {
height: 100%;
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: 100;
background: #ffffff;
text-align: center;
font-family: helvetica;
}
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 670px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
border-radius: 0px 0px 0 0;
color: #ffffff;
font-size: 18px;
font-weight: normal;
font-family: helvetica;
background: #f3f3f3;
cursor: pointer;
position: relative;
top: 3px;
-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;
}
.tabs label:hover {
background: #9eab05;
top: 1px;
}
/* LABEL COLOURS */
[id^=tab]:checked + label {
background: #e3ba12;
color: white;
top: 0;
}
[id^=tabfindme]:checked + label {
background: #e3ba12;
color: white;
top: 0;
}
[id^=tabtwitter]:checked + label {
background: #0085a1;
color: white;
top: 0;
}
[id^=tabtv]:checked + label {
background: #6a2150;
color: white;
top: 0;
}
[id^=tabteach]:checked + label {
background: #d10373;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
/* CONTENT COLOURS */
.findmecontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #e3ba12;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s; }
.twittercontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #0085a1;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.tvcontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #6a2150;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.teachcontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #d10373;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
maybe change this ?
.tabs label:hover {
background: #9eab05;
top: 1px;
}
into :
.tabs label:hover {
background: #9eab05;
color:#000;
top: 1px;
}
if you want to change the color of the text. Or else change background into something else.
Use hover instead checked, example on the find me button
[id^=tabfindme]:hover + label {
background: red
color: white;
top: 0;
}
Related
Is it possible to have the same CSS transformation execute when the input has been autofilled using pseudo="-internal-input-suggested as it does when the input is focused?
In this case, if the input has been autofilled, then it applies transform: translatey(-23px);. Currently if there is any autofilled information in the input, the label covers the input, and only when you tap body does the input receive the focus state as seen in the screenshot below:
* {
box-sizing: border-box;
}
.input__html {
display: flex;
flex-direction: column
}
.input__label {
width: 100%;
margin: 6px 0;
position: relative;
border-radius: 3px;
color: #868ca0;
}
.input__label .input__span {
position: absolute;
font-weight: 700;
top: 18px;
padding: 0px 6px;
left: 6px;
background: white;
font-size: 14px;
color: #868ca0;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
pointer-events: none;
}
.input__label .input__focus {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.input__label input {
border: 1px solid #e4e4e4;
background: #ffffff00;
color: #6f6666;
font-weight: 700;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
font-family: inherit;
border-radius: 3px;
padding: 0px 12px;
height: 48px;
font-size: 16px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.input__label input[value]+.input__span,
.input__label input:valid+.input__span,
.input__label input:not(:placeholder-shown)+.input__span,
.input__label input:focus+.input__span {
-webkit-transform: translatey(-23px);
transform: translatey(-23px);
outline: none;
}
.input__label input:focus {
outline: none;
}
<div class="input__html">
<label class="input__label">
<input name="input" type="text" required autocomplete="username" placeholder=" ">
<span class="input__span">Name</span>
<span class="input__focus"></span>
</label>
</div>
The solution was to access the autocomplete :-webkit-autofill:
.input__label input:-webkit-autofill + .input__span,
.input__label textarea:-webkit-autofill + .input__span,
hay guys i want to ask about input:focus on css. i have an input with effect, when i want to fill the input the label will transition to top. When i was using google chrome the input:focus work very well, but when i use mozilla nothing change in my input. Are you have solution guys?
<div class="form-input">
<input type="text" id="fullname" class="form-textbox-ep" name="name" value="{name}" required>
<label for="fullname" class="form-label-ep">Nama Perusahaan</label>
</div>
.form-textbox-ep
{
border: none;
border-bottom: 1px solid #E2E2E2;
font-weight: 400;
height: 74px;
width: 100%;
font-size: 18px;
color: #3B61AA !important;
position: relative;
line-height: 15px;
}
.form-textbox-ep:focus ~ .form-label,.form-textbox-ep:valid ~ .form-label-ep,.form-textbox-ep:read-only ~ .form-label-ep {
top: 18px;
left: 0;
font-size: 13px;
cursor: pointer;
}
.form-textbox-ep:focus,.form-textbox-ep:valid, .form-textbox-ep:read-only{
padding-top: 25px;
}
.form-label-ep{
position: absolute;
top: 28px;
left: 0;
color: #000;
cursor: text;
transition: all .15s ease-in-out 0s;
font-size: 15px;
line-height: 15px;
}
Your code is quite busy so i rewrite that code with below will give you desire result.
.box {
width: 300px;
margin: 40px 3%;
position: relative;
}
:focus {
outline: none;
}
input[type="text"] {
font: 15px/24px "Lato", Arial, sans-serif;
color: #333;
width: 100%;
box-sizing: border-box;
letter-spacing: 1px;
}
.effect {
border: 0;
padding: 4px 0;
border-bottom: 1px solid #ccc;
background-color: transparent;
}
.effect~.focus-border {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #3399ff;
transition: 0.4s;
}
.effect:focus~.focus-border,
.has-content.effect-16~.focus-border {
width: 100%;
transition: 0.4s;
}
.effect~label {
position: absolute;
left: 0;
width: 100%;
top: 9px;
color: #aaa;
transition: 0.3s;
z-index: -1;
letter-spacing: 0.5px;
}
.effect:focus~label,
.has-content.effect-16~label {
top: -16px;
font-size: 12px;
color: #3399ff;
transition: 0.3s;
}
<div class="box">
<div class="col-3 input-effect">
<input class="effect" type="text" placeholder="">
<label>First Name</label>
<span class="focus-border"></span>
</div>
</div>
I have created a option button for my project. The code is given below.I am trying to make proper alignment of .dotlist is moving on right side. It should me on left portion of dot button.
What will be the solution for making perfect dot dropdown button thus the list appear properly.
$('.dottbtn').on('click', function(e) {
e.stopPropagation();
$('.dotmenu').toggleClass('dotopened');
});
$(document).on('click', function() {
$('.dotmenu').removeClass('dotopened');
});
body {
margin: 0;
background: tomato;
font-family: 'Open Sans', sans-serif;
}
.dotted {
display: inline-block;
vertical-align: top;
float: right;
}
.dottbtn {
cursor: pointer;
margin-top: 5px;
width: 40px;
height: 20px;
z-index: 80;
position: relative;
align-items: flex-end;
}
.dottbtn {
background: url('https://image.flaticon.com/icons/svg/483/483345.svg');
background-size: 17px 17px;
height: 17px;
width: 17px;
}
.dotmenu {
width: 150px;
border-radius: 10px;
margin-top: 20px;
display: inline-block;
float: right;
background: #fff;
position: absolute;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
z-index: 90;
visibility: hidden;
opacity: 0;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.dotmenu.dotopened {
visibility: visible;
opacity: 1;
}
.dotmenu::before {
content: '';
position: absolute;
top: -5px;
right: 7px;
width: 15px;
height: 15px;
background: #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.dotmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.dotmenu ul.dot-list {
text-align: left;
font-weight: 100;
width: 100%;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
.dotmenu ul.dot-list li a {
text-decoration: none;
padding-left: 20px;
padding-top: 5px;
color: #343434;
font-weight: 600;
display: block;
line-height: 27px;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
}
.dotmenu ul.dot-list li a:hover {
color: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dotted">
<div class="dottbtn"></div>
<div class="dotmenu">
<ul class="dot-list">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
Please help me to overcome from it.
Add right: 15px to .dottbtn and right: 10px to .dotmenu :
$('.dottbtn').on('click', function(e) {
e.stopPropagation();
$('.dotmenu').toggleClass('dotopened');
});
$(document).on('click', function() {
$('.dotmenu').removeClass('dotopened');
});
body {
margin: 0;
background: tomato;
font-family: 'Open Sans', sans-serif;
}
.dotted {
display: inline-block;
vertical-align: top;
float: right;
}
.dottbtn {
cursor: pointer;
margin-top: 5px;
width: 40px;
height: 20px;
z-index: 80;
position: relative;
align-items: flex-end;
}
.dottbtn {
background: url('https://image.flaticon.com/icons/svg/483/483345.svg');
background-size: 17px 17px;
height: 17px;
width: 17px;
right: 15px;
}
.dotmenu {
width: 150px;
border-radius: 10px;
margin-top: 20px;
display: inline-block;
float: right;
background: #fff;
position: absolute;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
z-index: 90;
visibility: hidden;
opacity: 0;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
right: 10px;
}
.dotmenu.dotopened {
visibility: visible;
opacity: 1;
}
.dotmenu::before {
content: '';
position: absolute;
top: -5px;
right: 7px;
width: 15px;
height: 15px;
background: #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.dotmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.dotmenu ul.dot-list {
text-align: left;
font-weight: 100;
width: 100%;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
.dotmenu ul.dot-list li a {
text-decoration: none;
padding-left: 20px;
padding-top: 5px;
color: #343434;
font-weight: 600;
display: block;
line-height: 27px;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
}
.dotmenu ul.dot-list li a:hover {
color: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dotted">
<div class="dottbtn"></div>
<div class="dotmenu">
<ul class="dot-list">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
Adding right:0; to your .dotmenu will fix it.
$('.dottbtn').on('click', function(e) {
e.stopPropagation();
$('.dotmenu').toggleClass('dotopened');
});
$(document).on('click', function() {
$('.dotmenu').removeClass('dotopened');
});
body {
margin: 0;
background: tomato;
font-family: 'Open Sans', sans-serif;
}
.dotted {
display: inline-block;
vertical-align: top;
float: right;
}
.dottbtn {
cursor: pointer;
margin-top: 5px;
width: 40px;
height: 20px;
z-index: 80;
position: relative;
align-items: flex-end;
}
.dottbtn {
background: url('https://image.flaticon.com/icons/svg/483/483345.svg');
background-size: 17px 17px;
height: 17px;
width: 17px;
}
.dotmenu {
width: 150px;
border-radius: 10px;
margin-top: 20px;
display: inline-block;
float: right;
background: #fff;
position: absolute;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
z-index: 90;
visibility: hidden;
opacity: 0;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
right: 0;
}
.dotmenu.dotopened {
visibility: visible;
opacity: 1;
}
.dotmenu::before {
content: '';
position: absolute;
top: -5px;
right: 7px;
width: 15px;
height: 15px;
background: #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.dotmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.dotmenu ul.dot-list {
text-align: left;
font-weight: 100;
width: 100%;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
.dotmenu ul.dot-list li a {
text-decoration: none;
padding-left: 20px;
padding-top: 5px;
color: #343434;
font-weight: 600;
display: block;
line-height: 27px;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
}
.dotmenu ul.dot-list li a:hover {
color: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dotted">
<div class="dottbtn"></div>
<div class="dotmenu">
<ul class="dot-list">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
I don't know but for some reasons, transition doesn't seem to be working. I am testing this Google Chrome.
[data-title] {
position: relative;
margin: 100px;
}
[data-title]:hover:before {
transform: translate(-50%, 0);
width: 18px;
height: 6px;
left: 50%;
margin-top: 0px;
top: 100%;
opacity: 1;
pointer-events: auto;
-webkit-transition: all 0.25s;
transition: all 0.25s;
content: '';
position: absolute;
z-index: 10;
box-sizing: border-box;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 10px solid #00204e;
}
[data-title]:hover:after {
transform: translate(-50%, 0);
left: calc(50%);
margin-top: 10px;
top: 100%;
opacity: 1;
pointer-events: auto;
-webkit-transition: all 0.25s;
transition: all 0.25s;
font-weight: normal;
text-shadow: none;
background: #00204e;
border-radius: 4px;
color: #fff;
content: attr(data-title);
padding: 10px;
position: absolute;
white-space: normal;
width: max-content;
font-size: 12px;
font-family: 'Helvetica Neue';
line-height: normal;
max-width: 150px;
text-align: left;
height: auto;
display: inline-block;
}
<span class="dijitButtonContents" id="saveButton" data-title="Save as draft"><span id="saveButton_label">Save</span></span>
Can anyone help where I am going wrong or am I missing something?
I have even tried to make transition timing to +1 seconds but still it doesn't reflects the same.
You have not set anything for the original state so the transition doesn't know what to go from. If you are only wanting to transition the item's appearance - eg fade in or out, then you need to do something like transition the opacity:
[data-title] {
position: relative;
margin: 100px;
}
[data-title]:before {
width: 18px;
height: 6px;
left: 50%;
margin-top: 0px;
top: 100%;
opacity: 1;
content: '';
position: absolute;
z-index: 10;
box-sizing: border-box;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 10px solid #00204e;
transform: translate(-50%, 0);
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
[data-title]:after {
transform: translate(-50%, 0);
left: calc(50%);
margin-top: 10px;
top: 100%;
opacity: 1;
font-weight: normal;
text-shadow: none;
background: #00204e;
border-radius: 4px;
color: #fff;
content: attr(data-title);
padding: 10px;
position: absolute;
white-space: normal;
width: max-content;
font-size: 12px;
font-family: 'Helvetica Neue';
line-height: normal;
max-width: 150px;
text-align: left;
height: auto;
display: inline-block;
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
[data-title]:hover:before,
[data-title]:hover:after {
opacity: 1;
pointer-events: auto;
}
<span class="dijitButtonContents" id="saveButton" data-title="Save as draft"><span id="saveButton_label">Save</span></span>
If you want something to transition from one state to another, you have to define both states. This means having a base-style and a :hover-style.
For example:
.test {
width: 100px;
height: 50px;
background: red;
transition: all 2s;
}
.test:hover {
height: 100px;
}
<div class="test">test</div>
This works, because there is an initial state for the height attribute. This however:
.test {
width: 100px;
background: red;
transition: all 2s;
}
.test:hover {
height: 300px;
}
<div class="test">test</div>
This will not work, because the browser doesn't have a specified height as an initial state.
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>