I'm trying to make a banner that fills all the screen horizontally but it isn't working as expected. There's some space that isn't fullfilled with it like you can see here: http://i.imgur.com/12NrL7R.png
I'd appreciate some help, thanks in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Best webpage ever</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="banner">
<ul id="menu">
<li>Home</li>
<li>Students</li>
<li>XXX tuga</li>
</ul>
</div>
<div id="container">
<div id="content">
<p>cona</p>
</div>
</div>
<div class="banner">
</div>
</body>
</html>
.banner{
background-color: black;
width: 100%;
height: 200px;
}
html, body {
margin:0;
padding:0;
}
Try this, the body/html by default has padding, so you might want to try to remove that...
body tag applies some spacing in most browsers. Be sure to have:
body {
margin: 0;
padding: 0;
}
add this to your css:
body{
padding:0px;
}
let me know if that helps
Related
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I am following a tutorial from YouTube. There I followed the same procedure. I checked it several times. But the video's authors background color shows up and mine doesn't. I have tried overflow, clear etc but it doesn't work. People with big brains I need help?
here is the css code:
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container{
width: 100%;
height: 100%;
background: #42455a;
}
And here is the html code:
<!DOCTYPE html>
<html>
<head>
<title>Crypto Currency Web App - Easy Tutorials</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
</div>
</body>
</html>
Edit: problem resolved. The solution was to specify the html and body height
like
height:100%;
padding:0;
margin: 0;
}```
<!DOCTYPE html>
<html>
<head>
<title>Crypto Currency Web App - Easy Tutorials</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<p> just write something to here your width and height percent not fixed size </p>
</div>
</body>
</html>
if you want to see the container then your CSS should be following:
.container{
width: 100px;
height: 100px;
background: #42455a;
}
100 px is a just example you can enter what you want
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container{
width: 100%;
height: 100%;
background: #42455a;min-height:145px;
color:#fff;padding: 15px;
}
<!DOCTYPE html>
<html>
<head>
<title>Crypto Currency Web App - Easy Tutorials</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
You need to insert some content or add some CSS like min-height to empty div to show background color
</div>
</body>
</html>
I am beginner level front end developer i need help in psd to html when I slice
the image its size is 1920px and in html, div size is 100% but image is going out of the browser. What are my mistakes kindly help me what should I have to do to make it good I want to learn PSD to html.
Also guide me how to use slice tool in adobe Photoshop ?
html, body { margin: 0px; padding: 0px; border: 0px; }
#wrap{
width: 1920px;
background-color: #e7e7e7;
}
.menu{
width: 100%;
background-color: #202628;
}
.slider{
width: 100%;
}
<html>
<head>
<title>psd to html</title>
<meta charset="utf-8" content="text/html" http-equiv="content-type">
<link href="css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="wrap">
<header>
<ul class="menu">
<li>SiteName</li>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="slider">
<img src="images/banner.png" alt="banner">
</div><!-- end slider-->
</header><!--end header-->
</div><!-- end wrap -->
</body>
</html>
You should add css for image tag and also remove fix width of your #wrap and apply max-width.
Try this:
#wrap{
max-width:1920px;
width:100%;
}
.slider img{
width: 100%;
max-width:100%;
}
I need the footer html elemenent to appear down the page (even when the content is not enough). I found a bounch of solutions by googling and all seemed to me to be more complicated than they should (stuff like creating #containers of #containers of..). Here's my html code:
<!DOCTYPE html>
<html>
<head>
<title>Footer</title>
<meta name="author" content="Cinosarge">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<p>THIS IS A HEADER - THIS IS A HEDER</p>
</header>
<section>
<p>THIS IS A SECTION - THIS IS A SECTION</p>
</section>
<footer>
<p>THIS IS A FOOTER - THIS IS A FOOTER</p>
</footer>
</body>
</html>
and this is the related css style:
*{
margin: 0;
padding: 0;
}
body{
position:absolute;
min-height: 100%;
width: 100%;
}
footer{
position: absolute;
bottom: 0;
width: 100%;
}
Now, this works fine for me but, is this piece of code correct? (in particular, is it a good idea to give the body element an absolute position? What kind of problems I could strumble into by using that css?
Thank you.
I've tried to make the white space disappear to no avail! Below I've pasted my code. The problem occurs between .jumbotron and .footer. I know it must be something with the margin or padding, maybe with the .jumbotron h2.
HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/main.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>Niall's Portfolio</title>
</head>
<body>
<audio src="/Users/kmahford/Music/iTunes/iTunes Media/Music/Hiatus Kaiyote/Choose Your Weapon/16 Only Time All the Time_ Making Friends with Studio Owl.m4a" autoplay></audio>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>ZAH</h1>
</div>
<div>
<ul class="pull-right">
<li>About Me</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h2>making <span>rustic</span> <span id="and">and</span> <span>modern</span> meet.</h2>
</div>
</div>
<div class="footer">
<p>© Che Co.</p>
</div>
</body>
</html>
CSS:
/* Jumbotron */
.jumbotron {
height: 600px;
background: url("https://images.unsplash.com/photo-1432821596592-e2c18b78144f?q=80&fm=jpg&s=a4598570a3286ea23369fdefe46953ba") no-repeat center center;
background-size: cover;}
.jumbotron h2 {
margin-top: 0;
text-align: center;
color: #1E91B2;
padding-top: 300px;
font-size: 50px;
font-weight: 400;}
.jumbotron span {
font-weight: 800;}
.jumbotron #and {
color: #FF8208;
font-weight: 400;}
The jumbotron class has a 30px bottom margin by default. Remove it:
div.jumbotron {margin-bottom:0;}
jsFiddle example
Note that this is the reason for the spacing issue and you have to override Bootstrap's CSS with your own by making your CSS more specific in order for it to take effect.
What's happening is that within your footer, the <p> has a margin that is pushing the footer down.
What you want instead is to add this piece of CSS:
.footer p{
margin:0;
}
If I guess right you should change on the jumbotronclass the margin, like this:
CSS
.jumbotron{
margin-bottom: 0;
}
jsfiddle
if you also don't want the whitespace on the bottom of your page, set the margin from the p tag also to zero.
So I wanted to center my header... but I stumbled across a problem right away. I want to have a container that's going to have a repeating BG(stripe lines) and in the center I want a header with the logo and menu.
Thing is, I can't get the header div to center to the parent(container).
This is the HTML part
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="css/master.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<dic class="header">
<img src="images/logo.png" width="260" height="56">
</div>
</div>
</div>
</body>
</html>
and the CCS is
#charset "utf-8";
body {
background-color: #00162d;
}
.container {
width: 100%;
height: 100px;
background: url(../images/header_bg.jpg) repeat-x;
}
.header {
margin: 0 auto;
width: 980px;
}
Thanks in advance!
p.s. It's amazing how much you can forget if you don't code for 3 years!
<dic class="header">
Should be
<div class="header">
Working example: http://jsfiddle.net/dVvjm/