move controls freely on asp.net webpage - asp.net

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.

Related

Using CSS, how do you push ads up on a semantically structured HTML5 page when they are last in the source?

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.

What does this do: MS_POSITIONING="GridLayout"

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.

ASP.net 3.5 layout issue

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

ASP.net style sheet + postion of web controls

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.

Using CSS in ASP.NET

I have one question..
I am using Asp.Net C# With SQL 2005
I have one grid in that and in grid i put one image box and i want to call image from my css.
when i use ImageUrl="~/Images/delete_link_thumb.gif" at image level then image is good but when i call from css through background-image:url(images/edit_link_thumb.gif); then image display is not good
Any suggestion??
Thanks
Path is the CSS is relative to where the CSS is stored in the web site.
as Fabian mentioned, try using background-image:url(/images/edit_link_thumb.gif);
firstly, ur referencing two different images in your question, besides that it depends on where your storing your stylesheet as it is relative to where it is in your project, try adding ../ in front of your images folder reference, like so:
url(../Images/blahblah.gif);
The case is ...
If you use Image url directly it effects the image-box and its the default property of that box and as the css you are applying is not the default so it can also possible that it doesnt take the exactly size or it gives some additional padding or so in your css
so if you are using background property of css then you should supply the position argument also such as center center or whatever fits

Resources