Jump to content
Sign in to follow this  
MikeyZ

[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)

 

CUE WALL OF CODE!

@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

Share this post


Link to post
Share on other sites

Well......... might be talking to myself here as I didn't get any replies, but after playing around I found it works to move all the div's inside the Article div and change the body background... Case closed.

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...
Sign in to follow this  

×
×
  • Create New...