CSS - Image, Header, Paragraph Alignment

Okay, I'm no newbie on using CSS but the long story short is that I bought software for a shopping cart and had to use their pre-made template in order to keep the peace. I of course, being a web designer changed the template to my own liking, but can NOT get this header centered for the life of me! I have tried everything I know, including things I have looked up, nothing will work.

Here is the main.css (only css file being used)

Code:

body {
     color: #ffffff;
     background-color: #000000;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-weight: normal;
     text-align: left;
     margin:auto;
     text-align:center;
     margin:0 auto;
     }

a {
     color: #d92f2f;
     font-weight: normal;
     text-decoration: underline;
     cursor: pointer;
     }

p {
     margin: 0px 0px 7px 0px;
     }

sup {
     display: inline;
     padding: 0px;
     vertical-align: super;
     font-size: 8px;
     }

a:hover {
     color: #ffb4b4;
     }

legend {
     display: none;
}


label {
     display: none;
}

fieldset {
     border: none;
     padding: 4px 0px 4px 5px;
    }

fieldset p {
     display: block;
     margin: 5px 5px 5px 2px;
     }

form {
     margin: 0px 0px 5px 0px;
     }

img {
     border: none;
     }

li {
     padding-bottom: 5px;
     }

/* +------------------------------------------------------------+ */
/* | General XHTML Classes                                      | */
/* +------------------------------------------------------------+ */

.center {
     text-align: center;
     }

.inlinecenter {
     text-align: center;
     }

p.inline {
     display: inline;
     padding: 0px;
     }

.strong {
     font-weight: bold;
     }

.big {
     font-weight: bold;
     font-size: 16px;
     }

.hidden {
     display: none;
     }

a.unfancy {
     color: #d92f2f;
     font-weight: normal;
     text-decoration: underline;
     cursor: pointer;
     }

/* +------------------------------------------------------------+ */
/* | Skin Specific Divs                                         | */
/* +------------------------------------------------------------+ */


#skin_header {
     height: 230px;
     width: 899px;
     margin:auto;
     padding: 0px;
     background-position: center top;
}
     
#skin_wrapper {
     width: 910px;
     padding: 0px;
     margin:auto;
     }

#skin_wrapper_full {
     width: 100%px;
     padding: 0px;
     margin:auto;
     background-image: url('../media/header.png')
     background-repeat: repeat-x;
     background-position:  top left;
     }

#skin_ct {
     width: 100%;
     padding: 0px;
     margin: auto;
     border-spacing: 0px;
     border-collapse: collapse;
     }

#skin_ct_lcol_head {
     font-size: 16px;
     font-weight: bold;
     padding: 10px;
     margin: auto;
     width: 160px;
     height: 80px;
     }

#skin_ct_rcol_head {
     font-size: 16px;
     font-weight: bold;
     padding: 10px;
     margin: auto;
     height: 80px;
     text-align: right;
     }

#skin_ct_lcol {
     padding: 20px 10px 10px 10px;
     margin: 0px;
     vertical-align: top;
     width: 160px;
     text-align: left;
     }

#skin_ct_mcol {
     padding: 20px 10px 10px 10px;
     margin: 0px;
     vertical-align: top;
     line-height: 150%;
     }

#skin_ct_rcol {
     padding: 2px 10px 10px 10px;
     margin: 0px;
     vertical-align: top;
     width: 160px;
     }

#skin_footer {
     color: #FFFFFF;
     background-color: #000000;
     padding: 50px 10px 10px 10px;
     margin: 0px;
     text-align: center;
     background-image: url('../media/footer.png');
     background-repeat: repeat-x;
     background-position:  top left;
     }

#skin_pgtitle {
     font-size: 16px;
     padding: 0px 0px 4px 0px;
     margin: 0px 0px 10px 0px;
     font-weight: bold;
     border-bottom: 1px solid #999999;
     }

#skin_content {
     margin: auto;
     }

There is more coding but the actual image header is located inside of the #skin_header.

Also, here is the PHP code where the SRC code is located:

Code:

</head>

<body>


<div id="skin_header" align="center">
<img src="skins/Default/media/logo.png" alt="Home" width="899" height="230" align="center" style="margin:auto;"/>
</div>

<div id="skin_wrapper_full"><div id="skin_wrapper">




<table id="skin_ct">

<tr>


