HTML - How Do I Make My Website Look The Same In All Resolutions And For All Browers?
Hi tell me if it's not the right place to post this question but I would like to know how to make my website look the same in all screen resolutions and for all browsers. Right now it looks fine in the 800x600 and 1024x768 resolutions for all the major browsers but when I view it with a 1366x768 resolution all the pages are skewed to the left in firefox and only some pages are centered in IE8.
Here's the site : http://www.lost-vision.com/ Code for the "contact me" page that isn't centered in both browsers in 1366x768 resolution : Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Your description goes here" /> <meta name="keywords" content="your,keywords,goes,here" /> <meta name="author" content="Your Name" /> <link rel="shortcut icon" href="img/favicon.ico"> <link rel="stylesheet" type="text/css" href="andreas06.css" title="andreas06" media="screen,projection" /> <title>Contact Me</title> <style type="text/css"> <!-- body { background-color: #191919; margin:0 auto; padding-left: 11.2%; padding-right: 11.2%; } --> </style></head> <body> <div align="center"> <div id="container"> <a id="top"></a><p class="hide">Skip to: <a href="#nav">site menu</a> | <a href="#leftside">section menu</a> | <a href="#content">main content</a></p> <div id="sitename"> <h1> </h1> </div> <div id="nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="affiliates.html">Links</a></li> <li><a href="contact.html">Contact me</a></li> <li><a href="empty.html"> </a></li> </ul> <p class="hide"><a href="#top">Back to top</a></p> </div> <div id="wrap1"> <div id="wrap2"> <div id="leftside"> <p class="soft"> </p> <p class="soft"> </p> <p class="soft"> </p> <p><!-- Begin ShoutMix - http://www.shoutmix.com --> <iframe title="shoutbox_balistik" src="http://www6.shoutmix.com/?shoutbox_balistik" width="140" height="400" frameborder="0" scrolling="auto"> <a href="http://www6.shoutmix.com/?shoutbox_balistik">View shoutbox</a> </iframe> <!-- End ShoutMix --></p> </div> <div id="content"> <h1> </h1> <p><strong>E-mail:</strong></p> <p> <a href="mailto:maitre_mechant@msn.com">maitre_mechant@msn.com</a></p> <p><a href="mailto:balistik94@gmail.com">balistik94@gmail.com</a></p> <p> </p> <p><strong>On other sites:</strong></p> <p><a href="http://balistik94.livejournal.com/">LiveJournal</a></p> <p><a href="http://www.youtube.com/user/balistik94">Youtube</a></p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p class="intro center"> </p> <p class="intro center"> </p> <p class="hide"><a href="#top">Back to top</a></p> </div> </div> </div> </div> </div> </body> </html> Thanks in advance for your help. Similar TutorialsHi guys, Been struggling with this for a few days so here's to hoping someone with a better knowledge of HTML can help me out! I've recently put up a little website to (hopefully) get a bit of freelancing work, but noticed when I checked it on a friend's computer that it looks really screwy on resolutions other than the one on my own computer. As in, everything gets scrunched up in the corner leaving a good half of the screen blank. I know the way around this is usually to convert sizes from pixels to percentages in the HTML code, but the inlet frame on the website refuses to cooperate with the percentage-based sizes. I really want this website to fit all resolutions so it looks professional & the way it should. Can anyone help me?? The website's at http://solar-flare.biz so you can get the code there. It's probably a bit of a mess coz I made it with Frontpage then tweaked it manually to get the background to stretch.... but anyway. Massive kudos in advance to anyone who can fix the code!!! Cheers Mateusz I'm making a website on my mac and when I view it it looks fine, but when I view it on my windows px on 1080x720 res it has everything moved to the right some and even the sizes are wrong. But when I change my res to 1280 x 1080 it looks how it does on my mac (which is 1280 x 800 res). I'm guessing the resolutions are effecting the site's margins and size attributes. Is there a way to fix this? Hi everyone, I just noticed a really weird problem with my website. I have an element on my webpage that is the image that says the word, "contact." It is on a z-axis, and it changes position when it is in Firefox and explorer. The weird thing is that there is another image on the x-axis, but it stays the same in both browsers. Does anyone know how I can fix this??? (the correct position is supposed to be just below the branch, as seen in explorer) http://heartless-ink.com/v2/portfolio2.html the html: <a href="http://www.twitter.com/notyourstar" target="_blank"><img class=imgA1 src="images/twitter.gif"></a> <a href="/contact.html" target="_blank"><img class=imgA2 src="images/cc.gif"></a> the css: .imgA1 { position:absolute; top: 65px; left: 471px; z-index:1;} .imgA2 { position:absolute; top: 49px; left: 510px; z-index:1;} Okay, there are probably a bunch of threads on this, but I do not know what to search for it. What I am looking for is for my website, an iPhone version of a site, to start at the topleft instead of having the little indent type thing. I did width="100%" but it just doesn't want to work. Here is my test page http://iphone.auditoriumcrew.webuda.com/test.php where you can see it has the spacing at the top, left, and right. Here is the actual site, or what will be the actual site: http://iphone.auditoriumcrew.webuda.com/ All help appreciated, Alex Hi everyone, I have my own wordpress blog. I would like to make a website using wordpress, like http://lotusleaf.ca/ or http://iheartdaily.com/. I have no idea how to take a theme and make it look like a website. can someone please give me tips or point me to a tutorial? I already know how to install wordpress onto my server, and how to use plugins, etc. Thank you and sorry if this is in the wrong forum! Three things: 1. How to I make website template? 2. Do I need a specific program? 3. How do I use it with html? I would like to make a myspace editor for my website so my useres can make myspace backgrounds and graphics, but do not know how to go about doing that. does anybody know of any websites that will let you perhaps embed one of their myspace editors into your website Hi all , I am kind of new to HTML, MHTML & Dreamweaver. I know the basics.... How to make this sort of a website .. http://www.keen.com/details/Spirited...nships/1205476 I mean what she has done in the red, green and pink part. I know how to create a website ...but how to make such a thing and post it in a website as profile. After I make the website in Dreamweaver should I save it as HTML or MHTML ? Also this is the web where i wd post it ( see attached pic ) ....now shd i post the source script from dreamweaver after i make the website ?? what i confused is , after i post only the script in the Describe your service area ( see pic ) ...wont it look for the source files, i mean the jpgs, gifs, mid etc etc ... I wd be thankful if someone can guide me on this .... Thanks Amlan ive done it now nvm, google ftw My HTML knowledge is limited as I am a new to the web design world. From 1-10 of my knowledge of HTML I would say I am at a 6. I have recently created a website using Dreamweaver CS5 and I would like to know how can I control cacheing on my website? I googled this but I dont know how to implement it. I would like people to cache my page so the next page they go on will load faster but I do want to update content once a week. How can I do this? thank you. Hi I am trying to make a html page where I have 3 swf files which I would to be shown randomly when you refresh the page. However I can't get the code to work. I have tried to delete the javascript part and then the movies are being shown - but not in the right way. And when the javascript is there no movies are shown. I would really appreciate if someone could help me! Thanks! Code: <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> </body> <script language="JavaScript"> // Generate a Random Number var randomnumber = Math.round(Math.random()*3); // Select a movie and execute the corresponding function if (randomnumber == 1) {movie1();} else if (randomnumber == 2) {movie2();} else {movie3();} // Functions to write out the correct flash movie resource. function movie1(){ document.write("<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="600" height="233"> <param name="movie" value="http://www.wiseentertainment.dk/quizformoney/Interstitials/lobby.swf" /> <param name="quality" value="high" /> <embed src="http://www.wiseentertainment.dk/quizformoney/Interstitials/lobby.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600" height="233"></embed> </object>") } function movie2(){ document.write("<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="600" height="233"> <param name="movie" value="http://www.wiseentertainment.dk/quizformoney/Interstitials/deposit.swf" /> <param name="quality" value="high" /> <embed src="http://www.wiseentertainment.dk/quizformoney/Interstitials/deposit.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600" height="233"></embed> </object>") } function movie3(){ document.write("<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="600" height="233"> <param name="movie" value="http://www.wiseentertainment.dk/quizformoney/Interstitials/lobby.swf" /> <param name="quality" value="high" /> <embed src="http://www.wiseentertainment.dk/quizformoney/Interstitials/lobby.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600" height="233"></embed> </object>") } </script> </html> Hey guys, Let me first introduce myself (even though I've been on this site since 2004). I am Matt. I have used this site in the past with confidence and have always gotten excellent answers and responses. Therefore I am back here as a first resort to seek a kind user that would help me with a problem I have. I have a web site design that I have been fumbling over for ages in order to make it into a working web site. The problem is that I've tried so many times to realise the designs I make, but I find that my ambitions fly way ahead of my skills. Even when I spend countless hours with WYSIWYG editors, I find that WYSI-Not-WYG. (especially when you'd like the code to be as neat as the design) I have attached an image of the design I have slaved over and I am looking for a kind soul that would magically turn it into a functional web page. Another problem is that I have a budget of nothing, yet I will mention you/your site anywhere I can as appreciation for your help. For those of you who want to tell me that I'm crazy and to do it myself, go ahead, I'll keep trying, but I thought that this would lighten the load considerably. :3 I look forward to the responses and if anyone wants to take up the challenge, THANK YOU. Also, I will PM the separate elements for the page on request. Thank you again in advance! There are a couple of issues that I know of regarding this design... IE and Firefox both render the page differently, for example, the header and footer needs to be transparent (alpha). In Firefox, it renders correctly, but IE5 renders the transparent areas as white, therefore the png may have to be exchanged for a flash object with transparent wmode. Another thing that both browsers have problems with is the DIV positioning, it seems as though there needs to be a code hack in order for IE and Firefox to place the DIVs in the center of the page (I gave up trying when I couldn't get the DIVs to stop placing themselves in ridiculous positions. The shadow you see on the stripes? I have no idea how to get them onto the page considering the transparency problems in IE, but I have seen many sites achieve it, I just don't know how. I will make a shadow upon request though according to what is needed. I am willing to help as much as you help Is there code that can detect when your page is being embedded and kill the frame? I have very limited knowledge of any programming. I own a site and would like to host a 2nd private website where users can email to. The catch is that they when I hand out the email as xxxxxxx@mysite.com (xxxxxxxxx being anything,) I can trace back to anyone who sends me spam. This is similar to spamgourmet.com ,infact it is pretty much the same thing. The only problem I find with spamgourmet is that emails are processed EXTREMELY slowly. Can anybody help me? I'm looking for code that would let me do what I said up there or some kind of script or where I should host the site. Thanks Hey guys, My name is chad boutin, I am a photographer in the NW and thought one day after being at the mercy of my "graphic designer" friends for a website update. After many self induced web failures and horrible continuity... I started telling myself "You can do it.. its just a website, make something simple, html only, clean, your a photographer, show images.. thats it. Being a former computer club president in 1986, I thought to myself.. "You programmed hand code basic at the age of 14, cmon, its html, how hard is it? Im so pissed. Here's my need. a menu. thats it, you go to my url and its an opening image and a menu, maybe its hidden, maybe its industrial and grey and simple. Ok, sounds easy... I code one. Simply, with a script found online. simplify the colors... it works. Then I figure, lets have two horisontal frames... 20 percent top... 80 down, top contains a menu (hey ive built this!) bottom is premade flash slideshows made in adobe lightroom already built and hosted on my server. for instance, http://www.chadboutin.com/lifestyle/ Ive fit them in a frame by just inserting the code inside the frameset. <frame src="http://www.chadboutin.com/lifestyle"> But for the life of me, i cant get the target to produce in that page.. I tried loading the nav.html(the fancy menu im trying to use) into a frame.. Now here is where i humble myself to ridicule, the same shame I pour intensely on any amateur Photographer I find trying to do things i do with the tools and experience I have at my disposal.. I kneel in pity and the obvious error of mixing coding metaphors... my (crappy ass) website www.chadboutin.com where i want to go http://www.chadboutin.com/turf/ if i could manipulate these lightroom galleries, i would.. but i cant, and I would like to keep some controll over the website so I can update... siggghh... thanks HELP ME! I want to make a text box that navigates a frame on the same page to the website you put into the text box, for example Textbox>>> [http://www.example.com] {ENTER} Then the Frame (called 'Browser' goes to that page) How Do You Do This PLEASE HELP ME! Thank You Josh Robertson Hello, I'm trying to add a similar function like "www.vinesauce.com" but I don't know how... I've programmed for 1 week only and I need some help. My site is made with html and css and here's the link to my site, http://razestream.com I appreciate help. www.intoleranceclothing.com So this is not my expertise to say the least. My page looks fine on my resolution at home (1280x768) but of course does not look as intended on any other resolution. I have a few problems I'm trying to learn how to fix or control. 1) If you click the images of the shirts I want the popup to be centered in the x position and slightly below y center so the "Intolerance Clothing" still shows when the large picture is up. What would be the easiest way to go about this? Is there a way to set absolute position measured from the center of the page or how would I go about this? 2) Kind of along the same lines. The smaller pictures of the shirts align right up to the background image edges in my resolution. How can I go about positioning them so they are always the same location even if the resolution changes. Basically if the resolution gets bigger I'd like everything to just stay as is and add more black solid space around the image. 3) Another smaller change I'd like to make is currently the viewer has to click the larger image for it to close and they cannot bring up another lager image until it is closed. What do I need to modify to allow the larger image to be replaced by a new one if a different shirt is clicked? Thanks for any suggestions on where to go read or look to help solve these issues or if someone is kind enough to point me in the right direction. Looks fine. Does not look fine. The first picture was fine because it was viewed with a 1024x768 resolution(which is the resolution that I'm working on my website with). However, any higher resolutions, and you'll see that the video goes out of place and moves too much to the right(second pic). I need to make it so that the video scales with all resolutions so it stays in place like in the first picture, no matter what the resolution is. Can anyone tell me how to fix this? Please be specific, i.e. what code? Thank you. |