Jump to content

A CSS Challenge For You!


Svip

Recommended Posts

Since I am making a new design for my website, I got a brilliant idea.

 

I've made a HTML template, which everyone, who feels like it, can change it's CSS. Since none of the tags in the HTML has any attributes ( other than classes/ids or other relevant attributes such as "type" for <input> ), you can do what ever you feel like.

 

Currently there are only two designs on the list;

 

  1. Standard - created by me, it was the original the design, which then lead to the idea.
  2. For The Brits - created by MisterCow, a member not on these forums, but a person I speak to often, the design was made to appeal for the British, but accordingly, it's not entirely done yet.

And as you would also notice is that there is a small box in the upper right corner, when more designs are added, you can cycle through them all.

 

Here are some relevant information;

 

The template HTML:

 

<body><div id="container"><h1>SiteSlaves</h1><div id="content"><div class="post" id="current_post">   <h2 class="head">       <a name="#post"></a>Hi again <span>by <a href="#">Svip</a> 3 hours ago</span>   </h2>   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vitae diam ac orci suscipit elementum. Vestibulum luctus. Vivamus et quam vel urna nonummy pharetra. Fusce a lectus. Vivamus sit amet odio vitae dui porta faucibus. Pellentesque fringilla nonummy velit.</p>   <p>Nam nisi magna, suscipit non, pharetra quis, placerat eu, metus. In hac habitasse platea dictumst. Vivamus ac mauris eu nulla vestibulum sollicitudin. Quisque egestas est molestie dolor cursus ultrices. Fusce nec ipsum nec massa suscipit pretium.</p>   <div class="foot">       <span>3 comments</span> <a href="#addcomment">Add comment</a>   </div></div><div class="comment">   <h2 class="head">       <a name="comment"></a>Greets <span>by <a href="#">Guest</a> 2 hours ago</span>   </h2>   <p>Good job!</p></div><div class="comment">   <h2 class="head">       Greets <span>by <a href="#">Guest</a> 2 hours ago</span>   </h2>   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis gravida leo sit amet sapien. Nunc commodo. Aliquam sit amet massa eu orci pretium auctor. Vestibulum porta ante in diam. Pellentesque semper. Quisque rutrum feugiat felis. Integer lorem diam, adipiscing in, dictum vel, volutpat a, elit. Sed pellentesque mattis ipsum. Nulla mattis augue non lacus.</p></div><div class="comment">   <h2 class="head">       Greets <span>by <a href="#">Guest</a> 2 hours ago</span>   </h2>   <p>Curabitur venenatis iaculis nisl. Vestibulum libero eros, posuere ultrices, sagittis quis, luctus in, lacus. Ut in nulla. Suspendisse potenti. Sed diam. Vivamus commodo. Ut nulla lorem, imperdiet ac, mollis non, adipiscing eu, neque. Sed convallis. Donec dictum. Cras eget tellus. Donec porta diam eu augue. Donec lobortis lacus vitae nisi. Etiam risus lorem, tempus ut, accumsan at, commodo sit amet, sapien. Integer at mi eu sem tincidunt rhoncus. Pellentesque rutrum. Duis non urna. Nunc ante ipsum, porttitor eu, bibendum sed, rhoncus sed, mi. Aenean non erat. Phasellus sed felis at nulla semper elementum. Praesent in arcu sed mi pharetra faucibus.</p></div><div class="addcomment">   <p><a name="addcomment"></a>Add a comment:       <form method="post">           <fieldset>               <label for="name">Name:</label>               <input type="text" size="12" name="name" id="name" /><br />               <label for="msg">Message:</label>               <textarea cols="12" rows="15" id="msg" name="msg"></textarea><br />               <input type="submit" name="submit" value="Submit" class="submit" />           </fieldset>       </form>   </p></div><div class="post">   <h2 class="head">       Welcome <span>by <a href="#">Svip</a> 6 hours ago</span>   </h2>   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vitae diam ac orci suscipit elementum. Vestibulum luctus. Vivamus et quam vel urna nonummy pharetra. <a href="#">Fusce a lectus.</a> Vivamus sit amet odio vitae dui porta faucibus. Pellentesque fringilla nonummy velit. Nam nisi magna, suscipit non, pharetra quis, placerat eu, metus. In hac habitasse platea dictumst. Vivamus ac mauris eu nulla vestibulum sollicitudin. Quisque egestas est molestie dolor cursus ultrices. Fusce nec ipsum nec massa suscipit pretium.</p>   <div class="foot">       <span>3 comments</span> <a href="#">Add comment</a>   </div></div></div><div id="menu"><ul>   <li><a href="#">Home</a></li>   <li><a href="#">Greets</a></li></ul><ul>   <li><a href="#">Home</a></li>   <li><a href="#">Greets</a></li></ul></div></div></body>

 

 

In reality, that would be all you needed, you can however download a sample CSS here ( though not currently up to date I will though ASAP );

 

sviip.dk/random/new/sample-css.css

 

Well, happy coding! smile.gif

Link to comment
Share on other sites

I would get involved with this but the markup isn't really good enough. It's a lot better than why I last saw it but there's still a little further to go, imho. smile.gif

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
  • 1 User Currently Viewing
    0 members, 0 Anonymous, 1 Guest

×
×
  • Create New...

Important Information

By using GTAForums.com, you agree to our Terms of Use and Privacy Policy.