All geek questions in one place

How do you plan to host a page in VS2010 without using tables?

I have been using .NET since beta and HTML since HotDog pro and notepad, using of course the table layout. I am FINALLY ready to use only div, li, CSS for layout, but my question is, what is the correct way to layout pages in VS2010?

When I use the table layout is simple, and I can visually see what im creates and where the elements are located, for example, the example below - how to do it with a div, etc. in VS2010?

<table width="300" border="0" cellpadding="5">
  <tr>
    <td><img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" /></td>
    <td><h2>This is some text to the right of the picture...</h2></td>
  </tr>
  <tr>
    <td colspan="2">Here some text underneath</td>
  </tr>
</table>
+3
source share
5 answers

, Css divs .. . -, WYSIWYG , , , . , css , 960 Grid System.

, , , . - "".

+4

ASP.NET MVC, Blueprint CSS framework.

.

 <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <head runat="server">
        <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>

        <asp:ContentPlaceHolder ID="MetaDescription" runat="server" >
        </asp:ContentPlaceHolder>

        <asp:ContentPlaceHolder ID="MetaKeywords" runat="server">
        </asp:ContentPlaceHolder>

        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 


         <asp:ContentPlaceHolder ID="HeadContent" runat="server"/>

    </head>

    <%=Html.Flash() %>

    <body>
        <div id="flash" style="display:none"></div>

        <div class="container">

            <div id="main" class="span-24 last">

                <div class="span-5">

                    <div id="logo">

                    </div>

                    <% Html.RenderAction("MainMenu", "Cms"); %>

                </div>


                 <div class="span-19 last">

                    <div id="headerTekst">
                        <div class="padding-30">
                            <h1 class="right uppercase">Some text</h1>
                        </div>
                    </div>

                    <div class="padding-10">
                        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                     </div>
                 </div>

                <div class="clear"></div>  
            </div>



            <div id="footer" class="span-24 last">

            </div>
    </div>  


    </body>

    </html>
0

html-, Visual Studio. Dreamweaver.

, Adobe Dreamweaver, , Visual Studio.

, , , IDE .

0

Firefox FireBug . . . , , html css .

WYSIWYG . . , , .

0

, HTML 4.01, div, , div soup .

, HTML 5 ( hacks, ), . , :

<div class="nav">
   <ul>
       <li>Home</li>
       <li>About</li>
   </ul>
</div>

HTML5 :

<nav>
    <ul>
       <li>Home</li>
       <li>About</li>
   </ul>
</nav>

, :

<div class="post">
<h1>Example Blog Post</h1>
   <div class="entry">
      <p>Blog text goes here...</p>
   </div>
   <div class="entryFooter">
      <p> Posted in example category.</p>
   </div>
</div>

:

<article>
   <header>
      <h1>Example Blog Post</h1>
   </header>
   <p>Blog text goes here...</p>
   <footer>
      <p>Posted in example category.</p>
   </footer>
</article>

, - , .

To put everything as I would like, I would use CSS3, but again, if you need to support older browsers, use CSS2.

To do this in VS2010, simply open the .aspx or .ascx pages and start writing markup. I find products like Dreamweaver to create garbage markup using the design interface, so it's best to write it manually.

Also, if you are following the HTML5 path and want intellisense in VS2010, here is an addon for it.

0
source

Source: https://habr.com/ru/post/1782881/

More articles:


All Articles