Basically I'm trying to create a small div (header class) that sits on top of a main banner image div (banner class). I've been able to position it correctly when my browser window is maximized, but when I resize the browser the header div maintains the margins and shrinks down to much less than the banner's width. I realize this is because I have the margins set at fixed positions on the left and right so they're maintaining those positions... I'm just new to CSS and am not sure exactly what to do to prevent this from happening. I've been messing around with positioning for about an hour and just can't get it right.
CSS:
<style type = "text/css">
body {
background-color: #595959;
}
.header {
background-color: #4CBB17;
padding: 12px 0px 12px 0px;
margin: 0px 137px 0px; 137px;
}
.banner {
text-align: center;
}
</style>
HTML:
<html>
<head>
<title>Thanks!</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div class="header">
</div>
<div class="banner">
<img src="banner.jpg" />
</div>
</body>
</html>
Any help would be much appreciated!
either put the banner into the header div
or create a "wrapper" div for the whole site, if your banner image, for example, is 960px wide and that how wide you want the site to be a wrapper many be beneficial as you can center the wrapper and forget about trying to center everything inside it.. or even if then your banner is less you can then center it inside the #wrapper.. options ;)
CSS:
body {
background-color: #595959;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
.header {
background-color: #4CBB17;
padding: 12px 0;
}
.banner {
text-align: center;
}
HTML:
<div id="wrapper">
<div class="header">header text</div>
<div class="banner">
<img src="banner.jpg" style="width: 960px; height: 230px;" />
</div>
</div>
I´m not sure what you are trying to achieve exactly, but if you want the banner always to be the same size as the header, you can use:
.header, .banner {
margin: 0px 137px 0px; 137px;
}
.header {
background-color: #4CBB17;
padding: 12px 0px 12px 0px;
}
.banner img {
width: 100%;
}
Or you get rid of the banner altogether and use a background image for the header.
Maybe you can add a min-width: property to the header?
Related
making a website for the first time and I found that when I zoom out, my layout size get messed up. can anyone help explain to me why? and how to fix it Thanks!
This is what its like at 100% zoom: http://puu.sh/peI6R/c7f45747a0.png
When I zoom out: http://puu.sh/peI80/f5fb16d6d0.png
Also, how can I make my footer have a vertical list on the left side? I tried using float: left but it just scrambled the words.
After trying to make this website, I realized that my CSS properties knowledge is HORRIBLE. I've only done the HTML/CSS/JS on Codecademy and maybe that's not enough, so any tips would be appreciated!
body {
margin: 5px 225px 225px;
background-color: #FFA500;
font-family: Comic Sans MS;
}
.banner {
background-image: url(http://miriadna.com/desctopwalls/images/max/Orange-space.jpg);
height: 250px;
background-size: cover;
background-position: center center;
margin: 0;
}
.heading {
text-align: center;
background-color: #3232FF;
border-bottom: 5px solid black;
}
.Content {
width: 900px;
height: 700px;
margin: auto;
background-color: white;
}
.Profile {
margin-left: 100px;
}
.mypic {
margin-left: 50px;
}
.footer {
width: 900px;
height: 120px;
color: black;
margin: auto;
background-color: #aaa;
}
.footer ul {
list-style: none;
}
.footer li {
display: block;
}
nav {
display: block;
background: #aaa;
}
ul {
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 5px 100px;
}
a {
color: black;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: white;
}
<html>
<head>
<title>Simon's First Website!</title>
<meta charset="UTF-8">
<meta name="description" content="Simon's Portfolio">
<meta name="keywords" content="Simon Fu First Portfolio">
<meta name="author" content="Simon Fu">
<link rel="stylesheet" type="text/css" href="First.css">
</head>
<body>
<div class="banner"></div>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
</ul>
</nav>
<div class="Content">
<div class="heading">
<img src="http://vignette1.wikia.nocookie.net/yogscast/images/c/c0/Simon_Banner_png.png/revision/20140308175434">
</div>
<div class="base">
<h1 class="Profile">Profile</h1>
<figure class="mypic">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" height="250" width="250">
<figcaption>My beautiful face</figcaption>
</figure>
</div>
</div>
<div>
<div class="footer">
<div align="center"><strong>Contact Me</strong></div>
<ul class="left">
<li>Email: dontmessiiii#gmail.com</li>
<li>Melee: JK</li>
<li>League of Legends: jk</li>
</ul>
</div>
</body>
</html>
What's happening?
Follow me
This is your layout, basically.
body
banner
nav
content
footer
As you don't use CSS to style our sections yet, all of them have width: auto. In simple words, and only to understand this problem, in the case we can say our sections have the width of your browser's window.
You styled your body element with margin: 5px 225px 225px, so in other words, bacause of the margin shorthand property:
top margin is 5px
right and left margins are 225px
bottom margin is 225px
So now our elements' width is the result of 100% (in this case, browser window's width) - 225px * 2 (because of left and right body's margins).
Then, you set content and footer's width to 900px
.content {
width: 900px;
}
footer {
width: 900px;
}
So, if you back to our layout we see that
body
banner has width: auto => browser window's width - 225 * 2
nav has width: auto => browser window's width - 225 * 2
content has width: 900px
footer has width: 900px
The width of content and footer are static, while the width of banner and nav depends of your browser window's width.
How to solve it
Defining the width of banner and navas you did with content and footer. You can do a div, called for example container to set the width off all element, so if you want to change it in the future you only have to modify one line.
.container {
width: 600px;
margin: 0 auto;
}
Height of .banner and nav must be defined like .Content and footer (900px). margin:0 auto is added to make it always center;
.banner, nav { width: 900px; margin:0 auto; }
Sorry, if my problem is a little bit too specific, but I have not found the answer anywhere else. On my website, there is a header that is supposed to take up the whole width of the screen, but it does not. There is always a blank space between the top, and the sides. I have tried display: block; min-width: 100%, just width: 100% and many more variations but I just can't find out how to get rid of it. Anybody have ideas? Thanks!
FULL CODE
/* GLOBAL */
body {
/*background-color: #1abc9c;
display: block;
min-width: 100%;*/
}
#content {} header {
display: block;
min-width: 100%;
height: 100px;
background-color: #34495e;
border-top: 5px solid #1abc9c;
}
<!DOCTYPE html>
<html>
<head>
<title>Example Website</title>
</head>
<body>
<div id="content">
<header>
<img src="REPLACE.png" />
</header>
</div>
</body>
</html>
By default, the browser adds some margin to body element. Thus to fix it, add margin:0; to your body CSS.
body {
margin:0;
}
JSfiddle demo
Alright, so I've tried a lot of different things here but I just can't seem to get my menu bar to stretch all the way across the page. There's a small gap on the left side. Am I just missing something here?
Also so far this is the only way I've been able to get my footer somewhat centered at the bottom of the page. Every time I set the left and right margins to auto it puts the footer in line with the menu bar. Is there a better way to do this as well?
Thank You.
<!DOCTYPE html>
<html>
<head>
<title>Connor Lepert: Homepage</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<link rel="icon" href="logo.png">
<style>
#font-face {
font-family: Vanadine;
src: url(vanadine.ttf);
}
body {
background-image: url(bckgrnd.jpg);
background-size: 100%;
background-repeat: no-repeat;
font-family: sans-serif;
color: white;
}
a {
color: white;
font-family: Vanadine;
text-decoration: none;
}
a:hover {
color: yellow;
}
p {
color: white;
font-family: Vanadine;
}
footer {
position: fixed;
display: block;
margin-left: 45%;
margin-right: 45%;
text-align: center;
margin-top: 320px;
}
#siteid {
margin-left: auto;
margin-top: auto
}
#menubar {
background-color: #ABADB0;
width: 100%;
height: 20px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
text-align: center;
word-spacing: 20px;
position: fixed;
}
#header {
display: block;
margin-left:auto;
margin-right: auto;
text-align: center;
margin-top: 330px;
}
</style>
</head>
<body>
<div id="siteid"><img src="logowhite.png" width="50px" alt="Personal logo"/></div>
<div id="header"><img src="header.png" width="400" alt="Lepert"/></div>
<div id="menubar">
Home
About
<a href=mailto:clepert13#gmail.com>Contact</a>
Portfolio
ScrapYard
</div>
<footer>©<a href=> 2015 by Connor Lepert </a> <br> <p></p> </footer>
</body>
</html>
You must just add a margin:0 to your body
I create a wrapper class and wrap the code that needs to be centered within it. Here's an example:
.wrapper {
margin: 0 auto;
width: 960px;
}
<html>
<div class="navbar">
<div class="wrapper">
<p>Content goes here</p>
</div><!--wrapper-->
</div><!--navbar-->
</html>
You just need to make sure that you place the wrapper class before the content, but after the background that needs to repeat. That is shown in my example. Otherwise, you'll have everything centered like it needs to be, but your background will cut off because it's being contained in a 960px area.
Like Artefact already said, adding margin:0 to your body will remove the gap beneath your menubar.
Just a little explaining:
This gap is caused by your browser, in fact every browser has some presets for some elements (i.e. the size of a h1 and how links are displayed) and those presets differ from browser to browser.
For this reason most people will use css resets to have a clean starting point for their own css.
There are several resources for resets out there like the one from meyerweb that you can use or you can simply write your own.
I am trying to have a header that is split three ways (a logo to the left, something in the middle, and something else to the right). The width of the header is 100%.
The issue I am having is that the right part only appears lower (under the info in the middle div). Not sure how to simply display the right part to the right in that case. I might not be explaining this very well, let me know if I can clear this up further.
<div id="header">
<div id="logo">
logo
</div>
<div id="header-middle">
</div>
<div id="header-right">
</div>
</div>
with the css:
#header {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 25px;
background-color: #fafafa;
height: 55px;
border-bottom: 1px solid #d3d3d3;
overflow: auto;
}
#logo {
font-size: 24pt;
color: #08a3d9;
width: 100px;
float: left;
}
#header-middle {
width: 300px;
margin-left: auto;
margin-right: auto;
}
#header-right {
float: right;
width: 300px;
margin-right: 20px;
text-align: center;
}
Your CSS is fine. Just move #header-middle last in your HTML. Then what is float: right will go right, float: left will go left, and the middle content will fill upwards and occupy the unclaimed middle space. What is happening the way you have it, is the unfloated element is pushing the floated element after it.
<div id="header">
<div id="logo">
logo
</div>
<div id="header-right">
</div>
<div id="header-middle">
</div>
</div>
If changing the HTML order is not an option, then just assign widths to everything, and float all the items left.
Here's another solution for your consideration:
In the code below, I've removed all floats and used relative sizing to allow your design to better handle narrow ...
... and wide ...
... screen widths more responsively.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#header {
padding: 25px 10px;
height: 55px;
border-bottom: 1px solid #d3d3d3;
overflow: no-content;
min-width: 400px;
}
div#header div {
display: inline-block;
padding: 1% 0;
margin: 0 2%;
text-align: center;
border: 4px dashed; /* Useful for positioning */
font-size: 2em;
}
#logo {
color: #08a3d9;
width: 20%;
border-color: red;
}
#header-middle {
width: 40%;
border-color: green;
}
#header-right {
width: 20%;
border-color: blue;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
logo
</div>
<div id="header-middle">
middle
</div>
<div id="header-right">
end
</div>
</div>
</body>
</html>
I'd also recommend using something like HTML5 Boilerplate or Columnal that provide a decent responsive grid system so that your site works beautifully on both desktop & mobile.
I made another jsFiddle for you.
updated http://jsfiddle.net/zGfh7/
My answer is much more complicated than magi's, but it also works.
I added float: left to the middle header.
Also, I changed the widths of all the headers to 33%, and removed all margin-left and paddings, etc, to make things more clean. You can keep or change the 33% widths to your preference, but making sure that all the widths add up to 100% ensures that the header is nicely filled.
I've also added background-colors so you can see that things align nicely.
I am designing a website layout in which all of the content is held in a central column of a fixed width. I want this central column to have a different background color than the rest of the page. I also want the central column to extend from the very top of the browser to the very bottom.
I am able to successfully do this using a background image of dimensions 1000x1, as follows:
html
{
background: #333333 url(./images/global/background.png) repeat-y center;
}
body
{
margin: auto;
width: 1000px;
}
This works great in most browsers, but I would really prefer to be able to do it without an image.
I have tried setting "html" and "body" to have a "height: 100%" and then giving "body" a background color, but if there is enough content to warrant scrolling, the background only has a height equal to that of the browser and when you scroll down, the background stays behind.
Any tips are appreciated.
The solution is to use a wrapper div that has 100% height and a separate content div that will extend if the content inside is long enough both having the background color set. Here is an example (tested in Firefox, Chrome and IE7):
<html>
<head>
<style type="text/css">
html {height: 100%}
body {
height: 100%;
margin: 0;
text-align: center;//for IE7
}
div#wrapper {
background-color: #efefef;
width: 720px;
margin: 0 auto;
height: 100%;
text-align: left;
}
div#content {
background-color: #efefef;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<div style="height: 2000px">test</div>
</div>
</div>
</body>
</html>
body {
text-align: center;
margin: 5em 0 0 0;
vertical-align: middle;
}
#content {
width: 760px;
text-align: left;
margin: 0 auto;
}
Details here.