[How Do I:] Use Cascading Style Sheets for Web Page Layout?http://www.asp.netThu, 01 Mar 2012 06:46:27 GMTumbracoComments for [How Do I:] Use Cascading Style Sheets for Web Page Layout?enComment Posted by dev777http://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutFri, 28 Mar 2008 12:23:33 GMT00000000-0000-0000-000000005118Hello Chris,

I really like this video.  I learned alot from it.  I just have one question.  Based on the DIVLayout5.aspx example from the video.  I tried to add a menu control in the header, which it set to horizontal.  But when i ran it and i tried to reduce the size of the window, it cut off the menu.  How to avoid this problem?  

Thanks!

]]>Comment Posted by hameedsharifhttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutFri, 02 May 2008 13:30:38 GMT00000000-0000-0000-000000005119Hello Chris,

I have learned a lot from this video. Thanks. I am using layout based on  DIVLayout5.aspx. When I click a link in the left column, the new content does not get displayed in the center. It gets displayed in a new window, although I am setting "Target='content'" in the following sample code:

<center><asp:HyperLink ID="HyperLink112" Runat="Server"

   Target="content" ONMOUSEOVER="this.style.color='#ff7755';" ONMOUSEOUT="this.style.color='white'"

 Text="FAQs" Font-Bold="true" ForeColor="White"

 NavigateUrl="custgenfaqs.aspx"

 /></center>

The complete code for your reference is as follows:

<%@ Page Language="C#"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a rel="nofollow" target="_new" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">">www.w3.org/.../xhtml1-transitional.dtd"></a>

<script runat="server">

</script>

<html xmlns="<a rel="nofollow" target="_new" href="http://www.w3.org/1999/xhtml"">www.w3.org/.../xhtml"</a> >

<head runat="server">

   <title>Product Support</title>

 <link href="DIVLayout5.css" rel="stylesheet" type="text/css" />

</head>

<body>

   <form id="form1" runat="server">

   <div id="header">

   <img src="accessories.jpg" width="100" height="85" border="1" alt="mylogo" />

   <center>

   <font color="#000000" size="5"><strong>Welcome To ABC Electronics Product Support Center</strong></font>

   </center>

   <br />

   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;

   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;

   &nbsp;&nbsp;&nbsp;

   <asp:HyperLink ID="HyperLink6" Runat="Server" ONMOUSEOVER="this.style.color='#ff7755';" ONMOUSEOUT="this.style.color='#000033'" Text="ABC Electronics Website" Font-Bold="true" ForeColor="#000099" BackColor="#ffffff" BorderStyle="Solid" BorderColor="ButtonFace" NavigateUrl="<a rel="nofollow" target="_new" href="http://www.lightinthebox.com/"">www.lightinthebox.com/"</a> />

   <%--

   <asp:HyperLink ID="HyperLink8" Runat="Server" Text="FAQ"  Target="_parent" Font-Bold="true" ForeColor="White" BorderStyle="Solid" BorderColor="ButtonFace" NavigateUrl="faqgentmp.html" />

   --%>

   <asp:HyperLink ID="HyperLink8" Runat="Server" ONMOUSEOVER="this.style.color='#ff7755';" ONMOUSEOUT="this.style.color='#000033'" Text="FAQs" Font-Bold="true" ForeColor="#000099" Backcolor="#ffffff"  BorderStyle="Solid" BorderColor="ButtonFace" NavigateUrl="custgenfaqs.aspx" />&nbsp;

   <asp:HyperLink ID="HyperLink9" Runat="Server" Text="Contact Us" Font-Bold="true" ONMOUSEOVER="this.style.color='#ff7755';" ONMOUSEOUT="this.style.color='#000033'" ForeColor="#000099" Backcolor="White"  BorderStyle="Solid" BorderColor="Control" NavigateUrl="faqgen.aspx" Width="105px" /><%--

   <asp:Button runat="server" Width="100px" BorderColor="AntiqueWhite" BorderStyle='Solid' Text="HOME" />

   --%>  

