Nicolos G
01-07-2008, 03:43 PM
Hi,
I recently tried to get these boxes on my project by adding the html and css code from the source from the page http://www.456bereastreet.com/lab/newslist/ to my source on my project but I just get errors. Here is my source page from my project with the code from the source for boxes:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title><style type="text/css" media="screen,print">
html,body {
margin:0;
padding:0;
color:#000;
background:#fff;
}
body {
padding:10px;
font:76%/140% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}
#labfooter {
text-align:center;
clear:both;
}
#news {
margin:1em auto;
padding:0;
width:150px;
font-size:0.94em;
list-style:none;
}
#news li {
background:url("box.gif") 0 100% no-repeat;
padding:0 0 4px 0;
margin:8px 0 0 0;
display:block;
}
#news li p {
background:#eaeaea;
padding:1px 4px 0 7px;
margin:0;
border-left:14px solid #939393;
}
#news li.arr p {
background:#eaeaea url("edge.gif") 0 50% repeat-y;
padding-left:21px;
border:0;
}
#news h4 {
font-size:1em;
line-height:1em;
font-weight:bold;
background:url("box.gif") 0 0 no-repeat;
margin:0;
padding:6px 4px 3px 21px;
}
#news li:hover {
background-position:-150px 100%;
}
#news li:hover p {
border-color:#2793ff;
}
#news li.arr:hover p {
background-image:url("edge-h.gif");
}
#news li:hover h4 {
background-position:-150px 0;
}
#news a:link {
text-decoration:none;
color:#000;
}
#news a:visited {
text-decoration:none;
color:#606;
}
#news a:hover {
text-decoration:underline;
}
#news .more {
line-height:1em;
display:block;
text-align:right;
padding:0 18px 2px 21px;
margin-top:4px;
background:url("arrow.gif") 135px 50% no-repeat;
}
</style>
</head>
<body></body>
</html><style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
a.squarebutton{
background: transparent url('media/square-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Arial; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}
a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #494949; /*button text color*/
}
a.squarebutton span{
background: transparent url('media/square-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}
a.squarebutton:hover{ /* Hover state CSS */
background-position: bottom left;
}
a.squarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}
.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}
</style>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#ddcolortabs{
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}
#ddcolortabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}
#ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}
#ddcolortabs a{
float:left;
color: white;
background: #FF1493 url(media/color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}
#ddcolortabs a span{
float:left;
display:block;
background: #ff1493 url(media/color_tabs_right.gif) no-repeat right top;
padding:4px 9px 2px 6px;
}
#ddcolortabs a span{
float:none;
}
#ddcolortabs a:hover{
background-color: #b3ee3a;
}
#ddcolortabs a:hover span{
background-color: #b3ee3a;
}
#ddcolortabs #current a, #ddcolortabs #current span{ /*currently selected tab*/
background-color: #b3ee3a;
}
#ddcolortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #b3ee3a;
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}
</style>
<script language="javascript" type="text/javascript">
// <!CDATA[
function ddcolortabsline_onclick() {
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div><div id="ddcolortabs">
<ul>
<li style="margin-left: 1px"><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li>
<li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised"><span>Revised</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools"><span>Tools</span></a></li>
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums"><span>Forums</span></a></li>
</ul>
</div>
<div id="ddcolortabsline" onclick="return ddcolortabsline_onclick()"> </div>
</div><h3>
</h3>
<div id="preview" style="background-color: #ffffff">
<div class="roundedcornr_box_546817">
<div class="roundedcornr_top_546817"><div></div></div>
<div class="roundedcornr_content_546817">
</div>
<div class="roundedcornr_bottom_546817"><div></div></div>
</div></div><h4>Single button:</h4>
<div class="buttonwrapper">
<a class="squarebutton" href="http://www.dynamicdrive.com/style/"><span>Dynamic Drive CSS Library</span></a>
</div>
<h4>Side by Side:</h4>
<div class="buttonwrapper">
<a class="squarebutton" href="#" style="background-image: url(Images/square-gray-right.gif)"><span>Submit</span></a> <a class="squarebutton" href="#" style="margin-left: 6px"><span>Reset</span></a>
</div><p>This is a styled unordered list, based partly on the method used in the <a href="/lab/teaser/one_image/">CSS Teaser Box</a> demo. The list was designed to display links to recent news, but there are plenty of other uses for something like this.</p>
<p>Each list item will expand vertically to contain any amount of text. It will take either an extremely large font size or a heading that is several lines long to break the effect. Increasing the height of the background image will let the heading grow taller before problems occur.</p>
<p>No extra markup is needed. There are two versions of the list items. The version which doesn't have an arrow in its left border needs only a single image (<a href="box.gif">box.gif</a>, not counting the arrow in the ”Read more”-link). For the version with the arrow in the border, two more images are needed: one for the normal state (<a href="edge.gif">edge.gif</a>), and one for the hover state (<a href="edge-h.gif">edge-h.gif</a>).</p>
<p>Hover state? Yes, in browsers which support <code>:hover</code> on any element, the border will change colour when the list item is hovered over. To do that, the position of the background image is shifted horizontally, and the border colour is changed. The arrow version is slightly more complicated; instead of just changing the border colour, a different background image is displayed. It's possible to use the same one-image technique that is used for the top and bottom of the box, but doing so will increase file size. I'll leave it to you to decide which is better: a larger file size or an additional server hit.</p>
<p>View source to see the XHTML and CSS.</p>
<ul id="news">
<li>
<h4><a href="#">News Item 1</a></h4>
<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula.</p>
<a href="#" class="more" title="Continue reading News Item 1">Read more</a>
</li>
<li>
<h4><a href="#">News Item 2</a></h4>
<p>Nullam adipiscing dui blandit ipsum.</p>
<a href="#" class="more" title="Continue reading News Item 2">Read more</a>
</li>
<li class="arr">
<h4><a href="#">News Item 3</a></h4>
<p>Vivamus convallis tempus ante.</p>
<a href="#" class="more" title="Continue reading News Item 3">Read more</a>
</li>
<li class="arr">
<h4><a href="#">News Item 4</a></h4>
<p>Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum.</p>
<a href="#" class="more" title="Continue reading News Item 4">Read more</a>
</li>
</ul>
<div id="labfooter">
<p><a href="/lab/">Lab Index</a> | <a href="/">456 Berea Street Home</a> | Copyright © 2003-2008 Roger Johansson</p>
</div></body>
</form>
</body>
</html>
I recently tried to get these boxes on my project by adding the html and css code from the source from the page http://www.456bereastreet.com/lab/newslist/ to my source on my project but I just get errors. Here is my source page from my project with the code from the source for boxes:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title><style type="text/css" media="screen,print">
html,body {
margin:0;
padding:0;
color:#000;
background:#fff;
}
body {
padding:10px;
font:76%/140% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}
#labfooter {
text-align:center;
clear:both;
}
#news {
margin:1em auto;
padding:0;
width:150px;
font-size:0.94em;
list-style:none;
}
#news li {
background:url("box.gif") 0 100% no-repeat;
padding:0 0 4px 0;
margin:8px 0 0 0;
display:block;
}
#news li p {
background:#eaeaea;
padding:1px 4px 0 7px;
margin:0;
border-left:14px solid #939393;
}
#news li.arr p {
background:#eaeaea url("edge.gif") 0 50% repeat-y;
padding-left:21px;
border:0;
}
#news h4 {
font-size:1em;
line-height:1em;
font-weight:bold;
background:url("box.gif") 0 0 no-repeat;
margin:0;
padding:6px 4px 3px 21px;
}
#news li:hover {
background-position:-150px 100%;
}
#news li:hover p {
border-color:#2793ff;
}
#news li.arr:hover p {
background-image:url("edge-h.gif");
}
#news li:hover h4 {
background-position:-150px 0;
}
#news a:link {
text-decoration:none;
color:#000;
}
#news a:visited {
text-decoration:none;
color:#606;
}
#news a:hover {
text-decoration:underline;
}
#news .more {
line-height:1em;
display:block;
text-align:right;
padding:0 18px 2px 21px;
margin-top:4px;
background:url("arrow.gif") 135px 50% no-repeat;
}
</style>
</head>
<body></body>
</html><style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
a.squarebutton{
background: transparent url('media/square-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Arial; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}
a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #494949; /*button text color*/
}
a.squarebutton span{
background: transparent url('media/square-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}
a.squarebutton:hover{ /* Hover state CSS */
background-position: bottom left;
}
a.squarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}
.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}
</style>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#ddcolortabs{
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}
#ddcolortabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}
#ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}
#ddcolortabs a{
float:left;
color: white;
background: #FF1493 url(media/color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}
#ddcolortabs a span{
float:left;
display:block;
background: #ff1493 url(media/color_tabs_right.gif) no-repeat right top;
padding:4px 9px 2px 6px;
}
#ddcolortabs a span{
float:none;
}
#ddcolortabs a:hover{
background-color: #b3ee3a;
}
#ddcolortabs a:hover span{
background-color: #b3ee3a;
}
#ddcolortabs #current a, #ddcolortabs #current span{ /*currently selected tab*/
background-color: #b3ee3a;
}
#ddcolortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #b3ee3a;
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}
</style>
<script language="javascript" type="text/javascript">
// <!CDATA[
function ddcolortabsline_onclick() {
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div><div id="ddcolortabs">
<ul>
<li style="margin-left: 1px"><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li>
<li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised"><span>Revised</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools"><span>Tools</span></a></li>
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums"><span>Forums</span></a></li>
</ul>
</div>
<div id="ddcolortabsline" onclick="return ddcolortabsline_onclick()"> </div>
</div><h3>
</h3>
<div id="preview" style="background-color: #ffffff">
<div class="roundedcornr_box_546817">
<div class="roundedcornr_top_546817"><div></div></div>
<div class="roundedcornr_content_546817">
</div>
<div class="roundedcornr_bottom_546817"><div></div></div>
</div></div><h4>Single button:</h4>
<div class="buttonwrapper">
<a class="squarebutton" href="http://www.dynamicdrive.com/style/"><span>Dynamic Drive CSS Library</span></a>
</div>
<h4>Side by Side:</h4>
<div class="buttonwrapper">
<a class="squarebutton" href="#" style="background-image: url(Images/square-gray-right.gif)"><span>Submit</span></a> <a class="squarebutton" href="#" style="margin-left: 6px"><span>Reset</span></a>
</div><p>This is a styled unordered list, based partly on the method used in the <a href="/lab/teaser/one_image/">CSS Teaser Box</a> demo. The list was designed to display links to recent news, but there are plenty of other uses for something like this.</p>
<p>Each list item will expand vertically to contain any amount of text. It will take either an extremely large font size or a heading that is several lines long to break the effect. Increasing the height of the background image will let the heading grow taller before problems occur.</p>
<p>No extra markup is needed. There are two versions of the list items. The version which doesn't have an arrow in its left border needs only a single image (<a href="box.gif">box.gif</a>, not counting the arrow in the ”Read more”-link). For the version with the arrow in the border, two more images are needed: one for the normal state (<a href="edge.gif">edge.gif</a>), and one for the hover state (<a href="edge-h.gif">edge-h.gif</a>).</p>
<p>Hover state? Yes, in browsers which support <code>:hover</code> on any element, the border will change colour when the list item is hovered over. To do that, the position of the background image is shifted horizontally, and the border colour is changed. The arrow version is slightly more complicated; instead of just changing the border colour, a different background image is displayed. It's possible to use the same one-image technique that is used for the top and bottom of the box, but doing so will increase file size. I'll leave it to you to decide which is better: a larger file size or an additional server hit.</p>
<p>View source to see the XHTML and CSS.</p>
<ul id="news">
<li>
<h4><a href="#">News Item 1</a></h4>
<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula.</p>
<a href="#" class="more" title="Continue reading News Item 1">Read more</a>
</li>
<li>
<h4><a href="#">News Item 2</a></h4>
<p>Nullam adipiscing dui blandit ipsum.</p>
<a href="#" class="more" title="Continue reading News Item 2">Read more</a>
</li>
<li class="arr">
<h4><a href="#">News Item 3</a></h4>
<p>Vivamus convallis tempus ante.</p>
<a href="#" class="more" title="Continue reading News Item 3">Read more</a>
</li>
<li class="arr">
<h4><a href="#">News Item 4</a></h4>
<p>Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum.</p>
<a href="#" class="more" title="Continue reading News Item 4">Read more</a>
</li>
</ul>
<div id="labfooter">
<p><a href="/lab/">Lab Index</a> | <a href="/">456 Berea Street Home</a> | Copyright © 2003-2008 Roger Johansson</p>
</div></body>
</form>
</body>
</html>