Talk in computer language.: ASP.Net with CSS/Style Sheet

Sunday, February 19, 2012

Image galery using CSS . No java script

Use below code to create a picture gallery only using CSS . Add the code in your HTML/ ASP.Net page and put your picture in the particular directory.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Multi page photo gallery</title>
<meta name="Author" content="Stu Nicholls" />

<style type="text/css">
/* common styling */

a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}

/* slides styling */

.photo {width:635px; text-align:left; position:relative; margin:0 auto;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}

.photo ul.topic li a ul,
.photo ul.topic li ul
{display:none;}

.photo ul.topic li.active a
{color:#000; background:#bbb;}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #bbb; z-index:1;}

.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #aaa; z-index:100;}

.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
</style>

</head>

<body>

<div class="photo">
<ul class="topic">
    <li><a class="set" href="#Portraits">Portraits</a>
    
        <ul>
            <li><a href="lbox/portrait1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/portrait1a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/portrait2.jpg"><img src="lbox/portrait2a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/portrait3.jpg"><img src="lbox/portrait3a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/portrait4.jpg"><img src="lbox/portrait4a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/portrait5.jpg"><img src="lbox/portrait5a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/portrait6.jpg"><img src="lbox/portrait6a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/portrait7.jpg"><img src="lbox/portrait7a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/portrait8.jpg"><img src="lbox/portrait8a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/portrait9.jpg"><img src="lbox/portrait9a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/portrait10.jpg"><img src="lbox/portrait10a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/portrait11.jpg"><img src="lbox/portrait11a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/portrait12.jpg"><img src="lbox/portrait12a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/portrait13.jpg"><img src="lbox/portrait13a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/portrait14.jpg"><img src="lbox/portrait14a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/portrait15.jpg"><img src="lbox/portrait15a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/portrait16.jpg"><img src="lbox/portrait16a.jpg" alt="" title="" /></a></li>
        </ul>
    
    </li>

    <li class="active"><a class="set" href="#Landscapes">Landscapes</a>
    
        <ul>
            <li><a href="lbox/landscape1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/landscape1a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/landscape2.jpg"><img src="lbox/landscape2a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/landscape3.jpg"><img src="lbox/landscape3a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/landscape4.jpg"><img src="lbox/landscape4a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/landscape5.jpg"><img src="lbox/landscape5a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/landscape6.jpg"><img src="lbox/landscape6a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/landscape7.jpg"><img src="lbox/landscape7a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/landscape8.jpg"><img src="lbox/landscape8a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/landscape9.jpg"><img src="lbox/landscape9a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/landscape10.jpg"><img src="lbox/landscape10a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/landscape11.jpg"><img src="lbox/landscape11a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/landscape12.jpg"><img src="lbox/landscape12a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/landscape13.jpg"><img src="lbox/landscape13a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/landscape14.jpg"><img src="lbox/landscape14a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/landscape15.jpg"><img src="lbox/landscape15a.jpg" alt="" title="" /></a></li>
            <li><a href="lbox/landscape16.jpg"><img src="lbox/landscape16a.jpg" alt="" title="" /></a></li>
        </ul>
    
    </li>

</ul>
<br class="clear" />
</div>
</body>
</html>

Saturday, February 18, 2012

Create stylish box using CSS

Create stylish Rounded corner box using CSS

Step 1) Download below images and put it in your solution of visual studio.

Step 2) Add below code in your ASP.Net page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="csstest.aspx.cs" Inherits="csstest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Untitled Page</title>

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}

.br {background: url(br.gif) 100% 100% no-repeat}

.tl {background: url(tl.gif) 0 0 no-repeat}

.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}

.clear {font-size: 1px; height: 1px}

</style>

</head>

<body>

<div>

This is the stylish box created by CSS.

Created by sourav kayal.

</div></div></div></div>

</div>

</form>

</body>

</html>

Create border using CSS in ASP.Net

Create stylish border using CSS and ASP.Net .

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="csstest.aspx.cs" Inherits="csstest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Untitled Page</title>

p.one

{

border-style:solid;

border-width:5px;

}

p.two

{

border-style:solid;

border-width:medium;

}

p.three

{

border-style:solid;

border-width:1px;

}

</style>

</head>

<body>

<div>

<p class="one">Text with border</p>

<p class="two">Text with border...</p>

<p class="three">Text with border</p>

</div>

</form>

</body>

</html>

Stylish table using CSS

Copy and paste the following code to generate stylish table using CSS in ASP.Net

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="csstest.aspx.cs" Inherits="csstest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Untitled Page</title>

table,th,td

{

border:2px solid black;

}

</style>

</head>

<body>

<div>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>sourav</td>

<td>Kayal</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</form>

</body>

</html>