ASP.NET interface

[haythem]

I'm working on a project using asp.net (C#) and I have a problem with the site interface, I need the page to be centered and I cant find any code to make this in asp.net.

I tried to make it in dreamwaver but it didnt work to, I used <div align="center">

and I used table and centered the table in the page but also didnt work.
I also need to add background color in some areas and so on

any suggestions?

[the_pm]

Hmm...it sounds like you're talking about having difficulties with creating the front end interface moreso than the .net itself. Could you post a URL to the page in question, or a test page that displays the problem? It'll be much easier to figure out the problem if we can see it and dig into the HTML document's source.

Welcome to IWDN :hi:

[haythem]

thanks pm, I will upload test page today and i will send you the URL

actually yes, the problem is in the interface not the code.
the problem coming from that the site design is made for 800*600 resolution, so when you use prowser with resolution of 1024, the page come to the left side, what I'm trying to do is to make it in the center.

[the_pm]

Ok, that's generally pretty easy to do, but it all depends on how you've coded the rest of the site and to which standard. There are a variety of techniques available to do the job - we'll see which one is most suited to your site :)

[haythem]

hi again, im back
please check www.techmegamall.com

as you see in 1024 resolution the page appear in the left, while in 800*600 resolution it is in the middle

so what I can do to make it centered in 1024 too?

[the_pm]

The appearance of this as being centered in smaller browser windows is an illusion, and the illusion is coincidental. What's happening is this:

You have a bunch of buttons on the page, which are all laid out using absolute positioning. This means those buttons are fixed in place according to their coordinates. No variation is possible. Because they are laid out in such a way that there's some white space to the left of them, in smaller browser windows everything appears centered, as the same amount of space is being afforded on the right as on the left. Try reducing the size of your browser window while still at 102x768. You'll see that if you make the window just the right size, your site will appear to be centered in it.

The only way you'll be able to center your site at all resolutions is to remove the absolute positioning. As of right now, this method is the only thing that's making your site lay out the way it does, so the moment you remove the positioning statements, the entire structure of the site will collapse. By the way, when I'm talking about absolute positioning, I'm talking about the repetitive statements found in your code that look like this:

style="color:#016398;background-color:Transparent;border-color:Transparent;border-style:None;font-family:Tahoma;font-size:Smaller;font-weight:bold;width:123px;Z-INDEX: 111; LEFT: 32px; POSITION: absolute; TOP: 234px"

The last three attributes are the positioning elements.

Might I ask how this code was generated? Might you consider not using whatever mechanism you used when you go to fix this? Because it's severely limiting what you can do with your site, now and down the road when you want to make changes (case in point, you want to center your site now, but you can't).

Instead of positioning every button, try placing each one into a list, using an unordered list (<ul>/<li>). This will allow you to style the group of buttons and each individual button as you see fit, using a very condensed set of rules instead of writing a rule for every single object.

Out of curiousity, how familiar are you with HTML/XHTML and CSS?

[Alex]

do it with some CSS, include this between the head tags:

<style type="text/css">

body {

text-align: center;

}

</style>

[Alex]

Okie dokie, I had a feeling Paul would come up with a full essay posting it a minute before me :)

[the_pm]

Okie dokie, I had a feeling Paul would come up with a full essay posting it a minute before me :)
Who, me? :)

Actually Dirmass, your method won't work for two reasons. First, it relies on an IE browser bug, which allows text-align to be applied to block-level elements. This will fail in all other browsers. Second, it will not supplant the absolute positioning, no matter how appropriate the method you choose.

Sorry bro'.

[Alex]

Yep, I just noticed it wouldn't work looking further at the source. :oops: :cry:

[haythem]

thanks for the_pm & dirmass for help

we use visual studio and this is why everything is using absolute positioning, as you drag and drop the image or button or control or what ever in the place you want it and this is why its centerd in 800*600 and not in 1024 as the design was done to be best viewed at 800 * 600

well, regarding XML & css we are not very experienced.

Do you think that the only way is to make the website interface again?

[the_pm]

I don't think you necessarily need to get into recreating everything again from scratch. Just recognize that people have their own preferences, and you're best to honor those preferences as much as possible, instead of trying to convince people to change their browsing habits. In short, they won't, and if they need to in order to use your site, it's most likely they'll leave.

In your case, it doesn't look as if you're talking about XML here, at least I hope not, considering how poorly IE handles XML. The issue at hand is making your online application as universal as possible. This means dropping proprietary markup whenever possible (I had to view the sample in four different browsers and then I had to turn JavaScript on in IE before I could see everything on your page) and looking for ways to migrate presentational aspects of your site into CSS.

Start with the method I talked about above. Remove every single style="..." attribute from your buttons. Then place each button into a list, each one it's own list item. Once you've done this, you'll have a bulleted list of buttons which will look nothing like what you want. That's when you use CSS to style everything. Get to that point, let's see what you have and we'll go from there.

Trust me, if you're inclined toward programming and programming logic, this will be a breeze for you once you start digging in.