Jump to content

more magic with class's and id's

Brendon Branigin

Recommended Posts

Basicly heres the project im working on.Im converting www.runuo.com new site which uses layout tables and embeded styles into a site which uses css and divs.my biggest problem is getting the html hierarchy to a point where styling can be efficient

  <!-- begin navigation and info -->  <div id="navigation">     <ul>      <li>Home</li>      <li>About</li>      <li>Products</li>      <li>Downloads</li>      <li>Community</li>      <li>Shards</li>    </ul>  </div>  <div class="runuo">     <h1>RUNUO</h1>    <h2>RunUO 2.0.0 is coming</h2>    <ul>      <li><a href="#">Faster Core</a></li>      <li><a href="#">More Features</a></li>      <li><a href="#">64 Bit Support</a></li>      <li><a href="#">Much more...</a></li>    </ul>    <a href="http://www.runuo.com/products.php#1" class="more">More Info</a> </div>  <div class="playuo">     <h1>PLAYUO</h1>    <h2>PlayUO Beta 13</h2>    <ul>      <li><a href="#">Powerful Client</a></li>      <li><a href="#">Convenient Options</a></li>      <li><a href="#">Plugins Enabled</a></li>      <li><a href="#">Much more...</a></li>    </ul>    <a href="http://www.runuo.com/products.php#2" class="more">More Info</a> </div>  <div class="razor">     <h1>RAZOR</h1>    <h2>Razor 1.0.0</h2>    <ul>      <li><a href="#">Powerful Macro's</a></li>      <li><a href="#">Packet Video System</a></li>      <li><a href="#">Custom Titlebar</a></li>      <li><a href="#">Much more...</a></li>    </ul>    <a href="http://www.runuo.com/products.php#3" class="more">More Info</a> </div>  <!-- end navigation and info -->

these 4 items (razor runuo playuo and navigation) all fall in a single rownow each of the h1's share the same characteristics (box size, font size/color etc) but differ in 2 things. 1. the top border (which is a shade darker then the background)2. and the background itself (the 3 different colors)so i figure i should be able to style them based on their locationif the h1 is located within class razor it should have thebg color of #A8B62Btop border of #9DAD26but all h1 should be 165px wide and 30px high white size 18 tahoma font aligned to the right with a 15px right marginnow this is all great but i cant seem to figure out the proper way to name the style and by that i mean h1 { font-family: Tahoma; font-size: 18px; color: #FFFFFF;that covers the properties similar between all h1's but how do i handle the different propertiessorry if this comes off realy confusing :)

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...