English German Spanish French Chinese

Sign In
Join

Home › Learn › Videos › How Do I: Use Cascading Style Sheets for Web Page Layout?

How Do I: Use Cascading Style Sheets for Web Page Layout?

In this video we learn how to use <div> elements in combination with cascading style sheets (CSS) to create robust and higher performance web pages. The <div> based approach will be compared to the <table> based layout approach used by most web sites over recent years. Then, several CSS-based approaches will be shown, ranging from absolute positioning to floating elements. We also learn the benefits of separating structural HTML from design with the use of CSS.

Presented by Chris Pels

Duration: 29 minutes, 19 seconds

Date: 10 September 2007

Watch the video | Download the video | Get VB code or C# code

Audio downloads: AAC | WMA | MPEG-4 | MPEG-3 | MPEG-2

Comments : 7

Leave a Comment

dev777 : On March 28, 2008 12:23 PM said:

Hello 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!

hameedsharif : On May 02, 2008 1:30 PM said:

Hello 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" "www.w3.org/.../xhtml1-transitional.dtd">

</script>

<title>Product Support</title>

</head>

<body>

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

</center>

<br />

         &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="www.lightinthebox.com/" />

<%--

<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" /> 

<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>

<p></p>

<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>

<p></p>

<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>

<p></p>

<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>

<p></p>

<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>

<p></p>

<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>

<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>

<p></p>

<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.

<p></p>

<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"

<p></p>

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

<p></p>

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

<p></p>

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.

<p></p>

<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"

<p></p>

<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"

<p></p>

</div>

</div>

<tr>

<tr>

<tr>

</td>

</tr>

<tr>

</td>

</td>

<!--

<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>< p> </p>

</td>

-->

</td>

</td>

</td>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Please help. My code in is as follows:

Soha.Jawabreh : On May 11, 2008 1:41 PM said:

An Excellent video

well one

Soha

Soha.Jawabreh : On May 11, 2008 1:42 PM said:

An Excellent video

well done

Soha

kerdaoui : On July 10, 2008 6:28 AM said:

thank you

kerdaoui : On July 10, 2008 6:30 AM said:

merci pour ces vedio vraiment sont bien structuré

je vous remerci 1000 fois