Tyler Perry has a web site, www.tylerperry.com, that as you scroll down different pages appear. Each page has links to other info within his website. My question is how is this done. Not quite sure how to re-create this. It is almost in a since like the web pages become the navigation bar and when you get to the page you want you can click the links to go deeper in to the website. I would love to do this on my web page. Any ideas would be great.
It's done with HTML5 using the <section> element. That's how the pages are defined. The styling is rather straight forward, you can keep your text in a relative format em or % to make sure they size according to browser. For the images there are css 3 ways of handling those as well.
Basically they have used HTML5 and CSS3, view it in an older browser and the site will be very different.
Related
I'm very new to web design and just made a simple one page website for my iOS app here. I now want to make it so that when this page is opened on an iPhone, the whole thing is zoomed out enough because right now the right half of the page doesnt show. From my understanding and research so far, I need to use media queries and create a separate CSS stylesheet for mobile. However I feel like for such a simple page there should be an easier solution with some plug-and-play code. Something consisting of a simple conditional-type statement checking if the user is on mobile, and if so, gives the new dimensions of the page. I don't really know anything except for the very basics of html, css, and javascript when it comes to web development, so simple explanations would be highly appreciated.
I think you have to go for http://www.jquerymobile.com it is very good framework for mobile web.
Instead of creating a mobile-specific page you might want to experiment with the viewport meta-tag. The tag isn't used by desktop browsers, but it scales the size of what you see on a mobile device's screen. You can also check out Apple's guidelines for more information.
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 have a rather annoying DIV problem, im working on dreamweaver CS5, and i have 2 DIVS inside of another container DIV. But they cant seem to stay next to each other on the design view of Dreamweaver, but when i preview them in a browser they are okay, they are only distorted in the design view, its kind of annoying working with them on top of each other.I have tried decreasing the size of the divs, but they just cant seem to stay side by side.! how do i solve this?
There is no substitute for a browser, or browsers as you need to test your site in all the latest browsers. I would switch off design view and have a browser open on the side or on your second monitor if you have one. You can setup scripts / browser add-ons that continuously refresh your browser so you can see your changes reflected.
Having said that, In Dreamweaver I suggest using live view instead of design view.
See that and other useful tips here: http://www.hongkiat.com/blog/10-useful-dreamweaver-tips-for-beginners/
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.
I'm wondering what are the benefits of having your top row of 'important' links/buttons on a web page duplicated at the bottom?
Traditionally the bottom of forms or pages has been for boring stuff like site maps and privacy information; but; in pages where you scroll down many pages (that wrote funny) it is a pain to have to return to the top to click a link such as "Questions" or "Ask Question". I'd like the bottom to duplicate the top of a page.
Navigation in multiple places seems fine to me. I've seen plenty of pages where the main navigation items are repeated at the bottom. I think it's very handy.
It's worth investigating CSS alternatives like the stuck-in-place navigation on a site like www.anncoulter.com. This method places a navigation block to one side that stays in one place relative to the scroll position; that is, it never moves. I mention the Ann Coulter site only because it's the smoothest execution of the concept I've seen.
It doesn't seem to work in IE7, though. FF, Opera, Chrome, and Safari for Windows all work properly; in IE7 the navigation block scrolls out of sight with the top of the page.
Steve Erbach
Neenah, WI
This is quite subjective and would really depend on the web page in question. If, as you implied, the page is quite long and involves a lot of scrolling then having the links duplicated at the bottom would probably be a good idea in terms of usability. However, very long pages would possibly suggest that the web site design could do with some looking at as this is not gererally perceived as good design (again subjective as this depends on the content and function of the site.)
'Don't make me think' is generally regarded as a definitive source on web page design so would be a good place to start in getting answers to these types of issues.
Bottom line is you're free to design your page however you want and if you think it will be more user friendly to repeat your navigation at the bottom of the page then go ahead.
My webdesign is quite rusty, but 6-8 years ago it was considered good practice to repeat your navigation at the bottom of a page, as well as adding a 'back to top' link:
Home | News | Contact | Links | (Back to top)
But my personal favourite was to have the navigation div fixed, so that it stayed visible all the time, no matter how far you scrolled, as serbach suggests. But IE6 gave me quite some headaches, which is why I abandoned the idea. I believe that IE8 has an improved css implementation, so you might want to look into this.