sonicphantasm Posted April 23, 2012 Report Share Posted April 23, 2012 (edited) Hi! I'm afraid I'm ignorant to something here, as I've been trying to apply particular effects via css on this simple site, but cannot figure it out! Before I make even more of a code mess, I thought I'd see if anyone with a clue could help point me in some direction as to what it might be... thank you for your help! INDEX: body {height:auto;background-color:black;margin: 10px auto;}#main {width:1280;background-image:url(images/bg.jpg);margin-left:auto;margin-right:auto;background-repeat:no-repeat;} #header {width:1280;margin:50 0 0 0;background-image:url('images/logo.png');background-repeat:no-repeat;}div.nav {background-color:black;}#navigation {font-size: 20px;font: center;} #content {background-image:url(images/black.png);margin:15px;} ul{list-style-type:none;margin:0;padding:0;overflow:hidden;background-image:url('black.png');}li{float:left;}a:link, a:visited{display:block;padding:0px 35px;width:100%;font-weight:bold;color:white;text-align:center;text-decoration:none;text-transform:uppercase;} NAVIGATION PHP: <ul id="nav"><div class="nav"><li><a href="#home">MUSIC</a></li><div><li><a href="#film">FILM SCORE</a></li><li><a href="#production">PRODUCTION / MARKETING</a></li><li><a href="#store">BURN MONEY</a></li><li><a href="#contact">CONTACT / CONNECT</a></li><li><a href="http://www.facebook.com/pages/Sonic-Phantasm/264240086960916"><img src="images/icons/facebook.png" width="50" height="50" alt="facebook" /></a><a href="https://plus.google.com/103043756662788803432/posts"><img src="images/icons/googleplus-icon.png" width="50" height="50" alt="googleplus" /></a></li></ul>CSS: body {height:auto;background-color:black;margin: 10px auto;}#main {width:1280;background-image:url(images/bg.jpg);margin-left:auto;margin-right:auto;background-repeat:no-repeat;} #header {width:1280;margin:50 0 0 0;background-image:url('images/logo.png');background-repeat:no-repeat;}div.nav {background-color:black;}#navigation {font-size: 20px;font: center;} #content {background-image:url(images/black.png);margin:15px;} ul{list-style-type:none;margin:0;padding:0;overflow:hidden;background-image:url('black.png');}li{float:left;}a:link, a:visited{display:block;padding:0px 35px;width:100%;font-weight:bold;color:white;text-align:center;text-decoration:none;text-transform:uppercase;} Edited April 23, 2012 by sonicphantasm Link to comment Share on other sites More sharing options...
eTianbun Posted April 23, 2012 Report Share Posted April 23, 2012 What is the CSS suppose to do and what is it not doing? Link to comment Share on other sites More sharing options...
sonicphantasm Posted April 23, 2012 Author Report Share Posted April 23, 2012 Okay, I have some of my issues worked out. Now, I'm trying to center the page, so I put margin-left:auto; margin-right:auto but it stays on the left. I'm also trying to have the entire background show (the pale image) but that's not really going how I thought, either... index.php: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Sonic Phantasm Entertainment</title><style type="text/css">body,td,th { font-family: "Lucida Console", Monaco, monospace;}</style><link href="style.css" rel="stylesheet" type="text/css" /><style type="text/css">></style></head><body><div id="main"><div id="header"><?php include("header.php"); ?><div id="navigation"><?php include("navigation.php"); ?></div><div id="content"><?php include("new.php"); ?></div></body></html> css: body { height:auto; background-color:black; margin: 10px auto; }#main { margin-left:auto; margin-right:auto; width:1280; background-image:url(images/bg.jpg); background-repeat:no-repeat; height: 100%;}#header { width:1280; margin:50 50 0 0; background-image:url('images/logo.png'); background-repeat:no-repeat;}#nav {background-image:url(images/black.png);margin:5;}div.navigation { font-size: 20px; font: center; }#content {background-image:url(images/black.png);width: 1200px;margin-top:20px;margin-bottom:20px;margin-left:auto;margin-right:auto;-moz-border-radius: 15px;border-radius: 15px;padding:15px;color:white;} ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}li{float:left;}a:link, a:visited{display:block;padding:0px 10px;width:100%;font-weight:bold;color:white;text-align:center;text-decoration:none;text-transform:uppercase;float:left;background-image:url('black.png');}a:hover{text-decoration:underline;} Link to comment Share on other sites More sharing options...
dsonesuk Posted April 23, 2012 Report Share Posted April 23, 2012 (edited) width:1280; is not going to help, as the unit is going to be required for margin: 0 auto; to work as in width:1280px; also the same for margin:50 50 0 0; should be margin:50px 50px 0 0; not required for 0 as 0 is the same for all units whatever unit used. Edited April 23, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
sonicphantasm Posted April 23, 2012 Author Report Share Posted April 23, 2012 thankyou dsonesuk! The content is now centered, though I've tried the same thing for the body abd main divs, but they don't seem to cooperate with my intent! I'm an amatuer at best when it comes to this, so all help is greatly appreciated. Another issue- I want the bg.jpg to show entirely, even if the content doesn't fill it completely.. is there a css code for doing that? Again, thank you! CSS: body { height:auto; background-color:black; width:1280 px; margin: 50px 50px 0 0; }#main { background-image:url(images/bg.jpg); background-repeat:no-repeat;}#header { width:1280px; margin:50px 50px 0 0; background-repeat:no-repeat; padding: 10px 0px 0px }#nav {background-image:url(images/black.png);margin:5;}div.navigation { font-size: 20px; font: center; }#content {background-image:url(images/black.png);width: 1200px;margin-top:20px;margin-bottom:20px;margin-left:auto;margin-right:auto;-moz-border-radius: 15px;border-radius: 15px;padding:15px;color:white;}#footer {color: black;}ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}li{float:left;}a:link, a:visited{display:block;padding:0px 10px;width:100%;font-weight:bold;color:white;text-align:center;text-decoration:none;text-transform:uppercase;float:left;background-image:url('black.png');}a:hover{text-decoration:underline;} index.php: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Sonic Phantasm Entertainment</title><style type="text/css">body,td,th { font-family: "Lucida Console", Monaco, monospace;}</style><link href="style.css" rel="stylesheet" type="text/css" /><style type="text/css">></style></head><body><div id="main"><div id="header"><?php include("header.php"); ?><div id="navigation"><?php include("navigation.php"); ?></div><div id="content"><?php include("new.php"); ?><div id="footer"><?php include("footer.php"); ?></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted April 23, 2012 Report Share Posted April 23, 2012 (edited) use the background-image for body, remove width: margin: from body and add to #main, height: auto; is not required for body as it height: auto; by default, ALL div element are block elements, which means they will stretch to the total width available to them, unless float, or position: absolute, or fixed is used, meaning you don't have to define width: 1280px; to these elements. You also seem to have the closing div tags missing? IF the #main is the outer container, you should have it similar to below. body {/*height:auto;*/background-color:black;background-image:url(images/bg.jpg);background-repeat:no-repeat;/*margin: 50px 50px 0 0; dont know what this supposed to do? values relate to margin: top right bottom left; */} #main {width:1280 px; margin: 0 auto;} #header {/*width:1280px;margin:50px 50px 0 0;background-repeat:no-repeat; block element will stretch to total width, margins?????? background-repeat?? no background-image to repeat */padding: 10px 0px 0px }#nav {background-image:url(images/black.png);margin:5px;}div.navigation {font-size: 20px;/*font: center; no such styling*/text-align: center;} #content {background-image:url(images/black.png);width: 1200px;/*margin-top:20px;margin-bottom:20px;margin-left:auto;margin-right:auto;*/margin: 20px auto; /* shorten*/-moz-border-radius: 15px;border-radius: 15px;padding:15px;color:white;} <div id="main"> <div id="header"><?php include("header.php"); ?></div><!-- end header --> <div id="navigation"><?php include("navigation.php"); ?></div><!-- end navigation --> <div id="content"><?php include("new.php"); ?></div><!-- end content --> <div id="footer"><?php include("footer.php"); ?></div><!-- end footer --> </div><!-- end main --> Edited April 23, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
sonicphantasm Posted April 25, 2012 Author Report Share Posted April 25, 2012 Thank you for all your help! Very happy with how it's turned out, and can't thank you enough for your time in this... -SP Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now