Hy!
I don't know how to center the Nav-Bar please help!
HTML:
<html>
<script src="jquery-1.6.1.min.js"></script>
<script src='jquery.divslideshow-1.2-min.js' type='text/javascript'></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<div id="page-wrap">
<table>
<tr>
<td><img src="images/logo.png"/></td>
<td> <div id="slideshow">
<img src="/images/trompete.jpg" alt="Slideshow Image 1" class="active" />
<img src="/images/floete.jpg" alt="Slideshow Image 1" />
</div></td>
</tr>
</table>
<div class="container">
<ul id="minitabs">
<li>News</li>
<li><a href="#" >Fotos</a></li>
<li>Mitglieder</li>
<li>Jugend</li>
<li>Gästebuch</li>
<li>Intern</li>
</ul>
</div>
<br/>
<div><p>Pellentesque habitant morbi</p>
</div>
</div>
</body>
</head>
</html>
Css:
#page-wrap { position: relative; width: 1024px;
margin: 50px auto; padding: 20px;
background: white; -moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black; -webkit-border-radius:30px;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 10px 56px;
text-decoration: none;
font-weight: bold;
color: #069;
}
#nav li a:hover {
color: #c00;
background-color: #fff; }
p { font: 15px/2 Georgia, Serif; margin: 0 0 30p x 0; text-indent: 5px; }
#slideshow {
position:relative;
height:165px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
height:146px;
width: 650px;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
.container {
padding: 1px;
margin: 40px 0px 40px 0;
background: #fff;
}
#minitabs {
margin: 0;
padding: 0 0 40px 10px;
border-bottom: 1px solid #587DC6;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a:link, #minitabs a:visited {
float: left;
font-size: 40px;
line-height: 10px;
font-weight: bold;
margin: 0 10px 4px 10px;
padding-bottom: 2px;
text-decoration: none;
color: #C6C6C6;
}
#minitabs a.active:link, #minitabs a.active:visited, #minitabs a:hover {
border-bottom: 4px solid #B80028;
padding-bottom: 20px;
background: #fff;
color: #587DC6;
}
To centre your nav you will need to do the following:
CSS:
In #minitabs assign
text-align:center;
In #minitabs a:link, #minitabs a:visited remove or comment out float:left;
That should centre your nav. You will have to adjust some of your styles in your nav to get it to look the same as before but at least it should be a starting point for you.
See live link on JSfiddle: http://jsfiddle.net/AvavN/
Related
I'm trying to center my webpage with
.wrapper {
display: flex;
align-items: stretch;
background: #fafafa;
/*max-width: 1520px; */
box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
text-align: left;
width: 960px;
margin: 0 auto;
}
From what I understand, the last two lines should center it, but the page is still glued to the left. All the content is inside the wrapper, and I've checked my HTML and CSS code with https://validator.w3.org so I don't think it can be incorrect tags.
Am I missing something?
Full code for the page is here: HTML CSS
Any help is much appreciated!
Replace your .wrapper css with below one
.wrapper {
display: flex;
background: #fafafa;
box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
max-width: 960px;
margin: auto;
position: absolute;
left: 0;
right: 0;
}
Or another solution is set margin: auto; to body
I hope this will help you
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Georgia', serif;
background-image: url("path-to-stripe.png");
max-width: 960px;
/**background: #fafafa; **/
}
p {
font-family: '{Poppins}',
sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 40px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/*
div.wrapper{
display: flex;
align-items: stretch;
max-width : auto ;
position : center;
box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
background: #fafafa;
padding-left: 10px;
padding-right: 10px;
}
*/
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
background: #fafafa;
box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1);
max-width: 960px;
margin: auto;
position: absolute;
left: 0;
right: 0;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #082e59;
box-shadow: 1px 1px 6px rgba(0, 0, 0, 2.9);
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #082e59;
}
#sidebar ul.components {
padding: 30px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #7192b7;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #082e59;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #082e59 !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MAP STYLES
----------------------------------------------------- */
#container1 {
display: block;
max-width: 1200px;
min-height: 505px;
position: auto;
/* height: 475px; position: center;*/
align-items: stretch;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>NEA SCA Onboarding</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<p style="text-align:center;"><img src="stateheader.png" alt="div" width="100px" align="middle" /></p>
<h3 style="text-align:center;">Onboarding</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
Compare By
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Population</li>
<li>Fertility Rate</li>
<li>Health Expenses (%GDP)</li>
<li>Military Expenses (%GDP)</li>
<li>Education Expenses (%GDP)</li>
</ul>
</li>
<li class="active">
About This Tool
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>View data source</li>
<li>NEA/SCA Home</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="fa fa-align-justify"></i>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Near East Asia (NEA)</li>
<li>South Central Asia (SCA)</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-default">
<h2>Near East Asia Region</h2>
<p>This tool uses data from the CIA World Factbook to compare different countries in your region.</p>
<!-- MAP CODE STARTS HERE -->
<div id="container1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.js"></script>
<script>
// example data from server
var series = [
["DZA", 75],
["EGY", 43],
["IRN", 50],
["IRQ", 88],
["ISR", 21],
["JOR", 43],
["KWT", 21],
["LBN", 19],
["LBY", 60],
["MAR", 4],
["OMN", 44],
["QAT", 44],
["SAU", 44],
["SYR", 44],
["TUN", 44],
["ARE", 44],
["YEM", 38]
];
// Datamaps expect data in format:
// { "USA": { "fillColor": "#42a844", numberOfWhatever: 75},
// "FRA": { "fillColor": "#8dc386", numberOfWhatever: 43 } }
var dataset = {};
// We need to colorize every country based on "numberOfWhatever"
// colors should be uniq for every value.
// For this purpose we create palette(using min/max series-value)
var onlyValues = series.map(function(obj) {
return obj[1];
});
var minValue = Math.min.apply(null, onlyValues),
maxValue = Math.max.apply(null, onlyValues);
// create color palette function
// color can be whatever you wish
var paletteScale = d3.scale.linear()
.domain([minValue, maxValue])
.range(["#EFEFFF", "#02386F"]); // blue color
// fill dataset in appropriate format
series.forEach(function(item) { //
// item example value ["USA", 70]
var iso = item[0],
value = item[1];
dataset[iso] = {
numberOfThings: value,
fillColor: paletteScale(value)
};
});
// render map
var map = new Datamap({
element: document.getElementById('container1'),
projection: 'mercator', // big world map
// countries don't listed in dataset will be painted with this color
fills: {
defaultFill: '#F5F5F5'
},
data: dataset,
setProjection: function(element) {
var projection = d3.geo.equirectangular()
.center([37.4, 25.7])
.rotate([4.4, 0])
.scale(450)
.translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path()
.projection(projection);
return {
path: path,
projection: projection
};
},
geographyConfig: {
borderColor: '#DEDEDE',
highlightBorderWidth: 1,
// don't change color on mouse hover
highlightFillColor: function(geo) {
return geo['fillColor'] || '#F5F5F5';
},
// only change border
highlightBorderColor: '#B7B7B7',
// show desired information in tooltip
popupTemplate: function(geo, data) {
// don't show tooltip if country don't present in dataset
if (!data) {
return;
}
// tooltip content
return ['<div class="hoverinfo">',
'<strong>', geo.properties.name, '</strong>',
'<br>Count: <strong>', data.numberOfThings, '</strong>',
'</div>'
].join('');
}
}
});
map.legend();
</script>
</nav>
</div>
<!--MAP CODE ENDS HERE -->
</div>
<!--close content div-->
<!--<p style="text-align:center;"><img src = "dos_divider.png" alt="div" align = "middle"/><p> -->
</div>
<!--close wrapper div> -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
</script>
</body>
</html>
If I'm understanding correctly, you want your content to be centered. Try this css change by adding margin: auto to the #content div:
#content {
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
margin: auto;
}
The problem is that you've set up a fixed max-width of 960px to the body element, which is preventing your wrapper to work. Remove it and it'll be fine.
I have designed a web page for a friend but when I try to change the H2 Logo for a png image. It does not seem to want to load.
The strange thing is however, that the .PNG file works in the Brackets Application. But not live on the server.
The webpage is here: http://www.donjaswell-beingforkids.co.uk/
It is supposed to look like this: (Brackets Preview)
This is from the Index.HTML code, which I will write below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home | Donja's Well-Being For Kids</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower|Shadows+Into+Light|Shadows+Into+Light+Two" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="favicon" type="image/png" href="img/Kids-Well-Being.png">
</head>
<body>
<header>
<a href="index.html">
<img id="logo" src="img/Donjas-Well-Being-For-Kids.png" alt="Donja's-Well-Being-For-Kids">
<!--
<h2 id="logo" class="centerText">Donja's Well-Being For Kids</h2>
-->
</a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="banner">
<img src="img/Kids-Well-Being-Health.jpg" alt="Kids Health">
</div>
<br/>
<div class="welcomeBar">
<h2>Welcome To</h2>
<h2><q>Donja's Well-Being For Kids</q></h2>
<p><q>......Helping children to become calm, confident and resilient, by understanding and regulating their emotions, through Relax Kids™ and Emotional Literacy classes and workshops.</q></p>
</div>
<div id="wrapper">
<section>
<ul id="collections">
<li>
<a href="emotionalLiteracy1-1Support">
<img src="img/Emotional-Literacy-1-1-Support.jpeg" alt="Emotional Literacy 1 on 1 Support">
<p>Emotional Literacy 1-1 Support</p>
</a>
</li>
<li>
<a href="relaxKids">
<img src="img/Relax-Kids-Online.jpg" alt="Relax Kids">
<p>Relax Kids™</p>
</a>
</li>
<li>
<a href="tipsToHelpYourChild">
<img src="img/Tips-To-Help-Your-Child.jpeg" alt="Tips to Help Your Child">
<p>Tips To Help Your Child</p>
</a>
</li>
<li>
<a href="helpWithParenting">
<img src="img/Help-With-Parenting.jpeg" alt="Help With Parenting">
<p>Help With Parenting</p>
</a>
</li>
<li>
<a href="classesAndWorkshops">
<img src="img/Classes-And-Workshops.jpeg" alt="Classes and Workshops">
<p>Classes and Workshops</p>
</a>
</li>
<li>
<a href="testimonials.html">
<img src="img/Testimonials.jpg" alt="Testimonials">
<p>Testimonials</p>
</a>
</li>
</ul>
</section>
<footer>
<!-- <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">-->
<img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
<p>© 2017 Donja's Well-Being For Kids.</p>
</footer>
</div>
</body>
</html>
And the CSS is here:
/*******************************************
GENERAL
********************************************/
body {
font-family: 'Indie Flower', sans-serif;
/* background-image: img/shining-blue-water-background.jpg;*/
margin: 0;
padding: 0;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
.centerText {
text-align: center;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 0;
}
/*******************************************
HEADING
********************************************/
header {
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
display: block;
width: 40%;
margin: 5px auto;
}
/*******************************************
NAVIGATION
********************************************/
nav {
text-align: center;
padding: 10px 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 700;
padding: 15px 10px;
transition: .5s ease-out;
}
/*******************************************
BANNER
********************************************/
.banner {
display: block;
margin: -30px 0 0px 0;
}
.banner {
width: 100%;
display: block;
}
.banner img {
position: relative;
width: 100%;
display: block;
}
/*******************************************
WELCOME BAR
********************************************/
.welcomeBar {
float: left;
width: 100%;
text-align: center;
display: block;
margin: 0 0 15px;
}
.welcomeBar h2 {
margin: 0;
}
/*******************************************
TOP BOX
********************************************/
.topBox {
text-align: center;
position: fixed;
right: 0;
bottom: 50px;
background-color: #659EB8;
height: 35px;
width: 35px;
border-radius: 50%;
}
.topBox i {
position: relative;
height: 100%;
width: 100%;
top: 6px;
}
/*******************************************
FOOTER
********************************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
width: 100%;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/*******************************************
PAGE: HOME: COLLECTIONS
********************************************/
#collections {
margin: 0;
padding: 0;
list-style: none;
}
#collections li {
float: left;
width: 95%;
margin: 2.5%;
}
#collections li a img{
border: 5px solid;
border-color: #f5f5f5;
}
#collections li {
position: relative;
max-width: 100%;
}
#collections li a p {
font-size: 100%;
padding: 3px;
white-space: nowrap;
position: absolute;
float: left;
top: 40%;
left: 52%;
transform: translate(-50%, -50%);
transition: .5s ease-out;
font-weight: bold;
}
#collections li a:hover p {
transition: 0.5s;
font-size: 105%;
}
/*******************************************
PAGE: ABOUT
********************************************/
.profile-photo {
display: block;
max-width: 200px;
margin: 0 auto 30px;
border-radius: 100%;
}
/*******************************************
PAGE: CONTACT
********************************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.fax {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 15px 15px;
background-position: left 3px bottom 5px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
word-wrap: break-word;
}
.contact-info li.fax {
background-image: url('../img/printer.png');
}
.contact-info li.facebook a {
background-image: url('../img/facebook.png');
}
/*******************************************
PAGE: EMOTIONAL LITERACY
********************************************/
.emotionalLiteracy {
text-align: center;
padding: 15px;
border-radius: 10px;
}
/*******************************************
PAGE: RELAX KIDS
********************************************/
.relaxKids {
padding: 15px;
border-radius: 10px;
}
.relaxKids li {
margin: 0 17px;
}
.chill-skills-photo {
display: block;
max-width: 200px;
margin: 0 auto 30px;
border-radius: 2%;
}
/*******************************************
PAGE: TIPS TO HELP YOUR CHILD
********************************************/
.tips {
padding: 15px;
border-radius: 10px;
}
.tips li {
margin: 0 17px;
}
/*******************************************
PAGE: HELP WITH PARENTING
********************************************/
.parenting {
padding: 15px;
border-radius: 10px;
}
.parenting-banner {
display: block;
margin: 0 0 30px;
width: 100%;
border-radius: 10px;
}
/*******************************************
PAGE: CLASSES AND WORKSHOPS
********************************************/
.workshops {
text-align: center;
padding: 15px;
border-radius: 10px;
}
iframe {
border: none;
overflow:hidden;
}
/*******************************************
PAGE: TESTIMONIALS
********************************************/
.testimonials-lydia {
padding: 1px;
border-radius: 10px;
}
.testimonials-lydia p {
margin: 5px 17px 0;
}
.testimonials-benjamin {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-benjamin p {
margin: 5px 17px 0;
}
.testimonials-gabby {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-gabby p {
margin: 5px 17px 0;
}
.testimonials-amy {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-amy p {
margin: 5px 17px 0;
}
.testimonials-isabelle {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-isabelle p {
margin: 5px 17px 0;
}
.testimonials-johnny {
margin: 10px 0;
padding: 1px;
border-radius: 10px;
}
.testimonials-johnny p {
margin: 5px 17px 0;
}
/*******************************************
COLORS
********************************************/
/* site body */
body {
background-color: #fff;
color: #000;
}
/* grey header */
header{
background: #fff;
border-color: #000;
}
/* nav background on mobile */
nav {
background: #D4BDD7;
}
/* links */
a {
color: #000;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #000;
transition: .5s;
}
p.littleStars {
color: blue;
}
.welcomeBar {
background-color: #659EB8;
}
#collections li a p {
color: black;
background: rgba(235, 229, 235, .3);
}
#collections li a:hover p {
background: rgba(235, 229, 235, .9);
}
.emotionalLiteracy {
background-color: #F15369;
color: white;
}
.relaxKids {
background-color: #8B5D8D;
color: white;
}
.tips {
background-color: #ECE272;
color: black;
}
.parenting {
background-color: #F4B97B;
color: black;
}
.workshops {
background-color: #71A87B;
color: white;
}
/* testimonial boxes */
.testimonials-lydia {
background-color: #F15369;
color: white;
}
.testimonials-benjamin {
background-color: #F4B97B;
color: white;
}
.testimonials-gabby {
background-color: #ECE272;
color: white;
}
.testimonials-amy {
background-color: #71AB7B;
color: white;
}
.testimonials-isabelle {
background-color: #2e619f;
color: white;
}
.testimonials-johnny {
background-color: #8B5D8D;
color: white;
}
The CyberDuck Server files are organised like this:
Please help, I cannot seem to get the logo to appear how I would like. I have tried renaming it, uploading CSS and Index files from scratch so they exactly math Brackets. But still get nothing. Don't really understand what I am doing wrong.
Many Thanks,
Luke
I do not understand why the logo is showing smaller on the contact.html page:
Do you know why this might be:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact | Donja's Well-Being For Kids</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower|Shadows+Into+Light|Shadows+Into+Light+Two" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="favicon" type="image/png" href="img/Kids-Well-Being.png">
</head>
<body>
<header>
<a href="index.html" id="logo">
<img id="logo" src="img/Donjas-Well-Being-For-Kids.png" alt="Donja's-Well-Being-For-Kids">
<!--
<h2 id="logo" class="centerText">Donja's Well-Being For Kids</h2>
-->
</a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<!------------ PRODUCTS -------------------------------------
<li>Products</li>
------------------------------------------------------------->
<li>Contact</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section id="primary">
<h3>General Information</h3>
<p>For more details please contact me.</p>
<p>I have a current DBS Certificate and also Public Liability Insurance.</p>
</section>
<section id="secondary">
<h3>Contact Information</h3>
<ul class="contact-info">
<li class="phone">Phone: 07916 337 916 </li>
<li class="mail">Email: Donja#donjaswell-beingforkids.co.uk</li>
<li class="facebook">CLick to Message me on Facebook!</li>
</ul>
<!--
<h3>Hours of Operation</h3>
<p>Monday - Friday 8:00am - 5:30pm</p>
<h3>Address</h3>
-->
<p></p>
</section>
<footer>
<!-- <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">-->
<img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
<p>© 2017 Donja's Well-Being For Kids.</p>
</footer>
</div>
</body>
</html>
The site is working. If its not working for you clear you cache or do a force refresh / hard refresh.
I have a problem with my input.
As you can see, my input is taking up too much space. It doesn't have margin or padding.
Here's my code (I am using Boilerplate v5.3.0).
How can I fix it so it just takes the space that it needs?
$(document).ready(function() {
$('.selectList').hide();
$('.selectorWrapper a').click(function() {
hideShow(this);
});
$('ul.selectList li').click(function() {
changeText(this);
validate();
});
$('#email').keydown(function() {
var correo = $('#email').val();
if (validateMail(correo)) {
$('#email').css('borderColor', '#87e466');
validate();
} else {
$('#email').css('borderColor', '#ca3535');
validate();
}
});
function validateMail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
console.log(re.test(email));
return re.test(email);
}
function validate() {
var select1 = $('#selection1').text();
var select2 = $('#selection2').text();
var select3 = $('#selection3').val();
var email = $('#email').val();
if (select1 != 'Marca' && select2 != 'Modelo' && select3 != 'Anio' && validateMail(email)) {
$('#submitBtn').css({
'backgroundColor': '#bbd550',
'boxShadow': '0px 3px 0px 0px #9fbc2d'
});
$('#submitBtn').removeClass('disableClick');
} else {
$('#submitBtn').css({
'backgroundColor': '#808080',
'boxShadow': '0px 3px 0px 0px #636161'
});
$('#submitBtn').addClass('disableClick');
}
}
function hideShow(element) {
var thisId = $(element).attr('id');
var isHidden = $('#' + thisId).next().css('display');
console.log(isHidden);
if (isHidden == 'none') {
$('#' + thisId).next().slideDown();
} else {
$('#' + thisId).next().slideUp();
}
}
function changeText(element) {
var text = $(element).text();
$(element).parent().prev().text(text);
$(element).parent().prev().append('<i class="fa fa-chevron-down"></i>');
$(element).parent().slideUp();
$(element).parent().prev().css('borderColor', '#87e466')
}
});
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input {
outline: none;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.disableClick {
pointer-events: none;
}
label {
display: none;
}
h3,
h2 {
margin: 0 auto;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
header.site-header {
background-color: #000000;
width: 100%;
}
header.site-header h3 {
text-align: center;
color: #ffffff;
padding: 15px 0;
font-weight: normal;
font-size: 30px;
}
header.site-header h3 span {
font-weight: bold;
}
div.banner {
border-bottom: 5px solid #36aadd;
}
div.banner h2 {
font-size: 2em;
text-align: center;
font-weight: bold;
color: #36aadd;
padding: 15px 10px 10px 10px;
}
div.banner p {
color: #888888;
text-align: center;
margin: 0;
font-size: 1.2em;
padding-bottom: 50px;
font-family: 'Open Sans', sans-serif;
}
div.form {
padding: 20px 10px;
margin: 0;
background-color: #eeeeee;
}
a.selectButton {
text-decoration: none;
padding: 10px;
color: #888888;
background-color: #ffffff;
border: 1px solid #d0d0d0;
display: block;
width: 100%;
margin: 0;
}
a.selectButton i {
color: #d0d0d0;
float: right;
padding-right: 10px;
}
ul.selectList {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #d0d0d0;
width: 100%;
position: absolute;
}
ul.selectList li {
width: 100%;
padding: 10px 0 10px 10px;
display: block;
background-color: #ffffff;
}
ul.selectList li a {
display: block;
text-decoration: none;
color: #888888;
}
ul.selectList li:hover {
background-color: #d0d0d0;
}
div.selectorWrapper input {
margin: 0;
padding: 10px;
width: 100%;
border: 1px solid #d0d0d0;
border-top: none;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
div.selectorWrapper {
/*width:100%;*/
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 50%;
float: left;
}
div.selectorWrapper .button {
background-color: #808080;
color: #FFFFFF;
margin-top: 30px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 30px;
box-shadow: 0px 3px 0px 0px #636161;
border: none;
font-family: 'Open Sans', sans-serif;
}
div.recuperar {
text-align: center;
padding: 20px;
}
div.recuperar a.recupera-link {
text-decoration: none;
color: #5faadb;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
}
.contenedorA {
position: relative;
}
#media only screen and (min-width: 768px) {
label {
display: block;
width: 30%;
float: left;
padding: 10px 0 0 15px;
text-align: left;
font-size: 0.9em;
}
div.banner {
border: none;
}
div.form {
background: #ffffff;
}
.contenedorA {
padding: 100px 50px 0 50px;
}
.contenedor {
width: 96%;
margin: 0 auto!important;
box-shadow: 0px 0px 10px 3px #f9f9f9;
margin-top: 50px;
}
div.selectorWrapper {
width: 80%;
margin: 20px auto;
}
div.selectorWrapper input,
div.selectorWrapper a.selectButton {
width: 70%;
float: right;
margin: 0 auto;
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 80%;
float: none;
position: relative;
}
ul.selectList {
position: relative;
margin-left: 420px;
margin-top: 44px;
}
div.selectorWrapper input {
border: 1px solid #d0d0d0;
}
div.recuperar {
padding-left: 100px;
}
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel='stylesheet' href='css/main.css' type="text/css">
<!--<link rel='stylesheet' href='css/normalize.css' type="text/css">-->
</head>
<body>
<header class='site-header'>
<h3><span>compara</span>online</h3>
</header>
<div class=contenedorA>
<div class="contenedor">
<div class="banner">
<h2>Cotiza tu Seguro Automotriz</h2>
<p>Resultados instantaneos!</p>
</div>
<div class="form clearfix">
<form method="post" action="">
<div class="selectorWrapper clearfix">
<label>Marca : </label>
<a class="selectButton" id="selection1" href="#">Marca<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>Hyundai</li>
<li>Toyota</li>
<li>Nissan</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Modelo : </label>
<a class="selectButton" id="selection2" href="#">Modelo<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>Sedan</li>
<li>SUV</li>
<li>Pick-up</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Anio: </label>
<a class="selectButton" id="selection3" href="#">Anio<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>2017</li>
<li>2016</li>
<li>2015</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<!--<label>Email : </label>-->
<input type='email' name='email' class="clearfix" id='email' placeholder='Email' required>
</div>
<div class="selectorWrapper clearfix">
<input type='submit' class="button disableClick" id='submitBtn' value="Cotizar">
</div>
</form>
<div class="recuperar">
<a class="recupera-link" href="#">Recuperar cotizacion</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src='js/main.js' type="text/javascript"></script>
When you float an element, you remove it from the normal flow of the document. As a result, other block elements don't respect their space.
Since both elements on the line (Modelo and Anio) are float: left, the next block element (Email) doesn't see them, and takes their space. So the Email div now lies hidden under the split elements.
However, the input element inside the Email div is not a block element. It's an inline element, by default. And inline elements respect the space of floated elements. (This is how text is able to wrap around floated images.)
So in your code, while the Email div shifts below the split element (on the z-axis), the input inside the Email div stays below the split element (on the y-axis).
When you highlight the Email element in dev tools, it illustrates this split across two rows.
One solution is to give the Email div display: inline-block and width: 100%.
div.selectorWrapper:nth-child(4) {
display: inline-block;
width: 100%;
}
Another solution is to add clear: both to the Email div. (Read more about clearing floats.)
div.selectorWrapper:nth-child(4) {
clear: both;
}
$(document).ready(function() {
$('.selectList').hide();
$('.selectorWrapper a').click(function() {
hideShow(this);
});
$('ul.selectList li').click(function() {
changeText(this);
validate();
});
$('#email').keydown(function() {
var correo = $('#email').val();
if (validateMail(correo)) {
$('#email').css('borderColor', '#87e466');
validate();
} else {
$('#email').css('borderColor', '#ca3535');
validate();
}
});
function validateMail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
console.log(re.test(email));
return re.test(email);
}
function validate() {
var select1 = $('#selection1').text();
var select2 = $('#selection2').text();
var select3 = $('#selection3').val();
var email = $('#email').val();
if (select1 != 'Marca' && select2 != 'Modelo' && select3 != 'Anio' && validateMail(email)) {
$('#submitBtn').css({
'backgroundColor': '#bbd550',
'boxShadow': '0px 3px 0px 0px #9fbc2d'
});
$('#submitBtn').removeClass('disableClick');
} else {
$('#submitBtn').css({
'backgroundColor': '#808080',
'boxShadow': '0px 3px 0px 0px #636161'
});
$('#submitBtn').addClass('disableClick');
}
}
function hideShow(element) {
var thisId = $(element).attr('id');
var isHidden = $('#' + thisId).next().css('display');
console.log(isHidden);
if (isHidden == 'none') {
$('#' + thisId).next().slideDown();
} else {
$('#' + thisId).next().slideUp();
}
}
function changeText(element) {
var text = $(element).text();
$(element).parent().prev().text(text);
$(element).parent().prev().append('<i class="fa fa-chevron-down"></i>');
$(element).parent().slideUp();
$(element).parent().prev().css('borderColor', '#87e466')
}
});
div.selectorWrapper:nth-child(4) {
clear: both;
}
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input {
outline: none;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.disableClick {
pointer-events: none;
}
label {
display: none;
}
h3,
h2 {
margin: 0 auto;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
header.site-header {
background-color: #000000;
width: 100%;
}
header.site-header h3 {
text-align: center;
color: #ffffff;
padding: 15px 0;
font-weight: normal;
font-size: 30px;
}
header.site-header h3 span {
font-weight: bold;
}
div.banner {
border-bottom: 5px solid #36aadd;
}
div.banner h2 {
font-size: 2em;
text-align: center;
font-weight: bold;
color: #36aadd;
padding: 15px 10px 10px 10px;
}
div.banner p {
color: #888888;
text-align: center;
margin: 0;
font-size: 1.2em;
padding-bottom: 50px;
font-family: 'Open Sans', sans-serif;
}
div.form {
padding: 20px 10px;
margin: 0;
background-color: #eeeeee;
}
a.selectButton {
text-decoration: none;
padding: 10px;
color: #888888;
background-color: #ffffff;
border: 1px solid #d0d0d0;
display: block;
width: 100%;
margin: 0;
}
a.selectButton i {
color: #d0d0d0;
float: right;
padding-right: 10px;
}
ul.selectList {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #d0d0d0;
width: 100%;
position: absolute;
}
ul.selectList li {
width: 100%;
padding: 10px 0 10px 10px;
display: block;
background-color: #ffffff;
}
ul.selectList li a {
display: block;
text-decoration: none;
color: #888888;
}
ul.selectList li:hover {
background-color: #d0d0d0;
}
div.selectorWrapper input {
margin: 0;
padding: 10px;
width: 100%;
border: 1px solid #d0d0d0;
border-top: none;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
div.selectorWrapper {
/*width:100%;*/
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 50%;
float: left;
}
div.selectorWrapper .button {
background-color: #808080;
color: #FFFFFF;
margin-top: 30px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 30px;
box-shadow: 0px 3px 0px 0px #636161;
border: none;
font-family: 'Open Sans', sans-serif;
}
div.recuperar {
text-align: center;
padding: 20px;
}
div.recuperar a.recupera-link {
text-decoration: none;
color: #5faadb;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
}
.contenedorA {
position: relative;
}
#media only screen and (min-width: 768px) {
label {
display: block;
width: 30%;
float: left;
padding: 10px 0 0 15px;
text-align: left;
font-size: 0.9em;
}
div.banner {
border: none;
}
div.form {
background: #ffffff;
}
.contenedorA {
padding: 100px 50px 0 50px;
}
.contenedor {
width: 96%;
margin: 0 auto!important;
box-shadow: 0px 0px 10px 3px #f9f9f9;
margin-top: 50px;
}
div.selectorWrapper {
width: 80%;
margin: 20px auto;
}
div.selectorWrapper input,
div.selectorWrapper a.selectButton {
width: 70%;
float: right;
margin: 0 auto;
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 80%;
float: none;
position: relative;
}
ul.selectList {
position: relative;
margin-left: 420px;
margin-top: 44px;
}
div.selectorWrapper input {
border: 1px solid #d0d0d0;
}
div.recuperar {
padding-left: 100px;
}
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel='stylesheet' href='css/main.css' type="text/css">
<!--<link rel='stylesheet' href='css/normalize.css' type="text/css">-->
</head>
<body>
<header class='site-header'>
<h3><span>compara</span>online</h3>
</header>
<div class=contenedorA>
<div class="contenedor">
<div class="banner">
<h2>Cotiza tu Seguro Automotriz</h2>
<p>Resultados instantaneos!</p>
</div>
<div class="form clearfix">
<form method="post" action="">
<div class="selectorWrapper clearfix">
<label>Marca : </label>
<a class="selectButton" id="selection1" href="#">Marca<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>Hyundai</li>
<li>Toyota</li>
<li>Nissan</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Modelo : </label>
<a class="selectButton" id="selection2" href="#">Modelo<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>Sedan</li>
<li>SUV</li>
<li>Pick-up</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Anio: </label>
<a class="selectButton" id="selection3" href="#">Anio<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li>2017</li>
<li>2016</li>
<li>2015</li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<!--<label>Email : </label>-->
<input type='email' name='email' class="clearfix" id='email' placeholder='Email' required>
</div>
<div class="selectorWrapper clearfix">
<input type='submit' class="button disableClick" id='submitBtn' value="Cotizar">
</div>
</form>
<div class="recuperar">
<a class="recupera-link" href="#">Recuperar cotizacion</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src='js/main.js' type="text/javascript"></script>
In your question you are showing the properties of div, check properties of a tag inside div. The a tag is having padding:10px;.
This is happening because a.selectButton has padding of 10px. You can remove it completely or you can only remove the left padding to fix the problem.
a.selectButton {
padding-left: 0;
}
Insert the above code in your style tag to fix the problem.
Hello i have a next problem, i wan't my page to stretch in height if content will be more than window height, otherwise just be fullscreen. But now it looks like this:
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="width=1100" name="viewport">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<script src="js/jquery-1.11.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script>
var previousPage;
$(document).ready( function() {
SwitchPage("home");
FixNavigation();
$("#home").on("click", function() {
SwitchPage("home")
});
$("#info").on("click", function() {
SwitchPage("info")
});
$("#prices").on("click", function() {
SwitchPage("prices")
});
$("#schedule").on("click", function() {
SwitchPage("schedule")
});
$("#kontacts").on("click", function() {
SwitchPage("kontacts")
});
$("#education").on("click", function() {
SwitchPage("education")
});
});
function SwitchPage(name) {
if (previousPage!=name)
{
$('#'+name).addClass('active');
if(previousPage!=null){
$('#'+previousPage).removeClass('active');
}
previousPage=name;
$("#content-inner").load("pages/"+name+".html");
}
}
function FixNavigation() {
}
</script>
</head>
<body>
<div>
<div class="header">
<div class="header-inner">
</div>
</div>
<div class="tabs">
<div class="tabs-inner">
<ul>
<li><a id="home">Sākums</a></li>
<li><a id="info">Informācija</a></li>
<li><a id="prices">Pakalpojumi un cenas</a></li>
<li><a id="schedule">Darba laiks</a></li>
<li><a id="kontacts">Kontakti</a></li>
<li><a id="education">Izglītība</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="content-inner" id="content-inner">
</div>
</div>
<div class="footer">
<div class="footer-inner">
</div>
</div>
</div>
</body>
And here is my CSS:
body{
min-width: 960px;
min-height: 100%;
margin: 0;
padding: 0 0 1px;
position: relative;
display: block;
background: #ff8b10 url(images/main_background.jpg) no-repeat;
font: normal normal 18px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
color: #000000;
}
.header{
margin-top: 30px;
height: 300px;
}
.header-inner{
height: 300px;
width: 960px;
margin: 0 auto;
}
.tabs{
margin-top: 30px;
}
.tabs-inner{
width: 900px;
margin: 0 auto;
}
ul {
width: 100%;
background: transparent none no-repeat scroll left;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
line-height: 1.2;
display: table;
table-layout: fixed;
}
li{
border: none;
margin: 0;
padding: 0;
float: left;
text-indent: 0;
display: table-cell;
width: auto;
text-align: center;
}
a{
background-image: url('images/pixel.png');
display: inline-block;
padding: .25em 1em;
font: normal normal 20px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
border-right: 1px solid transparent;
color: #000000;
text-decoration: none;
}
a:hover {
background-color: #ffb267;
color: #660000;
cursor: pointer;
}
.active{
background-color: #ffd7ae;
color: #660000;
}
.content{
margin-top: 30px;
}
.content-inner{
width: 880px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.footer{
margin-top: 30px;
color: #ff8b10;
height: 100px;
background: #000000 url(images/footer.png) repeat scroll top left;
}
.footer-inner{
}
.home_content{
background: transparent url(images/content.png) repeat scroll top left;
}
You need height: 100% both on html and body.
Here's a similar question: Make full page white.
The banner image in the header is 130 pixels tall, but it says the header in total is 135 pixels. I can't find where this is happening. Where is this extra space coming from?
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Taft Power Equipment</title>
<link rel="stylesheet" type="text/css" href="js\jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
<script type="text/javascript" language="Javascript" src="js\jquery.min.js"></script>
<script src="js/jquery.horizontalNav.js"></script>
<script src="js\jquery-migrate-1.2.1.js"></script>
<script>
// When document is ready...
$(document).ready(function() {
$('.full-width').horizontalNav({}); // Call horizontalNav on the navigations wrapping element
$("#main-content").load("home.html");
});
</script>
<script>
$(document).ready(function() {
$("#home").click(function() {
$("#main-content").load("home.html");
});
$("#work").click(function() {
$("#main-content").load("work.html");
});
$("#blog").click(function() {
$("#main-content").load("blog.html");
});
$("#about").click(function() {
$("#main-content").load("about.html");
});
$("#contact").click(function() {
$("#main-content").load("contact.html");
});
$("#parts").click(function() {
$("#main-content").load("parts.html");
});
$("#people").click(function() {
$("#main-content").load("people.html");
});
});
</script>
<script>
$(function() {
$("button").button()
.click(function(event) {
event.preventDefault();
});
});
</script>
<script>
function showParts(str) {
if (str == "") {
document.getElementById("results").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("results").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "partsearch_2.php?q=" + str, true);
xmlhttp.send();
}
</script>
<script>
function showPeople(str) {
if (str == "") {
document.getElementById("results").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("results").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "peoplesearch.php?q=" + str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="header">
<img src="images/taft_banner_960_blackandwhite.png" />
</div>
<div id="menu">
<nav class="horizontal-nav full-width horizontalNav-notprocessed">
<ul>
<li>Home
</li>
<li>Work
</li>
<li>Blog
</li>
<li>About
</li>
<li>Contact
</li>
<li>Parts Look Up
</li>
<li>People
</li>
</ul>
</nav>
</div>
<div id="main-content"></div>
<div id="footer">
<p>© Copy Right Taft Power Equipment Corp</p>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
html, body {
margin:0;
padding-top:0;
height:100%;
}
p, li {
}
a {
}
b {
}
table {
border-collapse: collapse;
/* 'cellspacing' equivalent */
}
table th {
font: 1.5em Tahoma;
border: 3px solid #0e7079;
border-radius: 6px;
padding: 0em 1em 0em 1em;
}
table td {
font: 1.3em sans-serif;
border-radius: 1px;
border: 0px solid #0e7079;
padding: 0 1em 0 1em;
}
h1 {
font: 2.0em Tahoma, sans-serif;
color: white;
height: 0px;
}
h2 {
font: 1.8em Tahoma, sans-serif;
color: green;
margin-bottom: 10px;
}
ul {
margin-left: 0px;
}
img {
border: none;
}
/* ========================================================================================== */
#page-wrap {
!margin: 10px auto;
display: inline;
}
#inside {
width: 960px;
margin: 0 auto;
background: blue;
min-height:100%;
position:relative;
}
#searchbar {
width: 30%;
background: #747474;
border: 1px solid red;
display: inline-block;
}
#results {
background: #4c4c4c;
min-height: 100px;
width:50%;
display: inline-block;
border-radius: 6px;
border: 1px solid #0e7079;
}
#results b {
font: 2.0em Tahoma, sans-serif;
color: white;
height: 0px;
}
#main-content {
margin-bottom: 10px;
padding:10px;
padding-bottom:30px;
/* Height of the footer */
}
#header {
}
#menu {
}
#left-sidebar {
width: 150px;
float: left;
padding-left: 15px;
padding-top: 20px;
}
#footer {
background: #000000;
text-align: center;
padding-top: 0px;
color: white;
position:absolute;
bottom:0;
width:960px;
height:30px;
/* Height of the footer */
}
/* ========================================================================================== */
.horizontal-nav {
background: #efefef;
border-radius: 6px;
}
.horizontal-nav ul {
background: #ff4505;
float: left;
text-align: center;
border-radius: 6px;
border: 0px solid #0e7079;
margin-left: 0px;
}
.horizontal-nav ul li {
float: left;
border-left: 1px solid #0e7079;
}
.horizontal-nav ul li:first-child {
border-left: 0 none;
}
.horizontal-nav ul li a {
display: block;
padding: 10px 20px;
color: #fff;
border-top: 1px solid rgba(255, 255, 255, 0.25);
border-left: 1px solid rgba(255, 255, 255, 0.25);
text-decoration: none;
}
.horizontal-nav ul li:first-child a {
border-left: 0 none;
}
.horizontal-nav ul li a:hover {
background: #12808a;
}
.horizontal-nav ul li:first-child a {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.horizontal-nav ul li:last-child a {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
http://jsfiddle.net/5b48H/
Thank you!
Either add display:block or vertical-align:top to the img element.
jsFiddle example - display:block
#header img {
display:block;
}
jsFiddle example - vertical-align:top
#header img {
vertical-align:top;
}
Note - The default vertical-align property is baseline. Changing it to top, middle or bottom fixes the issue.
If you can set the image's display style to block that should solve the problem. Setting vertical-align to bottom or middle should also work. I think the problem comes about because Firefox tries to position inline images so their bottom edge is aligned with the baseline of the text, and so there is space below the image for the text descenders. source
header img
{
display: block;
margin: 0;
padding: 0;
}
I believe setting line-height: 1; on the image will also fix this problem, especially if it's in a block by itself.
source