|
|||||||||
|
|||||||||
|
|||||||||
 |
|||||||||
| |
||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
ASP Free Forums Sponsor:
|
|
SlickEdit: Code in over 40 languages across 7 platforms. SlickEdit’s unmatched power, speed, and flexibility allows even the most accomplished developers to write better code faster. Download a free trial today! |
|
#1
December 5th, 2004, 08:45 PM
|
|||
|
|||
|
going batty
i am stuck on what seems to me should be a simple
layout. what i am trying to do is get a panel to span the second (main) and third (login) colums below the header. the first one stays exactly how it is. the panel should be on the top, above the main body and the login column. i have tried a bunch of things but i guess my HTML needs improvement... anyway, help much appreciated. here is my code: Code:
<HTML> <HEAD> <title>AutList</title> <meta content="True" name="vs_snapToGrid"> <meta content="True" name="vs_showGrid"> <meta content="Microsoft Visual Studio 7.0" name="GENERATOR"> <meta content="C#" name="CODE_LANGUAGE"> <meta content="JavaScript" name="vs_defaultClientScript"> <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"> <LINK href="../../CDA/portal.css" type="text/css" rel="stylesheet"> </HEAD> <body> <form id="AutList" method="post" runat="server"> <TABLE cellSpacing="0" cellPadding="1" width="100%" border="0"> <TR> <TD style="WIDTH: 372px; HEIGHT: 27px" colSpan="3" rowSpan="3"><uc1:header id="Header1" runat="server"></uc1:header></TD> </TR> </TABLE> <TABLE borderColor="activeborder" cellSpacing="0" cellPadding="1" width="686" border="1" style="WIDTH: 100%; HEIGHT: 100%"> <TR> <TD vAlign="top" width="10%" bgColor="#6c8fae" height="1"> <P><uc1:navbar id="MainNavBar" runat="server"></uc1:navbar><uc1:seperator id="Seperator2" runat="server"></uc1:seperator><uc1:newnavbar id="NewNavBar1" runat="server" Visible="False"></uc1:newnavbar></P> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <P><uc1:xmlrss id="XMLRSS1" runat="server"></uc1:xmlrss></P> </TD> <TD class="HomeTxt" vAlign="top" borderColor="activeborder" align="left" width="100%" bgColor="azure" height="100%"> <H2> <FONT color="darkslategray"> Author Content List </FONT> </H2> <P> <STRONG>Which Content: </STRONG> <asp:dropdownlist id="ddlWhichContent" runat="server" AutoPostBack="True"> <asp:ListItem Value="0">Currently Being Created</asp:ListItem> <asp:ListItem Value="1">Currently Creating or Editing</asp:ListItem> <asp:ListItem Value="2">All Written by</asp:ListItem> </asp:dropdownlist> </P> <P> <asp:table id="tblView" runat="server" CellSpacing="1" CellPadding="3" GridLines="Both"> <asp:TableRow BackColor="#8CD3EF"> <asp:TableCell Width="5%" HorizontalAlign="Center" Text="ID"></asp:TableCell> <asp:TableCell Width="5%" Font-Size="X-Small" HorizontalAlign="Center" Text="Ver"></asp:TableCell> <asp:TableCell Width="72%" HorizontalAlign="Center" Text="Headline"></asp:TableCell> <asp:TableCell Width="10%" Font-Size="X-Small" HorizontalAlign="Center" Text="Status"></asp:TableCell> <asp:TableCell Width="2%" Font-Size="XX-Small" HorizontalAlign="Center" Text="View"></asp:TableCell> <asp:TableCell Font-Size="XX-Small" Text=" Notes "></asp:TableCell> <asp:TableCell Width="2%" Font-Size="XX-Small" HorizontalAlign="Center" Text="Updt"></asp:TableCell> <asp:TableCell Width="2%" Font-Size="XX-Small" HorizontalAlign="Center" Text="Sub"></asp:TableCell> <asp:TableCell Width="2%" Font-Size="XX-Small" HorizontalAlign="Center" Text="Del"></asp:TableCell> </asp:TableRow> </asp:table> </P> </TD> <TD vAlign="top" align="left" bgColor="#6c8fae" height="0" rowSpan="1"><uc1:login id="ucLogin" runat="server" Visible="False"></uc1:login><uc1:logout id="ucLogout" runat="server" Visible="False"></uc1:logout><uc1:seperator id="Seperator1" runat="server"></uc1:seperator></TD> </TR> <TR> <TD align="center" colSpan="5"><cmsnet:footer id="Footer1" runat="server"></cmsnet:footer></TD> </TR> </TABLE> </form> </TR></TBODY></TABLE> </body> </HTML>
|
|
#2
January 31st, 2005, 09:39 AM
|
|||
|
|||
|
i dont know exactly what you are trying to do, but i know what you mean..
say this is a table, and the cell you want to go all the way across has the plus in it. Code:
<table><tr><td>--</td><td>---</td><td>---</td></tr> <tr><td>+</td> </table> |--|---|---| |+ | | It simply doesnt go all the way across.. Code:
<table><tr><td>--</td><td>---</td><td>---</td></tr> <tr><td colspan="3">+</td> </table> |--|---|---| |----+-----| now the cell goes all the way across.. hopefully that is what you were talking about..
|
|
#3
February 8th, 2005, 07:40 AM
|
||||
|
||||
|
WebCave computer: ALERT!! Tables for layout alert! Tablelert! Tablelert!
Standards Man: Computer! Where is the evildo'er? WebCave computer: ASPFree forums! Standards Man: To the XHTMLMobile!! Music: "Da-na-nah-na-Da-na-nah-na... Standards Man! Da-na-nah-na-Da-na-nah-na... Standards Man! " * Web Standards Man breaks through the celing! Standards Man: Stop fiend! * Camera turns around revealing a quite innocent looking pdb22 looking quite startled Standards Man: Oh... sorry, I'll pay for the repairs --------------------------------- Lets see here.... Use of VisualStudio for HTML generation? Blegh.... If I may... refer to you http://www.aspnetresources.com for plenty of tips for sticking to specs with ASP.Net and VisualStudio (2002 and 2003 inclusive) Okay... so my understanding is that you want a layout like this: Code:
≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ |-------Header--------| ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ |----Main-----|-Login-| |-------------|-------| |-------------|-------| |-------------|-------| ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡ As you can see.... you have quite an extensive amount of <table> code... * Standards Man reaches for his utility belt and retreives the XHTML 1.1 Spec XHTML is just one part of Tim Berners-Lee's vision for the Semantic Web The "Semantic Web" calls for XHTML to be the standard for marking up hypertext, documents, information, etc... with XML-Derived doctypes being used for anything that XHTML cannot markup appropriately... for instance, MathML for Mathematics, RSS/Atom for information feeds, great scots! Even Microsoft uses XML for ADO.Net, as a means of describing relational data as stored in a database! ....Which means that elements (evil-do'ers call these "tags") must be used to semantically describe the its contents on their own For example... <acronym> is used to markup an acronym and to provide additional information about that acronym See: Code:
<acronym title="Need Another Seven Astronauts">NASA</acronym> Likewise, the <abbr> element is used for abbreviations: Code:
<abbr title="Abbreviation">Abbrv.</abbr> Get the picture? Therefore.... someone with your intelligence should easily deduce that the <table> element is used to markup tabular data Tell me, young child.... since when was page structure and layout considered tabular data? Now we structure information semantically! All XHTML 1.1 documents do not contain a SINGLE element relating to the presentation of a document.... this job is relegated to CSS, which does a much better job... it also means pages load faster and the appearance of a website can be changed just by altering a single file... much less some random attribute on all 20 or so pages in your site. You can adjust the appearance of your document by using "hooks", these are semantic, arbitrary or semantic-neutral elements that CSS can apply styling to. Typically, we use the <div> element, as it represents a "division" in the document for whatever purpose. So... in your position, we want a header and two columns This would be described in XHTML as: Code:
<html> <head> <!-- Head tags go here --> </head> <body> <div id="header"> </div> <div id="container"> <div id="login"> </div> <div id="main"> </div> </div> </body> </html> Note how I didn't identify my <div> elements by their appearance ...You name them according to their purpose in the document! ...You could apply another style and the document would no longer have any columns! Instead, I opted to call the right-hand column: "login", as that's what it is Anyway, so lets style it now, shall we?  Code:
#header { }
#container { }
#login {
float: right;
width: 10em; }
#main {
float: none;
margin-right: 11em; }
#footer {
clear: both; }
The code above sets the basics for layout If you don't know what it means, don't worry.... here's an overview: By default, the <div> element fills the browser window horizontally, so no need to change anything for the #header or #footer definitions As for #login, well... I've set it to "float" to the right... which means that the element... and all its content, is "lifted" out of the page and pushed to the inside right of the containing element... in this case, #container, all the content without any float property (or with float: none  is told to "wrap" around the floated elementFor an example of this... check out one of my sites: http://www.w3bdevil.com/planetearth/lc.asp See how the Lunar Corporation insignia has text wrapped around it.... this is because the image was set to float: left; However! However... if we tell the rest of the content around it to have a "clear: ;" property, then it will ALWAYS remain below any floated elements, if you had a <div id="footer"> and it didn't clear, then if #main was shorter than #login.... then #footer would overlap #login Anyway... so suppose we don't want #main to "wrap" around #login... well, thats done by giving #main a margin on its right-side that is greater than the width of the #login element ...so now, #main is still technically "wrapping" around #login, but the "margin-right: 11em;" property prevents this actually happening. So there you go! I've just told you how to create your desired effect in semantic XHTML and CSS2.1 So long, good citizen of ASPFree, I must fly away... my people over at http://www.webstandardsgroup.com need me! * Standards Man Flies through the ceiling into the distance.... dropping XHTML and W3C propaganda leaflets into the horizon Last edited by 1337_d00d : February 8th, 2005 at 07:48 AM.
|
|
| Viewing: ASP Free Forums > Web Design > Web Layout > going batty |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
