[RESOLVED] gridview top position

[jlbantang]

Hi team, can we fix the gridview position with top:0px in table row.

<asp:GridView ID="GridView1" runat="server" Width="95%"  AllowPaging="True" AutoGenerateColumns="False" GridLines="None" PageSize="10"  CssClass="grid_top">
....
</gridview>

CSS

.grid_top{
top:0px;
}

[gep13]

Hey,

Can you show the markup for the rest of the page?

What other elements does the GridView live in?

Gary

[jlbantang]

I hope this will help.

<td colspan="8" rowspan="4" style="background-image: url(_images/subcontracts2_18.jpg); background-repeat: no-repeat; height:488px">
		<form id="gridviewform" runat="server" onreset ="return confirm('Do you really want to clear the form?'); ">
		<div id="gridviewdiv" >
		    <asp:GridView ID="GridView1" runat="server" Width="95&#37;"  AllowPaging="True" AutoGenerateColumns="False" GridLines="None" PageSize="10"  CssClass="grid_top">
                     <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                    <EditRowStyle BackColor="#999999" />
                    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                <Columns>
                    <asp:HyperLinkField DataNavigateUrlFields="ID" DataNavigateUrlFormatString="contract.aspx?id={0}" 
                        Text="&lt;img src='_Images/edit.gif' alt='Edit' border='0'/&gt;" />
    
                <asp:TemplateField HeaderText="PTS No">
                    <ItemTemplate><asp:Label ID="lblptsno" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                
                <asp:TemplateField HeaderText="Dated">
                    <ItemTemplate><asp:Label ID="lbldated" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                
                
                <asp:TemplateField HeaderText="Project">
                    <ItemTemplate><asp:Label ID="lblproject" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                
                
                <asp:TemplateField HeaderText="For">
                    <ItemTemplate><asp:Label ID="lblfor" runat="server"></asp:Label>
                    </ItemTemplate>                
                </asp:TemplateField>
                
                <asp:TemplateField HeaderText ="Subcontractor">
                    <ItemTemplate>
                    <asp:Label ID="lblsubcontractor" runat="server"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                
                
                </Columns>
                </asp:GridView>
            </div>    
            
            
            <div id="filterdiv" style="position: absolute; top:520px; left: 35px; ">
                &nbsp;&nbsp;<br />
            <br />
                <table>
                    <tr>
                        <td style="width: 100px">
            
            <asp:Label ID="Label1" runat="server" Text="Search on"></asp:Label></td>
                        <td style="width: 100px">
            <asp:TextBox ID="TextBox1" runat="server" CssClass="textbox_style" Width="349px"></asp:TextBox></td>
                    </tr>
                    <tr>
                        <td style="width: 100px">
            <asp:Label ID="Label2" runat="server" Text="Criteria"></asp:Label></td>
                        <td style="width: 100px">
            <asp:DropDownList ID="DropDownList1" runat="server" CssClass="textbox_style" Width="356px">
                <asp:ListItem>--  select from the list  --</asp:ListItem>
                <asp:ListItem>By PTS No</asp:ListItem>
                <asp:ListItem>By Project</asp:ListItem>
                <asp:ListItem>By Subcontractor</asp:ListItem>
            </asp:DropDownList></td>
                    </tr>
                    <tr>
                        <td style="width: 100px">
                        </td>
                        <td style="width: 100px">
                            <input id="clearButton"  type="reset" value="Clear" class="button_style" style="width: 60px; height: 20px;"  /><asp:Button ID="Button1" runat="server" Text="Button" CssClass="button_style" Width="66px" /></td>
                    </tr>
                </table>
             </div>   
		</form>
		
		</td>

[gep13]

Ok, this first question would be...

Is there a reason why you are using tables to layout your page? This really isn't the best way to go about it.

Secondly, if you are struggling with layout, fire up FireBug within FireFox, and look at the HTML that is generated. You can then alter the HTML and CSS on the fly to get it to look how you want, and then you can implement this within your code.

