Member Avatar for Stivi

Hi,

I want to make a dynamic webpage using the Master pages in ASP.net (C# Language, VWD 2005).

1) First about, I've created a panel where will be my whole webpage (thanks to that I can center my web on screen).

2) In this panel, I want to create a typical webpage with top, bottom, left menu and content area in the middle. And this is the problem - If I'll insert more panels into the webpage, I can't see any "Dock" property ... :confused:

Is there some way how to dock components in webpage like in standard applications?

Thanx,
Steve

  • 2 Contributors
  • 4 Replies
  • 290 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by f1 fan
Member Avatar for f1 fan

There a numerous ways to achieve it. There is no such thing as a "Dock" property in webpages, however there is positioning through style sheets and such.

First of all you need to grasp the concept of a web page as opposed to a windows form from a developers point of view (and this is crucial to web development that so many forget). In a windows form you have 100% control. You created the form, you know everything about it and control it all. With webpages you dont. You write (directly or via asp/asp.net etc) markup language. You have no idea how that will be viewed (if at all - remember bots read your html too, thats how google gets its search information). So you have to cater for the fact that there are many different browsers (IE, FireFox, Netscape, Safari, Opera etc) which all (unfortunately behave differently and none conform to W3C standards) with different modes. The users all have different screen sizes and resolutions and may or may not have their windows maximised.

So you only write the markup and their browser or whatever is the "form" (known as the viewport) to display this to the user. So you have little idea about it. Including size.

Ok now the lecture is over lol :D But it was important to grasp the difference.

You can position anything anywhere using stylesheets. You can position absolutely, relatively, fix permanently (even when scrolls) and in % or pixels.

As for your masterpage i think you have the concept of that slightly wrong also. A masterpage is used where you want part of your webpage to be the same on every page (that uses it) for consistent look and feel. Typical scenarios are such as yours where a header, menu and footer are on every page. Put this in the master page and then move the contentholder to where you want the content for each page to be.

Grasp those ideas first and have a play and then come back with more questions and i will help

Member Avatar for Stivi

OK, thanks, I'll try ;-)

Member Avatar for Stivi

Hi,

but anyway, I've remembered that on the last M$ presentation, they just simply inserted all elements into the table, so I've dried it but result is the same :confused: Bottom cell just can't move itself in Opera & Firefox (In IE 6 it's OK, anyway... damn those 15 % of our visitors :cheesy: Isn't there some really simplier way how to solve it in VWD 2005? I'm sure that stylesheets & CSS are great, but it'll take much time to learn & that's what i don't have right now :sad:

I've inserted the scheme of the actual problem here:

http://steve.aspweb.cz/img/site.png

Thanx,
S

Member Avatar for f1 fan

ahhhhhhhhhhhh now i am with you
welcome to the world of no browser conforms to the W3C standards! Opera and firefox are doing it correctly. IE is doing it wrong but as you are using vs 2005 you design in IE so dont realize. 1 piece of advice - always use two browsers when you are developing. I use Firefox as the main browser and check on IE but thats a personal choice.

Tables are your problem and setting the heights. I am going to assume you are using XHTML as the markup? This is the default in vs2005 and you should always use it.

Use styles or style sheets then it will work. Make sure things are correct. Tables were incorrectly used in the past for layouts. They are for data. DIVs SPANs etc are for layout coupled with CSS.

To get yours you need your html to look like this

<body>
<form>
    <div id="container">
        <div id="header"></div>
        <div id="contents">
           <div id="menu"></div>
           <div id="contentholder"><asp:contentplaceholder .... /></div>
       </div>
       <div id = "footer"></div>
    </div>
</form>
</body

And your css file should be like this

html, body, form
{
height:100%;
}
form
{
text-align:center;
}
#content
{
margin:0px auto;
text-align:left;
width:???px
height:auto;
}
#header
{
<put styles in here you want such as backcolor etc>
}
#contents
{
<put styles in here you want such as backcolor etc>
} etc for the others 
#footer
{
<put styles in here you want such as backcolor etc>
}

That should do it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.