I have a long job application form, about 7000px in length, with several tables that contain form inputs (textboxes, radio buttons, etc.). Each table is nested in its own div (applicant info, work history, education etc.). I intend to make the sections collapsible when complete, however design view started overlapping the elements after about 5000px, making it hard to judge the layout. At runtime no overlap occurs. I realize design view is not an exact browser representation, but this overlapping seems exceptionally quirky. I am only using relative positioning and minimal styling at this point. I tried setting the height of the content to a large number to no effect. Does anyone know if this is a bug with VS or if there is some setting that will prevent it, I couldn't find any. It seems to only happen when the content of the page runs long. Thanks.
Related
I am new to Web Development and React (and fairly amateur at CSS), so there must be some fundamental issue with my understanding of how flex works.
With reference to this codesandbox, the website that I am designing (for upskilling myself) seems to have (for the lack of a better word) some kind of 'shunt' in the Home Page. To elaborate, keep a close watch on the navbar on top. As soon as you click on 'About', the whole page seems to move a little to the right. Only the home page is being affected in this manner.
I have tried figuring out the issue on my own using the Browser's handy 'inspect tools'. Came to the following conclusions.
It seems that the Home page has the width of 1519px whereas all other pages have the size 1536px. I am unable to understand why there is a difference of 15px at all.
Trying to isolate the issue (by removing all elements and adding them back one-by-one to see which one is erroneous), I realised this 'shunt' is being caused whenever I place a flex element inside another flex element. Thanks to other stackoverflow answers, I found that the dimensions of a flex element depend upon the parent (which in turn is another flex element with ambiguous sizing properties).
Issue
Even when I resolve the above mentioned problem, there still remains the "latest-post-card" element which impacts the Home Page orientation. Further, when I remove the height property for the "latest-post-card" everything falls right into place, perfectly, just the way I want it to appear, save for the fact that the height of this card is variable. For the sake of consistency, I would like this card's height to be fixed (as I will keep updating the contents of this card dynamically through the backend).
Requesting fellow developers to shed light on the issue here; would appreciate if anyone can point out what the root of the problem is and how I can remedy it.
What you're referring to as a "shunt" is caused by the other pages taking up less height and therefore not needing the scrollbar. When the scrollbar disappears, the page basically expands by the width of the scrollbar and therefore the content jumps slightly to the right.
I am in the process of building a site with a large amoutn of divs, perhaps 300-1,000. Each are small, 100x100, and when the user clicks on each div a small modal pops up w/ basic info about each div, maybe 2-3 paragraphs and some images; all this works great. However, I fear as the divs increase in quantity, this amount of images/texts that are loaded will slow down the site to a crawl, resulting in a terrible ux; it's also aesthetically dispeasing to me (and I'm sure to other coders) to have so much code on a single page. So the question is thus: what is the best way to make modals that load quickly, but don't slow down the site, or are there alternatives to them?
I thought about imbedding the modal content (text,images) inside CSS, and perhaps makig it between 2-5 css files?
I thought about pop-ups, but those are problematic, as some browsers won't respond to the specific size dimensions of a pop-up, (IE), and some block pop-ups all together.
Has anyone else dealt w/ this or has an interesting solution?
I appreciate everyones help.
I'm attempting to rearrange elements on a Volusion store for my employer. The products page we currently have looks like This
I've been tasked with moving the details box
(containing "Nothing says "I'm ready to learn!"), up and to the right, to align with the price box.
The box is a table contained in a hierarchy of nested tables, at roughly the same "depth" in a different branch.
I don't have access to the HTML for the page, only a template html file that generates menus and footers along with the relevant CSS. Some JS exists on the site but since I lack experience with it, I'm hesitant to get into it.
Because of the table-and-div structure, and the fact that I cannot edit the HTML, I'm left with tweaking stylesheets and possibly some javascript. My issue is this: How, using only these tools, can I take an element in one container and reposition it relative to elements in another container? I've tried
Position:Relative;
left:some percentage;
top:some negative percentage;
Which, for a single page, I can get to look quite good, but if I allow others to load the page it falls apart completely, due mostly to the fact that the container for the element I'm moving is calculated based on screen width, and the container for the destination is calculated with the width minus a constant value(the image for the product).
My employer is willing to accept that the arrangement won't be perfect, they know Volusion is the devil complex. But it's important to them that their products display all relevant information "above-the-fold". Obviously I've not found any sort of answers on this. I don't find all that many people who have to edit a webpage without access to the raw code, because that's stupid. Worse still, moving an element to align with a completely different container is just bad policy as I gather, but its what I'm being asked to accomplish.
The only way to do this on Volusion is with javascript. You do not have access to the HTML for the product page and given that it is built with tables there is no way to move the product description area up with CSS.
You need to use javascript to detach and append the product description box below the product details area.
There is no way around it... You need access to the HTML files. You could do it with absolute positioning but that is not good practice.
Because you are working with a template; if you change the arrangement of that page then all of the other product pages will follow. So the reason you can't find the HTML is probably because you are looking for a .php containing html..
I suggest to spend time understanding the template or get a volution expert.
Can you explain to me, at a very high level, what I would need to build an image carousel for the web, please. You can use data structures and general computer science terminology - but nothing language specific.
E.g:
Store all the images in an array or linked list
When the carousel is loaded, resize the displayed images as X% window size
When the next button is pressed, imageA moves to a hidden html element.
Et cetera.
I hope that makes sense.
Thanks.
You don't want anything language specific but you want to know about carousels on the web and you've tagged this with 'html' and 'css' so I'm going to assume that I can talk about HTML and CSS but I'll try to keep it high level.
If we ignore Flash, then you're left with HTML + CSS + Javascript. The common way to do this is to arrange the images or their thumbnails (don't resize via HTML - its doesn't look good and can increase your page load time) in HTML elements that are themselves contained in one or more layers of wrapping elements. So the whole set of images strung together might be wider than the viewing window. CSS is used to manage their exact layout and to keep them from overflowing the viewing window. When I say window, I just mean the portion of the page in which you want the carousel to appear. Then Javascript is used to change the CSS properties of one of the HTML elements that is wrapping the images, causing it to scroll or shift position.
With HTML5, you have more options, but the above is the way things have usually been done until now.
Finally, if you are going to actually implement this, there are a number of scripts available that will probably meet your needs, but if not I highly recommend using a Javascript framework like JQuery - it will make things much, much easier.
If you want to build it by yourself, one straightforward way would be to have a master div and all the images in it, lined up horizontally. Have the overflow set to hidden on the master div. Then use javascript and set scrollLeft as the user clicks the next, previous buttons.
I have been given an existing table layout (for tabular data) with the task of making it as accessible as possible.
I added a caption tag to each table within the layout and I realized the caption width is not consistent across different browsers. After a bit of trial and error with CSS, I managed to get it right on all the browsers I need to support aside from Firefox (very last release) where the tables are larger than their own captions (with same width declared in the CSS)
I have googled a bit and this seems to be a known issue.
Any standard solution/suggestion for this?
Thanks in advance
Mirko
Keep in mind that captions don't HAVE to be visible and they still will be accesible, for instance if you hide them (display:none OR visibility:hidden), the width won't matter, as they won't be "seen" in the page, however a screen reader will still pick them up.