I've just started looking into CSS3 and HTML and I wanted to use it for a University project that asked us to make an ASP.NET website, but I can't get the height of the content to fill the 100% of the browser... It's actually not even taking into consideration the content of the default.aspx.
Tried a bunch of stuff on other questions around here, but most times they either don't do anything or mess the whole positioning of everything.
Was hoping you guys could give me some tips on how to fix it. Here's the fiddle: JS Fiddle
Thanks in advance.
You need to provide the form also with height: 100%;. Check out this fork of your fiddle.
http://jsfiddle.net/tushar2289/a5Bhv/1/
Related
I've been scouring the forums without a clear solution to my problem so I figured I'd give stackoverflow a go. In short, I need to know how I should go about positioning the elements on my site. When maximized, the images appear fine with the iframe as it should be. Upon resizing the browser, my sliced images shift to the left and distort my layout. My question is, should I use and div within a div to position my elements or is there another method I should be searching for? I know that I could possibly use CSS to position things but I would like a clear answer if possible as I've already spent countless hours on this. Thank you and my apologies in advance if I've left out pertinent information.
http://hrsolavei.dx.am is where the site is located, please take a look and give me some feed back. Thanks again.
If you want to position the content of your website using an iframe like you have it right now, and the layout in a separate table, then you need to give your iframe the css of position:absolute; right:50%; Then, for the div surrounding your iframe, the css should be overflow:visible; position:absolute; left:50%;
Now, I implore you to please research web development best practices, as they will make your website much easier to develop, and easier to change later on. The big ones that I noticed are that you should try using divs for your layout instead of tables. Tables are meant for storing information much like the image in your iframe does. You should also look into organizing all of your styles using a css file.
Basically I'm very very new to .css and HTML and I have been using Adobe Muse or word press to make sites and have been able to get by. Well I have been integrating a shopping cart system called Foxycart into one of my sites and I can not for the life of me get the header, shadow under the header and middle image (repeating pattern) to stretch across the screen. Adobe muse does this by using JavaScript, but when I cache my template for Foxycart the JavaScript no longer works. Which is fine I would like to use .css to stretch the header and middle background anyway. The problem is I can not figure it out. I hate to ask for help but I have spent over two days trying to figure it out and still not luck. I specialize in graphics, so if anyone that helps me out needs anything photoshop'd or what not just let me know. For my own sanity to need to figure this out!
Code is cached by Foxycart located here: https://shavemate.foxycart.com/checkout.php
Some browsers add padding around the viewport, so in order to get a true "full width" effect you need to make your header have a absolute position along with top:0; left: 0. The tricky thing here in my experience is getting the width to 100%. With an absolute positioned element, 100% width seems to go off the right side of the screen. It may have to be done with javascript or someone here with more mastery of CSS can guide you.
in site properties, layout you can make margins 0,0,0,0
Also, if you want something to be 100% width just snap the edges to each side of page browser.
hope this help.
yd.
Per this blog post here (http://www.david-lewis.com/css/css-that-can-affect-performance-on-ipad-web-apps-or-phonegap/), there is a bug in iOS 5 that I have no idea on how to get around.
Essentially like the title says, if you have a section of your site that is scrolls (I'm using the new -webkit-overflow-scrolling), and if there is an iframe out of the viewport, it will not load it.
The blog post linked above says the following:
iFrames
What is it: Using iFrames in overflow:scroll elements to show things
like videos or maps What’s the symptom: If you have an iframe that is
outside of the viewport in an overflow: scroll element (especially
when using -webkit-overflow-scrolling: touch) then it will not render
as you scroll to itWhat’s the cure: no idea, please send me the
answer
Does anyone know how to fix this? I've been looking all over the web for a cure, but it is no luck. It seems to be that if you click on the iframe, it will show it after the click.
This in my mind is a huge issue for people developing web-apps. Does anyone know of a fix?
Well, I hate leaving this as an official "answer", but as of time of posting, there is no fix...
I'd assume if you'd use JavaScript to extract the HTML from the iframe, put the code in the same spot, and somehow get the CSS to work with it too, it would work. But darn, that would be too much work to do on such a slow device like an iPhone.
Okay, this is REALLY starting to bug me...
This page works fine in both Chrome and Firefox. www.bloggan.tk
But if it's opened in internet-explorer it always expands beyond the page and introduces the scrollbar no matter what the resolution of the browser is.
I have NO idea what change in the html it was that cause this...
Here's the blogger-template-html-source
I'd REALLY appreciate if someone could help me with this.
Thanks in advance!
Edit:
I've "solved" it for IE using javascript, but that's only temporary (i hope). The version without javascript can be seen here, so that you still will be able to know what I'm talking about. Still trying to solve it, and still hoping for someone to help me.
Before you ask a question here, you'll need to do some basic research yourself.
Strip out everything from that HTML file you reference until you have the simplest possible document that reproduces the error. Don't expect people to dig through a 40k HTML file to find the thing that's causing you grief.
Isolate it before you ask about it.
Incidentally, however, there is no CSS width or height specifier for "the rest of the page". You need to meticulously keep track of your percentage widths to make them add up to 100%, or use tables. If your sample is using percentages, then I'd look for borders and padding, since those are the things that cause discrepancies in box size between old IE versions and modern browsers.
I've done this in the past using a method similar to this:
http://javascriptkit.com/javatutors/static3.shtml
but I don't like the "flicker" effect as the page is scrolled and the div needs to move with the scrolling. Lately I've seen a lot of site that have an element (a div or the like I presume) that don't move when the page is scrolled but it's seemless...they're just there and it's a beautiful thing.
Unfortunately I can't seem to recall where I've seen it lately to view the source and try to figure it out so I figured I'd turn here and see what all of you experts can provide as far as assistance / suggestions.
TIA
Try setting "position: fixed" to the element.
I think this does not work with some IE versions, you'll have to us JS for that.
That site you linked to still mentions thing such as IE 4 on it, better no rely on it. It's outdated.
You can position an element to a fixed position with CSS, by doing position: fixed;.
Take a look at google reader.
It has a fixed header and a fixed side bar.