Gary

[motil]

did your tried something like:

#gridviewdiv{margin:0 0 0 0;}

or even

#gridviewdiv{margin:-2px 0 0 0;}

or something this? those your table td cells has padding ? if so remove the padding

[brucevde]

Set the vertical alignment attribute of the TD tag. By default it is middle.

<td colspan="8" rowspan="4" valign="top"

The equivalent CSS style is

vertical-align:top

[jlbantang]

@brucevde and @motil

its work perfectly with

 vertical-align:top;

@gep, @brucevde and @motil
Thanks for the note. But the photoshop used a table layout when you save the sliced image. But i would try doing that through divs. Here is my layout (sorry for the colour as it just a random selection from the palette), each colour is equivalent to a slice.
I would appreciate if you find sometime to layout through div.




Uploaded with ImageShack.us
_____
learning in vbforums

[gep13]

I little trick that I learnt recently is to consider everything as columns. Looking at the layout you have there, I see 6 columns. Granted, some of these columns span over columns, but at the heart, you have a 6 column layout. Once you start thinking like that, it is easy to start laying out your pages.

Gary

[jlbantang]

hey,

im planning of creating div for each slice and form the desired layout. is that the correct/standard way using divs? Roughly the markup will look like:

<form id="form1" runat="server">
        <div id="logo" > </div>
        
        <div  style="float:left"  onmouseout="MM_swapImgRestore()" 
		        onmouseover="MM_swapImage('home','','images/hover/home.jpg',1)">
           <img id="home" src="images/home.jpg" alt="home" />
	    </div>
    	
    	
        <div style="float:left"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contract','','images/hover/contract_main1.jpg',1)">
            <img  id="contract" src="images/contract_main.jpg" alt="contract"/>
        </div>
        
        <div style="float:left"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('adv','','images/hover/advance_payment_bank_guarantee.jpg',1)">
            <img  id="adv" src="images/advance_payment_bank_guarantee.jpg"  alt="adv"/>
        </div>
        <div style="float:left">
            <img id="body" alt="adv" src="images/body.jpg" />
        </div>    
    </form>

One thing more, do i need to always mention the slice height and width?

[motil]

You don't need to to always set the height / width of an element but when floating div you should set its width since it fix a lot of IE6/IE7 and also IE8 CSS bugs.

[motil]

this is how i would build your header :
html code:

css code

<style type="text/css">
        #wrapper{width:960px;margin:0px auto;border:1px solid black;}
        #Header{}
        #logo{background:green;float:left;width:200px;height:60px;}
        #blank{float:left;background:red;width:560px;height:60px;}
        #misc{float:left;background:blue;height:60px;width:200px;}
        #tools{background:black;color:#fff;height:30px}
        #WebTitles{background:yellow;height:30px;}
    </style>

 <div id="wrapper">
        <div id="Header">
            <div id="logo">
                LOGO
            </div>
            <div id="blank">
                BLANK
            </div>
            <div id="misc">
                <div id="tools">
                    TOOLS
                </div>
                <div id="WebTitles">
                    Web Titles
                </div>
            </div>
        </div>
    </div>

[jlbantang]

@motil Can you please tell me why there is a need to have a header and misc div when I will get the same layout.

Many thanks.

[gep13]

Part of a good CSS layout is the ability to easily make changes to the layout by only changing the CSS. Even though you are not doing anything with a misc DIV just now, it might be the case that you want to do something with it later on. By putting it in just now, and specifying a header CSS class for it, means that if you need to, you can just alter the CSS.

Gary

[motil]

as Gary wrote you should keep your css organized and clean and it always a good idea to keep elements inside containers,
here is your full layout:

