I have a page structure for a website using fixed headers/footers around the main content. To keep things simpler for responsive design, I'm not using margins around the main content, I'm actually repeating the header/footer in the document - one in the fixed position, and once in the dynamic one. This means I don't need to worry about different heights on different devices.
However, I don't want the repeated content showing in search-engine results, so how can I hide it?
CSS doesn't hide anything from search engines.
For good practice, you should consider getting back to only one header/footer.
How about duplicating the header and footer with Javascript? You could use the jQuery .clone() method for this purpose.
Most search engine don't execute Javascript for their crawling.
Related
I am making a responsive page and need to move a section of content to a different place in the DOM on mobile vs desktop screens.
My current solution is to have the content duplicated in both places but tag one with a show-on-mobile-only media query and the other with a show-on-desktop-only media query.
This is simple and works but I am wondering if there are any potential pitfalls with having some of my content repeated on the page in terms of page load speed, accessibility or SEO. Alternatively, I could try using JS to move the element, but that has its own issues.
I see that this is a similar question, however it did not fully answer my particular concerns.
I'd appreciate your thoughts.
Thanks.
In terms of accessibility, some people have css turned off so then it would still appear twice.
Unless there's a really special reason why you need to have specfic content for different device views, it would be far easier—and much more maintainable—to employ responsive web design (RWD). If you do that, your layouts would be controlled via CSS, and JavaScript would only be needed for items such as responsively served images and mobile menus.
Another added advantage of using RWD is semantic HTML markup, and makes your content much more accessibility—and SEO—compliant. It's good to keep in mind that changing visibility on elements can wreak havoc on screen readers—which can be quite challenging for disabled users.
I'm mainly a back-end programmer but every now and then I need to put a human-friendly face over something, and end up becoming a web designer/dev for a day.
More than a few times my layout issues have been solved with wrapping everything in a div directly inside the <body> tags and applying some styling to that, mainly sticky footers or pushing content down to fill at least the height of the viewport. Because I use I use it infrequently, I tend to forget the intricacies of HTML/CSS, but I'm wondering should I always wrap all body content in a div as good practice?
On one hand:
It seems to be the most commonly suggested solution to stretching content all the way down (sidebars also seem to be a menace for this).
Even if I don't need it to start with, I may need it in future, and putting it there to start with means it is less likely to affect the rest of the page if I need to add one later.
But I feel like there's enough I don't know about web page rendering that overall it could be detrimental somehow. Is it semantic? Does it open up the potential for bigger problems with other parts of the page? I like clean code and I like scanning through my work and be able to tell at a glance what everything does and why it is there. Something just feels off to me about a div whose purpose is not immediately clear.
Not that you have to wrap body content with div. It just historically web was about content only. You can trace it even how names has changed over time.
Webpage - page in web. Page like a book page, just simple text. Text has flow layout. Styling is minimal (in terms of location). It is not important what is underneath when content is finished, just the rest of blank page.
And now your already mention term viewport. It is place for content and control elements. Modern web-page not a classic page anymore, it is application nowadays. But term web-page already in use. Try to calculate how much of page space takes text content (flow layout) and the rest(buttons, images, video, controls - block layout) for example on Facebook
Element div become universal element used to split content logically into separate blocks. Element div just a block with max available width of his parent and height of inner content. The visual presentation of div element can be widely changed using styling. There are a lot of new semantic elements in html5 those were emulated by div element mostly previously. Easy to guess what for such elements like header, footer, aside, nav...
Main idea of div is to split content logically and style it as you need.
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.
Is it possible to use CSS to work like frames?
What I mean is, when we use frames (left, right for example), clicking on left will refresh only the right section using the 'target' attribute.
Is it possible to create this effect with CSS?
Thanks.
Using frames is usually a bad idea
To answer your question, no, CSS cannot be used to work like frames. CSS is used to changing the style of HTML and as such, cannot actually change the content of a page. It can be used to hide content, but I don't think that is what you require.
However, I feel in this case you may be asking the wrong question. As frames are usually the wrong approach.
When starting out in web design, frames seem like a great idea. You can seperate your navigation from your content, your site will load quicker because the navigation is not loaded every time and the menu is always visible, even when the page is loading.
But, actually, frames are incredibly bad for your usability.
Your users cannot bookmark individual pages
Printing is broken
Standard features in a browser like open in new tab often breaks
Users cannot copy/paste the web address for a specific page for sending to a friend
Frames do have their uses (e.g. Google image search), but for standard navigation menus they are not recommended. Try creating a page in a dynamic server language such as PHP or ASP.NET.
These languages have ways of creating standard elements such as your navigation menu without the use of frames.
No, this has nothing to do with CSS. CSS is for styling elements only. What you are looking for is an IFRAME. And IFRAME can be given a name
<iframe name="my_iframe" src="xyz.htm"></ifram>
and then be targeted in a link.
I've got a design that relies on framed content using CSS. You can do this by using overflow:auto, however it won't do what you want, i.e. loading certain portions of a page. To do this you'd need to use some AJAX library such as jQuery to load the content area dynamically. This is quite dangerous though as your URL may not relate to the current content of the page.
You could probably do something with the overflow part of CSS.
If you set up a div with overflow:auto with a fixed width and height with alot of content you will get scrollbars. Potentially you could use anchors to get content to move to be viewed within the div.
This means that all your content is in one page and it is just moved around with the anchors. You could do a similar thing using a jquery tabs plugin too.
I have never tried this and it might need javascript to get it to work fully.