I don't have much HTML/CSS experience, but I am trying to get a simple layout going where I have a centered div acting as the page container. I have tried looking up other examples, but I can't figure out why mine doesn't work (the header appears but is left justified, I want it centered):
html:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header"></div>
</div>
</body>
</html>
css:
body {
background: #fff;
font-family: Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
#container {
background: #bbb;
width: 800px;
margin: 0, auto;
}
#header, #footer {
background: #333;
height: 40px;
}
margin: 0, auto;
should be
margin: 0 auto;
Remove comma in margin:
margin: 0 auto;
instead of
margin: 0, auto;
You have a , between margin:0 and auto; this is an invalid CSS term
margin: 0, auto;
needs to be
margin: 0 auto;
Check this demo
body {
background: #fff;
font-family: Helvetica, Arial, sans-serif;
width: 100%; /* You need to mention the width here (Good way)*/
padding: 0;
text-align: center;
}
#container {
background: #bbb;
width: 800px;
margin: 0 auto; /* You are doing wrong here (margin: 0, auto;) */
}
#header, #footer {
background: #333;
height: 40px;
}
margin: 0 auto; (valid) instead of margin: 0, auto; (invalid)
Related
I am making a layout for one of my sites and i have a div in the middle of the page. When i type text into the div there seems to be a big gap between the border of the div and the text. i have set padding to 0 on the div and it is still applying some sort of padding. i have tested this on IE 10 and Google Chrome 29. My code is below Here is a jsFiddle.
Html:
<!DOCTYPE html>
<html>
<head>
<title>Club Website</title>
<link rel="stylesheet" href="Assets/Stylesheets/Global/Global.css" />
<link rel="stylesheet" href="Assets/Stylesheets/Bootstrap/css/bootstrap.min.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="Assets/Scripts/Javascript/jQuery/jQuery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
});
</script>
</head>
<body>
<div id="Wrapper">
<div id="Header">
<div id="HeaderInner">
Main Page
Other Page
Other Page
Other Page
Other Page
</div>
</div>
<div id="Body">
<div id="BodyInner">
Hi
</div>
</div>
</div>
</body>
</html>
CSS
/* Layout */
html, body, #Wrapper {
width: 100%;
min-width: 1000px;
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #f2f2f2;
}
#Header {
width: 100%;
height: 45px;
display: block;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: #333;
box-shadow: 2px 2px 3px #999;
}
#HeaderInner {
width: 965px;
height: 45px;
display: block;
margin: 0 auto;
padding: 0;
background-color: transparent;
line-height: 45px;
text-align: center;
}
#Body {
width: 100%;
height: 100%;
display: block;
margin: 0;
padding: 0;
position: absolute;
top: 45px;
left: 0;
background-color: transparent;
}
#BodyInner {
width: 965px;
height: auto;
min-height: 100%;
display: block;
margin: 0 auto;
padding: 0;
background-color: transparent;
word-wrap: break-word;
white-space: pre-wrap;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
/* Layout */
/* Links */
.HeaderLink {
color: #999;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
text-decoration: none;
cursor: pointer;
margin: 0 15px;
}
.HeaderLink:hover {
text-decoration: none;
color: #FFF;
}
.HeaderSelectedLink {
color: #FFF;
}
/* Links */
The spacing is caused by the following CSS rule:
white-space: pre-wrap;
Which renders similarly to the <pre> tag, drawing a line for every newline/line-break in the HTML source.
So with the following HTML:
<div id="BodyInner">
Hi
</div>
the whitespace before and after Hi are being drawn on-screen.
remove
white-space: pre-wrap;
BodyInner in your code,
refer this: http://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=pre-wrap
I'm creating a menu bar for my site and I'm wondering if I'm doing this correctly.
Is there a better way to achieve the same result? It just seems excessive to use 3 divs.
Here is how I'm currently handling it :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#topbar {
background: #487BC0;
width: 100%;
}
#container {
width: 960px;
margin: 0 auto;
}
#links {
padding: 15px 0 15px 840px;
color: #fff;
font-size: 14px;
margin-bottom: 30px;
}
#content {
position: relative;
background: #f6f6f6;
width: 960px;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="topbar">
<div id="container">
<div id="links">Login | Register</div>
</div>
</div>
<div id="content">Content goes here</div>
</body>
</html>
Im no Guru but maybe something like this will work?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
background: #487BC0;
width: 100%
min-width: 960px;
margin: 0 auto;
}
#container > span {
display: block;
padding: 15px 0 15px 840px;
color: #fff;
font-size: 14px;
margin-bottom: 30px;
}
#content {
position: relative;
background: #f6f6f6;
width: 960px;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
<span>Login | Register</span>
</div>
<div id="content">Content goes here</div>
</body>
</html>
Then again, im no Guru O.o
remove the #topbar if you do not want the blue background to stretch otherwise its alright i think..
There are many solutions to same problem
My Way Of Skinning this cat. The way I see it, width is common so only set it once.
HTML
<div class="container">
<div class="topBar">Login | Register</div>
<div class="content">content</div>
</div>
CSS
.container
{
width:960px;
margin: 0 Auto;
}
.topBar
{
background-color:#487BC0;
text-align:right;
margin-bottom:30px;
padding: 15px 15px 15px 15px;
color: #fff;
font-size: 14px;
}
.topBar div
{
padding: 15px 0 15px 840px;
color: #fff;
font-size: 14px;
margin-bottom: 30px;
}
.content
{
background-color:#f6f6f6;
}
Example: http://jsfiddle.net/V9DGp/
So, I would like to have my text aligned in the middle of the page and I would also like a separate div that has text on the bottom of the page in the middle.
Here is my CSS code
#header { text-align:center; color:white; font-family:'Capture'; font-size:34px; margin: auto; width: 800px;}
#slogan { text-align:center }
#font-face { font-family:'Capture'; src:url(/fonts/Capture_it.ttf); }
.info-container { width: 840px; border: 1px solid #d8d5c6: padding: 4px; margin: 40px auto 0; }
.inner-border { background-color: #fcfbf9; border: 1px solid #d8d5c6; padding: 10px 20px; }
.coming-soon-visitor strong, .coming-soon-owner strong { font-weight: bold; color: #000; }
.coming-soon-owner { float: left; font-size: 14px; color: #6d6a5b; font-weight: normal; width: 400px; border-right: 1px solid #d9d6c5; padding: 10px 0; margin-bottom: 10px; }
.coming-soon-visitor { float: left; font-size: 14px; color: #6d6a5b; font-weight: normal; padding-left: 20px; padding: 10px 0 10px 20px; margin-bottom: 10px; }
<div style="text-align:center">Your text here</div>
and for your css
<div id="my-div">Your text here</div>
#my-div{ text-align: center }
if you mean, "I want my DIV centered," then you possibly want this:
<div id="my-div">Your text here</div>
#my-div{ width: 800px; margin: 0 auto; text-align: center }
beyond that, your question might be too vague to give you the answer you seek
See if the code below helps:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>align</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#text_center {
text-align: center;
width: 200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-20px;
}
#text_bottom {
text-align: center;
width: 200px;
position:absolute;
left:50%;
bottom:1%;
margin-left:-100px;
}
</style>
</head>
<body>
<div id="text_center">Text 1</div>
<div id="text_bottom">Text 2</div>
</body>
</html>
I have two divs featureText and skillsText one right after the other, I am trying to get the second one to float right of the next one instead of stacking, I have tried position relative on the second one with float left to no avail, the container itself is positioned relative. When I inspect the first div it shows to be super wide yet I have a width set and margins and paddings have been set to 0 to see if that was the problem. This is such a noob problem, but I need help.
live site
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>
<div id="featureText">
<h1>Recent Works</h1>
</div>
<div id="skillsText">
<h1>Super hero skills</h1>
</div>
<div id="siteThumbs"><!--not sure if this is appropriate use of the section tag-->
<div id="springmethod">
<h1 class="springmethod">Springmethod.com</h1>
</div>
<div id="goodmorning">
<h1 class="goodmorning">goodmorningmoon.ca</h1>
</div>
</div>
</div>
</body>
</html>
css
/*variables*/
/*shared styles*/
#container {
width: 960px;
max-width: 90%;
border: solid 0px #000;
margin: auto;
position: relative; }
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; }
#featureText {
margin-top: 70px;
margin-bottom: 20px;
width: 24%;
background: red; }
#featureText h1 {
font-family: "brandon-grotesque",sans-serif;
font-size: 2.5em;
font-weight: 700; }
#skillsText {
width: 28%;
background: aqua;
position: relative;
float: left; }
#skillsText h1 {
font-family: "brandon-grotesque",sans-serif;
font-size: 2.5em;
font-weight: 700;
margin-top: -10px; }
#siteThumbs {
position: relative;
float: left;
width: 960px; }
#siteThumbs .springmethod {
background: url("../images/springmethod.jpg") no-repeat;
width: 318px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs .goodmorning {
background: url("../images/goodmorning.jpg") no-repeat;
width: 318px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs a:hover .springmethod {
background: url("../images/springmethod.jpg") 0 -241px no-repeat; }
#siteThumbs a:hover .goodmorning {
background: url("../images/goodmorning.jpg") 0 -241px no-repeat; }
#springmethod {
width: 318px;
position: relative;
float: left; }
#goodmorning {
width: 318px;
position: relative;
float: left; }
/*media queries*/
/* Smartphones (portrait and landscape) */
#media only screen and (min-width: 0px) and (max-width: 767px) {
header h2 {
font-size: 1.5em; } }
Remove margin-top: 70px; from #featureText and float left #skillsText
#featureText {
margin-bottom: 20px;
width: 24%;
background: red;
float: left;
}
#skillsText { float:left; }
I'm creating a banner at the top of my page. It's built using 3 banners that will have content. When I horizontally shrink the browser window, my green banner component(on the right) moves with the edge of the screen eventually overlapping or going under my blue banner component (on the left).
How do I set a browser(body?) width at which the banner on the right stops moving with the shrinking browser and instead enable the browser scroll bars so the page stops shrinking?
If there's an entirely different/better way to approach this please throw all suggestions at me. Trying to learn as much as possible.
Your help is much appreciated. My code is as follows.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
.bannerBackground
{
width: 100%;
position: absolute;
top: 0;
height: 27px;
background-color: orange;
}
.rightBanner
{
position: absolute;
top: 0px;
right: 0px;
z-index: 9;
height: 27px;
padding-right: 20px;
width: 200px;
text-align: right;
color: #CCCCCC;
font-size: 20px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: bold;
background-color: green;
margin:0;
display: block;
}
.leftBanner
{
white-space: nowrap;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
white-space: nowrap;
margin-bottom: 0px;
width: 645px;
background-color: blue;
height: 27px;
display: block;
}
body
{
font-family: arial;
margin: 0;
padding: 0;
color: #EEEEEE;
}
</style>
</head>
<body>
<div class="leftBanner">
</div>
<div class="rightBanner">
<div>
Some Title Text
</div>
</div>
<div class="bannerBackground">
</div>
</body>
</html>
When you absolutely position elements you take them out of the flow of the page. You can instead use floats.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
.bannerBackground
{
width: 100%;
height: 27px;
background-color: orange;
}
.rightBanner
{
z-index: 9;
height: 27px;
padding-right: 20px;
width: 200px;
text-align: right;
color: #CCCCCC;
font-size: 20px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: bold;
background-color: green;
margin:0;
float: right;
}
.leftBanner
{
white-space: nowrap;
z-index: 10;
white-space: nowrap;
margin-bottom: 0px;
width: 645px;
background-color: blue;
height: 27px;
float: left;
}
body
{
font-family: arial;
margin: 0;
padding: 0;
color: #EEEEEE;
min-width: 960px;
}
</style>
</head>
<body>
<div class="leftBanner">
</div>
<div class="rightBanner">
<div>
Some Title Text
</div>
</div>
<div class="bannerBackground">
</div>
</body>
</html>
You need to remove the position:absolute . Then you could put it all in a container div and float the banners left and right with the body in the middle . That's how I'd do it.