I have a problem with my responsive menu and I can't figure out where is it.
It's hard to explain so go to my website http://untruste.altervista.org/home.html
Now resize the windows since you get the responsive version, open the menu and the close it.
Resize the window since you get the desktop version, as u can see the menu disappeared! (If you refresh the page it comes back)
desktopstyle:
header {
padding-bottom: 2%;
border-radius: 10px;
width: 70%;
margin: auto;
}
#headerTitle h1{
display: block;
}
#headerTitle {
padding-top: 1%;
text-align: center;
line-height: 1.8em;
}
header img {
display: block;
margin: 2%;
width:7em;
}
header h1 {
width: 80%;
margin: auto;
font-size: 1.8em;
letter-spacing: -0.04em;
}
header h2 {
width: 50%;
margin: auto;
text-align: center;
font-size: 1.5em;
letter-spacing: -0.06em;
}
#menu {
display: block;
width: 80%;
margin: auto;
border:none
}
#menu ul li {
display: inline-block;
width:auto;
margin-left:auto;
margin-right: auto;
padding:2px;
border: none;
font-size: 0.9em;
}
#selected {
background: #00715f;
padding:0 1em;
color: #ffffff !important;
border-radius: 10px;
}
article {
width: 70%;
padding-top: 1%;
border-radius: 10px;
font-size: 0.9em;
}
article a {
color: #004040
}
article h1 {
padding: 7px 7px 7px 30px;
width:auto;
margin-left: -30px;
margin-right: 30%;
text-align: left;
}
article h2 {
margin-left: -30px;
margin-right: 60%;
}
.articleText {
width:70%;
margin:auto;
}
#linkmap {
display: none;
}
iframe {
display: block;
border: none;
}
footer {
width:70%;
margin: auto;
border-radius: 10px;
font-size: 0.9em;
font-family: Times, serif;
}
mobilestyle
body {
}
header {
}
footer {
font-size: 0.7em;
}
#headerTitle h1{
display: none;
}
.icon {
margin-right:10px;
font-size:2em
}
.icon::after
{
content:'≡';
}
.icon-close::after
{
margin-right:10px;
font-size:2em;
content:'×';
font-weight: normal;
font-style: normal;
}
#headerTitle {
padding-top: 5px;
}
header img {
display:none
}
header h1 {
font-size: 1.4em;
letter-spacing: -0.04em;
}
header h2 {
font-size: 1.1em;
}
#menu {
border-bottom: 1em solid #00715f;
}
#menu ul li {
display: block;
height:2em;
width:100%;
margin-left:-3.5%;
font-size:1.2em
}
.menu_button {
display: block;
text-decoration: none;
text-align: right;
box-shadow:0 1px 1px rgba(0,0,0,0.15);
background: #00715f;
color: #ececec;
}
#selected {
background: #00715f;
padding:0 5em;
color: #ffffff !important;
border-radius: 10px;
}
article {
width: 100%;
font-size: 0.8em;
}
article h1 {
width:100%;
margin-right: 20%;
padding:7px 0 7px 0;
text-align: center;
}
article h2 {
margin-right: 10%;
}
.articleText {
width:90%;
margin:auto
}
#linkmap{
display: block;
border: none;
}
iframe {
display: none;
}
style:
body {
background:#004040;
color: #005b4d;
text-align: center;
font-family: "Georgia", "Times", serif;
}
a {
color: #00715f;
}
a:hover {
font-style: italic;
}
header {
background: white;
width: 100%;
height:auto
}
header h1,h2 {
display: block;
font-weight: normal;
}
footer {
background-color: #ffffff;
width: 100%;
padding: 2% 0;
}
#menu ul li {
list-style: none;
text-align: center;
}
#menu ul li a {
text-decoration: none;
color: #005b4d;
}
article {
background: white;
text-align: justify !important;
padding-bottom: 1%;
margin: 5% auto;
}
article h1 {
background: #00715f;
color: #fff;
width:100%;
margin-right: 20%;
text-shadow: 0 1px 0 #403232;
font-weight: normal;
text-align: center;
}
article h2 {
background: #00715f;
color:#fff;
padding: 7px 7px 7px 30px;
font-weight: normal;
font-size: 1.2em;
}
This the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" media= "(min-width: 240px) and (max-width:1023px)" type="text/css"
href="css/mobilestyle.css">
<link rel="stylesheet" media="(min-width:1024px)" type="text/css" href="css/desktopstyle.css">
<meta name="viewport" content="width=device-width">
<link rel="icon" href="favicon.ico">
<script src="jquery-1.11.3.js" type="text/javascript"></script>
<script src="script.js"></script>
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>ArteLab Responsive</title>
</head>
<body>
<header>
<img style="float:left" src="logos/artelab.png" alt="logo_artelab">
<img style="float: right" src="logos/insubria.png" alt="logo_insubria">
<div id="headerTitle">
<h1>Applied Recognition Technology Laboratory</h1>
<h2>Department of Theoretical and Applied Science</h2>
</div>
<a class="menu_button" href="#"><span class="icon">≡</span> </a>
<div id='menu'>
<nav>
<ul>
<li>LINK1</li>
<li>lINK2</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
<li><a id="selected" href="link">LINK6</a></li>
</ul>
</nav>
</div>
</header>
and this is the script I use to open the menu in the responsive version
jQuery(document).ready(function() {
$('.menu_button').click(function() {
$("#menu").slideToggle();
$(this).find('span').toggleClass('icon icon-close');
});
});
You can try this:
In your desktop styles just do :
#menu {
display: block!important;
}
Your slideToggle() to the menu is causing it to have display:none in the style attribute. So we just overwrite that in desktop.
Related
So I'm creating this website for a student project and my content on the top of the page is disappearing under the fixed nav bar I made.
How do I make it so the content area starts under the nav bar and doesn't end up under it?
(Temporarily fixed with <br> tags)
See code below:
HTML and CSS (The About page I'm working on)
#font-face {
font-family: "Roboto Light";
src: url(font/Roboto-Light.ttf)
}
#font-face {
font-family: "Roboto Regular";
src: url(font/Roboto-Regular.ttf);
}
#font-face {
font-family: "Roboto Medium Italic";
src: url(font/Roboto-MediumItalic.ttf);
}
#media (max-width:1200px) {
.indexsIMG img {
display: none !important;
}
}
body {
margin: 0 0;
padding: 0 0;
font-family: "Roboto Light";
background-color: #3aafa9;
}
.topbox {
font-size: 25px;
}
.topbox ul {
position: fixed;
top: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3aafa9;
max-width: 100%;
}
.flex-navbar {
display: flex;
justify-content: center;
margin-right: 15%;
font-family: "Roboto Light";
}
.leftbox {
margin-left: 5%;
font-family: "Roboto Medium Italic";
color: #171717;
}
.flex-navbar .active {
color: #171717;
}
.topbox li a {
display: block;
color: #feffff;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 1em;
float: left;
text-align: center;
}
.flex-navbar li a:hover {
color: #2b7a78;
}
.indexClickbox{
background-color: #2b7a78;
}
.index{
display: flex;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
}
.index h1{
font-size: 8rem;
}
.index p{
font-size: 2rem;
}
.indexOpphavIMG{
font-size: 1rem;
}
.indexTXT{
width: 50%;
float: right;
padding-left: 2%;
}
.index img{
max-width: 100%;
border-radius: 10px;
}
.indexIMG{
width: 50%;
float: left;
padding-top: 7%;
}
.index button{
width: auto;
margin-left: 5%;
background-color:#2b7a78;
border: none;
font-weight: 500;
font-size: 3rem;
color: #3aafa9;
border-radius: 4px;
}
.index button:hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
cursor: pointer;
}
.index a:link{
text-decoration: none;
}
.container {
display: block;
width: 0 auto;
text-align: center;
}
.box {
display: inline-block;
text-align: center;
padding: 0 5%;
}
.footer{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Stylesheet.css">
</head>
<body>
<nav class="topbox">
<ul>
<li class="leftbox"><a class="active" href="index.html">INOVA</a></li>
<div class="flex-navbar">
<li><a class="active" href="about.html">About</a></li>
<li>Innovation Camps</li>
<li>Contact</li>
</div>
</ul>
</nav>
<br>
<br>
<div class="container">
<div class="box">
<h1>About Inova</h1>
</div>
</div>
<footer>
<div class="footer">
<p></p>
</div>
</footer>
</body>
</html>
By adding padding to the top of the body, you can push the main content down so that it isn't below the fixed navbar:
#font-face {
font-family: "Roboto Light";
src: url(font/Roboto-Light.ttf)
}
#font-face {
font-family: "Roboto Regular";
src: url(font/Roboto-Regular.ttf);
}
#font-face {
font-family: "Roboto Medium Italic";
src: url(font/Roboto-MediumItalic.ttf);
}
#media (max-width:1200px) {
.indexsIMG img {
display: none !important;
}
}
body {
margin: 0 0;
padding: 80px 0 0;
font-family: "Roboto Light";
background-color: #3aafa9;
}
.topbox {
font-size: 25px;
}
.topbox ul {
position: fixed;
top: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3aafa9;
max-width: 100%;
background-color: rgba(0, 0, 0, .2);
}
.flex-navbar {
display: flex;
justify-content: center;
margin-right: 15%;
font-family: "Roboto Light";
}
.leftbox {
margin-left: 5%;
font-family: "Roboto Medium Italic";
color: #171717;
}
.flex-navbar .active {
color: #171717;
}
.topbox li a {
display: block;
color: #feffff;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 1em;
float: left;
text-align: center;
}
.flex-navbar li a:hover {
color: #2b7a78;
}
.indexClickbox {
background-color: #2b7a78;
}
.index {
display: flex;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
}
.index h1 {
font-size: 8rem;
}
.index p {
font-size: 2rem;
}
.indexOpphavIMG {
font-size: 1rem;
}
.indexTXT {
width: 50%;
float: right;
padding-left: 2%;
}
.index img {
max-width: 100%;
border-radius: 10px;
}
.indexIMG {
width: 50%;
float: left;
padding-top: 7%;
}
.index button {
width: auto;
margin-left: 5%;
background-color: #2b7a78;
border: none;
font-weight: 500;
font-size: 3rem;
color: #3aafa9;
border-radius: 4px;
}
.index button:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
cursor: pointer;
}
.index a:link {
text-decoration: none;
}
.container {
display: block;
width: 0 auto;
text-align: center;
}
.box {
display: inline-block;
text-align: center;
padding: 0 5%;
}
.footer {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Stylesheet.css">
</head>
<body>
<nav class="topbox">
<ul>
<li class="leftbox"><a class="active" href="index.html">INOVA</a></li>
<div class="flex-navbar">
<li><a class="active" href="about.html">About</a></li>
<li>Innovation Camps</li>
<li>Contact</li>
</div>
</ul>
</nav>
<div class="container">
<div class="box">
<h1>About Inova</h1>
</div>
</div>
<footer>
<div class="footer">
<p></p>
</div>
</footer>
</body>
</html>
The easiest way in my opinion is replacing position: fixed with position: sticky and also move this property to .topbox because it is the element, that you want to keep at the top of viewport.
Keep in mind that position: sticky has smaller browser support,
body {
margin: 0 0;
padding: 0 0;
font-family: "Roboto Light";
background-color: #3aafa9;
}
.topbox {
font-size: 25px;
top: 0;
position: sticky;
}
.topbox ul { width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3aafa9;
max-width: 100%;
}
.flex-navbar {
display: flex;
justify-content: center;
margin-right: 15%;
font-family: "Roboto Light";
}
.leftbox {
margin-left: 5%;
font-family: "Roboto Medium Italic";
color: #171717;
}
.flex-navbar .active {
color: #171717;
}
.topbox li a {
display: block;
color: #feffff;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 1em;
float: left;
text-align: center;
}
.flex-navbar li a:hover {
color: #2b7a78;
}
.indexClickbox {
background-color: #2b7a78;
}
.index {
display: flex;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
}
.index h1 {
font-size: 8rem;
}
.index p {
font-size: 2rem;
}
.indexOpphavIMG {
font-size: 1rem;
}
.indexTXT {
width: 50%;
float: right;
padding-left: 2%;
}
.index img {
max-width: 100%;
border-radius: 10px;
}
.indexIMG {
width: 50%;
float: left;
padding-top: 7%;
}
.index button {
width: auto;
margin-left: 5%;
background-color: #2b7a78;
border: none;
font-weight: 500;
font-size: 3rem;
color: #3aafa9;
border-radius: 4px;
}
.index button:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
cursor: pointer;
}
.index a:link {
text-decoration: none;
}
.container {
display: block;
width: 0 auto;
text-align: center;
}
.box {
display: inline-block;
text-align: center;
padding: 0 5%;
}
.footer {
}
<body>
<nav class="topbox">
<ul>
<li class="leftbox"><a class="active" href="index.html">INOVA</a></li>
<div class="flex-navbar">
<li><a class="active" href="about.html">About</a></li>
<li>Innovation Camps</li>
<li>Contact</li>
</div>
</ul>
</nav>
<div class="container">
<div class="box">
<h1>About Inova</h1>
</div>
</div>
<footer>
<div class="footer">
<p></p>
</div>
</footer>
</body>
In Chrome, my website is working as I would like it to. But for some reason, in Firefox, the CSS is not being linked whatsoever and I can't for the life of me figure out why.
The only thing that's different in Firefox when I go into the inspector, the browser has added a </link> to the end of the CSS link, but I can't get rid of it because I didn;t actually code it.
Does anyone have any idea what could be causing this issue?
The website is: http://www.renegademagsu.com
And here's my header section HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Renegade Magazine</title>
<link rel="stylesheet" type="type/css" href="<?php bloginfo('template_directory'); ?>/reset.css" />
<link rel="stylesheet" type="type/css" href="<?php bloginfo('template_directory'); ?>/style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
CSS
/*
Theme Name: Renegade
Theme URI: N/A
Author: Noelle Devoe
Author URI: http://www.noellesnotes.com
Version: 1.0
*/
body {
background-color: #000;
font-family:'Source Sans Pro', Arial;
font-size: 18px;
}
b, strong {
font-weight: bold;
}
.container {
width: 960px;
margin: 0 auto;
}
header {
width: 100%;
height: 135px;
}
.logo {
width: 260px;
height: 135px;
float: left;
}
nav {
width: 685px;
height: 135px;
padding-left:15px;
float: left;
}
nav ul li {
float: left;
line-height: 135px;
position: relative;
}
nav ul li a {
font-size: 24px;
color: white;
background-color: black;
font-weight: bold;
margin-right: 20px;
text-decoration: none;
text-transform: uppercase;
display: block;
}
nav ul li a:hover {
text-decoration: underline;
}
nav ul ul {
width: 200px;
height: 50px;
position: absolute;
top: 85px;
left: 0;
display: none;
z-index: 1000;
}
nav ul ul li {
float: none;
line-height: 50px;
}
nav ul ul li a {
font-weight: regular;
font-size: 20px;
}
nav ul li:hover ul {
display: block;
}
.search {
width: 260px;
height: 135px;
float: left;
}
section {
width: 640px;
float: left;
}
.post-container {
width: 100%;
position: relative;
margin-bottom: 30px;
}
.post-image img {
max-width: 100%;
z-index: 1;
}
.post-content {
position: relative;
left: 30px;
width: 580px;
z-index: 2;
}
.thumbnail-positioning {
bottom: 110px;
margin-bottom: -110px;
}
.post-content p {
line-height: 22px;
margin-bottom: 15px;
}
.post-content img {
max-width: 100%;
}
.post-meta h3 {
text-transform: uppercase;
font-size: 12px;
color: white;
margin-bottom: 3px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.post-meta a {
color: white;
text-decoration: underline;
font-weight: bold;
}
.post {
background-color: white;
color: black;
padding: 15px;
}
.post ol {
list-style-type: none;
list-style-type: decimal !ie;
/*IE 7- hack*/
margin: 0;
margin-left: 3em;
padding: 0;
counter-reset: li-counter;
}
.post ol > li {
position: relative;
margin-bottom: 20px;
padding-left: 0.5em;
min-height: 3em;
border-left: 2px solid #CCCCCC;
}
.post ol > li:before {
position: absolute;
top: 0;
left: -1em;
width: 0.8em;
font-size: 3em;
line-height: 1;
font-weight: bold;
text-align: right;
color: #464646;
content: counter(li-counter);
counter-increment: li-counter;
}
.post p:last-child {
margin-bottom: 0 !important;
}
.post h1 {
font-size: 34px;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 7px;
}
.post a {
color: black;
text-decoration: none;
}
.page {
width: 550px;
margin: 0 auto;
background-color: white;
padding: 15px;
}
.page p {
line-height: 22px;
margin-bottom: 15px;
}
.page h1 {
font-size: 34px;
text-transform: uppercase;
font-weight: bold;
border-bottom: 1px solid black;
margin-bottom: 7px;
}
.leftimage {
margin: 0 10px 2px -50px;
float: left;
}
.leftcaption {
margin: 3px 0 0 80px;
font-style: italic;
font-size: 11px;
width: 220px;
}
.leftimage img {
max-width: 300px;
}
.rightimage {
margin: 0 -50px 2px 10px;
float: right;
}
.rightcaption {
margin: 3px 80px 0 0;
font-style: italic;
font-size: 11px;
width: 220px;
}
.rightimage img {
max-width: 300px;
}
aside {
width: 290px;
float: right;
}
aside h1 {
color: white;
font-size: 28px;
border-bottom: 1px solid white;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 10px;
}
aside .widget {
margin-bottom: 20px;
}
aside ul li {
margin-bottom: 10px;
}
aside ul li a {
font-size: 19px;
color: white;
text-decoration: none;
}
aside ul li a:hover {
font-size: 19px;
color: black;
background-color: white;
text-decoration: none;
}
input[type=text]{
width: 100%;
background-color: white;
color:#505358;
font-size: 18px;
}
footer {
width: 100%;
}
footer .widget {
width: 300px;
float: left;
margin-bottom: 20px;
padding-right: 20px;
}
footer h1 {
color: white;
font-size: 28px;
border-bottom: 1px solid white;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 10px;
}
footer ul li a {
font-size: 19px;
color: white;
text-decoration: none;
}
footer ul li a:hover {
font-size: 19px;
color: black;
background-color: white;
text-decoration: none;
}
.alignleft {
float: left;
margin: 0 10px 2px -45px;
}
.alignright {
float: right;
margin: 0 -45px 2px 10px;
}
.fix {
clear: both;
}
It's a typo: "type/css" instead of "text/css". Chrome is ignoring the problem, Firefox is not.
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/reset.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />
Will fix you up.
On my site, all the pages of text, stay within the wrapper which goes to the bottom of the page. For some reason on a page with images, the wrapper doesn't go to the bottom, nor does the div which holds the images.
Here is the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Just Joel</title>
<link href="../CSS/JJ.css" rel="stylesheet" type="text/css" />
<link href="../CSS/grogrotesque.css" rel="stylesheet" type="text/css">
<link href="../CSS/stylesheet.css" rel="stylesheet" type="text/css">
<meta charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript" src="../js/jquery.corner.js"></script>
<script type='text/javascript' src="../js/slideshow.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link href="../../../CSS/JJ.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapperfull">
<div id="header">
<img src="../../../Images/Header.png" width="379" height="99" alt="Just Joel Header">
</div><!-- end header div -->
<div class="navigation">
<div class="menu-holder">
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>Work
<ul class="submenu">
<li>Print
</li>
<li>Branding
</li>
<li>Photography
</li>
</ul>
</li>
<li>Blog
</li>
<li>Inspired
</li>
<li>Contact
</li>
</ul>
</div>
<!-- menu-holder end -->
</div><!-- end navigation div -->
<div class="blog-container">
<div id="sidebarwrapper">
<div id="sidebar">
<h1>TREE TOP NEWS</h1>
<br>
<p>Tree Top News is a publcation produced through Highgate Woods, a heritage woodland in London</p>
<p>I produced the publication two years running, capturing the amazing nature and wildlife around he wood. I was responsible for rt direction, design and print.</p>
</div><!--sidebar!-->
</div>
<div class="project">
<img src="../../../Images/Tree Top News/P7158702.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Tree Top News/P7158703.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Tree Top News/P7158711.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Tree Top News/P7158701.jpg" alt="Tree Top" class="image" height="378" width="580">
<img src="../../../Images/Tree Top News/Tree Top News 2010-6.jpg" alt="Tree Top" class="image" height="378" width="580">
</div>
</div>
</div>
</body>
</html>
Here is the CSS
#wrapperfull {
min-height: 100%;
width: 1050px;
border: none;
margin-top: 0px;
background-color: #FFF;
position: relative; /* for the absolute positioned footer */
margin-right: auto;
margin-bottom: auto;
padding-top: 0.1px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 30px;
}
#head {
height: 100px;
width: 1050px;
border: none;
margin: auto;
background-color: #FFF;
position: fixed;
}
#header {
height: 135px;
width: 1045px;
font-family: Helvetica, sans-serif;
position: fixed;
background-color: #FFF;
margin-top: 0px;
}
#footer {
position: absolute;
width: 1050px;
height: 85px;
bottom: 0;
padding: 0px;
margin-bottom: 150px;
}
.footer-style {
padding: 40px;
}
h1 {
font-family: "geogtq md";
color: #00BDE5;
font-size: 25px;
text-decoration: none;
margin-top: 35px;
}
h1:hover {
color: #007889;
font-size: 25px;
}
h2 {
font-family: Helvetica, sans-serif;
color: #00BDE5;
font-size: 25px;
text-decoration: none;
}
h2:hover {
color: #007889;
font-size: 25px;
}
p {
font-family: Helvetica, sans-serif;
color: #01778B;
font-size: 12px;
text-align: justify;
}
img {
float: right;
}
html {
margin: 0;
padding: 0;
border: none;
height: 100%;
}
body {
margin: 0;
padding: 0;
border: none;
height: 100%;
background-image: url(../Images/stripe_70d2cce6f1e8675c4b38e18625444054.png);
background-repeat: repeat;
}
/* because of the box model anong with the height and set width, you'll want to have padding, border, and margin set to 0. Auto left and right margins are ok for centering. */
.container {
height: 100%;
width: 1050px;
margin-top:120px;
display: inline-block;
background-color: #FFF;
}
.heading {
height: 90px;
width: 750px;
float: left;
margin-top: 70px;
position: fixed;
background-color: #FFF;
margin-bottom: 35px;
margin-left: auto;
}
.blog-container {
min-height: 100%;
width: 700px;
margin-top: 170px;
margin-right: 0px;
background-color: #FFF;
}
.work-container {
min-height: 100%;
width: 585px;
margin-top: 70px;
background-color: #FFF;
}
.slideshow {
width: 900px;
list-style: none;
position: relative;
margin-top: 25px;
}
ul.slideshow li {
position: absolute;
left: -2px;
top: -9px;
display: inline;
}
.navigation {
height: 150px;
width: 600px;
margin-top: 0px;
margin-left: auto;
padding-top: 20px;
font-family: Helvetica, sans-serif;
position: fixed;
background-color: #FFF;
}
.menu-holder ul {
height: 120px;
padding: 0;
list-style-type: none;
}
.menu-holder ul li {
position: relative;
float: left;
line-height: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 100px;
margin-left: 0px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 0px;
}
.menu-holder ul li:hover ul {
display: block;
float: left;
color: #000;
}
.menu-holder ul li a {
font-family: Helvetica, sans-serif;
font-size: 15px;
display: block;
color: #00BDE5;
text-decoration: none;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 0px;
}
.menu-holder ul li a:hover {
color: #007985;
}
.menu-holder ul li ul {
float: none;
display: none;
position: absolute;
top: 35px;
left: -10px;
margin: -1px 0 0px 10px;
padding: 5px 10px 5px 10px;
white-space: nowrap;
}
.menu-holder ul li ul:hover {
display: block;
}
.menu-holder ul li ul li {
position: static;
float: none;
display: inline;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px -10px;
margin-right: 20px;
}
.menu-holder ul li ul li a {
display: inline;
margin: 0 0px 0 0px;
-webkit-border-radius: 0;
}
a:link {
text-decoration: none;
color: #000;
font-family: Helvetica, sans-serif;
}
a:hover {
text-decoration: none;
color: #000;
font-family: Helvetica, sans-serif;
}
ul {
font-size: 15px;
margin: 0;
padding: 0;
list-style: none;
margin-right: 40px;
}
ul li, ul li ul li {
display: inline;
position: relative;
float: left;
color: #00BDE5;
}
li ul {
display: none;
width: 450px;
margin-right: 20px;
}
ul ul li a {
font-family: Helvetica, sans-serif;
font-size: 15px;
text-decoration: none;
margin-right: 15px;
white-space: nowrap;
color: #00BDE5;
margin-right: 20px;
}
li:hover ul {
display: inline;
position: absolute;
}
li:hover li {
float: none;
font-size: 15px;
margin-top:3px;
}
.services1 a {
font-family: Helvetica, sans-serif;
font-size: 12px;
color: #00BDE5;
float: left;
list-style-type: none;
}
a:link {
text-decoration: none;
color: #00BDE5;
font-family: Helvetica, sans-serif;
text-align: center;
}
a:hover {
text-decoration: none;
color: #007889;
font-family: Helvetica, sans-serif;
text-align: center;
}
/* Thumb size 230 x 150 px */
.work_thumbs {
width:1000px;
margin: 0px auto 0 auto;
float: left;
}
.work_thumbs li {
margin: 0px 15px 15px 0px;
list-style-type: none;
display: block;
float: left;
display: inline;
font-family: Helvetica, sans-serif;
color: #FFF;
overflow: hidden;
}
.work_thumbs li a {
float: inherit;
display: block;
width: 230px;
padding-bottom: 20px;
font-family: Helvetica, sans-serif;
color: #00BDE5;
height: 180px;
border: 1px solid #02BDE5;
overflow: hidden;
text-align: centre;
font-size: 12px;
}
.work_thumbs li .type {
color: #01BDE6;
}
.work_thumbs li a:hover {
background-color: #ceeef6;
border-bottom: 1px solid #02BDE5;
text-decoration: none;
color: #007789;
font-family: Helvetica, sans-serif;
text-align: centre;
}
.work_thumbs li .thumb {
margin-bottom: 15px;
display:block
}
.project {
width: 580px;
height: 1000px;
margin-top: 0px;
margin-right: 100px;
left: auto;
background-color: #fff;
}
.single .header {
position:static
}
.single #sidebar a {
color:#000;
}
.single #sidebar a:hover {
color:#4f4f4f
}
.image {
margin: 0px;
padding-bottom:50px;
}
/* Set fixed top margin */
#sidebar {
width: 273px;
height: 200px;
left: 50%;
top: 165px;
background-color: #FFF;
padding: 10px 20px 10px 10px;
color:#00C0EE;
font-family: Helvetica, sans-serif;
position: fixed;
color: #007789;
font-size: 15px;
}
#sidebar h1 {
font-family: Helvetica, sans-serif;
padding: 5px 0 15px 0;
font-weight: normal;
font-size: 18px;
color: #00C0EE;
}
#sidebar p {
padding-bottom: 15px;
font-family: Helvetica, sans-serif;
color: #007789;
height: 100%;
}
#sidebarwrapper {
right: 822px;
position: absolute;
width: 205px;
height: 200px;
top: 248px;
}
* {
margin: 0; padding: 0;
}
#page-wrap {
width: 600px;
margin: 15px auto;
position: relative;
}
#sidebar ul {
background: #EEE;
padding: 10px;
}
li {
float: left;
display: inline;
}
#main {
width: 700px;
float: left;
}
http://jsfiddle.net/Q6Lze/
You need a clearfix to clear the floats contained within. This forces the div containing the floated images take up that space instead of collapse into itself:
.project:after {
display: table;
content: '';
clear: both;
}
Or just add it to div:after instead
Majority of pages on the website works with no errors but on a few of them the navigation doesn't line up with the content and I am missing the "contact" link at the top of the navigation. The website works fine in Chrome and Firefox, and only shows these errors when in Internet Explorer. I don't quite understand why? I've search Google for answers and I haven't seen any solutions that actually work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Business Learning Foundation</title>
<!--==== js image slider ====-->
<!--==== design ====-->
<link href="staticstyle.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
.auto-style9 {
text-align: center;
}
</style>
<!--==== browser ====-->
<!--[if lte IE 7]><link href="../design/iestyle.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if lte IE 8]><style>#wrapper{width: 1020px;max-width: 1020px;min-width: 1020px;background-image: none;display: block;}
.auto-style1 {
background-color: #EF7F1A;
}
.auto-style10 {
color: #EF4923;
}
.auto-style11 {
display: inline-block;
height: 30px;
padding: 5px 0px 0px 0px;
font-size: 14px;
font-weight: normal;
color: #1C1C1C;
text-align: center;
}
</style><![endif]-->
<!--[if lt IE 9]><script src="../design/js/html5shiv.js"></script><![endif]-->
<script type="text/javascript" src="10375.js"></script>
<!--
=====================================
COOKIE COMPLIANCE CODE
=====================================
-->
<script type="text/javascript" src="../CookieCompliance/jquery.js"></script>
<script type="text/javascript" src="../CookieCompliance/cookie-compliance.js"></script>
<link href="../CookieCompliance/stylesheet.css" rel="stylesheet" type="text/css" />
<!--
END
=====================================
-->
</head>
<body>
<!--
=====================================
COOKIE COMPLIANCE CODE
=====================================
-->
<div id="cookieMessageWrapper">
<div id="cookieMessage">
<a id="cookieClose" href="#">Close</a>
<p>This site uses cookies. By continuing to use our website you accept
our use of cookies. For more information and how you can disable them
please click here, or click the close
button on the right to hide this message.</p>
</div>
</div>
<!--
END
=====================================
-->
<div id="menu-wrapper">
<div id="menu" style="height: 58px">
<ul>
<li>Home</li>
<li>Public courses</li>
<li>In-house training</li>
<li>ILM centre</li>
<li class="current_page_item">About us</li>
<li>Contact us</li>
</ul>
</div>
<!-- end #menu -->
</div>
<div id="header-wrapper" style="height: 317px">
<div id="header" style="height: 272px">
<div id="logo" style="height: 223px; width: 999px;">
<p><img src="../images/logo/BLF-trans.png" alt="Business Learning Foundation" /></p>
<div id="staticFrame" style="width: 958px;" >
<img alt="" height="165" src="booklogo.png" style="float: left" width="238" /><!--thumbnails--><div id="thumbs" style="width: 302px; height: 173px;">
<div class="thumb" style="height: 155px">
<br />
<h1>spice up your learning & development with business learning
foundation</h1>
<p>About us</p>
<p> </p>
<p> </p>
</div>
</div>
<!--clear above float:left elements. It is required if above #slider is styled as float:left. -->
</div>
<p> </p>
<p> </p>
</div>
<h1><span > </span> <img alt="Facebook" height="32" src="../images/social-media-icons/facebok.png" width="32" class="auto-style6" style="float: right" />
<a href="https://twitter.com/theblf_co" target="_blank">
<img alt="Twitter" height="32" src="../images/social-media-icons/twitter.png" width="32" class="auto-style6" style="float: right" /></a>
<a href="http://www.linkedin.com/company/2634098?trk=prof-exp-company-name" target="_blank">
<img alt="Linked In" height="32" src="../images/social-media-icons/linkedin.png" width="32" class="auto-style6" style="float: right" /></a>
<a href="https://plus.google.com/b/108614131190835211694/108614131190835211694/posts" target="_blank">
<img alt="" height="32" src="../images/social-media-icons/google-plus.png" width="32" class="auto-style6" style="float: right" /></a></h1>
</div>
</div>
<div id="menu2-wrapper">
<div id="menu2">
<ul>
<li class="current_page_item">about</li>
<li>history</li>
<li>the team</li>
<li>venues</li>
<li>clients</li>
<li>testimonials</li>
<li>news</li>
<li>gallery</li>
<li>careers</li>
</ul>
</div>
<!-- end #menu -->
</div>
<!-- end #header -->
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="content" style="height:808px">
<div class="post">
<div class="entry">
<h2> About the business learning foundation</h2>
<p>The Business Learning Foundation specialises in
Management Development, Team Building and Business
Coaching. We also have our own range of
psychometrics and eBooks to support the various
methods of development. We are renowned for our
innovative exercises we use for our management
development programmes and team builds, these
re-energise the delegates and illustrate the key
learning’s and messages in a way which cannot be
done in the classroom.<br />
<br />
We have been running since 1985 and have built an
impressive and loyal client base by delivering world
class learning and development. Our clients used to
stick to what they knew and repeated the work we had
done with them in the past, this year we have
rebranded to bring all elements of our organisation
under one umbrella so that our customers could see
and benefit from all the specialism’s we were able
to offer them.<br />
The CSS code is:
body {
margin: 0;
padding: 0;
background-color:#e5d7cc;
font-family:"Century Gothic";
font-size: 12pt;
color: #3B3B3B;
background-image:url('../images/logo/leftrighttree.png');
background-position:left top;
background-repeat:no-repeat;
}
h1, h2, h3 {
margin: 0px;
padding: 0px;
letter-spacing: -2px;
text-transform: uppercase;
font-family: "Trajan Pro 3";
font-weight: normal;
color:#261e74;
}
h1 {
font-size: 26px;
font-family:"Trajan Pro 3";
color:#3e1f00;
letter-spacing:0.5px;
}
h2 {
letter-spacing: 1px;
font-size: 18px;
border-bottom:1px #f26522 solid;
border-top:1px #f26522 solid;
padding:1px;
text-align:center;
color:#1c4297;
}
h3 {
letter-spacing: 1px;
font-size: 14px;
border-bottom:1px #f26522 solid;
border-top:1px #f26522 solid;
padding:1px;
text-align:center;
color:#0487d3;
}
p, ul, ol {
margin-top: 0;
line-height: 180%;
}
ul, ol {
}
a {
text-decoration: none;
color: #ef4923;
}
a:hover {
text-decoration: none;
color: #0487d3;
}
.div1, .div2 {width:800px;margin:0 auto; background-color:#e5d7cc}
.div1 {margin-top:30px;margin-bottom:60px;text-align:center;line-height:20px;background-color:#e5d7cc}
.div1 P {font-size:18px;}
.div1 a, .div2 a {color:#07C;}
.div2 {margin-top:70px;}
.div2 li {padding-top:6px;padding-bottom:6px;background-color:#e5d7cc}
.floatLeft {float:left;}
/* Header */
#header-wrapper {
}
#header {
clear: both;
width: 1000px;
height:416px;
margin: 0px auto;
}
/* Logo */
#logo {
margin: 0px;
padding: 30px 0px;
color: #000000;
}
#logo h1, #logo p {
margin: 0;
padding: 0;
}
#logo h1 {
margin: 0px;
padding: 0px;
text-align: center;
text-transform: lowercase;
font-size: 10em;
font-family: 'Yesteryear', cursive;
font-weight: 400;
color: #323030;
}
#logo h1 span {
color: #F6B300;
}
#logo p {
margin-top: -2em;
padding: 0px;
text-align: center;
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
font-size: 11px;
color: #3B3B3B;
}
#logo p a {
color: #3B3B3B;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #323030;
}
#slogan{
height:36px;
font-size:24pt;
font-family:"Trajan Pro 3";
text-align:left;
padding-bottom:6px;
}
/* Search */
#side-label{
width:250px;
color:black;
font-family:"Century Gothic";
letter-spacing:0.5px;
}
#search {
width: 320px;
height: 60px;
padding: 0px;
}
#search form {
margin: 0px;
padding: 0px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 250px;
outline: none;
background: #F5F0E7;
border: 1px solid #D7D0C0;
padding: 10px;
border-radius: 8px;
text-transform: lowercase;
font-family:"Century Gothic";
color: #454545;
}
#search-submit {
width:82px;
padding: 5px 10px;
background: #e5d7cc;
border-radius: 5px;
letter-spacing: 1px;
text-transform: uppercase;
font-family:"Century Gothic";
font-size: 14px;
background-image:url('../images/search.png');
background-repeat:no-repeat;
background-position:center;
color: #0a4fa3;
}
/* CourseSearch */
#coursesearch {
width: 320px;
height: 60px;
padding: 0px;
}
#coursesearch form {
margin: 0px;
padding: 0px;
}
#coursesearch fieldset {
margin: 0;
padding: 0;
border: none;
}
#coursesearch-text {
width: 250px;
outline: none;
background: #F5F0E7;
border: 1px solid #D7D0C0;
padding: 2px;
border-radius: 8px;
text-transform: lowercase;
font-family:"Century Gothic";
color: #454545;
}
#coursesearch-submit {
width:82px;
margin-top:10px;
padding: 2px 5px;
background: #e5d7cc;
border-radius: 5px;
letter-spacing: 1px;
text-transform: uppercase;
font-family:"Century Gothic";
font-size: 14px;
color: #1c4297;
}
/* Contact */
#contact {
width: 320px;
height: 60px;
padding: 0px;
}
#contact form {
margin: 0px;
padding: 0px;
}
#contact fieldset {
margin: 0;
padding: 0;
border: none;
}
#contact-text {
width: 209px;
outline: none;
background: #F5F0E7;
border: 1px solid #D7D0C0;
padding: 2px;
border-radius: 8px;
font-family:"Century Gothic";
color: #454545;
}
#contact-submit {
width: 62px;
height: 22px;
display: none;
border: none;
color: #FFFFFF;
}
/* Menu */
#menu-wrapper {
overflow: hidden;
height: 56px;
}
#menu {
width: 1000px;
height: 55px;
margin: 0px auto;
padding-top:5px;
background:#f47321 url('../images/logo/whitetree.png') no-repeat right 50%;
}
#menu ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline-block;
border-right: 1px solid #FDA408;
}
#menu a {
display: block;
letter-spacing: 1px;
margin: 0px 10px;
line-height: 55px;
padding: 0 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
border: none;
}
#menu a:hover, #menu .current_page_item a {
text-decoration: none;
color: #3D2729;
}
#menu .current_page_item a {
}
#menu-wrapper {
overflow: hidden;
height: 56px;
}
/* Navigation part 2 */
#menu2 {
width: 1000px;
height: 30px;
margin: 0px auto;
padding: 0px;
background-color:#3E1F00;
border-radius:8px;
}
#menu2 ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu2 li {
display: inline-block;
border-right: 1px solid #FDA408;
}
#menu2 a {
display: block;
letter-spacing: 1px;
margin: 0px 10px;
line-height: 25px;
padding: 0 1px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family:"Century Gothic";
font-size: 12px;
font-weight: normal;
color:#FFFFFF;
border: none;
}
#menu2 a:hover, #menu2 .current_page_item a {
text-decoration: none;
color:#FF3300;
}
#menu2 .current_page_item a {
}
#menu2-wrapper {
overflow: hidden;
height: 31px;
}
/* Page */
#wrapper
{
overflow: hidden;
padding-bottom: 40px;
}
#page {
overflow: hidden;
width: 1000px;
margin: 0px auto;
}
/* Content */
#content {
float: left;
width: 640px;
height:500px;
background-color:#ffffff;
overflow:scroll;
}
.post {
margin-bottom: 5px;
padding: 10px 15px;
}
.post-alt
{
background: #F0F0F0;
}
.post .title {
height: 38px;
margin-bottom: 10px;
padding: 12px 0 0 0px;
font-size: 32px;
}
.post .title a {
border: none;
color: #3D2729;
}
.post .meta {
margin-bottom: 5px;
padding: 5px 0px 15px 0px;
text-align: left;
font-weight: normal;
}
.post .meta .date {
float: left;
}
.post .meta .posted {
float: right;
}
.post .meta a {
}
.post .entry {
padding: 0px 0px 20px 0px;
padding-bottom: 5px;
text-align: justify;
}
.links {
display: inline-block;
height: 30px;
padding: 5px 0px 0px 0px;
font-size: 14px;
font-weight: normal;
color: #1C1C1C;
}
.button
{
padding: 5px 10px;
background: #E58703;
border-radius: 5px;
letter-spacing: 1px;
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
color: #FFFFFF;
}
/* Sidebar */
#sidebar {
float: right;
width:300px;
height:536px;
margin: 0px;
padding: 40px 30px 0px 30px;
color: #787878;
background: #f26522;
}
#sidebar p
{
color: #3B3B3B;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
}
#sidebar li ul {
margin: 0px 0px;
padding-bottom: 50px;
}
#sidebar li li {
border-bottom: 1px solid #D8AD06;
margin: 0px 0px;
padding: 10px 0px;
border-left: none;
}
#sidebar li li a {
color: #3B3B3B;
}
#sidebar li li span {
display: block;
padding: 0;
font-size: 11px;
font-style: italic;
}
#sidebar h2 {
padding-bottom: 20px;
font-size: 18px;
color: #3D2729;
}
#sidebar p {
margin: 0px 0px 40px 0px;
padding: 0px;
text-align: justify;
}
#sidebar a {
border: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Footer */
#footer {
height: 150px;
margin: 0 auto;
padding: 0px 0 15px 0;
background:#EE8A48;
border-top: 1px solid #A59282;
font-family: 'Arvo', serif;
}
#footer p {
margin: 0;
padding-top: 40px;
line-height: normal;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: #FFFFFF;
}
#footer a {
color: #FFFFFF;
}
#banner {
width: 1000px;
margin: 0px auto;
}
#banner img
{
border-radius: 8px;
background-repeat:no-repeat;
background-position:center;
}
/* Three Column Content */
#three-column {
overflow: hidden;
padding: 10px 0px 10px 0px;
color:white;
}
#three-column #tbox1 {
float: left;
width: 320px;
margin-right: 20px;
}
#three-column #tbox2 {
float: left;
width: 320px;
margin-right: 20px;
}
#three-column #tbox3 {
float: left;
width: 320px;
}
.box-style {
background-color:#3E1F00;
}
.box-style01
{
border-bottom: 5px solid #0F62B4;
}
.box-style02
{
border-bottom: 5px solid #DE5635;
}
.box-style03
{
border-bottom: 5px solid #0F62B4;
}
.box-style h2 {
padding: 10px 0px;
letter-spacing: -1px;
font-size: 16px;
color: #FFFFFF;
width:272px;
}
.box-style .image {
width: 272px;
}
.box-style .arrow {
}
.box-style .content {
overflow: hidden;
width: 300px;
padding: 30px;
}
.divider {
overflow: hidden;
height: 50px;
background: url(images/img04.png) no-repeat center top;
}
/* http://www.menucool.com */
/*slider frame*/
#staticFrame
{
width:950px;
margin:0 auto; /*center-aligned*/
padding:20px;
border-top:1px #BE9C81 dashed;
height:154px;
border-bottom:1px #BE9C81 dashed;
}
/* -- thumbnails -- */
#thumbs
{
float:right;
margin-left:10px;
width:300px;
font:normal 11px/13px Arial;
color:#666;
height:240px;
}
#thumbs .thumb
{
padding:6px 4px;
color:fuchsia;
}
#thumbs .thumb h1
{
padding:6px 4px;
color:#715239;
font-family:"Trajan Pro 3";
letter-spacing:0.5px;
line-height:20px;
font-size:20px;
}
#thumbs .thumb p
{
padding:20px 20px;
color:#FF6600;
font-size:16px;
font-family:"Century Gothic";
text-decoration:none;
text-transform:none;
}
#testimonial{
}
#testimonial .testimage{
width: 20%;
padding:10px 0px 0px 0px;
float:left;
}
#testimonial .testcontent{
border:1px #BE9C81 dashed;
float:right;
width:100%;
margin-bottom:20px;
}
#testimonial .testcontent h1 {
width:75%;
float:right;
padding:10px 10px 10px 10px;
font-style:italic;
color:#3E1F00;
font-size:15px;
text-transform:none;
font-family:"Century Gothic";
letter-spacing:0.1px;
}
#testimonial .testcontent h2 {
font-weight:bold;
color:#090071;
border:none;
font-size:15px;
text-transform:none;
font-family:"Century Gothic";
letter-spacing:0.1px;
width:75%;
float:right;
text-align:left;
}
#testimonial .testcontent p {
font-style:italic;
color:#CA5100;
border:none;
font-size:15px;
text-transform:none;
font-family:"Century Gothic";
letter-spacing:0.1px;
width:75%;
float:right;
}
#testimonial .testcontent h4 {
color:#622000;
border:none;
font-size:12px;
text-transform:none;
font-family:"Century Gothic";
letter-spacing:0.1px;
width:75%;
float:left;
text-align:center;
line-height:-10px;
width:20%;
}
Use float:left for menu LI. It will align all the LIs from left to right in IE. And set margin: auto to align UL to the center.
#menu2 li {
display: inline-block;
border-right: 1px solid #FDA408;
float:left;
}
#menu li {
display: inline-block;
border-right: 1px solid #FDA408;
float:left;
}
Update:
For equally spacing LIs within UL, there is no easy way to implement it using CSS, but you could use jquery like this. I have tried it using number of different ways in CSS, but this seems to be the best and works in every browser.
$(document).ready(function() {
var tabs = $('#menu2').find('li');
if (tabs.length) tabs.css('width', (100 / tabs.length) + "%");
})
I want to build a web responsive website with tapestry, I add the meta data in the head section of the .tml file and used the css for the responsive design. However it doesn't work at all. I tested with an elastic youtube video, which should match the width of the page. I post here the .tml file and the css.
The .tml file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
xmlns:p="tapestry:parameter">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link href="${context:layout/normalize.css}" rel="stylesheet" type="text/css"/>
<title>${title}</title>
</head>
<body>
<!-- start header -->
<div class="header">
<div class="logo">
<h1>
<t:pagelink page="index">com.example:tutorial1</t:pagelink>
version ${appVersion}
</h1>
</div>
<div class="menu">
<ul>
<li t:type="loop" source="pageNames" value="pageName" class="prop:classForPageName">
<t:pagelink page="prop:pageName">${pageName}</t:pagelink>
</li>
</ul>
</div>
<div class="video-container">
<iframe width="560" height="315" src="http://www.youtube.com/embed/R800WcsFj0U" frameborder="0"></iframe>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div class="page">
<!-- start sidebar -->
<div class="sidebar">
<ul>
<li class="search" style="background: none;">
</li>
<li>
<t:alerts/>
</li>
<li t:type="if" test="sidebar">
<h2>${sidebarTitle}</h2>
<div class="sidebar-content">
<t:delegate to="sidebar"/>
</div>
</li>
</ul>
</div>
<!-- end sidebar -->
<!-- start content -->
<div class="content">
<div class="post">
<div class="title">
<h2>${title}</h2>
</div>
<div class="entry">
<t:body/>
</div>
</div>
</div>
<!-- end content -->
<br style="clear: both;"/>
</div>
<!-- end page -->
<!-- start footer -->
<div class="footer">
<p class="legal">
©2012 com.example. All Rights Reserved.
•
Design by
Free CSS Templates
•
Icons by
FAMFAMFAM.
</p>
</div>
<!-- end footer -->
</body>
</html>
The css file:
body {
margin: 0;
padding: 0;
background: #FFFFFF url(images/img01.jpg) repeat-x;
text-align: justify;
font: 15px Arial, Helvetica, sans-serif;
color: #626262;
}
form {
margin: 0;
padding: 0;
}
input {
padding: 5px;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}
h1, h1 a, h2, h2 a, h3, h3 a {
margin: 0;
text-decoration: none;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #444444;
}
h1 {
letter-spacing: -1px;
font-size: 2.2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h2 {
letter-spacing: -1px;
font-size: 2em;
}
h3 {
font-size: 1em;
}
p, ol, ul {
margin-bottom: 2em;
line-height: 200%;
}
blockquote {
margin: 0 0 0 1.5em;
padding-left: 1em;
border-left: 5px solid #DDDDDD;
}
a {
color: #1692B8;
}
a:hover {
text-decoration: none;
}
/* Header */
div.header {
height: 42px;
}
div.logo h1, div.logo p {
float: left;
text-transform: lowercase;
}
div.logo h1 {
padding: 0px 0 0 40px;
}
div.logo p {
margin: 0;
padding: 14px 0 0 4px;
line-height: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
div.logo a {
text-decoration: none;
color: #D0C7A6;
}
div.menu {
float: right;
}
div.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
div.menu li {
display: block;
float: left;
height: 42px;
}
div.menu a {
display: block;
padding: 8px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: lowercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
color: #CEC5A4;
}
div.menu .last {
margin-right: 20px;
}
div.menu a:hover {
color: #FFFFFF;
}
div.menu .current_page_item A {
text-decoration: underline;
}
div.menu .current_page_item a {
}
/* Page */
div.page {
padding: 40px 40px 0 40px;
}
/* Content */
div.content {
margin-right: 340px;
}
.post {
margin-bottom: 10px;
}
.post .title {
border-bottom: 1px #999999 dashed;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
}
.post .title h2 {
padding: 30px 30px 0 0px;
text-transform: lowercase;
font-weight: normal;
font-size: 2.2em;
}
.post .title p {
margin: 0;
padding: 0 0 10px 0px;
line-height: normal;
color: #BABABA;
}
.post .title p a {
color: #BABABA;
}
.post .entry {
padding: 20px 0px 20px 0px;
}
.post .links {
margin: 0;
padding: 0 30px 30px 0px;
}
.post .links a {
display: block;
float: left;
margin-right: 10px;
margin-bottom: 5px;
text-align: center;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}
.post .links a:hover {
}
.post .links .more {
width: 128px;
height: 30px;
background: url(images/img03.jpg) no-repeat left center;
}
.post .links .comments {
width: 152px;
height: 30px;
background: url(images/img04.jpg) no-repeat left center;
}
/* Sidebar */
div.sidebar {
float: right;
width: 300px;
margin-top: 30px;
}
div.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
div.sidebar li {
margin-bottom: 10px;
background: url(images/img10.gif) no-repeat left bottom;
}
div.sidebar li ul {
padding: 0 30px 40px 30px;
}
div.sidebar li li {
margin: 0;
padding-left: 20px;
}
div.sidebar h2 {
padding: 30px 30px 5px 10px;
background: url(images/img09.gif) no-repeat;
text-transform: lowercase;
font-weight: normal;
font-size: 1.6em;
color: #302D26;
}
div.sidebar DIV.sidebar-content {
width: 265px;
margin-left: 10px;
padding-bottom: 1px;
}
div.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
div.video-container iframe,
div.video-container object,
div.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Search */
li.search {
padding: 20px 30px 40px 30px;
}
li.search input {
padding: 0;
width: 70px;
height: 29px;
background: #DFDFDF url(images/img14.gif) repeat-x;
font-weight: bold;
}
li.search #s {
padding: 5px;
width: 150px;
height: auto;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}
li.search br {
display: none;
}
/* Categories */
div.sidebar div.categories li {
background: url(images/img12.gif) no-repeat left center;
}
/* Calendar */
div.calendar_wrap {
padding: 0 30px 40px 30px;
}
div.calendar table {
width: 100%;
text-align: center;
}
div.calendar thead {
background: #F1F1F1;
}
div.calendar tbody td {
border: 1px solid #F1F1F1;
}
div.calendar #prev {
text-align: left;
}
div.calendar #next {
text-align: right;
}
div.calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
div.calendar #today {
background: #FFF3A7;
border: 1px solid #EB1400;
font-weight: bold;
color: #EB1400
}
/* Footer */
div.footer {
padding: 70px 0 50px 0;
background: #757575 url(images/img08.gif) repeat-x;
}
div.footer p {
margin-bottom: 1em;
text-align: center;
line-height: normal;
font-size: .9em;
color: #BABABA;
}
div.footer a {
padding: 0 20px;
text-decoration: none;
color: #DDDDDD;
}
div.footer a:hover {
color: #FFFFFF;
}
div.footer .rss {
background: url(images/img18.gif) no-repeat left center;
}
div.footer .xhtml {
background: url(images/img19.gif) no-repeat left center;
}
div.footer .css {
background/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
div.footer .legal a {
padding: 0;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
Thank you very much.
You are missing a closing brace. It goes between the 2nd and 3rd line below.
div.footer .css {
background/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
As Lee Meador already pointed out you are missing the closing braces for your footer declaration, also the background markup is incomplete. it should be something like this (deduced from your other markup):
div.footer .css {
background: url(images/img20.gif) no-repeat left center;
}
#media .... etc.
Instead of rolling your own, I would suggest looking at an existing library that already is responsive, and then customizing it, so save yourself some time instead of re-inventing the wheel.
Bootstrap is one such excellent library. You can also integrate it easily into Tapestry using the tapestry-bootstrap integration project. I have used this combo on multiple responsive applications, some exclusively for mobiles, and have been quite successful.