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.
Related
I have built a simple app using CefSharp 53.0.1 in VisualStudio 2015 Community with a locally stored web app built on Bootstrap. (For reference the code is virtually identical to the OurCode tutorial: http://ourcodeworld.com/articles/read/173/how-to-use-cefsharp-chromium-embedded-framework-csharp-in-a-winforms-application)
I have the main form maximized, and the CEF browser set to fill the form. However when I run the app, the browser is taking around 75% of the space vertically and 75% of the space horizontally.
Further, the top of the content is chopped off. It looks like you've scrolled down the page a bit, but it is not possible to scroll up any further.
I will post screenshots and a link to the code as soon as possible, but I hope someone might recognize this issue
I am building this form: http://codepen.io/anon/pen/gFoIG/
and so far I am satisfied. Unfortunately I have some issue that I seem not able to fix.
First of all, I want to enforce the label positions beside their respective inputs. Now the form breaks down easily (with the opera emulator for smartphone and tablet, the privacy label goes below the check, but I want that it stays beside it)
The other issue that I have is that I want it to fall back gracefully when there are small screens, like placing the second image below the first and placing the input controls one below the other and take the full screen width to be bigger and easier to interact with, but so far I only was able to break the layout with my tests.
This issue: the the form layout breaks, the internal control (input, button, etc) go outside the container div. How do I enforce the container to keep everything inside? I've experimented with blocks, floats and whatever, but if the layout breaks, the input boxes usually go outside the gray rectangle.
Last issue: If I insert this form inside an existing website (for example, a page in wordpress) the layout get completely destroyed because influences from the theme style. How do I enforce my style on my form, keeping it isolated from the other styles? I can think of the iframe as a solution, but it is the only one? It is a good practice?
Anyone can help me with that?
You might want to take a look here. Its a site I just set up to explain an approach to responsive using a jQuery plugin to manage redoing layout. I think it could work for your example quite easily. Also because it can target a container div at any depth in a web page, it could be helpful in the scenario where the layout you want to reflow is inside a 3rd party container (as long as you can run script on the page).
I have old version of Microsoft Visual Studio.NET (2003) on Windows Server 2003.
I have to manage a Pre-developed database pages. The pages (.aspx) seem to be static and not adjust web page size as per window size of browser and remains aligned towards left. This looks old fashioned.
How can I improve the page by making its size and alignment flexible?
(Note: Unfortunately I can not upgrade any of OS or VS.NET)
you can achieve this by using CSS & You need to apply the css in pecentage and not in pixels then it will be compatible with any browser and also with the mobile.
you will not have to scroll to left or right after applying the proper CSS.
But to achieve this you need to apply proper css to your webpage.
I hope this will solve your problem.
I have redesigned only the Home page using the DIV tags from Traditonal HTML tables,
http://www.cricandcric.com
After that my page looks scattering across the screen, if the screen resolution increases.
for the lower screen resolution its looking good, IE and Mozilla compatible
I am not able to make out the mistake which is done, can any one help me check this out.
Can any one share the resources if they on how to make the website which is developed using either HTML or IE more compatible with all VERSIONs of IE and Firefox, with all the different resolutions format, it should work fine,
if any one has any good article share the link to me.
thanks in advance
your "middle1" section has a width defined as 1004px so should be almost the same size as the navigation, however the contents two tables and a div are positioned such that they dont float (certainly I cant see any floating in your CSS).
You're also using tables for layouts - i think thats the crux of the problem. Looks like you are trying to make a three column layout using CSS - have a look at this example: http://ago.tanfa.co.uk/css/layouts/css-3-column-layout-v1.html
I had similar problems for my website and it turned out that fixed width for div elements changed the rendering of the page depending on monitor resolution or screen size. I fixed the problem by using relative width by % instead of px for divs. It was a css 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