Removing the top margin on a page - html
I can't seem to remove this bit of space at the top of my page, I've tried a number of things and read around. The only thing that seems to work is *{margin:0}, but I don't really want to do that. Anyone have some insight on what the problem is here?
You can view the page in question here: http://www.ryanlaurence.com/new/
HTML
<!DOCTYPE html>
<html>
<head>
<link href="Style.css" rel="stylesheet">
</head>
<body>
<div id = "Banner">
<p>Banner</p>
</div>
<div id = "Nav">
<div id="stripe"></div>
<ul>
<li> Link - </li>
<li> Link - </li>
<li> Link - </li>
<li> Link </li>
</ul>
</div>
<div class="Content">
<div></div>
</div>
<div id="Footer">
</div>
</body>
</html>
CSS
body, html{
background-color: #404040;
margin: 0;
padding: 0;
}
#Banner{
background-color: #333333;
height:200px;
top:0px;
}
#stripe{
height: 10px;
top: -14px;
position:relative;
background-color: #262626
}
#Nav{
width:100%;
height: 60px;
background-color: #262626;
}
#Nav ul{
margin: 0;
color: gray;
position: relative;
text-align: center;
}
#Nav ul li{
display: inline;
}
#Nav ul a{
color: gray;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
font-size: 25px;
font-family: "Orator Std", verdana;
text-align: center;
}
#Nav ul li a:hover{
color: white;
}
.Content{
background-color: #333333;
/*height: 800px;*/
position: relative;
top: 5px;
}
.Content div{
height:800px;
}
#Footer{
background-color:#57B4CC;
height:150px;
}
Add the CSS:
#Banner p {margin:0}
The paragraph in your banner div has a default margin that you want to get rid of.
I tried to give margin-top: -7px. It worked. But not sure why its has some space over there.
Some elements and browsers has some default styles that you need to overwrite to meet your needs.
I suggest you to use CSS reset script by Eric Meyer.
This is not only fix your problem but also help you to prevent and save a lot of time from dealing with cross browser compatibility problems in the future.
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
margin:0;
padding:0
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block
}
body {
line-height:1
}
ol,ul {
list-style:none
}
blockquote,q {
quotes:none
}
blockquote:before,blockquote:after,q:before,q:after {
content:none
}
table {
border-collapse:collapse;
border-spacing: 0
}
Fiddle Demo
Related
HTML menu moves down when adding content
I'm trying to write a simple menu for my site's backend. I'd like to acomplish that there is no space between the menu an the top of my site. It looks ok until I add a <h> or <p>
element. The menu moves about 30px down.
Why is it happening and how can I fix it?
<!DOCTYPE html>
<head >
<title>my page</title>
<link href="Styles.css" rel="stylesheet" />
</head>
<body>
<div id="PageWrapper">
<nav>
<ul id="navMenu">
<li>Home</li>
<li>Manage Books
<ul>
<li>New Book</li>
</ul>
</li>
<li>Reservations</li>
<li>Lendings</li>
<li>Back>></li>
</ul>
</nav>
<section>
<h1>Welcome to the management part of your site.</h1>
<section>
</div>
And the css file:
body {
margin: 0;
background-color: whitesmoke;
}
#PageWrapper {
width: 1000px;
margin: auto;
}
nav {
clear: both;
width: 100%;
float:left;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
}
ul#navMenu {
padding:0px;
margin:auto;
list-style: none;
}
ul#navMenu ul {
position: absolute;
left: 0;
top: 100%;
display: none;
padding: 0px;
margin: 0px;
}
ul#navMenu li {
display: inline;
float: left;
position: relative;
}
ul#navMenu a {
font-family:Arial, Helvetica, sans-serif;
font-size:small;
text-transform:uppercase;
text-decoration: none;
padding: 10px 0px;
width: 150px;
background: #666666;
color: #ffffff;
float: left;
text-align: center;
border-right: 1px solid #ffffff;
}
ul#navMenu a:hover {
background: #cccccc;
color: #333333;
}
ul#navMenu li:hover ul {
display: block;
}
ul#navMenu ul a {
width: 150px;
}
ul#navMenu ul li {
display: block;
margin: 0px;
}
I tried to look for unwanted margins in browser developer tools but I haven't seen anything obvious.
Remove the float and clear from nav and replace with overflow:hidden to contain the floats applied to the underlying li menu items.
This forces the nav into a new block formatting context, which will display as anticipated.
Demo Fiddle
nav {
width: 100%;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
overflow:hidden;
}
Stretching Banner, and Centering the Footer
I'm trying to vertically stretch my vertical side banners to the bottom of the page, and make the footer in the bottom left be in the bottom center. I've been looking for a solution to this issue, but am unable to find it as of yet. I am doing this for a school assignment, and thus, am still in the learning process. Please explain what needs to be done to fix this too if you can. Thanks!
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="headers_t">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240" />
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
</span>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers_t{
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
margin: 0px;
padding-top: 191px;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h, img{
display: block;
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
This is what the problem in the site looks like:
Image of Problem http://i.tinyuploads.com/cwPP9R.jpg
Jokan welcome! Its typical for front end questions like this to be mocked up on a site like jsfiddle.com, that way other users can easily see what your talking about and help you find a solution.
If I understood you correctly, heres your solution in a fiddle. You just want the banner to be the height of the browser window right?
I just set the height of .banner_h to 100% like so:
.banner_h {height:100%;}
#footer {width:100%; text-align: center;}
This may help you, ammend your following css style to-
.banner_l{
float: left;
border:thin solid #000;
width:200px;
position:fixed;
height:auto;
min-height:380px;
margin-top:-20px;
}
.banner_r{
float: right;
border:thin solid #000;
margin-top:-20px;
width:200px;
min-height:380px;
height:auto;
}
#footer {
width:100%;
height:30px;
background:#090;
float:left;
position:fixed;
padding:5px;
bottom:0px;
text-align:center;
}
change position style to relative or absolute as u need.
navbar heading doesnt stay in place
I want to put a title (a larger font than other text in navbar) on the left hand side of my navbar, so far i have achieved getting it on the left side but the text is being half cut, like half the text is outside the navbar and half of it is inside it. How can i get the text to stay fully inside the navbar?
CSS
<style>
#navbar ul {
margin:0 auto;
padding: 10px;
list-style-type: none;
text-align: center;
background:#1c1c1c;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
font-family: calibri;
font-size: large;
text-decoration: underline;
font-weight: 200;
border: 0.5px solid #242424;
border-radius: 2px;
padding:.3em 1em;
color: #ffffff;
background-color:transparent;
}
#navbar ul li a:hover {
color: #000;
background-color: #ffffff;
border-radius: 5px;
color:#1c1c1c;
}
#navbar {
position: fixed;
margin-top: 0;
top: 0;
left: 0;
width: 100%;
z-index:0;
}
#navbar {
overflow: hidden;
}
#navbar h1 {
float: left;
}
</style>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>ClickonDeal.com.au-Electronics</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<div id="navbar">
<h1>Click</h1>
<ul>
<li>Stuff</li>
<li>more stuff</li>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
</form>
</ul>
</div>
</div>
</html>
You have a couple of errant closing tags that are throwing errors, but that's not what's causing you trouble.
Likely issue is that H1 in most browsers will have default margins that are pushing it out of whack.
I'd investigate adding a css reset (start at http://necolas.github.io/normalize.css/) but in the mean time, you can fix this by setting margins to 0 on your h1:
#navbar h1 {
float: left;
margin: 0;
}
Here's a simple jsfiddle showing that change: http://jsfiddle.net/adnrw/BjCBf/1/ (h1 color changed to white so we can see it)
Add the below CSS to your code:
#navbar h1 {
float: left;
margin:0;
}
Check this JSFiddle
HTML Background repeat been cut off after scroll
Im trying to make a menu, its working well however, when i make the window smaller and scroll across, the background doesn't extend. Example:
The first image is in full screen and second image is after i have scrolled across the page. As you can see the background does not extend. Below is my CSS:
body{
padding: 0px;
margin: 0px;
font-family:Arial, Helvetica, sans-serif;
background-color: #717070;
}
.header{
background-image: url("img/bgsmall.png");
height: 100px;
background-repeat: repeat-x;
min-width: 1000px;
}
.logo{
margin-left:320px;
float:left;
}
#menu{
position: relative;
height: 100px;
text-align: center;
width:auto;
margin-left:600px;
min-width:1000px;
}
#menu ul{
list-style: none;
padding: 0;
margin: 0;
position:relative;
}
#menu li{
float: left;
display: inline;
padding-top:35px;
position:relative;
text-transform:uppercase;
}
#menu li a{
text-decoration: none;
padding-left: 32px;
padding-right: 32px;
font-size: 15px;
font-family: arial;
color: #ffffff;
text-align:center;
}
#menu li a:visited{
color: #ffffff;
}
#menu li a:hover{
color: #D86C00;
}
HTML CODE
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div id="menu">
<ul>
<li>page1</li>
<li>page2</li>
<li>page3</li>
<li>page4</li>
</ul>
</div></div>
</body>
</html>
Thanks in advance.
Add position:absolute; to your .header class.
It's your min-width:1000px; on the #menu that is causing this. Without knowing what layout it is that you want to achieve it's hard to say what you should do to replace this, but taking that out sorts out that particular issue
you can solve this problem by two way:
1-
body{
padding: 0px;
margin: 0px;
font-family:Arial, Helvetica, sans-serif;
background-image: url("img/bgsmall.png");
background-repeat: repeat-x;
background-color: #717070;
}
.header{
height: 100px;
}
2-
Remove "min-width: 1000px;" from header style
Center a ul within a div (within a div) which itself is centered on the page
I'm attempting to center my CSS menu but I'm having issues, basically I'd like it to be in the center of my content div. Currently it's displaying from the left. Does anyone know what I would have to add to achieve what I want? Below is my code.
My index.html
<head>
<meta content="en-ie" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contain">
<div id="header">
<p><img alt="" height="67" src="header.png" width="431" /><br />
</p>
</div>
<div id="tabs">
<ul>
<li><span>Item 1</span></li>
<li><span>Item 2</span></li>
<li><span>Item 3</span></li>
</ul>
</div>
<div id="content">
</div>
<div id="footer" style="width: 93px; height: 12px">
</div>
</body>
</html>
My style.css
body{
background-color: #292929;
}
p{
color: white;
font-family:"Times New Roman", Times, serif;
font-size: 14px;
}
h2{
color: white;
font-family:"Times New Roman", Times, serif;
font-size: 18px;
}
a:link {
COLOR: #00CCFF;
}
a:visited {
COLOR: #00CCFF;
}
a:hover {
COLOR: #00CCFF;
}
a:active {
COLOR: #00CCFF;
}
/* DIV's */
#contain {
background-color:#444343;
width: 700px;
margin-left: auto ;
margin-right: auto ;
opacity: .5;
}
#header {
width: 700px;
margin-left: auto ;
margin-right: auto ;
}
#content {
float: left;
width: 700px;
margin-left: auto ;
margin-right: auto ;
}
#footer {
color: white;
font-size:10px;
width: 11px;
margin-left: auto ;
margin-right: auto ;
}
#tabs {
float:left;
width:100%;
font-size:93%;
border-bottom:1px solid #292929;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
text-align: center;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FFF;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
you can set a fixed width for the #tabs ul (for example width:200px; ) and then you change the margin:0; to margin:0 auto; for #tabs ul
If I got it right, you need horizontal centering of block of unknown width. I see two approaches:
Simple one: you will omit all the fancy markup of your tabs and preserve just inline links in inline LIs and add display: block; to your #tabs ul rule. No floating, no blocks within menu, just plain inline text. This will work, but will no be much 'styllable'. pastebin.me/58fe73dd82496444fd7e129fc5830b4b
Complex one: add extra wrap around your ul, so you'll got #tabs #tabs-in ul li …
#tabs {
float:left;
width:100%;
position: relative;
}
#tabs-in {
position: relative;
float: left;
left: 50%;
}
#tabs ul {
margin:0;
padding:0;
list-style:none;
text-align: center;
display: block;
overflow: hidden;
float: left;
position: relative;
left: -50%;
}
#tabs li {
display:block;
float: left;
margin:0;
padding:0;
}
http://pastebin.me/23c1b8a60657962f1d8c8baef2700473 This old "move it half parents width right and then it move half its own width left" trick works quite well. But good luck styling it further and keeping it cross-browser compatible :]