Jump to content

[Problem solved!] Please help, trying to make a DIV centered in page? Among other issues...


Recommended Posts

I'm trying to make a site for senior project (A huge project in our school where we show skills we learn on our own), and I'll just come right out I have no idea what I'm doing. I'm surprised I have what I've got already.


I'm trying to make a CSS document that makes it look like this image I'm about to attach, but so far, the CSS doc I've got looks nasty. Utterly colorless, and when I try adding color to the sides it just doesn't work. See attached image to see what I'm looking for. post-172400-0-10510600-1396885046_thumb.png



I'm not sure how to make this work however. And I've got 3 or 4 versions and methods I've attempted, and failed miserably at each. Here's my best one. Can I get some help? (And don't worry about logo placement, I'll fix that on my own after I get the rest figured out)



@import url(http://fonts.googleapis.com/css?family=Philosopher);@font-face{font-family: rex;src: url(Fonts/rex.otf)} body{color: #FFFFFF;background-color: #7BD148;font-family: "philosopher", "Palatino Linotype", "Book Antiqua", Palatino, serif;text-indent: 25px;}.NavBar{color: #FFFFFF;background-color:#000000;font-family: "rex", "Arial Black", Gadget, sans-serif;text-indent: 25px;padding: 0;display: inline;text-align: center;width: 100%;float: left;margin: 0;list-style: none;background-color: #000000;border-bottom: 2px solid #d9d9d9;border-top: 2px solid #FFFFFF;}h1{text-align: center;font-weight: bold;font-size: 250%;font-family: "rex", "Arial Black", Gadget, sans-serif;}.article{-webkit-column-count:3; /* Chrome, Safari, Opera */-moz-column-count:3; /* Firefox */column-count:3;-webkit-column-gap:40px; /* Chrome, Safari, Opera */-moz-column-gap:40px; /* Firefox */column-gap:40px;-webkit-column-rule:4px outset #7BD148; /* Chrome, Safari, Opera */-moz-column-rule:4px outset #7BD148; /* Firefox */column-rule:4px outset #7BD148;background-color: #000000;margin-left:25px; margin-right:25px; }.stronger {font-weight: bold;}.tab{display: block;padding: 8px 15px;text-align: center;display: inline;border-right: 1px solid #000000;border-left: 1px solid #000000;}a:link {text-decoration:none;color:#00ADDC;}    /* unvisited link */a:visited {text-decoration: none;color: #A47AE2;} /* visited link */a:hover {text-decoration: underline;color: #7BD148;}   /* mouse over link */a:active {text-decoration: underline;color: #FF7436}  /* selected link */
<!DOCTYPE html><html lang="en"> <head>  <title>Template HTML page. </title>  <meta content="text/html; charset=windows-1252" http-equiv="content-type">  <link rel="stylesheet" type="text/css" href="style/theme.css"> </head> <body>  <div class="NavBar">   <ul class="NavBar">    <li class="tab"><a href="index.html">   Home          </a></li>    <li class="tab"><a href="challenges">   Challenges    </a></li>    <li class="tab"><a href="impact">       Impact        </a></li>    <li class="tab"><a href="powersources"> Power Sources </a></li>    <li class="tab"><a href="action">       Action        </a></li>   </ul>  </div>  <div class="headline">   <h1>    <p><img src="graphics/construction.png" width="728" height="90" alt="This site is under construction..."></p>    <p><img src="graphics/banners/logo.png" alt="Energized."></p>    <p> </p>    <p>Template for Energized.</p>   </h1>  </div>  <div class="article">   <p>            Nearly  everyone is concerned about how much fuel we use, either in the form of how  much we spend on fuel or about global warming. Either way, we're paying for the  energy we use to do nearly everything in our lives. Transportation, games,  cleaning, cooking, construction, light, internet, EVERYTHING in our lives costs  fuel. And everyone has a reason to cut back on fuel usage. There are ways to  cut back on fuel usage, either by picking up a skill or simply making a new  habit (or breaking one). But how effective is this? Well, it's different for  everyone, but I bet that it can be reduced by half for some folks.</p>   <p>Will it work for you? I can't tell, but I can help you to find out for yourself. Go ahead!<!--zzz...zZz...ZzZ...ZZZ...--> </p> </div>  </body></html>
Edited by MikeyZ
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...