i've created a page where in the content area I am trying to create two columns using div float left but when i increase the the height of columns my footer collapses. here is the initial fiddle without columns : jsfiddle.net/Vrk5C/ and here is the fiddle with columns in it : jsfiddle.net/GKCT7/
here is the entire code of my html and css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact | Chaithanya Public School</title>
<link rel="stylesheet" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body id="body1">
<div class="container">
<div class="header">
<div style="float:left; width:300px; margin-top:5px;">
<img src="images/logotext.png" /></div>
</div><!-- header ends-->
<div class="menudiv">
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul>
<li>School</li>
<li>Vision and Mission </li>
<li>Principal’s desk
<li>Management
</ul> </li>
<li>Admission
<ul>
<li>Overview</li>
<li>Download application form</li>
</ul> </li>
<li>Gallery</li>
<li>School Calander</li>
<li>News & Events</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
</div><!-- menu div ends-->
<div class="content">
<br />
<div class="heading">Contact</div>
<br />
<br />
</div><!-- Content ends-->
</div><!-- container ends-->
<div class="footer">
<div class="footerbox">
<div class="footerbox1">
<!-- box1 -->
<ul id="footerul">
<p id="footerli" class="footerhead">About</p>
<li>School</li>
<li>Vission & Mission</li>
<li>Management</li>
</ul>
</div> <!-- box1 end -->
<div class="footerbox2"> <!-- box2 -->
<ul id="footerul">
<p id="footerli" class="footerhead">Admission</p>
<li>Overview</li>
<li>Application</li>
<li>Documents</li>
</ul>
</div> <!-- box2 end -->
<div class="footerbox2"> <!-- box3 -->
<ul id="footerul">
<p id="footerli" class="footerhead">School</p>
<li>Calander</li>
<li>Gallery</li>
<li>Careers</li>
</ul>
</div> <!-- box3 end -->
<div class="footerbox2"> <!-- box4 -->
<ul id="footerul">
<p id="footerli" class="footerhead"> Contact</p>
<li style="color:#929497;">082 4227 1080</li>
<li style="color:#929497;">Info#chaithanyaschool.com</li>
<li>Map Directions</li>
</ul>
</div> <!-- box4 end -->
<div class="footerbox3" style="padding-top:45px; padding-left:70px;"> <!-- box5 -->
<table border="0" style="float:right">
<tr>
<td></td>
<td></td> </tr>
</table>
<table border="0" style="float:right; width:220px;">
<tr>
<td id="footerul" style="text-align:right; color:#929497;">© 2013 Chaithanya Public School</td>
</tr><tr>
<td id="footerul" style="text-align:right; color:#929497;">All Rights Reserved</td> </tr>
</table>
</div> <!-- box5 end -->
</div>
</div>
</body>
</html>
body {
margin:0px;
padding:0px;
/* fallback */
background-color: #3A454B;
background: url(images/linear_bg_2.png);
background-repeat: repeat-x;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3A454B), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #3A454B, #D9E0E6);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #3A454B, #D9E0E6);
/* IE 10 */
background: -ms-linear-gradient(top, #3A454B, #D9E0E6);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #3A454B, #D9E0E6);
}
#body
{
background:url(images/head_bg.jpg) repeat-x;
}
#body1
{
/* background:url(images/head_bg1.jpg) repeat-x; */
}
.container
{
width:980px;
min-height:500px;
height:auto;
margin-left:auto;
margin-right:auto;
}
.header
{
width:980px;
height:100px;
}
.slider
{
width:976px;
height:230px;
border: 4px #fff solid;
}
.bar
{
margin-left: auto;
margin-right: auto;
margin-top:10px;
margin-bottom:10px;
padding: 0;
width: 980px;
height:30px;
background:#98AFC7;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.content
{
margin-top:0px;
margin-bottom:10px;
width:980px;
min-height:500px;
height:auto;
background:#fff;
/* border:1px solid #000;
-moz-border-radius: 1px;
-webkit-border-radius: 1px; */
}
.footer
{
padding-top:20px;
height:250px;
background:#111312;
}
.footerbox
{
width:980px;
height:250px;
margin-left:auto;
margin-right:auto;
}
.footerbox1
{
float:left;
height:200px;
width:150px;
}
.footerbox2
{
float:left;
height:200px;
width:150px;
margin-left:3px;
}
.footerbox3
{
float:left;
height:200px;
width:220px;
}
#footerul {
list-style-type:none;
line-height:2.0em;
font-family: 'Droid Sans', sans-serif;
font-size: 12px;
}
#footerul a {
text-decoration:none;
list-style-type:none;
line-height:2.0em;
font-family: 'Droid Sans', sans-serif;
font-size: 12px;
color:#999;
}
#footerul a:hover{
list-style-type:none;
line-height:2.0em;
font-family: 'Droid Sans', sans-serif;
font-size: 12px;
color:#FFF;
}
#footerli {
border-bottom:1px solid #666;
padding-bottom:5px;
}
.footerhead
{
/*color:#C36241; */
color:#81C1ED;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
}
#facebook
{
display: block;
width:32px;
height:32px;
background:url(images/facebook_dark.png) no-repeat;
}
#facebook:hover
{
background:url(images/facebook_active.png) no-repeat;
}
#twitter
{
display: block;
width:32px;
height:32px;
background:url(images/twitter_dark.png) no-repeat;
}
#twitter:hover
{
background:url(images/twitter_active.png) no-repeat;
}
.logotext
{
font-family: 'Open Sans', sans-serif;
color:#FFF;
font-size:37px;
margin:0px;
}
.logotext1
{
font-family: 'Open Sans', sans-serif;
font-size:20px;
margin:0px;
}
.link
{
color:#000;
text-decoration:underline;
}
.link:hover
{
text-decoration:none;
color:#0CC;
}
.text
{
font-family: 'Droid Sans', sans-serif;
font-size:14px;
line-height:25px;
margin:0px;
color:#000;
text-align:justify;
}
.heading
{
font-family: 'Oxygen', sans-serif;
font-size:16px;
padding-left:30px;
color:#4e5c64;
text-align:justify;
}
.heading1
{
font-family: 'Oxygen', sans-serif;
font-size:16px;
padding-left:30px;
color:#999;
text-align:justify;
}
.hblock1
{
width:320px;
height:200px;
background:#88C7F0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
float:left;
margin-left:4px;
}
.hblock2
{
width:318px;
height:200px;
background:#88C7F0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin-left:10px;
float:left;
}
.hblock3
{
width:318px;
height:200px;
background:#88C7F0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin-left:10px;
float:left;
}
.addressbox
{
width:200px;
height:400px;
float:left;
}
.add
{
width:200px;
height:400px;
float:left;
}
.adressbox1
{
width:300px;
height:150px;
float:left;
margin-top:20px;
}
.adressbox2
{
width:300px;
height:120px;
float:left;
margin-top:10px;
}
.adressbox3
{
width:300px;
height:30px;
float:left;
margin-top:10px;
}
.adressbox4
{
width:300px;
height:30px;
}
.menudiv {
width:980px;
}
.menu {
font-family:'Open Sans', sans-serif;
font-size:14px;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #AEA79F;
margin: 0;
list-style: none;
position: relative;
padding: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.menu ul:after {
content:"";
clear: both;
display: block;
}
.menu ul li {
float: left;
padding-top: 10px;
padding-bottom: 7px;
border-bottom: 3px solid transparent;
}
.menu ul li:hover {
background: #2C001E;
border-bottom: 3px solid #2C001E;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
color: #fff;
text-decoration: none;
}
.menu ul ul {
background: #2C001E;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#000;
display: block;
}
.menu ul ul li a:hover {
background: #111312;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul ul li a:hover {
background: #95CEF1;
color: #000;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top:0;
}
.menu > ul > li > a {
border-right: 1px solid white;
display: block;
padding-left: 25px;
padding-right: 25px;
}
.menu > ul > li:last-child > a {
border-right: 0;
}
here is what iam trying to do :
Clear your floats. Maybe using a <div style="clear: both"></div> just before your content ends:
http://jsfiddle.net/GKCT7/1/
give clear:both to class ".footer"
Related
I am building a website using HTML and CSS. The problem:when accessing the website on a mobile device it will not show all the content, basically parts of the text, buttons, fields are hidden.
Please have a look at the pictures I have attached to have a better understanding. Thanks
mobile view
desktop view
/* ==== Google font ==== */
#import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700|Open+Sans:300,400,600,700');
/* === fontawesome === */
#import url('font-awesome.css');
/* ==== overwrite bootstrap standard ==== */
#import url('overwrite.css');
#import url('animate.css');
body {
font-family:'Open Sans', Arial, sans-serif;
font-size:14px;
font-weight:300;
line-height:1.6em;
color:#000;
background-color:#fff;
}
hi,h2,h3,h4,h5,h6 {
color:#000;
line-height:1.1em;
}
p {
color:#000;
}
a:hover {
text-decoration:none;
}
.navbar-default {
margin-top:-10px;
background-color: #fff;
border-radius:0;
border:0;
}
.container-fluid > .navbar-header {
margin-right: 30px;
margin-left: 10px;
margin-top:20px;
border-radius:0;
}
.navbar-brand {
float: left;
height: 30px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand h1 {
float: left;
line-height:20px;
padding: 20px;
font-size: 30px;
margin-top:-15px;
color:#6D9C91;
}
.navbar-brand h1:hover {
background-color:#fff;
}
.navbar-brand img{
float: center;
width: 100px;
height: 100px;
margin-top: -35px;
}
.menu {
font-size:14px;
float:right;
text-transform:uppercase;
font-weight:500;
}
.menu ul.nav-tabs li {
color:#000;
}
.nav-tabs {
border-bottom: 0;
}
.nav-tabs > li {
float: left;
margin-bottom: 0;
}
.nav-tabs > li > a {
margin-bottom:20px;
margin-right: 20px;
line-height: 1.42857143;
border-bottom: 3px solid transparent;
border-radius:0;
color:#000;
border-top:0;
border-right:0;
border-left:0;
}
.nav-tabs > li > a:hover {
border-color: #eee #eee #6D9C91;
color: #6D9C91;
border-radius:0;
background-color:#f9f9f9;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #fff;
cursor: default;
background-color: #6D9C91;
border: 0;
border-bottom-color: transparent;
cursor:pointer;
}
/*===========================
slider
============================ */
.slider {
position: relative;
margin-top:-20px;
}
.slider img {
width: 100%;
}
#carousel-slider {
position: relative;
}
#carousel-slider .carousel-indicators {
bottom: -40px;
}
#carousel-slider .carousel-indicators li {
border: 1px solid #ffbd20;
}
#carousel-slider a i {
border-radius:50%;
font-size: 30px;
height: 50px;
padding: 10px;
position: absolute;
top: 50%;
width: 50px;
color:#6d9c91;
background:#6d9c91;
color:#fff;
}
#carousel-slider a i:hover {
background:#6d9c91;
color:#fff;
border: 1px solid #6d9c91;
}
#carousel-slider
.carousel-control {
width:inherit;
}
#carousel-slider .carousel-control.left i {
left:50px;
top: calc(50% - 50px);
}
#carousel-slider .carousel-control.right i {
right: 50px;
top: calc(50% - 50px);
}
.carousel-caption {
position: absolute;
right: 15%;
top: calc(50% - 150px);
font-size:40px;
left: 15%;
z-index: 10;
padding-bottom: 0px;
color: #fff;
text-align: center;
}
.carousel-caption h2 {
font-size:40px;
color: #fff;
text-transform: uppercase;
}
.carousel-caption h2 span {
font-size:40px;
color: #fff;
}
.carousel-caption p {
font-size:25px;
margin-top:30px;
margin-bottom:20px;
color:#fff;
padding:10px;
}
#media (max-width: 767px) {
.carousel-caption {
font-size: 18px;
}
.carousel-caption h2, .carousel-caption h2 span, .carousel-caption p {
font-size:18px;
}
}
.carousel-inner .form-inline .form-group button[type="livedemo"]{
padding:20px 60px;
font-size:20px;
background:#6d9c91;
color:#fff;
border-radius:0;
border-color:#fff;
text-transform:uppercase;
}
.carousel-inner .form-inline .form-group button[type="livedemo"]:hover {
color:#fff;
opacity: 0.8;
-webkit-transition: color 300ms, background-color 300ms;
-moz-transition: color 300ms, background-color 300ms;
-o-transition: color 300ms, background-color 300ms;
transition: color 300ms, background-color 300ms;
}
.carousel-inner .form-inline .form-group button[type="getnow"]{
padding:20px 60px;
font-size:20px;
background:#fff;
color:#272727;
border-radius:0;
text-transform:uppercase;
}
.carousel-inner .form-inline .form-group button[type="getnow"]:hover {
color:#fff;
border-color:#fff;
background:#6d9c91;
-webkit-transition: color 300ms, background-color 300ms;
-moz-transition: color 300ms, background-color 300ms;
-o-transition: color 300ms, background-color 300ms;
transition: color 300ms, background-color 300ms;
}
#media (max-width: 991px) {
.sign-up-form .form-control {
margin-bottom: 20px;
}
.sign-up-form .btn {
margin-bottom: 20px;
}
}
#media (min-width: 768px) {
.sign-up-form .form-control {
width: 350px;
}
}
.content {
background-color:#f9f9f9;
padding:50px;
text-align:center;
margin-top: -50px;
}
.content span {
color: #154360;
}
.content p {
margin-top:50px;
margin-bottom:30px;
color: #0b5345 ;
}
.breadcrumb {
padding:30px;
}
.breadcrumb h4 {
color:#6D9C91;
text-transform:uppercase;
text-align:center;
font-size:20px;
}
.breadcrumbs {
margin-top:30px;
margin-bottom:30px;
padding:30px;
}
.breadcrumbs h4 {
color:#6D9C91;
text-transform:uppercase;
text-align:center;
font-size:20px;
}
.contents {
margin-top:10px;
}
.contents p {
margin-top:30px;
margin-bottom:30px;
}
.bg {
margin-top:10px;
}
.recent button.btn-primarys h3 {
padding:10px;
font-size:30px;
text-decoration:0;
color:#fff;
}
.align-center {
text-align:center;
background-color:#fff;
color:#000;
padding:60px;
margin-top:30px;
margin-bottom:30px;
}
.align-center p {
margin-top:10px;
margin-bottom:30px;
}
.align-center:hover {
border-bottom: 30px solid transparent;
border-color:#6D9C91;
margin-top:-5px;
-webkit-box-shadow: 1px 2px 2px 4px rgba(204,204,204,1);
-moz-box-shadow: 1px 2px 2px 4px rgba(204,204,204,1);
box-shadow: 1px 2px 2px 4px rgba(204,204,204,1);
}
.boxs {
margin-top:30px;
}
.icon {
margin-top:30px;
margin-bottom:30px;
color:#6D9C91;
}
.ficon i {
color:#6D9C91;
}
/* --- Feature --- */
.feature {
background-color:#f6f6f6;
}
.feature p {
margin-top:-30px;
margin-bottom:30px;
padding:30px;
text-align: center;
font-family: proxima-nova;
font-size: 15px;
}
.feature h1{
font-family: proxima-nova;
font-size: 25px;
}
/* --- Portfolio --- */
.col-md-6{
text-align: center;
color: black;
margin-bottom: 10px;
}
.col-md-4{
text-align: center;
color: black;
margin-bottom: 10px;
}
}
.portfolios {
text-align:center;
margin-top:10px;
margin-bottom:30px;
background-color:#f6f6f6;
padding:90px 0 90px 0;
}
.portfolio {
margin-top:5px;
}
.list-group {
padding-left: 0;
margin-top:50px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #eee;
border: 1px solid #000;
}
.list-group-item.active {
background-color:#eee;
border-color:#eee;
color:#6D9C91;
}
.list-group-item.active:hover {
background-color:#6D9C91;
border-color:#6D9C91;
}
.list-group-item.active p.list-group-item-text {
color:#000;
}
.image {
margin-top:80px;
}
/* --- Blog --- */
.page-header {
padding-bottom: 9px;
margin: 20px 0 20px;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
margin-top:50px;
}
.blog h5 {
color:#000;
margin-left:20px;
text-transform:uppercase;
margin-top:10px;
}
.blog img {
margin-top:10px;
margin-bottom:10px;
}
.blog h3,p {
color:#000;
padding:15px;
}
.blog .ficon {
text-align:center;
margin-bottom:30px;
}
.form-search .form-control {
margin-top:20px;
}
.media h4 {
color:#000;
margin-bottom:30px;
}
.media-body .ficon {
float:right;
margin-right:30px;
}
.media-body h4 {
color:#000;
}
.media-list {
padding-left: 0;
list-style: none;
margin-left:90px;
margin-bottom:20px;
}
.panel {
margin-top:20px;
margin-bottom: 20px;
background-color: #fff;
border:#eee 1px solid transparent;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0;
border-top-right-radius: 0;
text-align:center;
}
.panel-default {
border-color: #eee;
border-bottom-color:#eee;
}
.panel-default > .panel-heading {
color: #fff;
background-color: #6D9C91;
border-color: #eee;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #eee;
border-bottom-color:#eee;
}
.panel-default > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #eee;
}
.list-group h5 {
color:#fff;
text-align:center;
margin-bottom:-5px;
background:#50c0e9;
padding:15px 20px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #eee;
color:#000;
}
.list-group-item:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.list-group-item > .badge {
float: right;
border-radius:0;
background-color:#fff;
color:#000;
}
.popular-tags h5 {
color:#6D9C91;
margin-bottom:30px;
text-align:center;
}
.popular-tags ul.tags {
list-style:none;
margin:0;
margin-left: 0;
padding-left:0;
}
.popular-tags ul.tags li {
margin:0 5px 15px 0;
display:inline-block;
}
.popular-tags ul.tags li a {
background:#eee;
color:#333;
padding:5px 10px;
}
.popular-tags ul.tags li a:hover {
text-decoration:none;
color:#fff;
background-color:#6D9C91;
}
/* --- Contact area --- */
form {
margin-top:50px;
margin-bottom:50px;
}
label {
color:#6D9C91;
font-size:14px;
}
.form-group button {
background-color:#6D9C91;
color:#fff;
}
.form-control {
border-radius:0;
}
address {
text-align:center;
font-size:15px;
text-transform:uppercase;
padding-bottom:30px;
color:#333;
}
address br {
margin-top:10px;
}
/* --- Map --- */
.map{
position:relative;
margin-top:50px;
margin-bottom:40px;
}
/* google map */
#google-map{
position:relative;
height: 350px;
}
.widget {
margin-top:10px;
padding:50px;
text-align:center;
}
.widget p,ul {
margin-top:30px;
}
.link-list ul,li,a {
color:#000;
list-style:none;
}
.copyright {
text-align:center;
}
.copyright a {
color:#fff;
}
.sub-footer {
background-color: #6D9C91;
}
ul.social-network {
list-style:none;
margin-top:30px;
text-align:center;
}
ul.social-network li {
display:inline;
margin: 0 5px;
color:#fff;
}
ul.social-network li a {
color:#fff;
}
.credits {
padding-bottom: 15px;
}
.validation {
color: red;
display:none;
margin: 0 0 20px;
font-weight:400;
font-size:13px;
}
#sendmessage {
color: green;
border:1px solid green;
display:none;
text-align:center;
padding:15px;
font-weight:600;
margin-bottom:15px;
}
#errormessage {
color: red;
display:none;
border:1px solid red;
text-align:center;
padding:15px;
font-weight:600;
margin-bottom:15px;
}
#sendmessage.show, #errormessage.show, .show {
display:block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kafeyz</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/responsive-slider.css" rel="stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">
<img src="img/logo.png" alt="logo"/>
</div>
</div>
<div class="menu">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Coffee Shops</li>
<li role="presentation">Coffee Lovers</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</header>
<div class="slider no-padding-bottom">
<div id="about-slider">
<div id="carousel-slider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<div class="carousel-inner">
<div class="item active">
<img src="img/slide1.jpeg" class="img-responsive" alt="">
<div class="carousel-caption no-padding-bottom">
<div class="wow fadeInUp" data-wow-offset="0" data-wow-delay="0.3s">
<h2><span>Take your business to the next level</span></h2>
</div>
<div class="col-md-10 col-md-offset-1">
<div class="wow fadeInUp" data-wow-offset="0" data-wow-delay="0.6s">
<p>A unified platform with everything your coffee shop needs</p>
<p>• mobile app • supplies • marketing • training • staffing solutions</p>
</div>
</div>
<div class="wow fadeInUp" data-wow-offset="0" data-wow-delay="0.9s">
<form class="form-inline margin-top sign-up-form">
<input id="email_intro" type="email" placeholder="enter email address" class="form-control">
<input id="submit_intro" type="submit" value="Get started for FREE" class="btn btn-primary">
</form>
</div>
</div>
</div>
</div>
</div>
<!--/#carousel-slider-->
</div>
<!--/#about-slider-->
</div>
<!--/#slider-->
<div class="content">
</div>
<div class="feature">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="img/1.jpeg" class="img-responsive" alt="" />
<h1>Mobile Ordering App</h1>
<p>Improve your customers experience with an intuitive mobile ordering app
that will allow them to order their drink and food in advance.
Reduce queues, serve more clients and increase your revenue.
</p>
</div>
<div class="col-md-6">
<img src="img/4.jpeg" class="img-responsive" alt="" />
<h1>Supplies & Equipment</h1>
<p>All the coffee shop supplies you need to offer delicious beverages any time of the day to your customers.
Order products like milk, pastries, and paper goods at competitive prices, with just one invoice.
</p>
</div>
<div class="col-md-6">
<img src="img/5.jpeg" class="img-responsive" alt="" />
<h1>Digital Loyalty Program</h1>
<p>You cannot use paper cards to communicate with customers.
With your digital loyalty program, you now have a direct communication channel.
Send a push notification to your customers and encourage them to visit you again!
</p>
</div>
<div class="col-md-6">
<img src="img/6.jpeg" class="img-responsive" alt="" />
<h1>Customized Mobile Marketing</h1>
<p> You now have access to a wealth of data, allowing you to further tailor your marketing campaigns,
offers, and the entire customer experience to each individual.
</p>
</div>
<div class="col-md-6">
<img src="img/3.jpeg" class="img-responsive" alt="" />
<h1>Staffing Solutions</h1>
<p> Book trained & experienced staff for temp or permanent jobs. Access professional training courses
that will help your staff to maintain the quality of your service to a very high standard.
</p>
</div>
<div class="col-md-6">
<img src="img/2.jpeg" class="img-responsive" alt="" />
<h1>Workspace Bookings</h1>
<p>The rise of the freelance and gig economy is bringing more and more people to coffee shops, where they set up a virtual office to work.
Add a new revenue stream to your business by offering workspace bookings at your café.
</p>
</div>
</div>
</div>
</div>
<!--start footer-->
<footer>
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="social-network">
<li><i class="fa fa-facebook fa-1x"></i></li>
<li><i class="fa fa-twitter fa-1x"></i></li>
<li><i class="fa fa-linkedin fa-1x"></i></li>
<li><i class="fa fa-pinterest fa-1x"></i></li>
<li><i class="fa fa-google-plus fa-1x"></i></li>
</ul>
</div>
<div class="col-lg-12">
<div class="copyright">
<p>©2018 Kafeyz - All rights reserved.</p>
<div class="credits">
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--end footer-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- begin snippet: js hide: false console: true babel: false -->
<script src="js/jquery-2.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/responsive-slider.js"></script>
<script src="js/wow.min.js"></script>
<script>
wow = new WOW({}).init();
</script>
</body>
</html>
I am building a site and I am stuck with a problem... when I hover over a li element and the submenu is displayed, I can't click anything inside it because it closes really fast.
Code added below -
<div class="col-md-9">
<ul>
<li>Home</li>
<li>Order
<ul class="submenu1" style="margin-left: -35px">
<li><center>Order Entry<hr/></center></li>
<li><center>Shipment Details<hr/></center></li>
<li><center>Accounts Department<hr/></center></li>
<li><center>Machine Installation Group<hr/></center></li>
<li><center>Commercial Group<hr/></center></li>
<li><center>Order Enquiry<hr/></center></li>
<li><center>Order Status<hr/></center></li>
</ul>
</li>
</ul>
</div>
.nav
{
height:100px;
background-color:darkslateblue;
}
.image
{
height:400px;
background-image: url('../images/image.png');
background-repeat: no-repeat;
background-size:cover;
}
.image h1
{
color:white;
margin-left:150px;
text-align: center;
font-size:25px;
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-weight:bold;
padding-top:150px;
}
.nav a
{
color:white;
font-family: 'Raleway', sans-serif;
font-weight:600;
font-size:12px;
text-transform:uppercase;
padding:20px;
}
.nav li
{
display:inline;
}
.nav .container
{
padding:30px;
}
.menu2
{
height:50px;
background-color: darkslateblue;
}
.info
{
height:400px;
background-color: white;
}
.info h1
{
color: darkslateblue;
text-align:center;
font-size:50px;
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-weight:bold;
padding-top:25px;
}
.info p
{
color: black;
font-family: 'Raleway', sans-serif;
margin: 50px;
font-size:20px;
font-weight:bold;
}
.footer
{
height:50px;
background-color:darkslateblue;
}
.footer p
{
color:white;
text-transform: uppercase;
padding:10px;
}
.setPass
{
margin-top:60px;
margin-left:500px;
}
.submenu1
{
width:200px;
height:450px;
border: 1px solid darkslateblue;
display: none;
background-color: darkslateblue;
margin-top: 44px;
}
.submenu1 ul
{
display:none;
position:absolute;
}
.submenu1 ul li a
{
color:white;
font-family: 'Raleway', sans-serif;
font-size:12px;
text-transform:uppercase;
}
.col-md-9 ul li:hover .submenu1
{
display:block;
position:absolute;
}
.submenu2
{
width:200px;
height:230px;
border: 1px solid darkslateblue;
display: none;
background-color: darkslateblue;
margin-top: 44px;
}
.submenu2 ul
{
display:none;
position:absolute;
}
.submenu2 ul li a
{
color:white;
font-family: 'Raleway', sans-serif;
font-size:12px;
text-transform:uppercase;
}
.col-md-9 ul li:hover .submenu2
{
display:block;
position:absolute;
}
.submenu3
{
width:200px;
height:300px;
border: 1px solid darkslateblue;
display: none;
background-color: darkslateblue;
margin-top: 44px;
}
.submenu3 ul
{
display:none;
position:absolute;
}
.submenu3 ul li a
{
color:white;
font-family: 'Raleway', sans-serif;
font-size:12px;
text-transform:uppercase;
}
.col-md-9 ul li:hover .submenu3
{
display:block;
position:absolute;
}
.submenu4
{
width:200px;
height:110px;
border: 1px solid darkslateblue;
display: none;
background-color: darkslateblue;
margin-top: 44px;
}
.submenu4 ul
{
display:none;
position:absolute;
}
.submenu4 ul li a
{
color:white;
font-family: 'Raleway', sans-serif;
font-size:12px;
text-transform:uppercase;
}
.col-md-9 ul li:hover .submenu4
{
display:block;
position:absolute;
}
I know that there is a gap but i'm not able to remove it.
Please help.
Thanks in advance.
You dirty code that is difficult to maintain in the future
Try to take out the styles in the css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
/* use reset.css or normalize.css */
}
ul{
list-style: none;
display: flex;
}
ul> li{
position: relative;
}
ul> li a{
display: block;
padding: 5px 10px;
}
.submenu{
display: none;
position: absolute; top: 100%; left: 0;
}
ul> li:hover .submenu{
display: block;
}
<ul>
<li>Home</li>
<li>Order
<ul class="submenu">
<li>Order Entry</li>
<li>Shipment Details</li>
<li>Accounts Department</li>
<li>Machine Installation Group</li>
<li>Commercial Group</li>
<li>Order Enquiry</li>
<li>Order Status</li>
</ul>
</li>
</ul>
Delete margin-top: 44px from class submenu1 and other submenus
Fiddle: https://jsfiddle.net/7mnu4Lcx/1/
I can't seem to be able to center the horizontal #menu in the center of the page.
I have tried adding a container DIV, but I can't seem to be able to get it to work at all.
Here is my HTML markup:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
margin:0 auto;
width: 100%;
}
#menu {
list-style:none;
width:940px;
height:43px;
background: #014464;
border: 1px solid #002232;
}
#menu ul, li {
font-size:14px;
font-family: Segoe UI;
line-height:21px;
text-align:left;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
background: #F4F4F4;
}
#menu li a {
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
}
#menu li:hover a {
color:#161616;
}
.dropdown_column {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
background:#F4F4F4;
width: 560px;
}
#menu li:hover .dropdown_column {
left:-1px;
top:auto;
}
.sub_col { width:130px; }
.col { width:550px; }
.sub_col, .col {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
#menu .menu_right {
float:right;
margin-right:0px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu ul li {
line-height:21px;
text-align:left;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#FFF;
background: #014464;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align: left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
</style>
</head>
<body>
<div id="container">
<ul id="menu">
<li>4 Columns<!-- Begin 4 columns Item -->
<div class="dropdown_column"><!-- Begin 4 columns container -->
<div class="col">
<h2>This is a heading title</h2>
</div>
<div class="sub_col">
<h3>Some Links</h3>
<ul>
<li>ThemeForest</li>
<li>GraphicRiver</li>
<li>ActiveDen</li>
<li>VideoHive</li>
<li>3DOcean</li>
</ul>
</div>
<div class="sub_col">
<h3>Useful Links</h3>
<ul>
<li>NetTuts</li>
<li>VectorTuts</li>
<li>PsdTuts</li>
<li>PhotoTuts</li>
<li>ActiveTuts</li>
</ul>
</div>
<div class="sub_col">
<h3>Other Stuff</h3>
<ul>
<li>FreelanceSwitch</li>
<li>Creattica</li>
<li>WorkAwesome</li>
<li>Mac Apps</li>
<li>Web Apps</li>
</ul>
</div>
<div class="sub_col">
<h3>Misc</h3>
<ul>
<li>Design</li>
<li>Logo</li>
<li>Flash</li>
<li>Illustration</li>
<li>More...</li>
</ul>
</div>
</div><!-- End 4 columns container -->
</li><!-- End 4 columns Item -->
</ul>
</div>
</body>
</html>
Add margin: 0 auto; to your #menu ul.
DEMO
Wrap the menu in div with style text-align: center
I have attached a picture so you can see what kind of problem I am receiving. I want the navigation menu to line up with the navigation container so they appear as the same element. The picture shows the last element of the navigation menu "E-MAIL" and then the container that it sits within is just a yellow strip (as indicated in the code below).
I have tried working with negative margins on the navigation container but no solution as of yet.
web graphic http://jaylefler.com/webgraphic.png
<!DOCTYPE html>
<html>
<head>
<title>css example</title>
<style type="text/css">
#logo {
background-color: black;
width: 100%;
color: rgb(255,200,0);
}
#logo img {
padding: 10px;
}
body {
font-family: Arial, Helvetica, Verdana;
margin: 0;
}
#contents {
border: 2px solid black;
border-radius: 15px;
box-shadow: 6px 6px 4px 4px #000;
width: 90%;
min-height: 650px;
margin: 0 5%;
margin-top: 15px;
padding: 15px;
}
#navMenu {
width: 760px;
height: 30px;
background-color:rgb(255,200,0);
border:1px #000 solid;
font-weight:bold;
margin-left: -2px;
}
#navMenu ul{
margin:-1px 0 0 0;
padding:0;
line-height:32px;
}
#navMenu li{
margin:0;
padding:0;
list-style:none;
position:relative;
background-color:rgb(255,200,0);
float:left;
border:1px #000 solid;
}
#navMenu ul li a{
text-align:center;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#000;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
top: 31px;
margin-left: -2px;
}
#navMenu ul li:hover ul{
visibility: visible;
}
#navMenu a:hover {
background-color:#000;
color:rgb(255,200,0);
}
.left_part {
background:black;
}
.right_part {
background:yellow;
float:right;
white-space:nowrap;
display:inline;
text-overflow:ellipsis;
overflow:hidden;
}
#navContainer {
background-color:rgb(255,200,0);
width:100%
margin-top:-3x;
padding:0;
border:1px solid;
height:31px;
clear:left;
}
</style>
</head>
<body>
<div id="logo">
<div class="left_part">
<img src="demo.gif">
</div>
<div class="right_part">
</div>
</div>
<div id="navContainer">
<div id="navMenu">
<nav>
<ul>
<li>HOME</li>
<li>PROFILE</li>
<li>MANAGE SUB
<ul>
<li>VIEW TITLES</li>
<li>ADD TITLE</li>
<li>MODIFY TITLE</li>
<li>REMOVE TITLE</li>
</ul>
</li>
<li>NEW RELEASES</li>
<li>E-MAIL</li>
</ul>
</nav>
</div>
</div>
<div id="contents">
<p>This is just some dummy text. </p>
</div>
</body>
</html>
#navmenu {
width: 760px;
height: 30px;
background-color: #FFC800;
border: 1px black solid;
border-top: 0; /* REMOVE TOP BORDER */
margin-left: -2px;
}
#navContainer {
background-color:rgb(255,200,0);
width:100%
height: 30px; /* MATCH HEIGHT */
margin-top:-3x;
padding:0;
border:1px solid;
height:31px;
clear:left;
}
I did a little cleanup. Since I don't have your logo image i removed that part of the code, I guess you will manage to add that yourself.
Here is a simplified code that fixes your problem:
<!DOCTYPE html>
<html>
<head>
<title>css example</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, Verdana;
margin: 0;
padding: 0;
}
#contents {
border: 2px solid black;
border-radius: 15px;
box-shadow: 6px 6px 4px 4px #000;
width: 90%;
min-height: 650px;
margin: 0 5%;
margin-top: 15px;
padding: 15px;
}
nav {
width: 100%;
height: 30px;
background-color:rgb(255,200,0);
border-bottom:1px solid #000;
}
nav ul{
padding:0;
margin: 0;
overflow: hidden;
}
nav > ul{
min-width: 755px;
}
nav ul li{
float: left;
margin:0;
padding:0;
list-style:none;
background-color:rgb(255,200,0);
border-right:1px solid #000;
}
nav ul li a{
text-align:center;
text-decoration:none;
width:150px;
height: 25px;
padding-top: 5px;
display:block;
color:#000;
}
nav ul li ul{
position:absolute;
visibility:hidden;
top: 31px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
margin-left: -1px;
}
nav ul li:hover ul{
visibility: visible;
}
nav ul li ul li {
float: none;
}
nav a:hover {
background-color:#000;
color:rgb(255,200,0);
}
</style>
</head>
<body>
<nav>
<ul>
<li>HOME</li>
<li>PROFILE</li>
<li>MANAGE SUB
<ul>
<li>VIEW TITLES</li>
<li>ADD TITLE</li>
<li>MODIFY TITLE</li>
<li>REMOVE TITLE</li>
</ul>
</li>
<li>NEW RELEASES</li>
<li>E-MAIL</li>
</ul>
</nav>
<div id="contents">
<p>This is just some dummy text. </p>
</div>
</body>
</html>
I have this HTML and css and works fine in chrome/firefox but on IE the header layout is over place and sub menu is not displayed on hover, can you help please:
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=1024" />
<meta name="description" content="" />
<meta name="robots" content="all" />
<link href="images/favicon.ico" type="image/x-icon" rel="icon" /><link href="images/favicon.ico" type="image/x-icon" rel="shortcut icon" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="page">
<div id="header">
<div class="content">
<div id="logo">
<img src="images/logo.gif" title="" alt="" />
</div>
<div class='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</div>
</div>
<div id="sub_header">
<div class="content">
<div class="content_l">
<span id="sub_head_title">Welcome</span>
</div>
<div class="content_r">
<span>
Call
<strong>000000000000</strong>
</span>
</div>
</div>
</div>
</div>
</body>
</html>
And css is :
* html .clearfix,
* html #main_panel {
height: 1%;
overflow: hidden;
}
/* float clearing for IE7 */
*+html .clearfix {
min-height: 1%;
}
/* float clearing for everyone else */
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
html, body {
background: #e5e5e5;
font-size: 13px;
}
#header {
background: transparent url(../images/header-bg.jpg) repeat-x; height: 60px;
}
#header .content, #sub_header .content {
overflow: visible; position: relative;
}
#header .content, #sub_header .content {
overflow: visible;
position: relative;
}
div.content {
margin: 0 auto;
overflow: hidden;
width: 980px;
}
#logo {
position: absolute;
}
#logo { margin: 8px 0 8px 0; }
#logo a { border: none; }
#page #sub_header {
margin-bottom: 0;
}
#sub_header {
line-height: 49px;
}
#sub_header {
background: none repeat scroll 0 0 #EEEEEE;
border-bottom: 1px solid #DDDDDD;
margin-bottom: 30px;
overflow: hidden;
}
.content_l {
float: left;
overflow: hidden;
width: 50%;
}
.content_r {
float: right;
text-align: right;
width: 50%;
}
#sub_header span {
color: #2D2D2D;
line-height: 49px;
}
#sub_head_title {
font: bold 21px Arial;
text-shadow: 2px 2px 2px #FFFFFF;
}
a.header_button_children span {
background: url("../images/header-children-off.gif") no-repeat scroll right -51px transparent;
padding-right: 25px;
}
a.header_button span {
height: 19px;
padding: 8px 10px 3px;
}
/*css Menu ................*/
.cssmenu{
border:none;
border:0px;
margin:0;
padding:0px;
font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
position: absolute;
right: 0;
}
.cssmenu ul{
background:#333333;
height:35px;
list-style:none;
/*margin:0 0 0 287px;*/
margin:0;
padding:0;
}
.cssmenu li{
float:left;
padding:0px;
}
.cssmenu li a{
background:#333333 url('../images/seperator.gif') bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.cssmenu li a:hover, .cssmenu ul li:hover a{
background: #2580a2 url('../images/hover.gif') bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.cssmenu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.cssmenu li:hover ul{
display:block;
}
.cssmenu li li {
background:url('../images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.cssmenu li:hover li a{
background:none;
}
.cssmenu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.cssmenu li ul a:hover, .cssmenu li ul li:hover a{
background:#2580a2 url('../images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.cssmenu p{
clear:left;
}
/*End of css Menu ................ */
Its working with me, but seems that DOCTYPE is missing so your browser lunch Quirks mode, so add
<!DOCTYPE html>
Before <html> tag to prevent your IE browser to switch to Quirks mode.