css

 <style type="text/css">
        #wrapper{width:960px;margin:0px auto;border:1px solid black;}
        #Header{}
        #logo{background:green;float:left;width:200px;height:60px;}
        #blank{float:left;background:red;width:560px;height:60px;}
        #misc{float:left;background:blue;height:60px;width:200px;}
        #tools{background:black;color:#fff;height:30px}
        #WebTitles{background:yellow;height:30px;}
        #nav {background:gray;text-align:left;height:30px;}
        #nav div{float:left;color:#fff;width:135px;border:1px solid black;text-align:center;height:30px;line-height:30px;}
        #nav div a{color:#fff;display:block;}
 
        #MainContent{float:left;width:760px;background:#38fa4a;height:300px;}
        #SideBar {float:right;width:200px;}
        #Box1,#Box2{height:150px;background:gray;}
       .BoxHeader{background:orange;height:20px;text-align:center;}
        #footer {background:#809dfb;text-align:center;}
       
       .clear{clear:both;}
    </style>

html:

<div id="wrapper">
        <div id="Header">
            <div id="logo">
                LOGO
            </div>
            <div id="blank">
                BLANK
            </div>
            <div id="misc">
                <div id="tools">
                    TOOLS
                </div>
                <div id="WebTitles">
                    Web Titles
                </div>
            </div>
        <div class="clear"></div>

        </div>
        <div id="nav">
                <div><a href="">Menu 1</a></div>
                <div><a href="">Menu 2</a></div>
                <div><a href="">Menu 3</a></div>
                <div><a href="">Menu 4</a></div>
                <div><a href="">Menu 5</a></div>
                <div><a href="">Menu 6</a></div>
                <div>Blank</div>
        </div>
        <div id="content">
            <div id="MainContent">
                Dynamic Web Content
            </div>
            <div id="SideBar">
                <div id="Box1">
                <div class="BoxHeader">Label 1</div>
                <div class="BoxContent">Some Text</div>
                </div>
                <div id="Box2">
                <div class="BoxHeader">Label 1</div>
                <div class="BoxContent">Some Text</div>
                </div>
            </div>
        </div>
        <div id="footer">
            Footer
        </div>
    </div>

a couple of things i should mention:

now days when you have a link list the best idea is to make it with the UL element but one of the problems with that method is that you cant set the width of inline element (you set the display of the li value to "inline") so you ending up with uneven list of links. you can fix that by setting the display of the li to "inline-block' but again our friends from IE6 no support this property so in the end of the day you must go back to floating divs, just remember that if you wish to create list of links and you don't mind the width of each link use the ul tag, it's very clean.

i also set the height of the main container (#MainContent) to 300px, but you should remove it and let the height resize to the document length.


change the css as you wish i think you have enough to go from here
good luck with your work!

[jlbantang]

that is great, I appreciated it most. another interesting markup you have is this:

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

does it make any difference to take it out? why you did not use that tag across all div main groups (nav, content and footer)

[motil]

the clear class use the "clear:both" property it makes sure the "float" property will cleared, some browser cause to the lower divs to collapse if you don't clear the float.

final tip: make sure to keep testing your website in different browsers since some css rules are differ between one browser to another, you'll found out soon enough that firefox,chrome,opera and safari almost always obey the CSS rules but IE6,IE7 and also IE8 (which is a bit better then 6,7) are almost always has their own rules.

and from the short ride i had on IE9 (beta) last night i saw it has it's own issues which i hope they'll fix until the release.

[gep13]

final tip: make sure to keep testing your website in different browsers since some css rules are differ between one browser to another, you'll found out soon enough that firefox,chrome,opera and safari almost always obey the CSS rules but IE6,IE7 and also IE8 (which is a bit better then 6,7) are almost always has their own rules.

and from the short ride i had on IE9 (beta) last night i saw it has it's own issues which i hope they'll fix until the release.

This is great advice.

One way to easily test your site across lots of different browsers is here:

http://browsershots.org/

Point it at your site, and it will take screenshots of it in lots of different browsers. Then you can do a visual check to ensure that things are looking the same.

Gary

[jlbantang]

I'l have to put all bits and pieces to work. See all you in next post.

[gep13]

I'l have to put all bits and pieces to work. See all you in next post.

We'll be waiting