I'm new to css and I don't know how I should add a background image only for my header. I already have a background image for my whole page, but know I need to set one only for my header. Why won't this piece of code work and how should I solve it.
HTML-code:
<!DOCTYPE html>
<html lang="nl">
<head>
<title>De fonduepot | Home</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/start.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/home.css" />
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<div class="wrapper">
<img class="left" src="images/thefonduepot.png" alt="foto van een fonduepot" />
<h1>De fonduepot</h1>
<img class="right" src="images/thefonduepot.png" alt="foto van een fonduepot" />
</div>
</header>
</body>
</html>
CSS-code:
body {
background-image: url("../images/houtachtergrond.jpg");
}
.wrapper {
width: 70%;
margin: 0 auto;
}
header .wrapper {
background-image: url("../images/zand.jpg");
}
h1 {
float: left;
font-family: 'Bitter', serif;
font-size: 4rem;
line-height: 3.5rem;
width: 20rem;
text-align: center;
margin-left: 9rem;
color: #8A0810;
margin-top: 1.25rem;
}
header .left {
float: left;
width: 10rem;
}
header .right {
float: right;
width: 10rem;
}
You need to set a width and height for the background image to be contained inside.
http://jsfiddle.net/sS3u8/
header .wrapper {
background-image: url("../images/zand.jpg");
width: 100%;
height: 300px;
background-size: contain;
}
Instead of this
header .wrapper {
background-image: url("../images/zand.jpg");
}
You could try something like that
header {
background-image: url("../images/zand.jpg");
}
It's a little weird though, i mean the definition of that header .wrapper. The second example which i wrote should set the provided background image for the header tag, and of course it could give you further idea on how to do other things.
Related
I'm trying to make my #logo element disappear once the screen gets smaller than 670px. It works in that the logo disappears but it takes my navigation with it for some reason. Why is my nav ul disappearing?
The Code:
header {
position: fixed;
background-image: url(img/grey-bg.jpg);
background-size: cover;
width: 100%;
height: 8%;
min-height: 50px;
z-index: 2;
}
header nav ul {
position: relative;
margin-top: -28px;
margin-right: 5%;
z-index: 3;
}
header li {
font-size: 1rem;
font-family: 'Cabin Sketch', cursive;
float: right;
color: #fff;
padding-right: 30px;
z-index: 3;
}
#logo {
height: 75%;
margin-top: 5px;
margin-left: 10%;
}
#media screen and (max-width: 670px) {
#logo {
display: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jovial Entertainment | Home</title>
<link href="main.css" type="text/css" rel="stylesheet"/>
<link href='https://fonts.googleapis.com/css?family=Cabin+Sketch'rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<img src="img/JOVIAL-LOGO-TEXT.png" id="logo"/>
<nav>
<ul>
<li>VIDEOS</li>
<li>ABOUT</li>
<li>PHOTOS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</body>
</html>
Because you changed it to display: none, it's not there on the page any more, therefore there's nothing to take up the space where it once was, so your nav is moving over to where the logo was. Try visibility: hidden instead.
You have negative margin on your navigation, so once you remove the logo your navigation just goes above the top of the screen. You need to set margin top of your navigation to zero in your media query.
I have the following HTML5 code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
max-width: 960px;
margin: 0 auto;
font-size: 120%;
}
header, nav {
margin: 0;
padding: 0;
border: 1px solid black;
}
header {
border-color: red;
}
img.mainpicture {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<header>
<img class="mainpicture" src="http://s29.postimg.org/ajjbb0n07/apic.jpg" alt="A picture"/></header><nav>Navigation area.</nav>
</body>
</html>
Can someone please explain why there is about 5 pixels of empty space between the <header> and the <nav> content, and how can I remove it?
By adding
header {
padding-bottom: 1px;
}
to the CSS file, the height of the white space is extended by one pixel, so it doesn't seem to have anything to do with the padding of <header>.
EDIT: I would like to do it without using <nav style="position: relative; top:-7px;">.
Set display block on the image for fixing fitting issues.
body {
max-width: 960px;
margin: 0 auto;
font-size: 120%;
}
header,
nav {
margin: 0;
padding: 0;
border: 1px solid black;
}
img.mainpicture {
width: 100%;
display: block;
}
<header>
<img class="mainpicture" src="//lorempicsum.com/futurama/960/200/2" alt="A picture" />
</header>
<nav>
Navigation area.
</nav>
Just add
img.mainpicture{
.....................
.....................
vertical-align: top;
}
That will fix the issue:)
It could be because of the inner elements having a margin, that is protruding outside! And also since you have an <img />, give a display: block; to it. Try overflow: hidden; for both header, nav:
header, nav {
overflow: hidden;
}
header img {
display: block;
}
Set the property margin-bottom equal to zero.
margin-bottom: 0;
Use % layout responsive
HTML Source
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title></title>
</head>
<body>
<!-- Top -->
<div id="top"> TOP</div>
<!-- Menu MID LEFT -->
<div id="midleft"> Menu Meio Esquerda</div>
<!--MID-->
<div id="mid"> BANNER</div>
<!-- Back -->
<div id="back"> RordaPé </div>
</body>
</html>
CSS Soruce
html, body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
margin:0; height: 100%;
}
#top{
background-color: #bfb;
position: relative;
width: 100%;
height:18%
}
#midleft
{
background-color: #ddd;
position: relative;
width: 12%;
height: 65%;
padding: 1%;
padding-right: 2%;
}
#mid{
background-color: #ff9;
float: right;
width: 75%;
height: 35%
}
#back{
background-color: #bfb;
width: 100%;
height: 7%;
clear:both;
}
I need to make my layout like this!
I'm not able to do this Responsive Layout Mode.
Could someone send me link explaining Position BOX in CSS3?
Or should do another layout mode without BOX CSS?
I have a section containing a anchor tag containing a h1, the h1 has a background image, when I hover over the h1 background image the position change to imitate a rollover, however, the rollover is also active outside of the h1 to the right of it try hovering to the right, I have tried to get rid of margins and padding to no avail.
Here is the site live
html
<!DOCTYPE html>
<html>
<head>
<title>Portfolio of Anders Kitson</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="//use.typekit.net/lfr7txf.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id="container">
<header>
<h1>ASK</h1>
<h2>Anders Samuel Kitson, front end web developer.</h2>
</header>
<section id="siteThumbs"><!--not sure if this is appropriate use of the section tag-->
<h1>Springmethod.com</h1>
</section>
</div>
</body>
</html>
css
/*variables*/
/*shared styles*/
#container {
width: 960px;
max-width: 90%;
border: solid 0px #000;
margin: auto; }
header h1 {
background: url("../images/ask.gif");
width: 97px;
height: 96px;
text-indent: -9000px; }
header h2 {
font-family: "brandon-grotesque",sans-serif;
font-weight: 300;
font-size: 2.5em; }
#siteThumbs h1 {
background: url("../images/springmethod.jpg");
width: 321px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs a:hover h1 {
background: url("../images/springmethod.jpg") 0 -241px no-repeat; }
/*media queries*/
/* Smartphones (portrait and landscape) */
#media only screen and (min-width: 0px) and (max-width: 767px) {
header h2 {
font-size: 1.5em; } }
You can nest the h1 within a div, setting the div's width to achieve the desired effect.
<a href="#">
<div style="width: 100px">
<h1>Springmethod.com</h1>
</div>
</a>
http://www.xs4all.nl/~peterned/examples/csslayout1.html
The tutorial above is essentially what I want with a white column that extends to the bottom of the browser. In the tutorial it actually begins at the very top, with the header being a different shade of grey covering the white.
My case, the header would have to match the textured background. So, what I want is to have the container begin below the header. I don't know if it is possible because right now my header pushes the container down.
http://andrew.x10.mx/adam/
html -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>for adam</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
</div>
<div id="container">
<br class="push"></br>
<div id="content">
<h1>Hi</h1>
</div>
</div>
</body>
</html>
css -
html,body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#header {
position: absolute;
z-index: 2;
top: 0px;
left: 0px;
width:100%;
height: 49px;
background: #fff url("bg.png") repeat-x top left;
padding: 0;
}
.push {
width: 860px;
height: 49px;
margin: 0;
}
#container {
background: #ff0;
height:auto !important;
height:100%;
position:relative;
width: 860px;
text-align: left;
margin: 0 auto;
min-height:100%;
z-index:1;
}
#content { padding: 10px; }
Only tested it in Firefox, though. :)
Updated: feel free to validate. :)
Updated v2: Had a problem when adding content inside the container. Fixed now, but had to do some more complex-ish stuff.