CSS Standards Pastebin & Testcase Collaboration Tool
Brought to you by those fine folks at CSS Standards.
Posted by troublesome on Tuesday, May 8th, 2007 at 21:04
Description & Notes
Either update this post and resubmit it with changes, or
* Validate Markup
* Validate CSS
* View as Web Page
* Download as Text
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
text-align: center;}
div.layout{
width:800px; height: 100%; margin: 0 auto; text-align:left; background: transparent;}
div.externallinks{
float: left; background-color: #000000; width: 196px; height: 150px; display: inline;}
img.some_logo{
float: right; width: 604px; height: 150px;}
div.sidebarlinks{
float: left; background-color: pink; width: 196px; height: 100%; display: inline;}
div.quicklinks{
float: right; background-color:#0066FF; width: 604px; height: 40px;}
div.content{
position:absolute;left:55%;top:55%;float: right; background-color: #ffffff; width: 604px; height: 100%; border-right: thin solid #000000;
border-bottom: thin solid #000000;}
.rollover{
text-decoration: none; color:#Ffffff; font-weight: bold;}
a.rollover:hover{
background-color: #ABE0FF;}
</style>
<title>Thanks For Assisting Me</title>
</head>
<body>
<div class="layout">
<div class="externallinks">
<a class="rollover" href="#">link1</a>
<a class="rollover" href="#">link2</a>
<a class="rollover" href="#">link3</a>
<a class="rollover" href="#">link4</a>
<a class="rollover" href="#">link5</a>
<a class="rollover" href="#">link6</a>
<a class="rollover" href="#">link7</a>
<a class="rollover" href="#">link8</a> </div>
<img class="some_logo" src="anything.gif"><!--This image can be replaced with <div
class="some_logo">GRAPHIC</div> with the dimensions of width: 604; height: 150; in CSS-->
<div class="sidebarlinks">
<ul>
<li><a class="rollover" href="#">link15</a></li>
<li><a class="rollover" href="#">link16</a></li>
<li><a class="rollover" href="#">link17</a></li>
62.
<li><a class="rollover" href="#">link18</a></li>
63.
<li><a class="rollover" href="#">link19</a></li>
64.
<li><a class="rollover" href="#">link20</a></li>
65.
<li><a class="rollover" href="#">link21</a></li>
66.
<li><a class="rollover" href="#">link22</a></li>
67.
<li><a class="rollover" href="#">link23</a></li>
68.
<li><a class="rollover" href="#">link24</a></li>
69.
</ul>
70. </div>
71.
72.
<div class="quicklinks">
73.
<a class="rollover" href="#">link9</a>
74.
<a class="rollover" href="#">link10</a>
75.
<a class="rollover" href="#">link11</a>
76.
<a class="rollover" href="#">link12</a>
77.
<a class="rollover" href="#">link13</a>
78.
<a class="rollover" href="#">link14</a>
79. </div>
<div class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pede. Nulla rutrum fermentum neque. Suspendisse
potenti. Maecenas eget dolor sed enim facilisis consectetuer. Ut urna lectus, posuere et, varius vel, gravida a,
ipsum. In turpis. Maecenas ut eros. Nulla felis. Quisque pharetra tempus tortor. Aliquam placerat nunc eget velit
mattis mattis. Ut consectetuer mauris quis sem. Morbi vehicula tellus et odio. Integer lacinia pulvinar purus.
Sed augue magna, venenatis ac, ultrices quis, laoreet id, augue. Nunc volutpat, neque ac lobortis rhoncus, purus
mauris dictum nulla, et sagittis mi arcu at justo. Curabitur aliquet tortor cursus eros rhoncus venenatis. Sed
non justo. Fusce eleifend est quis eros.
Proin libero augue, volutpat ac, porttitor non, adipiscing id, pede. Curabitur lacus justo, volutpat quis,
pretium quis, euismod eget, purus. Donec urna neque, lacinia eu, porta ut, vulputate ac, ligula. Vivamus suscipit
tincidunt nulla. Mauris aliquet sodales dui. Donec massa metus, viverra eget, viverra at, iaculis ac, nunc.
Aenean porta. Nunc orci leo, blandit sed, bibendum vel, volutpat eget, nibh. Duis a tellus ac dui eleifend
fringilla. Nunc interdum sodales purus. In imperdiet.
Nunc egestas porttitor sapien. Vivamus arcu. Suspendisse blandit velit. Praesent urna velit, faucibus ut,
hendrerit quis, iaculis nec, magna. Sed fermentum suscipit nisi. Sed ac urna. Ut condimentum diam elementum quam.
Donec non risus in quam porttitor porta. Nulla facilisi. Aenean velit. Donec vestibulum, dui quis placerat
luctus, mi elit porta augue, at sollicitudin enim erat nec eros. Cras quis turpis in erat egestas rhoncus. Donec
pretium risus sed justo. Nullam porta, elit in eleifend accumsan, eros erat sodales massa, quis gravida ante pede
venenatis dolor. Nam elit nunc, porttitor sit amet, facilisis sit amet, vestibulum non, nulla. Ut arcu.
In sed ligula non leo convallis auctor. Etiam lacinia hendrerit dui. Duis sed purus. Sed tellus. Cras vitae
dolor. Nulla tincidunt bibendum orci. Nam aliquet tempor pede. Quisque adipiscing lobortis risus. Phasellus
convallis massa in neque. Donec libero.
Nam at augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc ut
ligula. In quis libero. Ut convallis ultrices tellus. Integer lobortis. Mauris sem mauris, semper vel, viverra
non, cursus sagittis, magna. Donec congue, ligula a gravida tincidunt, pede ipsum tincidunt quam, eget rutrum
sapien lorem ut sem. Morbi sem leo, hendrerit vel, cursus non, sollicitudin in, turpis. Proin semper diam et
tortor. Vestibulum congue aliquet leo. Phasellus vestibulum. Sed vestibulum erat eget ipsum.
<!--Content ends here-->
138.
139. </div>
140. </div>
141.
142.
</body>
143.
</html>
* Validate Markup
* Validate CSS
* View as Web Page
* Download as Text
Permalink to this entry: http://paste.css-standards.org/11886
Submit Your Modifications Below
Your Name
Remember Your Name?
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css">
body { text-align: center;} div.layout{
width:800px;
height: 100%;
margin: 0 auto;
text-align:left;
background: transparent;
position: absolute;
left: 7px;
top: 14px;
} div.externallinks{ float: left; background-color: #000000; width: 196px; height: 150px; display: inline;} img.some_logo{ float: right; width: 604px; height: 150px;} div.sidebarlinks{ float: left; background-color: #858494; width: 196px; height: 100%; display: inline;} div.quicklinks{
float: none;
background-color: #990000;
width: 604px;
height: 40px;
clear: none;
position: absolute;
top: auto;
left: auto;
} div.content{
float: right;
background-color: #ffffff;
width: 606px;
height: 469px;
border-right: thin solid #000000;
border-bottom: thin solid #000000;
position: absolute;
left: 200px;
top: 369px;
} /*.sidebarlinks a{}*/ .rollover{ text-decoration: none; color:#Ffffff; font-weight: bold;} a.rollover:hover{ background-color: #ABE0FF;} </style>
<title>Thanks For Assisting Me</title> </head> <body> <div class="layout"> <div class="externallinks"> <a class="rollover" href="#">link1</a> <a class="rollover" href="#">link2</a> <a class="rollover" href="#">link3</a> <a class="rollover" href="#">link4</a> <a class="rollover" href="#">link5</a> <a class="rollover" href="#">link6</a> <a class="rollover" href="#">link7</a> <a class="rollover" href="#">link8</a> </div> <img class="some_logo" src="anything.gif"><!--This image can be replaced with <div class="some_logo">GRAPHIC</div> with the dimensions of width: 604; height: 150; in CSS--> <div class="sidebarlinks"> <ul> <li><a class="rollover" href="#">link15</a></li> <li><a class="rollover" href="#">link16</a></li> <li><a class="rollover" href="#">link17</a></li> <li><a class="rollover" href="#">link18</a></li> <li><a class="rollover" href="#">link19</a></li> <li><a class="rollover" href="#">link20</a></li> <li><a class="rollover" href="#">link21</a></li> <li><a class="rollover" href="#">link22</a></li> <li><a class="rollover" href="#">link23</a></li> <li><a class="rollover" href="#">link24</a></li> </ul> </div> <div class="quicklinks"> <a class="rollover" href="#">link9</a> <a class="rollover" href="#">link10</a> <a class="rollover" href="#">link11</a> <a class="rollover" href="#">link12</a> <a class="rollover" href="#">link13</a> <a class="rollover" href="#">link14</a> </div>
<div class="content"> <!--Content starts here--> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pede. Nulla rutrum fermentum neque. Suspendisse potenti. Maecenas eget dolor sed enim facilisis consectetuer. Ut urna lectus, posuere et, varius vel, gravida a, ipsum. In turpis. Maecenas ut eros. Nulla felis. Quisque pharetra tempus tortor. Aliquam placerat nunc eget velit mattis mattis. Ut consectetuer mauris quis sem. Morbi vehicula tellus et odio. Integer lacinia pulvinar purus. Sed augue magna, venenatis ac, ultrices quis, laoreet id, augue. Nunc volutpat, neque ac lobortis rhoncus, purus mauris dictum nulla, et sagittis mi arcu at justo. Curabitur aliquet tortor cursus eros rhoncus venenatis. Sed non justo. Fusce eleifend est quis eros. Proin libero augue, volutpat ac, porttitor non, adipiscing id, pede. Curabitur lacus justo, volutpat quis, pretium quis, euismod eget, purus. Donec urna neque, lacinia eu, porta ut, vulputate ac, ligula. Vivamus suscipit tincidunt nulla. Mauris aliquet sodales dui. Donec massa metus, viverra eget, viverra at, iaculis ac, nunc. Aenean porta. Nunc orci leo, blandit sed, bibendum vel, volutpat eget, nibh. Duis a tellus ac dui eleifend fringilla. Nunc interdum sodales purus. In imperdiet. Nunc egestas porttitor sapien. Vivamus arcu. Suspendisse blandit velit. Praesent urna velit, faucibus ut, hendrerit quis, iaculis nec, magna. Sed fermentum suscipit nisi. Sed ac urna. Ut condimentum diam elementum quam. Donec non risus in quam porttitor porta. Nulla facilisi. Aenean velit. Donec vestibulum, dui quis placerat luctus, mi elit porta augue, at sollicitudin enim erat nec eros. Cras quis turpis in erat egestas rhoncus. Donec pretium risus sed justo. Nullam porta, elit in eleifend accumsan, eros erat sodales massa, quis gravida ante pede venenatis dolor. Nam elit nunc, porttitor sit amet, facilisis sit amet, vestibulum non, nulla. Ut arcu. In sed ligula non leo convallis auctor. Etiam lacinia hendrerit dui. Duis sed purus. Sed tellus. Cras vitae dolor. Nulla tincidunt bibendum orci. Nam aliquet tempor pede. Quisque adipiscing lobortis risus. Phasellus convallis massa in neque. Donec libero. Nam at augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc ut ligula. In quis libero. Ut convallis ultrices tellus. Integer lobortis. Mauris sem mauris, semper vel, viverra non, cursus sagittis, magna. Donec congue, ligula a gravida tincidunt, pede ipsum tincidunt quam, eget rutrum sapien lorem ut sem. Morbi sem leo, hendrerit vel, cursus non, sollicitudin in, turpis. Proin semper diam et tortor. Vestibulum congue aliquet leo. Phasellus vestibulum. Sed vestibulum erat eget ipsum. <!--Content ends here--> </div>
</div>
</body> </html>
Syntax Highlighting:
Description & Notes
Either update this post and resubmit it with changes, or
Please note that whatever you submit will be available publicly.
New Post?
About
This tool was developed by Justin "Xuff" Michael for #CSS on EFnet and the web development community. JavaScript for the template buttons provided by bnovc.
Please keep in mind that this is a tool to assist with collaborative web site development and is not a hosting service. Posts may be deleted every so often for any reason, but will usually stay online for quite a while. Enjoy the resource, but please behave.
If you find a bug, have a question or want to make a suggestion please let me know.
Recent Pastes
gvefwegakis
7 Minutes Ago
Unknown
10 Minutes Ago
Unknown
10 Minutes Ago
Unknown
10 Minutes Ago
Unknown
10 Minutes Ago
New Post
Archive
This site is designed to work in any standards-compliant browser, and is optimized for Firefox. If you have any problems with the site please let me know.
This system was originally based on code from http://paste.uni.cc/, but has been modified extensively.
This page was conjured from the black depths in 0.380 seconds. Hosted by Dreamhost.