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
So I'm doing a horizontal website with individual sections which works fine but now that Ive added my menu i'm having trouble where its just ruining my whole content areas and background.
Ive tried using the z-index which has no effect whats so ever... and putting items before it just push it out the way too.
My CSS Nav Bar
#Navigation
{
margin: 0px;
padding: 20px 0px 0px 700px;
font-family: 'american_captainregular', Helvetica, Arial, sans-serif;
font-size: 55px;
float:left;
}
#Navigation ul, #Navigation li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#Navigation a:link, #Navigation a:visited
{
float: left;
line-height: 14px;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
}
#Navigation a:hover { color: #000; }
My CSS For the image
#HomeText{
background-repeat: no-repeat;
background-image: url(Images/HomeText.png);
float:left;
height:158px;
width:450px;
margin-left:461px;
margin-top:126px;
}
The HTML
<div id="Content">
<div class="Tabs TabOne" id="HomeTab">
<ul class="MyNav" id="Navigation">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
</ul>
<div id="HomeText"></div>
</div>
And just in case, the CSS for my Sections
.Tabs{
margin:0px;
bottom:0px;
float:left;
width:3500px;
}
.TabOne{
background: url(Images/BG1.jpg) no-repeat;
}
Ive never encountered this sort of issue with elements being pushed down the page as much as with this
http://jsfiddle.net/BoneStarr/AGfwn/
I've been battling this for the better part of the afternoon and can't find a resolution to what I'm working with. I was changing some .asp pages to reflect a new page that we were adding to the site and after added to the menu, I decided to re-align the text. I removed the padding-left: 140px CSS and replace it with text-align: center;
This caused the nav-menu to go all screwy(pic2). I changed the CSS file back to the original however, in IE and Chrome it still displays oddly but in Firefox it works fine. Here's the code, trimmed to what I feel is relevant. I can post all of it if necessary.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Description" content="CompanyName CompanyProduct">
<title>CompanyName CompanyProduct</title>
<link rel="stylesheet" type="text/css" href="_style.css" media="screen">
<!-- Use after inserting the tabs above navigation bar
<script src="_tabrollover.js" type="text/javascript">
</script>
-->
<style type="text/css">
<!--
body,td,th {
font-family: Tahoma,Arial,Helvetica,sans-serif;
}
-->
</style>
<link href="/_toolbox/_green_button_rollover.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main_container">
<div id="header">
<!--#include virtual="/_ssi/header.asp" -->
<div id="menu">
<ul>
<li><a class="current">Home</a></li>
<li>Why CompanyProduct?</li>
<li>Features</li>
<li>Services</li>
<li>Pricing</li>
<li>Resources</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div class="green_box">
<div class="clock"></div>
<div class="text_content">
<h1><a href="/features/index.asp">Power of<br>
stuff</a></h1>
</div>
<!--begin div for right nav w rollovers, listing top 5 features-->
<!--#include virtual="/_ssi/div_right_nav.asp" -->
<!--end div for right nav w rollovers, listing top 5 features-->
And the rest:
body {
background-color:#D7DFE2;
margin:0px;
padding:0px;
color:#416271;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
}
h1{
padding:5px 0 5px 0;
margin:0px;
font-size:22px;
color:#000004;
font-family: Tahoma, Arial, Helvetica, sans-serif;
text-align: left;
}
h3{
padding:0 0 5px 0;
margin:0px;
font-size:12px;
color:#3898ac;
}
#main_container{
height:auto;
margin:auto;
background-color:#FFFFFF;
width: 900px;
}
#header{
width:900px;
height:auto;
margin:auto;
}
#menu{
width:900px;
height:32px;
padding:0px;
background-color:#416271;
clear: both;
}
#menu ul{
list-style:none;
margin: auto;
display:block;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 140px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
}
#menu ul li{
list-style:none;
display:inline;
float:left;
width:auto;
height:32px;
padding:0px;
line-height:31px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight: bold;
}
#menu ul li a{
height:32px;
width: auto;
float:left;
text-decoration:none;
padding:0 0 0 25px;
margin:0px 3px 0px 3px;
color:#fff;
text-align:center;
position: static;
}
#menu ul li a:hover{
height:31px;
width: auto;
text-decoration:none;
color: #fff;
background:url(images/menu_arrow.gif) no-repeat left;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 25px;
}
#menu ul li a.current{
height:32px;
width: auto;
float:left;
text-decoration:none;
color: #fff;
padding-right: 0;
padding-bottom: 0;
padding-left: 25px;
background-image: url(images/menu_arrow.gif);
background-repeat: no-repeat;
background-position: left;
}
How it should look(looks like this in FF): pic1 http://itsza.ch/pic1.png
How it currently looks(in IE and Chrome): pic2 http://itsza.ch/pic2.png
Use this as a base for the top menu, li's are blocks so you don't need to make them inline.
CSS:
#menu ul li {
list-style:none;
float:left;
}
.clear {
clear:both;
}
HTML:
<div id="menu">
<ul>
<li>...
</ul>
<div class="clear"></div>
</div>
You also have a bunch of redundant rules, try and remove them so it's easier to maintain and read. For example the following rule
#menu ul li a.current {
height:32px;
width: auto;
float:left;
text-decoration:none;
color: #fff;
padding-right: 0;
padding-bottom: 0;
padding-left: 25px;
background-image: url(images/menu_arrow.gif);
background-repeat: no-repeat;
background-position: left;
}
is equivalent to this
#menu ul li a.current {
background:url(images/menu_arrow.gif) left no-repeat;
}
This is because you've just redone rules that already exist on #menu ul li
For list based menus:
Float your LI, not your A-tag
Use display:block on your A-tag
Don't forget to clear your floats.
See my tutorial: I love Lists
All,
http://rich2233.comoj.com/
Three things I want to do:
I need the navigation bar to sit below the header. This is probably
a simple fix, but for the life of me, I can't figure it out.
I need the text in the navigation to be centered vertically.
How do I put some space between the left and right columns?
Thanks for your help! Below is the css code:
body,html {
margin:0;
padding:0;
color:#101010;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
}
p {
margin-top: 30px;
font-size: 16px;
line-height: 1.3em;
padding-bottom: 10px;
text-align: center;
color: #ffffff;
}
p a{
text-decoration: none;
color: #4e6f8c;
}
#wrapper {
width:960px;
margin:0 auto;
padding: 0px;
background:#fff;
}
#header {
padding:5px 10px;
background:#fff;
height:137px;
}
#nav {
padding:5px 10px;
background:#fff;
width: 960px;
height: 40px;
font-size: 15px;
color: #7c7c7c;
text-align: center;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
position: absolute;
bottom: 5px;
}
#nav li {
display:inline;
margin:0;
padding:0;
width:160px;
height: 45px;
float: left;
background-color: #f6f6f6;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
#nav li:hover {
background-color: #df220f;
}
#nav li:hover a{
color: #ffffff;
text-decoration: none;
}
#nav a {
color: #fff;
text-decoration: none;
}
#nav a:link {
color: #7c7c7c;
text-decoration: none;
}
#nav a:visited{
color: #ffffff;
text-decoration: none;
}
#nav a:hover {
color: #ffffff;
text-decoration: none;
}
#nav a:focus {
color: #ffffff;
text-decoration: none;
}
#nav a:active {
color: #ffffff;
text-decoration: none;
}
#leftcontent {
float:left;
width:710px;
height: 300px;
background:#df220f;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
background-image:url('./images/main_placeholder.png');
background-repeat:no-repeat;
background-position:center;
}
h2 {
margin:10px 0 0 20px;
color: #24389b;
font-size: 19px;
padding-bottom: 8px;
}
#rightcontent {
float:left;
width:250px;
background:#df220f;
height: 1%;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
height: 300px;
background-image:url('./images/side_logo.png');
background-repeat:no-repeat;
background-position:bottom center;
}
#footer {
clear:both;
padding:5px 10px;
background:#fff;
}
#footer p {
margin:0;
}
* html #footer {
height:1px;
}
_______ HTML EDIT:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel = "stylesheet" type = "text/css"
href = "./style.css" media = "all" />
</head>
<body>
<div id="wrapper">
<div id="header"><img src="./images/logo.png" alt="Ultrabond Logo" /></div>
<div id="nav">
<ul>
<li>Home</li>
<li>Service<br />Details</li>
<li>Service<br />Request</li>
<li>Crack<br />Repair</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</div>
<div id="leftcontent">
</div>
<div id="rightcontent">
<p>Average cost of a windshield<br />replacement: $240</p><p>Average <i>repair</i> cost: $60</p><p>Just another reason why<br />windshield <i>repair</i> makes sense</p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
First of all your link doesn't work
1) Don't set position: absolute for nav ul
2) Use line-height rule (more detailed here)
3) Use margin or padding. Add margin-left: <whatever you want>px to #rightcontent
For #nav li, you don't need to do display:inline and float: left. I would just use float: left, and then you can adjust spacing using margin.
No need to use position: absolute on #nav ul, but if you are going to use that here is a tip that helps me all the time. If you use position:absolute in a container that you haven't specifically set to position:relative, then the absolute positioning is set to the entire page. However, if you have position:relative set on the container div, then you can absolutely position the child element anywhere within that div.
Like this:
#nav
{
width: 500px;
height: 100px;
position: relative;
}
#nav ul
{
position: absolute;
top: 20px;
right: 200px;
}
this places the #nav ul 20px down from the top and 200px from the right within the #nav div. If the #nav div didn't have position: relative on it.. then the #nav ul would be placed at 20px from the top of the page and 200px from the right of 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 :]