.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Div and Web Design : Next Part

Posted By:Nikhil Kumar       Posted Date: August 27, 2010    Points: 25    Category: ASP.NET    URL: http://www.dotnetspark.com  

If you are using Cascading Style Sheet for formating your website then you can use these css by including its id in div tag. Every div tag contains a unique attribute name for id. Div make the webpage design sections like if you are using css for creating a side menu list then you can define a div as the setting its properties to left or right, that means by using div tag you can group the large html contents
 

OnMouseMove:

             Here we have crated a div tag as footer of a page and when the cursor moves over this div (section) an alert message will appear saying "This is a mousemove click event".

Code:

 



OnClick:

          This event occurs when you click on the part of webpage where you have defined this event to be occur.
Here we have defined a div tag as header and when you click on this header a alert box will appear "It's a mouseclick event".

 Code:

 This is not necessary to use alert message box on every event you can do many other task by using the javascript(we'll talk about it later).

Transparency for an image (mouseover and mouseout event):

                                This is a nice example of mouseover and mouseout event.

Here when your mousepoint come over the image the image  will look as with 100 % clearity and when your mouse pointer come out over the image then image opacity will discrease so that image will look a bit faded.

Code:

 



Web Design with DIV:

 Now we will see some example of div tag which is very attractive and usefull to create a fanciful webpage.

Center Fixed Div:

                  In this example, a div section in the center of a web page will appear with the fixed css style, means when you resize yourwebpage this div will not disappear it will reamin in the center point and always visible to you on scrolling.

 

Code:

     

  

Now inside the form tag use these line.     

       

 
This is a center div tag

Now for a attractive output try this.

2 CSS Menu:

                In this example we are going to create a css menu bar. Output like this.        

                 cssmenu.JPG 

For creating this menu bar you have to use css, you can create a css or you can define style tag inside your webpage.
I'm using style tag inside my page because here is no need to give reference the css.

       

Now this is the time to use this style by using div tag, 

CODE:

 

 

3 ColorFull DropDownList:

                        Here in this example we're going to create a colorfull dropdownlist, as you have seen in many places a dropdownlist is provided for choosing the font color with name and that color as background. 

Output:

           colorfuldropdown.JPG

For creating this you need to use the style :

 


    Now inside the div tag use this code.

4-  Embed audio and video file in a webpage:

                                        How to embed a audio file or video file in a webpage. Its simple  using a embed tag

 Code:

 

 This tag includes a audio file named "fires.mp3" with the properties loop, volume and autostart. You can modify as per your requirements.

Output:

div4.JPG

 For a video file just change the src only.

 Code:

Conclusion:

We learn how to use div tag, its events, its attributes with examples so now we can utilise this in our webpage.
We learn some attractive example by using events, CSS, Style tag etc.

 

If you need any help feel free to ask.

Cheers !

 -Nikhil Kumar

dotnetask.blog.co.in


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend