I am designing my website and I'm trying to find a way to keep a header always in the screen.
For an example, take a look at this extra long page on Wikia.com. Notice that when you scroll the page, the little toolbar down the bottom stays in one place. However, scroll to the bottom of the page and you will realize that the toolbar stays in a fixed position until it gets out of view.
This is what I would like to do, but in reverse. Have a header that stays in a fixed position on the web-page, but when it was not in view have it at the top.
I tried looking at an example on DynamicDrive.com (search for Dock Content Script, because I can't post another link), but I found that it was too jittery for me.
Can someone please help me do this?
Thanks in advance.
~DragonXDoom
P.S. Now that I notice, the How to Format box on the right of the submit question page has this effect.
Always remember if you have to stick the header or footer { position : fixed; } can be used.
So apply CSS like this:
.header{
top:0;
width:100%;
height:50px;
position:fixed; // this is the key
}
HTML:
<div id="wrap">
<div id="header"> HEADER </div>
<div id="navigation"> NAVIGATION </div>
<div id="content"> CONTENT </div>
</div>
JavaScript:
( function () {
var nav = $( '#navigation' )[0],
top = $( nav ).offset().top,
left,
height = $( nav ).outerHeight(),
width = $( nav ).width(),
fixedClass = 'fixed';
function pageOffset() {
return window.pageYOffset || document.body.scrollTop;
}
$( window ).
resize( function () {
left = $( nav ).offset().left;
}).
scroll( function () {
$( nav ).toggleClass( fixedClass, pageOffset() > top );
if ( $( nav ).hasClass( fixedClass ) ) {
$( nav ).
css({ 'left': left, 'width': width }).
prev().css({ 'marginBottom': height });
} else {
$( nav ).
prev().andSelf().removeAttr( 'style' );
}
}).
trigger( 'resize' );
})();
Live demo: http://jsfiddle.net/simevidas/Mx8hC/show/
If you want it to be stuck to the top even when the user scrolls (i.e. stuck to the top of the browser window), use:
.top-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0;
}
Or just to the of the the page:
.top-bar {
margin: 0;
width: 100%;
}
You could use CSS positioning to solve this. The following link has instructions on what you need I believe.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Edit: Sorry I misread, these should work for headers as well.
http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/
http://davidchambersdesign.com/css-fixed-position-headers/
Hope these help.
//header//
<!DOCTYPE html>
<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><?php echo SITE_NAME; if(isset($page_title)){ echo ' :: '.$page_title;}?></title>
<meta name="Description" content="<?php echo $SITE_NAME;?>" />
<meta name="robots" content="all, index, follow" />
<meta name="distribution" content="global" />
<link rel="shortcut icon" href="/favicon.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link href="<?php if(isset($include_file_ext)){ echo $include_file_ext;}?>css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1><?php echo SITE_NAME;?></h1>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<!--
<li>About</li>
<li>Services</li>
<li>Contact us</li>-->
</ul>
</div>
<div id="content">
//footer
</div>
<div id="footer">
Copyright © <?php echo SITE_NAME.' , '.date('Y');?>
</div>
</body>
</html>
//css
body,td,th {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
}
body {
margin-left: 0px;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
}
.maindiv{ width:690px; margin:0 auto;}
.textbox{ padding:2px 4px; width:200px;}
.submit{ border:solid 1px #008000; background:#008000; color:#FFF; font-weight:bold;}
#container
{
margin: 0 30px;
background: #fff;
}
#header
{
background: #ccc;
padding: 20px;
}
#header h1 { margin: 0; }
#navigation
{
float: left;
width: 100%;
background: #333;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #383; }
#content
{
clear: left;
padding: 20px;
}
#content h2
{
color: #000;
font-size: 160%;
margin: 0 0 .5em;
}
#footer
{
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;
}
Related
This is the code for my HTML page and I'm trying to create a photography site. I was planning to create a website in which when a person hovers over a button on the menu section the background will show the image related to that section, for eg. I've tried for animal button here. But the HTML page is not responsive.
I want the image to be displayed on the whole webpage in the background.
I'm a beginner in Javascript Html and CSS.
Kindly help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our First Photography Site</title>
<script type="text/javascript">
//
function animals()
{
$('#animals').hover(function() {
$(this).attr('src', 'https://www.nationalgeographic.com/animals/2019/10/wildlife-photographer-
of-the-year-2019/#/05-wildlife-awards-audun-rikardsen---wildlife-photographer-of-the-year.jpg');
}, function() {
$(this).attr('src', 'https://www.nationalgeographic.com/animals/2019/10/wildlife-photographer-
of-the-year-2019/#/11-wildlife-awards-max-waugh---wildlife-photographer-of-the-year.jpg');
});
}
//
</script>
</head>
<body>
<nav>
<div class="menu">
<button class="dropbtn">Menu</button>
<div class="menu-content">
Home
Animals
Travel
Food
</div>
</div>
</nav>
<br>
</body>
</html>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.menu-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.menu-content a:hover {background-color: #ddd;}
.menu:hover .menu-content {display: block;}
.menu:hover .dropbtn {background-color: #3e8e41;}
</style>
Do you mean like this? When using jQuery, make sure you import the cdn or library to your html, and put all of your jQuery code within a document ready code like so:
$(document).ready(function(){ YOUR CODE HERE });
Another error in your code is that you shouldn't be using the "src" attribute with your jQuery. Remember that "this" is referring to "#animals", which is a link not an image. If you want to change the background image, you would want to change the css property "background-image" instead.
The image urls you were using weren't working so I used some stock images so you can see the code working. Make sure that your urls lead to an image, not a site. Your urls look like they are leading to a site.
In your CSS I also added
background-size: cover;
background-position: center;
transition: 0.3s all ease-in-out;
to all of your links (#animals, #travel and #food). The background-size property determines how your image covers its container. Using "cover" makes it so the image always fills the width of its container, and any excess height is not seen. Background-position determines what part of the image is displayed. By default, it would be the top left. I changed it to center so you can see the focus of the images. The "transition" property is completely optional, it makes it so that the images transition on hover within 0.3s. It just serves to make the background change smoother and not suddenly jump between images.
I don't know if you wanted the image when you are not hovering to show so I specifically declared the initial background image url in the '#animals' css as well. If you don't want it to show an image until after a user hovers, you can remove this line from the CSS. Otherwise, if you want it to show an initial image make sure you declare the background-image for each link separately.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our First Photography Site</title>
<script>
$(document).ready(function(){
$('#animals').hover(
function() {
$(this).css('background-image','url(https://images.unsplash.com/photo-1504208434309-cb69f4fe52b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80)');
},
function() {
$(this).css('background-image','url(https://images.unsplash.com/photo-1501706362039-c06b2d715385?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2035&q=80)');
}
)
})
</script>
</head>
<body>
<nav>
<div class="menu">
<button class="dropbtn">Menu</button>
<div class="menu-content">
Home
Animals
Travel
Food
</div>
</div>
</nav>
<br>
</body>
</html>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.menu-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.menu-content a:hover {background-color: #ddd;}
.menu:hover .menu-content {display: block;}
.menu:hover .dropbtn {background-color: #3e8e41;}
#animals, #travel, #food {
background-size: cover;
background-position: center;
transition: 0.3s all ease-in-out;
}
#animals {
background-image:url(https://images.unsplash.com/photo-1501706362039-c06b2d715385?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2035&q=80);
}
</style>
There are several issues with your code :
you declare a function but you never call it
you are using jQuery but I can't see any jquery import
your function is targetting your link and not a section
I suggest you use vanilla javascript and event delegation :
let page = document.querySelector('.page');
let menu = document.querySelector('.menu');
const changeBg = (event) => {
let target = event.target.closest('a');
if (target && target.dataset.image) {
page.style.backgroundImage = `url(${target.dataset.image})`;
}
}
menu.addEventListener('mouseover', event => changeBg(event));
menu.removeEventListener('mouseover', event => changeBg(event));
html,
body,
.container {
height: 100%;
width: 100%;
}
.menu {
position: fixed;
left: 0;
right: 0;
top: 0;
}
.menu ul {
display: flex;
justify-content: space-between;
}
.page {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
}
<div class="container">
<nav class="menu">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</nav>
<section class="page" style="background-image: url('')">
PAGE
</section>
</div>
I want to add a Leaflet map to my Website. Unfortunately my own CSS file seems to override Leaflet's CSS-file on some elements.
The map's zoom buttons should look like this:
But they now look like this on my homepage:
I wonder if it is my own CSS file overriding the CSS from Leaflet. But how can I prevent this? Have a look at my #content a. Seems like the zoom buttons are interpreted as a link and so take the CSS properties from my file.
body {
background-color: #EFEFEF;
margin: 0;
padding: 0;
}
#wrapper {
width: 1000px;
padding: 0;
margin: 0 auto;
}
#content {
background-color: #FFFFFF;
width: 700px;
float: left;
padding: 0 2.5em 0 2.5em;
margin: 0;
}
#content p, ol, ul {
font-family: "Open Sans Condensed", sans-serif;
color: #444444;
}
#content a:link, #content a:visited {
color: #C09100;
text-decoration: none;
}
#content a:hover, #content a:active {
color: #C09100;
text-decoration: underline;
}
#map {
height: 400px;
width: 100%;
margin: 0 auto;
}
strong {
color: #444444;
font-size: 100%;
font-weight: bold;
}
h1 {
color: #444444;
font: 3em "Amatic SC";
text-align: center;
}
h2 {
color: #444444;
font: 2em "Amatic SC";
text-align: center;
}
<html>
<head>
<!-- Link to Leaflet's CSS file: -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<!-- My own CSS file: -->
<link rel="stylesheet" type="text/css" href="rumkommenstyle.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="JS/Leaflet.MakiMarkers.js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="map">
<script type="text/javascript">
var layer = new L.StamenTileLayer("watercolor");
var map = new L.Map("map", {
center: new L.LatLng(56.074207, -3.376634),
zoom: 6
});
var icon = L.MakiMarkers.icon({
icon: "marker",
color: "#900",
size: "m",
});
map.addLayer(layer);
L.marker([56.074207, -3.376634], {
icon: icon,
title: 'Crossgates, Fife, Scotland',
alt: 'Crossgates, Fife, Scotland',
}).addTo(map);
</script>
</div>
</div>
</div>
</body>
</html>
(answer edited)
Short answer:
To get the black color on your zoom in/out buttons, you can add this to your css:
.leaflet-bar > a:link { color: black; }
Long answer:
You notice that your div with id="map" contains a script. When this script is run, it creates a div with class leaflet-bar in which the zoom buttons are actually links.
So, if you look at the tree of elements, you'll find that #content contains div.leaflet-bar which contains the zoom links.
So, which color should apply to the links ( #content a:link or .leaflet-bar a:link) ?
Colors of leaflet links are set in http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css
When I put the image inside nav it works but when I put it in body or header it doesn't. I have the image tag right because when I put it in nav it works. I know this code is unscientific but I'm new to html. Thanks for the help in advanced.
<!DOCTYPE html>
<html>
<head>
<title> Random Site </title>
<style type = 'text/css'>
header nav {
float: right;
background-color: gray;
width: 100%;
position:absolute;
top:0px;
left:0px;
right:0px;
height: 60px;
}
header nav a {
font-size: 120%;
float: right;
padding: 1%;
font-family: 'Helvetica';
text-decoration: none;
color: black;
position: relative;
top: 5px
}
header nav a:hover {
color: white;
}
</style>
</head>
<body>
<img src = 'image.jpg' alt= 'image' width= '100px' height= '70px'/>
<header>
<nav>
<a href = 'www.google.com'> games </a>
<a href = 'www.google.com'> about </a>
<a href = 'www.google.com'> contact </a>
</nav>
</header>
</body>
</html>
I think it is working but you just aren't seeing it because you have the nav positioned absolute so I think it's just overlapping your image. Try giving your image a class then do something like this:
.myimage { position: relative; z-index: 2; }
I figured it out I forgot to put the ; after top 5px. Sorry about that.
I want to delete the margin top of my page. I will show you what I mean with a screenshot
You can see in my pic there are a red arrow that indicate my problem. How I can delete this margin?
I post here my css:
div#header {
background-color: #6495ED;
background: -moz-linear-gradient(100% 100% 90deg, black, gray);
background: -webkit-gradient(linear, center top, center bottom, from(gray), to(black));
margin: 0px;
width: 100%;
}
body {
background-color: #000000;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
h1 {
text-align: center;
color: #FFFFFF;
font-family: sans-serif;
font-size: 26px;
font-weight: bold;
padding: 5px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
color: #FFFFFF;
font-family: sans-serif;
}
p {
color: #FFFFFF;
font-family: sans-serif;
padding: 5px;
}
a {
text-decoration: none;
color: #FFFFFF;
}
So any suggestion about how I can delete this margin just above my header?
Here you can see my html:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<title>Lista coupon</title>
<script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../js/memoria.js" type="text/javascript"></script>
<style src="../css/style.css" type="text/css"></style>
</head>
<body onload="loadJson();">
<div id="header">
<h1>Lista coupon salvati</h1>
</div>
<div id="content">
<p>Di seguito trovi tutte le promozioni salvate</p>
<div id="list">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
Set margin: 0; to <h1> element
Demo: http://jsfiddle.net/5w6Es/
Same problem as with the margin-left of <ul> elements, or margin-top / margin-bottom of <p> elements, etc.
You need to reset their default styles when using them at the borders of your page.
Try removing padding and margin also for the html element, (not only the body)
Try also to remove the default margin (differently) applied by every browser to the h1 element that you didn't redefined/reset and which is probably collapsing over the #header element
html {
margin: 0;
padding: 0;
}
h1 {
...
margin: 0;
}
You need to add margin:0px; to this CSS: http://jsfiddle.net/vv6DL/
h1 {
text-align: center;
color: #FFFFFF;
font-family: sans-serif;
font-size: 26px;
font-weight: bold;
padding: 5px;
margin:0px;
}
You don't say what browsers its occuring in.
If you use Firebug and its tools you should be able to see what is causing the spacing and then set that to zero, however, a "cheat" would be to use a reset css script such as Meyers http://meyerweb.com/eric/tools/css/reset/ to clean up all those browser inconsistencies.
Try This
h1
{
margin:0px;
}
The best way I've found to do this is by adding the :first-child pseudo-element in your css to your first element such as <h1> or <ul> etc etc within your body-element.
So an example using your mark up above would be
h1:first-child { margin-top: 0; }
This eliminates interfering with all further <h1> elements in your code and also without needless css classes added to your html mark-up.
I hope this helps as I was having the sam problem with little luck with the answers provided.
I'm very new to html and css so feel free to critique any bad practices you see in the code below...
I am trying to create a centered column that's 800 pixels across and the banner will be resized to 800 pixels. When view this page in chrome or firefox it looks great. When I view it in IE8 the font is huge, there is a giant empty spot on the right side of the banner all the way down to the bottom, and the size of the "container" will not change no matter what I do in the css file.
CSS:
body {
font-family: Arial;
font-size: small;
background-color: #FFFFFF;
background-image: url(../images/victorianBackground.jpg);
background-position: top;
background-repeat: repeat;
color: #000000;
}
#container {
margin: -10 auto;
background-color: #D3CDBA;
text-align: left;
}
html>body #container {
width: 800px;
min-height:800px;
padding: 0 0px;
}
#banner {
width:800px;
}
#banner img {
width:800px;
padding:45 0px;
}
#content {
width:500px;
padding: 15px;
background-color: transparent;
}
/* Navigation */
#navigation ul {
list-style-type: none;
width: 800px;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
background-color: #D3CDBA;
}
#navigation li:hover {
float: left;
color: #4676A4;
background-color: #D3CDBA;
}
#navigation a {
font-weight: bold;
text-decoration: none;
color: #000000;
display: block;
padding: 5px;
}
#navigation a:hover {
font-weight: bold;
text-decoration: none;
color: #992332;
}
#content a {
color:teal;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Park Avenue Neighborhood Association</title>
<meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
<link rel="stylesheet" type="text/css" href="../styles/style1.css">
</head>
<body>
<div id="container">
<div id="banner">
<img src="../images/banner.jpg" id="banner">
<br/>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>History</li>
<li>Houses</li>
<li>Local Business</li>
<li>Events</li>
<li>Contacts</li>
</ul>
</div>
<div id="content">
<h2>Content Header 1 </h2>
<p>Awesome Content </p>
<h2>Content Header 2 </h2>
<p>Awesome Content </p>
</div>
</body>
</div>
</html>
There are multiple issues I see with your source. Non-exhaustive list:
1) You need a doctype. Otherwise, browsers will render items in a non-standard way.
Example:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2) You have a <div> ending after the </body> tag. This is invalid.
Fix:
<p>Awesome Content </p>
</div>
</div>
</body>
</html>
3) You don't need the extra <br> in <div id="banner">.
Fix:
<div id="banner">
<img src="../images/banner.jpg" id="banner">
</div>
4) Now, if you want <div id="container"> to be centered and have a width of 800px, try the following.
Centering code that goes in your css (replaces existing):
body { text-align: center; }
#container {
text-align: left;
width: 800px;
margin: auto;
}
5) For your font-size declaration, you're using small. This will behave unpredictably. Instead, consider using either em or px for font size.
Font size with em:
body { font-size: 100%; line-height: 1.125em; }
#container { font-size: 0.875em; }
Font size with px:
body { font-size: 16px; line-height: 1.125em; }
#container { font-size: 12px; }
First thing I saw, you need to add this to the very first line of your HTML to force IE to render in standards mode, instead of quirks mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In regard to centering the banner, try adding the following:
in body selector:
text-align: center;
in banner:
margin-right: auto;
margin-left: auto;
In regard to font size try using em or % sizing.
Other than that just tackle the problems one at a time, fine tune the details incrementally. Throwing in everything all at once will only create confusion - chances are it wont work as expected, but will frustrate you.