Question:

New to CSS...need help with simple stuff?

by | earlier

I just started using CSS yesterday. I need help centering my top header things. I also can not figure out how to line up the borders on the sides. Any help for a beginner would be greatly appreciated! Or good tutorials on how to do those 2 things. Here is the link to the site http://www.littlebeecraft.com/teststuff/test.html

Tags:

Report

Answer The Question I've Same Question Too

Follow Question

5 ANSWERS

Sort By: Date | Rating

To center your header, get rid of the position values and put "margin: 5 auto" instead. This will make the header 5 px from the top and the rest (left, right, bottom) will be "automatically" determined so that it will be in the center of the page.

I think the borders on the side are not lined up because of this:

.top_menu ul li

{

display: inline;

line-height: 52px;

padding-left: 3px;

margin:0 10px 0 0;

}

The "padding-left: 3 px;" is causing the problem. I suggest changing it to padding-right instead.
Report (0) (0) | earlier
I think all you need to do to line up the borders is make the pageheader and top_menu classes the same width. One is 792px and the other is 800px.

I took the liberty of  making your background image seamless using the GIMP. I hope you don't mind. http://i35.tinypic.com/n6os91.jpg This picture is not as sharp as the one you are using now but the edges should line up when it's tiled.

EDIT: make both 800px if that doesn't work, center them with HTML (<center></center>) or enclose them in another div with a width of 800px and possibly put the borders on that new div (call it something like 'header_menu_container').

different browsers display css differently. This is a nightmare.

http://www.456bereastreet.com/archive/20...

by the way, if you just started with css yesterday, you're doing really good!

EDIT the Sequel:

don't change anything but this and it will line up (at least in firefox)

.top_menu

{

position: relative; left: -3px;

        background: #FFF6CC;

height: 52px;

        width: 795px;
Report (0) (0) |   earlier
Try this - works fine if you content is higher than your left menu

<html>

<head>

<style type="text/css">

body

{

background-image: url(test_files/background.jpg);

background-color: #000000

}

.pageheader

{

text-align:left;

margin: 0 auto;

background: #ffffff;

border: #000000 5px solid;

width: 800px;

color: #000000;

overflow:auto;

}

.pageheader img {

float:left;

}

a.p2 {

float:right;

color:#0000ff;

line-height:45px;

}

.top_menu ul

{

ont-family:Tahoma, Georgia, Arial, Verdana, Serif;

text-transform:uppercase;

background: #FFF6CC;

clear:both;

margin:0;

padding:0;

}

.top_menu ul li

{

display: inline;

line-height: 52px;

margin:0 10px 0 0;

}

.top_menu ul li a

{

padding: 8px;

font-size: 12px;

font-weight: bold;

color:#4A4A24;

}

.top_menu ul li a:hover, .top_menu ul li.current_page_item a

{

background: #fff url('img/a18.gif') repeat-x top;

color: #4A4A24;

text-decoration: none;

}

.left_menu ul{

margin:0;

padding:10px;

list-style-type:none;

}

.left_menu{

position:absolute;

top:0;

left:-200px;

}

.writing_main_body

{

position:relative;

border-left:#FFCCCC 200px solid;

}

</style>

</head>

<body>

<center>

<div class="pageheader">

<img src="test_files/logo.gif" alt="logo" width="322" height="45" />

<a class="p2" href="http://www.craftroad.com/register.... Your Business or Event NOW!</a>

<div class="top_menu">

<ul>

<li><a href="/test.html">Home</a> </li>

<li><a href="/about.html">About</a></li>

<li><a href="/faq.html">FAQ</a></li>

<li><a href="/advertising.html">Advertising</a>...

<li><a href="/contact.html">Contact</a></li>

</ul>

</div>

<div class="main_body">

<div class="writing_main_body">

Text here

<div class="left_menu">

<ul>

<li><a href="">Item 1</a> </li>

<li><a href="">Item 2</a></li>

<li><a href="">Item 3</a></li>

<li><a href="">Item 4</a></li>

<li><a href="">Item 5</a></li>

</ul>

</div>

</div>

</div>

</div>

</center>

</body>

</html>
Report (0) (0) | earlier
.pageheader

{      margin: 0 auto;

background: #ffffff;

        border-color: black;

        border-top-style: solid;

        border-left-style: solid;

        border-right-style: solid;

width: 800px;

height: 45px;

color: #FFFFFF;

padding-left: 0px;

}

.top_menu

{

position: relative;

        background: #FFF6CC;

height: 52px;

        width: 800px;

padding: 0 0px 0 5px;

margin: 0px 0 19px 0;

font-family:Tahoma, Georgia, Arial, Verdana, Serif;

text-transform:uppercase;

        border-color: black;

        border-right-style: solid;

        border-left-style: solid;

}

Report (0) (0) |   earlier
.pageheader

{

        margin:10px auto;

background: #ffffff;

        border-color: black;

        border-top-style: solid;

        border-left-style: solid;

        border-right-style: solid;

width: 800px;

height: 45px;

color: #FFFFFF;

}

This will center align your div, just copy over your old code.
Report (0) (0) |   earlier