<td id="skin_ct_rcol_head" colspan="3">

<div id="skin_menu_head">

<ul>

<?php 
if (!(empty($link_home)))     {print '<li><a href="' . $link_home . '" title="Home">Home</a></li>';}
if (!(empty($link_cart)))     {print '<li><a href="' . $link_cart . '" title="Shopping Cart">Shopping Cart</a></li>';}
if (!(empty($link_checkout))) {print '<li><a href="' . $link_checkout . '" title="Checkout">Checkout</a></li>';}
if (!(empty($link_account)))  {print '<li><a href="' . $link_account . '" title="Your Account">Your Account</a></li>';}
if (!(empty($link_contact)))  {print '<li><a href="' . $link_contact . '" title="Contact">Contact</a></li>';}
?>

</ul>

Please, ANY help would be appreciated, I want to get this site live, pronto. The link is www.PhantomSupplements.net

thank you!

I'm a CSS newbie and this is my very first page that I have to make for a class. I can't figure out how to move my text below/center my headline. Every time it gets close (when I use margins) it jumps right to the bottom.

P.S. If my code seems strange it's because I'm not really sure what I'm doing yet, so if you have any advice/better ways to achieve the same effect, please let me know

HTML:

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Welcome to Jolie Manor Bed and Breakfast</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="style3.css"/>
</head>
<body id="body" onload="">
<div id="wrap">
<img src="manor.jpeg" alt="Manor" class="floatleft" />
<h1> Jolie Manor <br />
<span class="smaller">Bed and Breakfast</span></h1>
<p class="blocktext"> Escape to Jolie Manor, a luxury waterfront bed and breakfast on the eastern shore, where the Chesapeake Bay is aglow in warm sunsets, where towering oaks gently kiss the skyline and where you can let your body rest and your mind wander.</p>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home Page</a></li>
<li><a href="assignment32.html">Amenities</a></li>
<li><a href="#">Rates</a></li>
<li><a href="#">Local Features</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>

</body>
</html>


CSS:


body
{
width: 800px;
height: 620px;
background-color: rgb(171,214,212);
}

#wrap
{
width: 100%;
height: 100%;
background-image:url(book2.tif);
background-repeat:no-repeat;
background-position: center;
}

h1
{
color: rgb(69,38,26);
font-family: serif;
margin-right: 150px;
margin-top: 100px;
margin-left: 0px;
float: right;
font-size: 2em;


}

.blocktext

{
margin-left: 10px;
margin-right: 0px;
width: 10em;
float: right;
margin-top: 170px;
margin-bottom: 0px;
}

p

{
color: rgb(69,38,26);
font-family: serif;

}


.floatleft
{
margin-left: 60px;
margin-top: 145px;

}
.smaller {
font-size: .75em;
}

#navcontainer
{
background: #f0e7d7;
margin: 0 auto;
padding: 1em 0 0 0;
font-family: georgia, serif;
text-transform: lowercase;
position:fixed; top:5px;

}
#navcontainer ul
{
padding: .2em 0;
margin: 0;
list-style-type: none;
background-color: rgb(69,38,26);
color: #FFF;
width: 100%;
font: normal 90% arial, helvetica, sans-serif;
text-align: center;
position:fixed; top:5px;
}

li { display: inline; }

li a
{
text-decoration: none;
background-color: rgb(69,38,26);
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #fff;
}

li a:hover
{
background-color: #369;
color: #fff;
}

Hey folks,

i'm just doing some experimenting with css right now, and hit a snag.

if you look at the page, you'll see 'howdy' inside the top negative. i'm trying to format the text to fit inside the middle section of the negatives...one negative per paragraph. Whenever i try formatting it, it shifts the image downward, and i don't know what to do to fix it.

CSS
Code:

.ptext {
font:10px verdana, arial, sans-serif;
color:white;
padding:50px 60px;
width:350px;
height:375px;
}

p {
background:black url(images/negative.gif) no-repeat left;
height:375px;
width:350px;
}

HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>black/white - some kinda website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="35mm_styles.css" rel="stylesheet" type="text/css">
</head>

<body>
	
<div id="container"> 
<h1></h1>
<p>
	<span class="ptext">howdy.</span>
</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>

any help'd be greatly appreciated.

Hi
Please see
watermark.sc
It works fine in Firefox but
header alignment is not proper in IE
What might be the problem?
San

