MikeyZ Posted April 7, 2014 Share Posted April 7, 2014 (edited) 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. 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 April 9, 2014 by MikeyZ Link to comment Share on other sites More sharing options...
MikeyZ Posted April 9, 2014 Author Share Posted April 9, 2014 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. 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