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.
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 am new here and generally i recently started to learn webdev and i am trying to make little "portfolio" website to train practice skills. I have one problem what i can't solve, and i am siting with eyes on screen about few hourse what makes me so confused
First issue is whitespace on right side of the page.
2.Next issue is a lot of whitespace what remaining after relative positioning.
How can with these get rid of these things?
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<!--header-->
<header>
</header>
<div class = "container">
<div class="text">
<h1 id = "h1">“The life of a designer...” </h1>
<h2 id = "h2">Is a life of fight. Fight against the ugliness.
Just like a doctor fights against disease. For us,
the visual disease is what we have around, and what we
try to do is cure it somehow with design.</h2>
<h3>– Massimo Vignelli. </h3></div></div>
<div class="txt">
<p id ="one">Hi, i am webdeveloper<id></id></p>
<p id ="two">If you want work with me</p>
<p id ="three">leave a message.</p>
</div>
<div class = "icons">
<img src = "icons/cheap.png" alt = "cheap" id="cheap"/>
<img src = "icons/Trust.png" alt = "trust" id="trust"/>
<img src = "icons/timeliness.png" alt = "timeliness" id="timeliness"/>
<img src ="icons/developing.png" alt ="developing" id="developing"/>
</div>
<div class = "Social">
<img src ="icons/facebook.png" alt ="fb" />
<img src ="icons/instagram.png" alt ="insta" />
<img src ="icons/linkedin.png" alt = "linkedin"/>
</div>
<!--Overview-->
<section>
<article>
Aaaa
</article>
</section>
<!-- Social media icons-->
<aside>
</aside>
<footer>
</footer>
</body>
</html>
CSS:
#font-face {
font-family: myFirstFont;
src: url(/fonts/Graviola_Regular.otf);
}
#font-face {
font-family: czcionka;
src: url(/fonts/czcionka.ttf);
}
body {
margin:0px;
padding:0px;
}
header{
background-image:url(bg1.jpg);
background-repeat:no-repeat;
height:800px;
opacity: 0.8;
background-size:100% 100%;
}
.txt {
position:relative;
right:-50px;
top:-1120px;
border-left:3px solid white;
font-family:czcionka;
}
.txt #one {
position:relative;
color:white;
font-size: 50px;
position:relative;
bottom:-60px
}
.txt #two {
position:relative;
color: white;
font-size: 50px;
}
.txt #three {
position:relative;
color: white;
font-size: 50px;
top:-60px
}
.container .text {
color:white;
text-align: center;
position:relative;
top: -450px;
margin: 50px;
font-family: myFirstFont;
}
.container .text #h1 {
font-size:60px;
border-bottom: 3px solid;
font-family:myFirstFont;
}
.container .text #h2 {
font-size: 25px;
font-style:italic;
}
.container .text #another {
position: relative;
top:-500px;
font-family:myFirstFont;
font-size:40px;
}
.Social {
position: relative;
top:-1460px;
right:-50px;
margin:500px;
}
.icons #cheap {
position: relative;
top:-1139px;
right:-1225px
}
.icons #timeliness {
position:relative;
top:-1140px;
right: -1110px
}
.icons #developing {
position:relative;
top:-1140px;
right:-750px;
}
Here's link to img how this looks. When i scroll down page rest of my site elements are very far down.
Like this looks the white space what i talking about
im trying to make a header image for my website that will allow me to display the logo and text that i have already used in my website over it and the image in the background if you will.
the html code is as follows:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title> The World Traveller </title>
<link rel="stylesheet" href="main.css">
<div id="wrapper";>
<header>
<h2 class="logo"> logo here </h2>
<h1> The World traveller </h1>
</header>
And the main css file contains this :
body {
background-color:#696969;
margin:0;
padding:0;
font-family:"Arial" san-serif;
}
.logo{
text-indent: -99999px;
background: url("logo2.jpg");
width: 200px;
height:170px;
margin:0;
}
header {
background-image:dodgeblue;
padding:0 0 15px;
background-color:#4682B4;
padding: 40px 0;
text-align: center;
color: white;
}
im not sure what to do and would love some help thank you. :)
if i need to put more of my code on here let me know.
Change your header to this.
<header>
<img src class="logo">
<h1> The World traveller </h1>
</header
and you need to change your logo class to say background-image not just background.
.logo{
text-indent: -99999px;
background-image: url("logo2.jpg");
width: 200px;
height:170px;
margin:0;
}
also you have
header {
background-image:dodgeblue;
padding:0 0 15px;
background-color:#4682B4;
padding: 40px 0;
text-align: center;
color: white;
}
dodgeblue isn't an image I would delete that since you already have a background color.
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%;
}
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.