Is there some css/js/jquery to use on DIV in main index.html if I want to display it in all subpages without editing their code? E.g. <div id="chatbox"> placed in main index.html to show in /products/index.html.
It's a generic idea. My way is as follows.
Divide body into two parts or as required. Let's assume two parts. Top one gonna be fixed in all pages. Bottom one gonna change. So when you want to move to another page, just render contents in the bottom container after emptying it. Don't touch top container.
Related
Am designing a site and am quite new to it. So my question may be naive. There are two pages index.html and aboutUs.html.
For this eg, i have removed most of the invalid contents with regards to my question. My question is related to how can we dynamically change or handle the length of the page based on the content. In my case, index.html does not have too much text, so the UI looks fine, however aboutUS.html has too much content, and the content overlaps with the footer. How do I handle such scenarios? For reference, I have added some images below, the first image has no overlap, but the second one has. You can find the source code over at GitHub (https://github.com/vnmshenoy/global)
Images
Your problematic classes seem to be imageDiv and overlap.
Both these have defined heights.
When the content inside the element is larger than this height, it is visible, but is actually spilling outside that position, and so appears on top of the next element. If you set a border on these elements, you will see what I mean.
You could always use the overflow:scroll style here and scrollbars will appear when this happens, but you'd be better making your design a bit more fluid with regard to heights, especially if you plan to make it responsive.
I currently have a website up and running: http://reinhartasmimenumentions.com/
I am trying to wrap a form around the picture so it would look something like
Currently I can only figure out how to add the form below the picture.
What do I need to do to place the form to the right of it instead of at the bottom?
You have to use the margin properties of the elements.
Something like this:
<div style="margin-left:200px; margin-top:200px;>
<form>
....
</form>
</div>
Personally, I would break that image up into 2 parts. One part would be the top part(header) and the other would be the lower left section. Then set up 3 divs, the top div contains the header image the floated left div below that contains the other part of the image and then the right div contains the form HTML.
Of course, it would be much better to recreate that image using HTML as much as possible.
I am using reporting services 2012 and want to display a group of elements at the bottom of the last page.
I have tried putting this in the footer and hiding the elements for all but the last page, however this doesn't work very well as there is a large blank space at the bottom of all of the preceding pages.
If there was a way of aligning the elements to the bottom of a page that would work, but I cant see any way of doing that. If there was a way to push the elements to the bottom of the page using a rectangle that has a dynamic height, that would also work, but I also cannot find a way of doing that.
Any suggestions?
Unfortunately, page headers and footers must be one constant size in SSRS. That is why you are getting all of that whitespace, and as far as I know, there is no workaround for this.
However, what you can do is page break at the end of your main table / report. Then have another table display the elements you want. Make this second table the height of a full page and put the elements at the bottom. Go into the Tablix Properties and check "Keep together on one page if possible".
If the second table doesn't work, try a subreport.
If you want to have the footer on the same page as the last page of data, this doesn't work. The only way I know of to do that is a major hack: check how many rows come back from the database and calculate how much space they will need to display. Then at the end calculate how big of a rectangle you need to make in between your main table and your second table to push it to the bottom of the page.
I added a custom control to a .NET page which allows user to upload a picture.
This control has a div element which parents an image that is supposed to get printed. The control is positioned near the bottom of the HTML structure and therefore the image gets printed on page two.
However the problem is that I want the picture to get printed on page one but no matter what I try the picture never gets there. I've tried absolute positioning and floating.
Now what to do, what to do? :)
Update:
The HTML page includes many forms and stuff so it's difficult to give code examples but here's what it basically looks like:
<div class="col">Bunch of stuff</div> // Left column
<div class="col">Bunch of stuff + the image control</div> // Right column
When print; the columns are stacked upon each other by using float, but I want the image element to be positioned on top of page one.
Since I couldn't figure out a solution for this problem, I ended up with restructuring the HTML so that the "image control" was at the top. Then I was able to position the control at the top of the printed page.
I have a website with a blog and sidebar on the right hand side and it looks fine, however when I go onto page 2 of the blog, the sidebar moves down to the bottom of the page.
You can see what I mean by going to these links
http://www.beatinganger.com/blog (Sidebar looks normal)
http://www.beatinganger.com/blog?page=1 (Sidebar moves down to the bottom)
I have looked at the source code and I can see no changes in the difference between the 2 pages.
Any help would be much appreciated.
Your #left_container element on the sub-page is not being closed and therefore the #right_container element is being contained inside it.
The container div closing is causing a problem (as the other answers point out); also your div with the vertical_menu class is breaking out of its allotted size - which will probably cause float issues when your divs are closed:
Yeah, something is up with the template of the second URL, so that the sidebar is injected INSIDE the left 'main' column.
the #right_container http://www.beatinganger.com/blog?page=1 is in the different hierarchy than the enter link description here. #right_container and #left_container should be in the same parent and level as shown in the first link.
Another advise though, I notice that the content of the #right_container has slightly "wider" content than the container itself. Make sure the content elements are smaller or equal to the width of the parent container, or set #right_container -> overflow: hidden; a quick hackish way though.