How to deal with different client resolution?

[rockdale]

Hi, How do you guys deal with the different clinet resolution? For
example, you have
800*600, 1024*768 and 1280*1024 on client side.

We used to put everything into a table with fixed width (the lowest
width of your clients' resolutions) then put everything inside the
table with a percentage width. But for those clients with higher
resolution, this way put them into a very smaller area to work on. But
If we do not fix the outtest table's width for example, if we put
width=100% , some control for example text with multilines will shows
with a fixed width which is awkward. Can we make the width of textbox
change with the percentage?

I would like to know how you guys deal with this, are there any best
practice. what you guys are deal with this. Any experience can share
with?

Thanks
-rockdale

 

[Przemek Ptasznik]

rockdale napisał(a):

Hi, How do you guys deal with the different clinet resolution? For
example, you have
800*600, 1024*768 and 1280*1024 on client side.

We used to put everything into a table with fixed width

Forget the table-based layouts. Read about css, tableless layouts,
separating content from presentation etc. It will help you to get rid of
this kind of problems. And think about em instead of percent units.

 

[rockdale]

I aleways use table to position controls on my web page. I also use css
but more for define font size etc. I would like to know more about the
stuff that you talking about - tableless layouts , separating content
from presentation - any links you can suggest?

Thanks

 

[Przemek Ptasznik]

rockdale napisał(a):

I aleways use table to position controls on my web page. I also use css
but more for define font size etc. I would like to know more about the
stuff that you talking about - tableless layouts , separating content
from presentation - any links you can suggest?

Sure

http://alistapart.com
http://www.glish.com/css
http://www.bluerobot.com/web/layouts
http://www.tjkdesign.com/articles/one_html_markup_many_css_layouts.asp
http://cssvault.com/
http://css.maxdesign.com.au
http://www.useit.com/


greets,

 

[rockdale]

Thanks for those links. by search tableless layouts I also got lots of
links about using div and css to replace table.

As what I understood from these examples, you still need nested div to
position different controls on your page. Something like
<div-container> <div-left/><div-center/><div-right/></div-container>
kind the same idea as using table, but has a lots of advantage as they
all declaimed.

While, I am working on change my pages to tableless layout. My page
contains a nav menu on the left and content on the right, but the right
content contents lots of controls(gridview, checkbox...etc). I am using
<div-left/><div-right/>, should be the samplest one, but I never get
the <div-right/> to position at the right of div-left, it always under
<div-left/>

Thanks
-rockdale

 

[Przemek Ptasznik]

While, I am working on change my pages to tableless layout. My page
contains a nav menu on the left and content on the right, but the right
content contents lots of controls(gridview, checkbox...etc). I am using
<div-left/><div-right/>, should be the samplest one, but I never get
the <div-right/> to position at the right of div-left, it always under
<div-left/>

Did you try float:left (or right) css property?
Ask google about css columns - there are a lot of useful examples.

And don't think about tableless designs as div-and-span-based
alternative to tables. Rather think about semantically valid (x)html
which can be read by any browser(including screen readers). Build your
html code using elements to express what its content means and not what
it must look like.

Pass a link to your page - it will be much easier to us to help you with
css problems.

 

[rockdale]

Thanks for your reply.

I tried float property but finally I found it is because that my left
div occupies 30% and right div occupys 70%, furthermore I still have a
margin 10px to leave a gap between these two div so the width is more
than 100% which causes the right div goes to the bottom of left div.

I still have problem with put 2 divs side by side, I am sorry I have no
link to show you my web page. I will paste the code here, see if you
can help with this problem, this code is child page that using master
page, the master page contains left and right div I talked above.

No it is the content inside the right div.

I have <div roundheader> and <div roundbody> these two are vertical,
this works fine, and I am using javascript to get the round corner make
up.

Inside <div roundbody> , I have two gridview (or something else that I
may put them vertical, horizontal...etc. I am still using table here to
put these two gridview horizontally since div content does not do the
job here, I know something wrong with my div content, but could not
figure out why.

Thanks a lot

Styles.css

div.roundbody{clear:left;padding: 2px 0px 0px 0px; margin: 0px 0px 4px
0px; background-color: #e7e7e7;}
div.roundheader{margin: 0 0 0 0;background-color: #660000; padding:
0px 0px 4px 0px}

div.content
{
background-color: Transparent;
margin: 0px;
border: solid 2px #ffff00;
float: left;
clear: both;
}

-------------------------------------

aspx

-----------------------------
<asp:content contentplaceholderid="PageContent" runat="Server">

<div class="roundheader">
<h1>header name</h1>
</div>
<div class="roundbody">
<!--<div class="content">-->
<table cellspacing="0" cellpadding="2" border="0" width="100%">
<tr>
<td valign="top" style="width:48%">
<asp:GridView/>
</td>
<td style="width:2%"></td>
<td style="width:48%">
<asp:GridView/>
</td>
</tr>
</table>
</div>

 

[Przemek Ptasznik]

rockdale napisał(a):

Thanks for your reply.

I tried float property but finally I found it is because that my left
div occupies 30% and right div occupys 70%, furthermore I still have a
margin 10px to leave a gap between these two div so the width is more
than 100% which causes the right div goes to the bottom of left div.

Right. Remember that width property means content width. if you apply
borders or paddings, it will be added do your width and your element
will occupy more place on screen. Second thing - floated elements
doesn't stretch parent element unless they're too floated. So it's best
to apply float property to parent (with width of 100%).

I have <div roundheader> and <div roundbody> these two are vertical,
this works fine, and I am using javascript to get the round corner make
up.

Leave jabvascript here. Look at
http://alistapart.com/articles/mountaintop/ - pure css solution.

Inside <div roundbody> , I have two gridview (or something else that I
may put them vertical, horizontal...etc. I am still using table here to
put these two gridview horizontally since div content does not do the
job here, I know something wrong with my div content, but could not
figure out why.

use float again. Get rid of div-content, just place tables(grids) in
div.roundbody.
I tested for example this css code and it works:

//here goes all your css...

div.roundbody
{
float:left;
width:100%;
}
div.roundbody table
{
float:left;
width:50%;
background-color:Yellow;
}