I am working with an old website designed in the mid-90s, which is coded very primitively: left-hand menu done via tables, no CSS, etc. The site consists of a bunch of .html pages. Instead of re-coding the site, I want to leave everything in place but put a header over every page with a banner saying "Go to the new site" or something similar.
This way the banner would look modern, but everything else can retain the retro look (including, most importantly, the URL structure). The header should be 100 pixels tall and fill the whole horizontal space regardless of how the tables below it are coded. The plan is to bulk-copy and paste the new code in every individual page.
What's the best way to write this header?
Related
I have a website that supports responsive design where the header is a bit big having the menu, social media icons, search and filters, logo...etc.
The header is not fixed to top when I open the site on mobile, it goes away by scrolling.
The problem is that the space it takes keeps the important page content to view when the page first lands and it is not a good user experience the way it is now.
I have in mind to add some anchors and access the main div(s) right below the header but this requires to append anchors to all links in the website (or 90% of the links at least) to reference specific div ids:
Page 1
Page 2
where breadcrumb is a common container for website body.
Is there a better practice to solve this problem?
Does adding the same anchor to different links affect SEO negatively in a way or another?
Ok, so I am making a website for my so far small Minecraft Build team MCBuild, unfortunately, My ribbon on the top with all the pages links, that are not active, will not centered it is embedded inside of another div, and put into a singular .html file and displayed through an iFrame. All of the code is on GitHub and also, the page can be viewed here. Any help would be great, I think I can't get it just because I am frustrated that I didn't get it the first time. Thanks!
First time overflowing the stack.
I'm making a website with several html pages that are identical except for the fact that they contain different images that are more or less identical in size - and thats how they are named, by the jpg that they feature.
The pictures look great with the website, but I have a 300 pixel header that pushes them downward > forcing you to scroll down to see the full image. This is built into the shared CSS for all these gallery pages.
I have simple text links below the images that are hard coded to point to the next image in the gallery. (I have a list of the 20 images im displaying). When someone clicks the image, it goes to that page and resets the scroll to the top, which makes the header push the image area down.
Can anyone tell me how to prevent the scroll reset behavior of the new link?
Without using something like jQuery, you could link the pages such that you have an anchor tag like <a name="gallery"></a> above the images on each page and when giving the link to the various pages, append a #gallery to the url such as Next Image. This is duplicated on each page however, and will not produce a robust webpage. You'll want to change things in the future and this will cause problems and further work, so I would consider a dynamic alternative.
Note this won't look as seamless as with jQuery and using AJAX to load in the images when needed. Or better yet, as most JS galleries work, load the images into the page invisible at first and then with JS have them show up on the link click. The benefit of this would be that you could generate the links in JS using the provided images. If the images are large enough that they may cause considerable lag on page load, consider making placeholder images of some sort. In any case, take a look at lightbox 2.
Also, I didn't get the feeling you were using any server side scripting to create this gallery. If the js solution doesn't suit you or you find the added benefit of generating part of the website automatically based on the content need at the time, take a look at using something like PHP, Python, Ruby, etc. If it's just a simple website you're after, a great solution might be Wordpress.
You could have one page and just replace the images?
http://www.quirksmode.org/dom/fir.html
Now of course you change the function to work on a "previous/next" button system, assuming you have a photo gallery of some sort.
Please post more details.
You want your link to look something like this:
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
and you want to give your image an id="tips" in this case.
Check out this fiddle to see an example. The only difference is that your href will have the rest of the url in there like the code posted above.
http://jsfiddle.net/QgzsL/
I am looking to convert a clients website into HTML. I'm relatively new as my skills are more directed in the front end of websites (design) so I'm quite lost. The website is allegianceglobalinvestigations.com and if you scroll through it, each page has the same URL. How to I create a HTML file/template from this? I'm assuming that since there are 4 pages, I'll end up with 4 files? Do I need to use OCR for the text?
If you view the source it will show you the urls of the other frames. If you view just that url you can get the source for just that frame. You can use that source all together with some changes if you're trying to just "un-framify" the site. I think that was what you were asking.
There is very little text on there so the only OCR you will need is your eyes and a keyboard if you're trying to use real text on the site.
And yes, you will end up with 4 different files. One for each page.
Good luck with your project, the best way to learn is to dive right in!
This is a frame-based site with a top menu in one frame selecting between four pages in the other frame. The content of each subpage is encoded as a JPEG image in a table.
There are already files for each subpage: content.htm, sis.html, services.htm, and contact.htm. With this low amount of text, you may as well just type the text currently in the images into the body of these files instead of using OCR. Replace everything between <body> and </body> with the text, then use HTML to mark up to the content to your liking.
To eliminate the frames, paste the content of the body element from the menu.htm file into the start of the body element of the four subpages.
Greetings Overflowers,
A result-set grid will be viewing snaps from HTML pages.
Snaps need to reserve original page layout including any tables, images...
Users will scroll through a snap to fully read a snapped page
Snaps can view varying-size windows anywhere in the HTML pages
Question: can lazy loading be implemented such that only viewed windows is loaded without losing the interactivity (e.g. hyperlinks) of snapped HTML pages ? If HTML pages cannot be tailored dynamically and lazy loaded this way, any interactive document format (e.g. PDF, Flash) is welcomed.
Update: Sorry for the confusion. Snaps are not images, they are random viewports anywhere from the HTML pages. In images it is simple, we can load only the portion we need to view. In HTML this is difficult, except when the portion is actually a whole viewable HTML tag element and it fits the needed portion. iframes would only facilitate the window to view the snaps onto, but I do not want to load the whole HTML pages because they are big, but only the needed snaps. The problem snaps can be somewhere in the middle of pages layout divisions where each division is very big. Therefore, fixing the layout size and lazy load their content later on alone would not help. I think layout transformations are necessary but very difficult. I wish I can take a picture of the full HTML pages and take whereever portion I need to view and this image portion keep interactive :)
Thanks !
You can use JavaScript with XMLHttpRequest (XHR) to fetch content asynchronously and place that text on the page (i.e. lazily loading content). I am not familiar with some of the terms that you are using (e.g. what a "snap" is), but if your layout specifies sizes (instead of relying on content, for example, to set the size of a table column), then this lazy loading can be done without re-rendering the layout.
As I interpret it - you have some fixed-size "viewport" div with scrollbars. You have Javascript that monitors the scrolling events of the viewport. You have to (somehow) have some rough idea of what content elements go where on the inner page. If a section is scrolled into view that has not been loaded, then send for it using AJAX. I think the trickiest part of this endeavour would be establishing the rough idea of what content elements go where without completely loading the content page, but perhaps you already have some assumptions you can make about the content.
Edit:
I do not want to load the whole HTML pages because they are big
This seems to indicate that you in fact do have some assumptions about the pages you're working with. How are the pages "big"? Do they have massive tables, massive images, a large number of images, flash content, javascript content...? You might have better success with loading all of the DOM that isn't of a certain tag type, and then selectively loading the rest.