</div>

   <div id="leftcolumn">

   

   <br />

   <br />

<center><asp:HyperLink ID="HyperLink111" Runat="Server"

   Target="_parent" ONMOUSEOVER="this.style.color='#ff7755';" ONMOUSEOUT="this.style.color='white'"

 Text="Home" Font-Bold="true" ForeColor="white"

 NavigateUrl="DIVLayout5.aspx"

 /></center>

 

 <center><asp:HyperLink ID="HyperLink112" Runat="Server"

   Target="content" ONMOUSEOVER="this.style.color='#ff7755';" ONMOUSEOUT="this.style.color='white'"

 Text="FAQs" Font-Bold="true" ForeColor="White"

 NavigateUrl="custgenfaqs.aspx"

 /></center>

 

 <center><asp:HyperLink ID="HyperLink4" Runat="Server"

   Target="_parent" ONMOUSEOVER="this.style.color='#ff7755';" ONMOUSEOUT="this.style.color='white'"

 Text="Requests" Font-Bold="true" ForeColor="White"

 NavigateUrl="SendMail.aspx"

 /></center>

 

 <center><asp:HyperLink ID="HyperLink5" Runat="Server"

   Target="content" ONMOUSEOVER="this.style.color='#ff7755';" ONMOUSEOUT="this.style.color='white'"

 Text="Contact Us" Font-Bold="true" ForeColor="White"

 NavigateUrl="faqgen.aspx"

 /></center><br />

 <center><asp:HyperLink ID="HyperLink1" Runat="Server"

   Target="content" ONMOUSEOVER="this.style.color='#ff7755';" ONMOUSEOUT="this.style.color='white'"

 Text="Feedback" Font-Bold="true" ForeColor="White"

 NavigateUrl="Feedback.aspx"

 /></center>

 

 <center><asp:HyperLink ID="HyperLink2" Runat="Server"

   Target="content" ONMOUSEOVER="this.style.color='#ff7755';" ONMOUSEOUT="this.style.color='white'"

 Text="Search" Font-Bold="true" ForeColor="White"

 NavigateUrl="searchleft.aspx"

 /></center>

   </div>

   <div id="content">

   <font color="#0033CC" size="5"><strong><i>Let Us Help You   24/7</i></strong></font>  - <font color="#FF0000" size="5"><strong><i>Online Solutions For Your Problems</i></strong></font>

   

<font color="red" size="3"><strong>Read this first. It will be well worth your time.

</strong></font> The following represents the best path to take to get you the answer you need with the greatest speed and simplicity.

<strong><u>1st</u></strong> Check out our <strong>FAQs</strong> (Frequently Asked Questions). They will most likely have your question and the answer you need. This takes just a click or two of your mouse button. The questions have been sorted into categories for quick and easy selection. The most recent and often selected questions are shown.

<asp:HyperLink ID="HyperLink77" Runat="Server"

   Target="_parent"

 Text="FAQs" ForeColor="Blue"

 NavigateUrl="custgenfaqs.aspx"

 />  

Can't find your question quickly or it is not in the list? Go to this next step.

<strong><u>2nd</u></strong> Go to our <strong>Search</strong> and enter what you are looking for.

These first two steps usually yield almost instantaneous results to help you. However, you can always reach us with a reasonable turnaround time by the following two ways.

<strong><u> 3rd </u></strong>  Send us an email with your request using our <strong> Form </strong>. This has the convenience for you being able to do this 7 days a week and 24 hours a day. The Forms page is easy to fill out and you will receive an email response within <strong><u>24</u></strong> hours.

<asp:HyperLink ID="HyperLink11" Runat="Server"

   Target="_parent"

 Text="Requests" ForeColor="Blue"

 NavigateUrl="SendMail.aspx"

 />

