Greeting,
I have asp.net content page that has more than 30 asp.net controls.
all the control set with style="position:absolute"
I know it is not good practice for ASP.NET web page globalization using style="position:absolute.
Now is there a way to convert my current asp.net page layout to be fit with most of the internet browser.
I read this article http://msdn.microsoft.com/en-us/library/95xdeeha%28VS.90%29.aspx
that explain this issue but it is really hard to go and modify each control.
In case there is no way what I should chnage in my control style propriety to make internet browsers understand the postion of my controls?
THis issue is not specfic to asp.net you should just follow the standard CSS rules and conventions.
There is no automatic tool to convert absolute position items to use relative positioning.
You are going to have to change each component by hand. Best to learn how to layout elements using the margin, padding, float, left, in a relative position to their containing element.
As a first step you must really understand how the box model works see here http://www.html.net/tutorials/css/lesson9.asp
Related
This is a hypothetical question, as I haven't really written any HTML code in years. Provided you have an HTML page, and its content is semantically structured (so you have your main content in a <main> and <article> tag etc.), you would probably have your ads as one of the last elements in your source code, as they will semantically be least important. Financially, however, they would be rather crucial, so you'd like to have them displayed at the top of your page, above the "fold" (maybe in a right-hand column or "sidebar").
Is there a way to "push"/move an aside or div container (holding your ads) up in a sidebar/column, just using CSS - without having to absolutely position them?
Would you position them relative to the containing element (that forms the column), then add margin-top to the element that would be next visually (i.e. first child of the column element - say your navigation)?
Is there a way of doing this if you don't know the height of the "ad" containing element in advance (say because it's containing text, not an ad)?
Is there a way of achieving this, nowadays, with the latest HTML and CSS features? Or is visual design still dictating markup structure after all? :)
It's possible in CSS3 using display: flex-box and order: # to reorder how elements display, but CSS3 only works in modern browsers.
It doesn't make sense to do this when the ad will always be in a specific place, though. Save yourself and others the confusion, and keep HTML in charge of layout.
Is visual design still dictating markup structure after all?
This question sounds backwards. "Does markup structure still dictate visual design?"
No, that ended with the rise of CSS2 positioning.
You can use JS to create a widget and position it wherever you want in the layout, or create the ads as separate templates and use JS to retrieve and position them. This will work in almost any browser.
For the most part if your requirements are simple then it will be easier to simply place the ad element where it is required in the markup.
Visual design does not directly dictate markup, but designing markup with layout in mind makes life easier.
The string appears on all <body> tags in some old asp.net webform applications.
VS.NET uses this property to define whether the page (or other container such as Panel control) uses absolute positioning (GridLayout) or not.
I prefer FlowLayout because it works in all browsers AND because it prevents controls from shifting on the page during browser resizes.
In general you should not use grid layout as it does not support browsers with different screen reslutions or font sizes than the one designed on.
They mean nothing to the browser. they are just hints to editing tools. (Visual Studio-Specific)
If i remember right it was used by Visual Studio early on to say whether you wanted to view the design view in Grid or Flow layout mode. I don't think it is used in more current versions and it should have no effect on the browser.
How to make controls float freely on asp.net webpages? It was some setting to be changed in visual studio right?
It was MS_POSITIONING="GridLayout" in the body tag. But this is removed since Visual Studio 2005.
You can imitate this result by doing the following:
Tools - Options - HTML Designer - CSS Positioning - Positioning Options, and setting it to absolute positioned.
UPDATE:
Visual Studio 2008:
Tools - Options - Html Designer - CSS Styling - Change positioning to absolute for controls added using Toolbox, paste or drag and drop.
Its better if you design your web page through HTML code in the source editor rather than dragging and dropping items from the tool box. By this you can have a structured design even when your page is viewed in different resolutions.
There is no harm with the solution provided by #Ivan Zlatanov if you wish drag and drop controls.
Select your (tool) I mean the one you dragged into your page, then change the view from <Design> to <Source>, after that search for the word "style" in your selected code. And then type this:
... style="position:absolute; ....;"
inside the tags.
Then, when you change your view again to the view, you'll find that the (tool) has become movable! With grid lines to tell you x and y inside your web page.
Do you mean setting the css positioning to relative instead of absolute?
relative positioning and absolute positioning can move the element freely but relative positioning is relative to the actual positionn of the element and moving it from there... Absolute positioning is the one which move completely any where around the page by providing the left top values.
First select the control you want to move around --> goto Format tab--> Set Position --> Select Absolute.
I am a novice at website building. I downloaded a free css from a website and applied it to my project. Here's a screen shot
http://www.csstemplatesweb.com/wp-content/uploads/wpsc/product_images/get_educated_scr.jpg.
I dragged and dropped some ASP web controls(buttons and labels) on the page(using absolute positioning) from the toolbox. Now I want to my web controls to stay within the text area of the template(the area with the pic of guys wid a laptop) and not float away on resizing and when I run the web page on different resolutions. Please help me.
Just create a containing div in your markup and work from there. Honestly, there is no short cut to understanding something like CSS, you either study up or you don't.
I am watching the ASP.NET learn video on http://www.asp.net/learn/3.5-videos/video-13.aspx
and it is showing you can place controls on a page using Absolute positioning. I am just wondering if this is a best practice or should I avoid Absolute positioning? It seems like a nice, easy feature, but there must be some reason why it is not selected by default in the VS IDE.
Many users change the font size of your page by configuring their browser settings. If you use absolute positioning, things will not align right for them.
In absolute positioning, when your page gets more complex, a single design decision would require you to reposition all of the elements, but in relative positioning, you would only need to change one value, and all the other elements would adjust accordingly.
Absolute positioning takes the element out of the flow of the document. This means that it will no longer align with other elements. There are very good reasons to do this sometimes but generally you want to avoid it.
ASP.NET is notorious for using bad HTML/CSS practices. This framework is designed for 'rapid development' not 'elegant, web standards development.
You are right to be suspicious :)
Basically, don't use it for controls.
I only use it for dialogs, or other features which I can calculate the correct position relative to the page size.
I think this question is more about css than the visual studio. Because of the reasons explained in other answers, you should use relative positioning where possible.
This doesn't mean absolute positioning has no use at all. Check out http://csszengarden.com/, to see how you can use a simple html structure and still use some really interesting designs.