I have redesigned only the Home page using the DIV tags from Traditonal HTML tables,
http://www.cricandcric.com
After that my page looks scattering across the screen, if the screen resolution increases.
for the lower screen resolution its looking good, IE and Mozilla compatible
I am not able to make out the mistake which is done, can any one help me check this out.
Can any one share the resources if they on how to make the website which is developed using either HTML or IE more compatible with all VERSIONs of IE and Firefox, with all the different resolutions format, it should work fine,
if any one has any good article share the link to me.
thanks in advance
your "middle1" section has a width defined as 1004px so should be almost the same size as the navigation, however the contents two tables and a div are positioned such that they dont float (certainly I cant see any floating in your CSS).
You're also using tables for layouts - i think thats the crux of the problem. Looks like you are trying to make a three column layout using CSS - have a look at this example: http://ago.tanfa.co.uk/css/layouts/css-3-column-layout-v1.html
I had similar problems for my website and it turned out that fixed width for div elements changed the rendering of the page depending on monitor resolution or screen size. I fixed the problem by using relative width by % instead of px for divs. It was a css issue.
Related
I have been trying to learn how to design web pages using responsive web design. I have come across an interesting example that I do not understand:
http://www.sixty-nine.us/collections/general/
On this page on a desktop you will see gifs but when you shrink the browser enough you will see still images.
I thought this type of change in content was not possible with responsive web design because it can only control the style not the content. I was hoping someone could tell me what is actually happening here, and if my conception of the limitations of responsive web design to not change content is correct.
Any responsive design is based on #media CSS queries where you can choose which style should be applied on elements on which screen sizes (CSS approach)
Or using some JS code which monitors window width and shows/hides some elements or does what it should do. (JS approach)
They are actually looping videos and not gif. If the resolution is low the video is hidden, and jpg shown using display:none. Check the end of their stylesheet: http://cdn.shopify.com/s/files/1/0515/5693/t/2/assets/legend.css?7907595077267123575
They are using #media to control how it is shown on different devices. Read more about #media here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Responsive web design is a wide variety of information on the Internet ,and the information is abstract,philosophical,and anecdotal.
Most of the time, in responsive mode we hide or display content.
For example: slideshow can be hidden in 480px less screens. for that we display a banner still banner with large text to explain the section / content.
So content can be changed with CSS. But the content does not change or added. Normally content is already loaded. But the showing will be changed with the responsiveness.
PS. your link does not work.
I am building a site for my friend, He specified a bug for me. He said,"When I Zoom in/out the browser, the Website layout “breaks apart” but it is working fine in 100% Browser Zoom."
Please let me know the Standard for web development for Browser Zooming
In CSS there is something called "em". Different from pixels, they adjust themselves to screen settings. With most CSS elements, zooms should not be a problem, but if you are really having trouble, I would recommend using em as units
usually I don't consider zooming but if you want a good website that shows ok with different screen resolutions like in mobile browsers or tablet you'd better use responsive style sheets.
you do not need to write it by your own. you can use style sheets like twitter bootstrap which already supports responsive web pages
you can download it from here enter link description here
The webpage should be responsive enough like to work for "smaller screens" that is more or less how it will work for your CSS when they zoom in.
Make sure you have min-width or min-height set to your body or general container so, when it gets to this minimums it just stais as it looks.
For example, for the SO webpage, you have the div with id "content" inside the general div.container that has a width of 980px, so if you zoom in a lot it just shows the bottom scrollbar.
I am about to launch a new Joomla site, and the only minor bug holding me up (not really effecting launch, just annoying) is this strange issue with iPhone (using Safari Mobile). You can see it in the image attached or use http://synthphone.com/ to see it.
Any ideas? I haven't noticed any other issue on any other browser or device. Link to the page is http://www.complisolutions.com/services.
Thanks for any assistance!
It's most likely a font size issue - note the word 'environmental' - looks to me like that cannot fit in the space allocated between the image and the left side of the screen.
Try remove that word to see if this is the case.
What you'll want to do, is use media queries to firstly make that image full page width at small screen resolutions and secondly to remove the float.
I'm using Bootstrap 2.3.0 on the following website: www.agrium.com/AgTracker
The problem I am having is that when the browser window is resized or when a user is using a tablet/phone, the two logos at the very top of the page are not displaying as I would like.
Below I am showing this behaviour using Chrome on my desktop.
Situation #1: full screen display, logos are spread out and full size. I'm happy with this.
Situation #2: screen size is decreased, but logos are still full size. I would like for either the logos to stay on the same line and for the logos to scale (shrink).
Situation #3: this would likely be solved by whatever fixes situation #2, but I just wanted to show that if I shrink the browser width further, the Agrium logo has scaled (yay!) but the AgTracker logo has not (boooo).
Any help with updating the CSS or way I am using Bootstrap that allows for the logos to both scale and remain on the same line would be appreciated.
There are a couple of ways to solve this problem:
At first, you should recognize that the first two images are actually not two but just a single image. Using this technique, you can make a single png or jpg file with all these three images in combined into a single image file. I would not recommend this, so I would like to propose a much more robust solution using CSS. Please look at my second point.
You can use CSS3's in built feature known as CSS3 Media Queries.
This technology allows you to create responsive websites and be able
to dictate how your content appears on a variety of devices like
mobile, tabs or desktops.
I'm trying to present my notecards in a web app style.
I'm not worried about caching, or making it work offline.
I just want it render well in the iOS browser.
Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3
I want it to look the same as if you re-size your browser window to 320x480.
The problem is, it always renders a huge amount of blank space off to the side.
I want to lock the scrolling to only the vertical axis (like flipping through notecards),
but also have the text at a readable size.
You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.
As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.
Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)
Reading your question again, here's some suggestions based on what I think you're looking for.
Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.
If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)
You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.
Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.
Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.
This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.
Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.