<strong><u> 4th </u></strong> Call or Fax us by using the information on our <strong>Contact Us</strong>. It has the phone numbers to use and the times we are available either live or by leaving a voicemail. We will respond to a voicemail message within <strong><u>48</u></strong> hours.<asp:HyperLink ID="HyperLink10" Runat="Server"

   Target="content"

 Text="Contact Us" ForeColor="Blue"

 NavigateUrl="faqgen.aspx"

 />

</div>  

<div id="rightcolumn" >

</div>  

   <div id="footer">

   <table border="5" width="1260" cellspacing="0" cellpadding="0">

<tr valign="top">

<td colspan="2">

       <table width="100%" cellspacing="0" cellpadding="0" border="0">

    <tr>

 <td valign="top" width="100%" background="blue_tile.jpg">

<table id="Table1" cellspacing="0" cellpadding="0" width="100%" border="0">

<tr>

<td width="*">

   <table cellspacing="0" cellpadding="0" width="100%" border="0" height="1">

       <tr>

       <td width="*">

       </td>

       </tr>

       <tr>

       <td width="*" valign="bottom">

<p align="right"><a style="color: yellow; font-weight: bold; padding: 4px" onmouseover="this.style.color='#ff7755';" onmouseout="this.style.color='yellow'" href="DIVLayout5.aspx">Home</a>

&nbsp;

       

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

       </td>

       <td width="*" valign="bottom">

<p align="right"><a style="color: yellow; font-weight: bold; padding: 4px" onmouseover="this.style.color='#ff7755';" onmouseout="this.style.color='yellow'" href="custgenfaqs.aspx">FAQs</a>

&nbsp;

       

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

       </td>

       <!--

       <td width="*" valign="bottom">

<p align="riqht"><a style="color: yellow; font-weight: bold; padding: 4px" onmouseover="this.style.color='#ff7755';" onmouseout="this.style.color='yellow'" href="custgenfaqs.aspx?tabindex=0&tabid=20">Search</a>

< p>&nbsp;

               

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

       </td>

       -->

       <td width="*" valign="bottom">

<p align="right"><a style="color: yellow; font-weight: bold; padding: 4px" onmouseover="this.style.color='#ff7755';" onmouseout="this.style.color='yellow'" href="SendMail.aspx">Requests</a>

&nbsp;

               

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

       </td>

       <td width="*" valign="bottom">

<p align="right"><a style="color: yellow; font-weight: bold; padding: 4px" onmouseover="this.style.color='#ff7755';" onmouseout="this.style.color='yellow'" href="faqgen.aspx">Contact Us</a>

&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

       </td>

       <td width="*" valign="bottom">

<p align="right"><a style="color: yellow; font-weight: bold; padding: 4px" onmouseover="this.style.color='#ff7755';" onmouseout="this.style.color='yellow'" href="Feedback.aspx">Feedback</a>

&nbsp;

               

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

       </td>

       <td width="*" valign="bottom">

<p align="center"><a style="color: white; font-weight: bold; padding: 4px">Copyright 2007 FieldDay Solutions</a>

&nbsp;

       </td>

       </tr>

                       </table>

                   </td>

               </tr>

             </table>

  </td>

</tr>

</table>

</td>

</tr>

</table>  

   </div>

   </form>

</body>

</html>

Please help. My code in is as follows:

]]>Comment Posted by Soha.Jawabrehhttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutSun, 11 May 2008 13:41:34 GMT00000000-0000-0000-000000005120An Excellent video

well one

