Hello to you, Someone recommed this forum to me because I have an unusual (to me) problem. when I resize my browser window my content move, can anyone help me out please, I've stepped out of the world of using WYSIWYG editor last year (not that I have anything against them). taking for example my navigation it shifts to the left. I have uploaded srceenshots of the problem. And look...go to this website for example (or any other) http://html5-showcase.com/ then resize it and nother move!! Please help, im tempted to go back to WYSIWYG editor though I feel lazy using it. http://i49.tinypic.com/33dfcb9.png HTML CODE <!DOCTYPE> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="with=device-with, minimumscale=1.0, maximum-scale=1.0" /> <title>Media Queries</title> <link rel="stylesheet" href="style.css" type="text/css"/> <link rel="stylesheet" href="reset.css" type="text/css"/> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="top-curve"></div> <header> <div class="logo"><img src="logo.png" alt="" title="" /></div> <div class="text"> <nav class="nav"> <ul> <li class="home"><a href="#">Home</a></li> <li><a href="#">Our Candy</a></li> <li><a href="#">Our Story</a></li> <li><a href="#">Candy Shop</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Blog</a></li> </ul> </div> </header> HTML: CSS CODE body { position: relative; background-color: #fff; overflow-x: hidden; } .top-curve { border: 1px solid transparent; width: 1000px; height: 30px; margin: 0 auto; background-color: rgb(13,186,250); } header { display: block; border: 0px solid red; height: auto; } header nav ul{ font-family: 'Lobster 1.4'; font-size: 19px; position: relative; top: -87px; display: block; margin: 0 auto; white-space: nowrap; text-align: center; border: 0px solid red; float: right; } header nav ul li { display: inline-block; padding-right: 35px; } header nav ul li a { text-decoration: none; color: #555; } header nav ul li a:hover { color: #fff; background-color: rgb(13,186,250); border-radius: 2px; } header nav ul li.home:before{ content: url('home.png'); position: relative; top: 8px; right: 5px; } Code (markup):
i would open your css file. It might be called "styles.css". You are looking for the "body" tag. the body tag will look like: body { } inside the body tag, it might have width:100%, change this to be width:1000px; body { width: 1000px; } Now when you resize your window, your site should retain its size and shape.
The logic is really simple..If something is "shifting" its because its trying to "adapt" to the sizing. To fix it, you need to specify a fixed width so it doesn't shift around.
That or design it so that it shifting around makes sense and/or works, since fixing the width of a design is basically pissing all over it's accessibility and the total retard method of building websites! Fixed width layouts are inaccessible BULL made by lazy, ignorant or just plain sleazy developers who need to do the world a favor and back the **** away from the keyboard! Of course i'd also suggest swinging an axe at the HTML 5 asshattery and it's associated bloat and pointless extra wrappers... along with all the DIV for nothing... Of course, since pretty much EVERY site on that 'html5showcase' is craptacular garbage from an accessibility standpoint, I wouldn't exactly be holding those up as examples of anything desirable; most of them being "look what I can do in photoshop" garbage that makes one want to scream at every last one of those re-re's "THE WEB IS NOT PRINT!" Though it's REALLY hard to diagnose the issue with a couple of tiny snippets, no content, and no real layout to speak of... though the multiple stylesheets with no media attributes sends up a massive warning flag of broken site-building methodologies.
Of course, you can talk a whole load of technologies available. But the user is here for some help and I provided what is practical for him to understand for now. If you start throwing all the new HTML5 bloat at him, he will likely just give up on it.
Letting someone continue down the road to failure by mixing not ready for prime-time garbage like HTML 5 mixed with decade and a half out of date practices, much less advocating the inaccessible train wreck of idiotic BULL known as fixed width layouts is NOT helping the poor sod; in fact it is the exact opposite! But sure, let's just keep on promoting sleazeball half-assed site-building methodology, that ALWAYS makes things better for everybody. Uhm, I think you mean throwing OUT all the HTML 5 BS -- because of course using less code to do the same job would make life SO much harder. Throwing silver bullet wild guesses at the OP when we should be asking more questions and asking to see more of it is NOT helping them -- particularly when doing so appears to involve some of the WORST advice you could EVER give anyone just starting out developing websites! Because of course some sleazeball asshat fixed width is such good practice in the age of responsive layouts and the ever increasing range of resolutions and display sizes one should be supporting. RIGHT. I mean, what's next? Declare all the fonts in pixels? I know, how about some auto-playing MIDI music with no control to disable it and animated GIF backgrounds while at it?