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.
Related
I made the following website (http://abrradesignstudio.com/) using a HTML builder template.
Looking at the categories (All, Brochures, Resumes.... etc.) I see that they are somehow aligned to the left. Maybe they are centered, but if the row is not sufficient, it makes a new one, leaving the first one with too much space to the right (making it look left aligned).
How can I avoid that and make them really centered?
Is there a fast way to make all other images disappear (instead of dim/gray-out in the background) when selecting a certain category?
Another question: My contact form is not working. I saw on a similar website that they use https://formspree.io/.
I did the same, but I still get an error submitting. My code is 1:1 with the other one (that works), just the e-mail is different.
If you know very little about HTML or CSS it may be best to read up some blogs and tutorials on CSS (there are many, many out on the net) .
The Solution
In .filters li (line 4542 in theme-nearblack.css) turn off float:left; and your display will show as you want.
floats do just that, they float outside of the flow of the document so it's much more tedious to try and centre them. As the parent element to this li is already floated there isn't much point floating the contents as well.
Stack Overflow Questions
Please when asking questions can you paste a minimum working version of your code which displays your problem, rather than links to external websites which will change. Posting code blocks into your question means whenever someone in the future reads your question they can see exactly the issues you are having (and how they are solved).
Please Take the Tour.
If my solution works for you can you mark up and tick, thanks.
I've got a tough one. I work for a company that uses a sharepoint that is 100% text based due to varying network performace issues accross the world. It provides the option to input HTML for styling but scrubs any javascript. I do not have access to code CSS and I'm assuming jquery is not available.
I would like to embed images into the sharepoint as a proof of concept by taking advantage of a floating div (or iframe) that displays with an href to display a png file stored on a server. I don't want the div (or the image) to load unless the user clicks a link or a button.
I'm pretty amature at anything other than basic HTML formating. I'm not even sure it's possible to do something like this with only html.
Thank you in advance to anyone willing to take a stab at this.
You could do it with this HTML, which is ugly and unmaintainable.
Use an iframe with scrolling="none". Use width and height attributes to give it dimensions.
Inside the iframe have your img elements with an id attribute. Ensure they're spaced with enough vertical space so they can't be seen by default, and appear isolated when viewed later.
Link your links to those id attributes, e.g. link
I have got a requirement where the outlook is as shown in the attached image
I have accomplished the task by making use of tables in HTML and styling using CSS.
The criteria is that the images in a row is almost the same (i.e the two images) and the content changes for every row. So the content is different on every row but the images remain the same for every row. Just for info there will be multiple number of rows. What would be the best practice to implement such as design other than using tables, where it should also be flexible to change the content. Or using tables is the best option.
Suggestions from the professionals are appreciated.
I don't want to write it for you but I've made a quick mock up for you to have a look at - http://jsfiddle.net/spacebeers/TAJdw/
You don't want to use tables for anything other than tabular date anymore. You're much better off spending your time researching CSS.
Have a look at my example. It's what one instance of a content container could look like. What you want to do from there is look at getting two of them in a row. Build the CSS for the .container class, then copy another instance of .contentContainer in and see what results you get.
I'm happy to provide help if you want but it's always good to have a crack at it yourself. You'll get better answers on here and avoid unnecessary downvoting of your question.
It is generally advisable to use pure css for things like this, rather than tables. Tables cause your page to render slower, as the content needs to be loaded before the rendering engine can correctly draw them.
Try something like this
I would consider using a div with a background image style to it so that for each row with the same image all you will need to do is put that specific div class in. Then you can just position the outer div's to get it to look correctly, although tables are not the most efficient way of build web pages they still work.
Like mez said - you need to think about repeating content - and learning about floats. I'd really advise working through this site
http://css.maxdesign.com.au/floatutorial/
it will teach you all the basics of designing with divs.
In the meantime - here's roughly what your're after. I've added background colours and made up all the heights and widths, as they weren't specifie, but it should get you started.
If you look at the html, I've annotated what is just a repeat of earlier content.
http://jsfiddle.net/zandergrin/k8EsP/3/
Given some HTML code, is there a way (in Ruby on Rails, in particular), to tell how many lines the HTML will take up on the screen when rendered?
-- Clarifications:
It's in an erb file, but i'm just talking about one string that will be rendered as HTML so yes, text that contains HTML tags.
-- EDIT:
The bigger picture: I want to know how tall a particular segment of the page is so I can conditionally include certain "Next/Previous" links on the bottom. These navigation links appear above the aforementioned segment, so I only want to include the links on the bottom if the segment is very tall.
Essentially, no - it all will depend on the CSS being applied by the browser and the platform itself and lots of other variables. You can, however, detect the dimensions of elements once they are rendered.
Update
Pursuant to your edit, you pretty much need to do this on the client using JavaScript. It's actually pretty straight forward.
Add the Next/Previous element HTML to the page but hide it with CSS
Detect the height of the element in question
If the height is above you threshold size, display the hidden Next/Previous
With Jquery (the framework of champions):
//assuming a height of 200 as the threshold
var THRESHOLD_HEIGHT = 200;
if ($("#segment").height() >= THRESHOLD_HEIGHT) {
$("#links").show();
}
No.
How can you possibly know how wide my screen will be when I visit your website?
Look at YUI Paginator http://s831.us/hW6Dpd
You would probably be best off solving this problem with javascript (or even better a javascript library like jquery). You could measure the height of the div containing the text you want to paginate and dynamically break it apart and add links in the browser. There would be several ways of solving this problem but I would probably do it by sequentially chopping off paragraphs from the end and remeasuring and repeating until it was short enough. Obviously the chopped off paragraphs would have to be collected somewhere to be used for the next page (and recursively measured again in case the second page was also too long).
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.