Soha

]]>Comment Posted by kerdaouihttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutThu, 10 Jul 2008 06:28:13 GMT00000000-0000-0000-000000005122thank  you

]]>Comment Posted by vidhya raohttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutWed, 16 Jul 2008 13:30:26 GMT00000000-0000-0000-000000005124good one

]]>Comment Posted by cv_vikramhttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutFri, 08 Aug 2008 16:58:37 GMT00000000-0000-0000-000000005125thanks...

]]>Comment Posted by asaterhttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutFri, 12 Sep 2008 07:37:32 GMT00000000-0000-0000-000000005126Thank you

]]>Comment Posted by djibril_chimere_DIAWhttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutTue, 28 Oct 2008 11:52:45 GMT00000000-0000-0000-000000005127Thanks ! Jërëjëf !

]]>Comment Posted by Ravenhearthttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutSun, 04 Jan 2009 08:28:41 GMT00000000-0000-0000-000000005128Thank you very much for this helpful video!

]]>Comment Posted by Shabnamhttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutFri, 09 Jan 2009 01:02:29 GMT00000000-0000-0000-000000005129Thank you very much... I learned a lot from this video... You are an excellent teacher... it was very interesting

]]>Comment Posted by jrissonehttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutTue, 20 Jan 2009 14:02:15 GMT00000000-0000-0000-000000005130Great Video! Thanks for taking the time to explain so much of the details and the basic stuff!

]]>Comment Posted by alfredohttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutWed, 11 Feb 2009 15:45:02 GMT00000000-0000-0000-000000005131Thank you Chris, this has been an excellent lecture.

]]>Comment Posted by bohunthttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutFri, 13 Feb 2009 12:41:07 GMT00000000-0000-0000-000000005132Great video...

]]>Comment Posted by ksaiahhttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutSat, 14 Feb 2009 17:54:32 GMT00000000-0000-0000-000000005133Thank you very much Chris... helpful video!

]]>Comment Posted by side_holidayhttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutTue, 03 Mar 2009 17:35:24 GMT00000000-0000-0000-000000005134Beautiful video Chris, I have been trying to get a hold of CSS for a while and this video gave me that grip.

Thanks again.

]]>Comment Posted by tuphnghttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutSat, 14 Mar 2009 07:08:21 GMT00000000-0000-0000-000000005135I can't watch or download it :(, help me please.

]]>Comment Posted by soumitra_sushhttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutSun, 05 Apr 2009 08:35:59 GMT00000000-0000-0000-000000005136gr8 video ....

]]>Comment Posted by haithemarahttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutFri, 08 May 2009 04:35:22 GMT00000000-0000-0000-000000005137Thanks for the video.

]]>Comment Posted by Sayrehttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutTue, 29 Sep 2009 07:44:13 GMT00000000-0000-0000-000000005138Good Video.

Thanks

]]>Comment Posted by drewdowlinghttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutThu, 18 Mar 2010 02:58:26 GMT00000000-0000-0000-000000005139Excellent straight forward intro. Thank you

]]>Comment Posted by tonyharris3http://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutThu, 03 Jun 2010 13:10:42 GMT00000000-0000-0000-000000008977Chris, thanks! Your video cleared up all of my questions!

]]>Comment Posted by Godomhttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutSun, 25 Jul 2010 21:20:36 GMT00000000-0000-0000-000000009611I recreated the the DIVLayout4.aspx with its respective .CSS file. But it is not working properly. The footer is not showing any background color and I have some green color bleeding in to the Content area. When I add the line: clear:both; to the footer, the code works. Any thoughts about what is wrong with the code. I even tried to copy the code that comes with this video, but still doesn't work.

]]>Comment Posted by Bumblehttp://www.asp.net/web-forms/videos/how-do-i/how-do-i-use-cascading-style-sheets-for-web-page-layoutThu, 01 Mar 2012 06:46:27 GMT00000000-0000-0000-0000000014989Hi Chris

I followed this video along and all went well until DivLayout4 which didnt show in my browser as it did in yours. So I downloaded the code and copied the code from your DivLayout4.aspx page and DivLayout4.css stylesheet but this still didnt appear the same as yours - the content and footer were incorrect? Would be grateful if you could check this out as I now want to proceed to DivLayout5 but as this entails copying the code of DivLayout4, I presume it will be incorrect as well.

Many thanks for an otherwise great video,

Caroline

]]>