Every div was aligned correctly until I added gallery-wrapper and tried to position it on empty blue space on the left under the menu div. Now its a mess.


http://aysetunceltaste.refinethetaste.com


header html
Code:

<div id="wrapper">
    	<div id="header">
        	<div class="callus">
            	<p>
                    Ayse Taste - PO Box 373 - Westfield, New Jersey 07090
                    <br />
                    <a href="mailto:info@aysetaste.com">info(AT)aysetaste(DOT)com</a>

				</p>
                <h3>1 973 563 0870</h3>
			</div>
            <div id="menu">       
                <ul class="lamp">
                    <li><a href="default.asp">HOME</a></li>
                    <li><a href="#">ABOUT AYSE</a></li>
                    <li><a href="#">RECIPES</a></li>

                    <li><a href="menus.asp">MENUS</a></li>
                    <li><a href="#">CATERING</a></li>
                    <li><a href="#">CONTACT US</a></li>
                </ul>            
			</div>

<style>

#header #gallery-wrapper { float:left; width:350px; height:120px; overflow:hidden; }
#header #gallery-wrapper .gallery-pagination { float:left; }
#header #gallery-wrapper .gallery-more { float:left; }

</style>

            <div id="gallery-wrapper">

                <div class="gallery-pagination"> 
                    <a href="#" class="prev">Previous</a> 
                    <a href="http://eisabainyo.net/demo/images/image2.jpg" class="next" title="Harbour Bridge" rel="2">Next</a> 
                    <span>Photo <span class="current-pos"></span> of <span class="total-pos"></span></span> 
                </div>
                <div class="gallery-more">
                    <ul>
                        <li><a href="http://eisabainyo.net/demo/images/image1.jpg" title="Opera House" class="t1 active"><img src="http://eisabainyo.net/demo/images/thumb1.jpg" width="60" height="50" alt="Opera House" /><span>Opera House</span></a></li>

                        <li><a href="http://eisabainyo.net/demo/images/image2.jpg" title="Harbour Bridge" class="t2"><img src="http://eisabainyo.net/demo/images/thumb2.jpg" width="60" height="50" alt="Harbour Bridge" /><span>Harbour Bridge</span></a></li>
                        <li><a href="http://eisabainyo.net/demo/images/image3.jpg" title="Sydney from the above" class="t3"><img src="http://eisabainyo.net/demo/images/thumb3.jpg" width="60" height="50" alt="Sydney from the above" /><span>Sydney from the above</span></a></li>
                        <li><a href="http://eisabainyo.net/demo/images/image4.jpg" title="Sydney Buildings" class="t4"><img src="http://eisabainyo.net/demo/images/thumb4.jpg" width="60" height="50" alt="Sydney Buildings" /><span>Sydney Buildings</span></a></li>
                        <li><a href="http://eisabainyo.net/demo/images/image5.jpg" title="The Iconic Opera House" class="t5"><img src="http://eisabainyo.net/demo/images/thumb5.jpg" width="60" height="50" alt="The Iconic Opera House" /><span>The Iconic Opera House</span></a></li>
                    </ul>
                </div>
            </div>

        	<div class="logo"></div>
      	</div>

header css
Code:

#header { float:left; width:790px; height:260px; background: url(../images/bg_header.gif) no-repeat; padding:0 5px 0 5px; position:relative; }

#header .callus { float: left; width: 790px; height:60px; color:#FFF; display:inline; }
#header .callus h3 { float:left; font-size:36px;  }
#header .callus p { float:right; text-align:right; font-size: 12px; line-height:20px; }

#header #menu { float:left; width: 350px; margin: 0; }
#header #menu ul {margin:0px; padding:0px; }
#header #menu li { float: left; height:30px; list-style: none; }
#header #menu li.backLava { background-color:#a9b3e3; position: absolute; }
#header #menu li a { font-size:14px; font-family: "Trebuchet MS",Vedana,Geneva; text-decoration: none; padding: 8px; display: block; float: left;
position: relative; z-index:10; }

#header .logo { float:left; width:440px; height:200px; background:url(../images/Logo.gif) 20px 10px no-repeat; position:relative; }

#header #gallery-wrapper { float:left; width:350px; height:120px; overflow:hidden; }
#header #gallery-wrapper .gallery-pagination { float:left; }
#header #gallery-wrapper .gallery-more { float:left; }