Jump to content
sonicphantasm

CSS not happening?

Recommended Posts

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 by sonicphantasm

Share this post


Link to post
Share on other sites

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;}

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...