HTML - How Many Pixels Wide Should A Website Be In Todays World
Hello, okay, so i was thinking about redesigning my site because i never really have done so before. but as i was thinking, i was thinking it would be nice to be able to fit more stuff across the screen width wise.... right now my website has like 750px width...
and i was wondering if i increased it some, would the majority of the people not have a problem viewing it? and if so, how many pixels wide do u think i could go before its too wide... i have my screen resolution said at 1280x1024... does anybody know what the majority of people set their screen resolutions to? any help would be great..thanks.. Similar TutorialsHow wide should you make your page/site? Since most have different size monitors and settings, how wide should your page be so it's not tiny on one user's monitor, and not too big on another? Hello, Mozilla Firefox is doing some weird things to the content of my website (you can see it at http://www.mm-theory.com). What it does is, every so often, it widens some of the content of the page so that it spans from the very left edge of the table cell it's in to the very right edge. A quick refresh usually fixes the problem, but I'm wondering why it does this in the first place. Here's a few screen captures that shows the problem: Wide abstract: Normal abstract: The captures were taken from http://www.mm-theory.com/god/god.htm I really doubt it's the code for the abstract since refreshing solves the problem, but here it is anyway: Code: </td></tr> <tr><td class="abstract" colspan=2> <center> <table class="abstract" cellpadding=10 cellspacing=0> <tr><td> <!-- #include file="../includes/god.abs.inc" --> </td></tr> </table> <br><br> </center> </td></tr> The file god.abs.inc is a plain text file with nothing but text in it (i.e. no code). I'm thinking it might have something to do with how I close the body of the page since it seems to have to do with not completing properly. Here's the code for that: Code: ... </td></tr> </table> </body> </html> I only encounter this problem in Firefox. Any guesses as to why? I was put in charge of changing our website with no html knowledge. Hoping someone on here can help. The right margin on all of our pages is too wide. I'd like it to look more uniform. Any idea where I need to change this? http://www.sgccc.com/index.html I have an html file which applies a css file to show a table. There is a banner at the top, and the main stuff on the page is in a div which is set to the width of the banner. However, I need to show some tables, and in some cases these will be wider than the banner. This is fine in IE (I'm told that it's really a bug, in that it ignores the standards and just whacks the table onto the page anyway), but in Firefox, it shows as much of the table as it can fit into the div, and then just chops the rest off. How can I get it to show the whole table? Thanks! Hi, I have a webpage which is 1740px long however, i would like it so the amount of background on both sides the viewer sees depends on the viewers resolution. Here is the address to the site: http://luminaskincare.ca/new/luminarightsize.html how can I make the site centered with no horizontal scroll? thanks in advance Hi all, I have a site to show some pictures, the only problem is some are landscape and some are portarit. At the moment I am putting the portrait thumbs onto a landscape black background, but I know this is a bodge. How can I have all the thumbs sit nicely next to each other regardless of their shape? Here is the site; www.streetpicture.co.uk Any help would be really appreciated. Many thanks, Hi there, my pages are loading wide and then jumpimg down to the size the table is set to be. Does anyone know how i can specify the width of content either through css or the div tag? Thanks in advance! I have a website with two side boarders inside a table and a content cell in the middle The left and right boarders are 100px each, and the middle I want to be the rest of the page. I tried to define the tables widths as 100 each and then add the middle to be 100% (to make it the remaining space) but it just filled the whole page with the content cell. Could anyone help me out? Thanks, Chuckles Hello there! I want to start from scratch on HTML, XHTML, CSS and further. For that I need some guidance as to where to look for learning these languages from BASIC to MASTERY. I learned a bit from w3schools.com but it seems there it's less descriptive and explanatory and more on the practical side. After studying and completing the languages, I want to take an exam and get certifications for that all ONLINE! Thanx! Here is the code I'm adding to my website to feature a Google Ad text link. <script type="text/javascript"> <!-- google_ad_client = "ca-pub-548569347568435"; /* google ad link1 */ google_ad_slot = "6594051295"; google_ad_width = 160; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> Everything is aligned to the left and the google ad appears tight against the left hand side of my column and I need to move it 5 pixels to the right to appear inline with everything else, I have tried putting left:5px; in various different places in the html code, but it either does nothing to the position or the google ad disapears altogether. So where do I put the positioning code? and is left:5px; the correct code for the job? Thank-you James Is there a way (HTML, CSS or Java) to make an index page open automatically 150 pixels down from the actual top of page? Reason: I have a lot of cheap hosted sites with banners at top and it would be great if I could get the page to automatically open with the top banner scrolled off the top of the screen. OK, I'm cheap...... I admit it but I was thinking that it would be nice if this could work..... Hi Masters of Code World! I admit - I'm a major newbie when it comes to code - but I'm always willing to learn from you experts. Here's my duh issue. In Word Press, I have these green buttons I made.. <div style="width: 100%;"> <div style="float: left; margin-right: 5px;"><a id="testbutton" href="http://www.claritymind.com/?page_id=746">Who I Work With</a></div> <div style="float: left; margin-right: 5px;"><a id="testbutton" href="http://www.claritymind.com/?page_id=750">How I Work</a></div> <div style="float: left; margin-right: 5px;"><a id="testbutton" href="http://www.claritymind.com/what-is-coaching/">What Is Coaching</a></div> <div style="float: left; margin-right: 5px;"><a id="testbutton" href="http://www.claritymind.com/?page_id=869">Clients</a></div> <div style="float: left; margin-right: 5px;"><a id="testbutton" href="http://www.claritymind.com/ ">Clarity Mind Blog</a></div> </div> They look pretty cool, see: http://www.claritymind.com/services/ my problem happens when I insert text after them... the text butts up to the green buttons. ARHH. In order to create a space or line break, I found a work around by adding 1 or 2 If I do other editing on the rest of the page, or if I update the page - I lose those spacers and have to re-input them over and over. It's driving me nuts. Sometimes, I'll have to use those spacers when line breaks don't work on the page. What a pain. So - masters of CODE world - what's up here? Why is it doing this? What am I missing? Why can't I just hit ENTER to provide a space and see it reflected on the front end? AWAITING YOUR WISDOM Ken: Hi there guys, I'm a newb to forms in Dreamweaver, so any help will be appreciated. I would like a form on my DJ website that asks the potential customer how many hours they want a disco for, their location and any extras they want to have with the package. The form will then calculate the value of everything and give them a price. I would like to display this answer only after the visitor clicks on a button, rather than just have the information pop up/recalculate every time the visitor changes something on the form. Thanks guys! Hi, I just got back into HTML and CSS and stuff for a new project after a lengthy absence. I'm also trying out PHP for the first time and having a lot of fun with it, but I'm having problems as usual. This doesn't have to do with PHP per se, but if PHP is involved in the solution that'd be just fine. By contrast, I'd like to avoid Javascript, since a lot of people have it disabled by default. One of the things that's always irked me about CSS is how it seems to be completely impossible to define an element's width/height based on its container's width/height without using percentages or without weird things happening when you use padding. Say I want to do one of the simplest things imagineable -- define a rectangular area within the page, with 25 pixels both to the left and right of it, and 12 pixels above and below it, no matter what the browser window's size is. While it's no task to set the rectangle's position relative to the body of the page (using left and top, or whatever), deciding its width or, particularly, height seems to be impossible. 100% - 25px is, sadly, not allowed, even if I incorporate PHP, since PHP has no way of telling what the 100% actually represents. I've been puzzling over this for the last couple hours, and after a great deal of fiddling with alignments, margins, padding, and such, these two pieces of really simple HTML are the best I could do, and they're both flawed: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> <!-- body { margin: 0px; padding: 12px 25px 12px 25px; background-color: darkblue; } #inner_box { position: relative; width: 100%; height: 100%; background-color: lightblue; } --> </style> </head> <body> <div id="inner_box"> Text </div> </body> </html> Paste that into a HTML file to see what I'm talking about graphically. The problem here is clearly that, for whatever reason, the 100% height in inner_box doesn't activate and inner_box ends up only as high as a single line of text allows. I don't know why. But in this next example... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; background-color: darkblue; } #outer_box { position: absolute; margin: 0px; padding: 12px 25px 12px 25px; width: 100%; height: 100%; background-color: lightblue; } #inner_box { position: relative; width: 100%; height: 100%; background-color: white; } --> </style> </head> <body> <div id="outer_box"> <div id="inner_box"> Text </div> </div> </body> </html> Here I've fixed the problems with the first snippet by adding a new container (outer_box) with absolute positioning that covers the entire body area. inner_box goes inside it and tries to act like it did in the first example. Unfortunately, for some reason, outer_box doesn't act like the body tag did in the first example -- when padding is added to it in order to position the elements within it, outer_box expands itself instead of just resizing inner_box, like the body tag did. I've done a lot of experimenting and I simply can't find the solution. All I want is a page with a few pixels of blank space to all sides of a floating rectangle. I uploaded a couple of doctored image samples of what the page should look like, but doesn't: here and here. Anyway, in summation, this is driving me nuts. I know I could probably use Javascript to get the container (body or outer_box)'s width, and go from there, but like I said, I'd rather avoid Javascript. There has to be a better way to do this. Any help would be very welcome. EDIT: After some more experimenting, I've discovered something interesting. If I declare example 1's doctype to be: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> then it works properly. The same cannot be said for example 2. And I really can't tell why. I guess HTML forgives something that XHTML doesn't. Also, example 1 doesn't work if I include the HTML doctype's URL: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Strange. Anyway though, it's important to make example 2 work since I would usually be working with containers within containers, not just within the body tag. So I still haven't solved my problem. Hello everyone. I'm not sure what type of menu this is called, and I believe it's Javascript, but I'm just not sure. What it is is a menu that just shows the top level, but when you click on it, it drops down to show you a sub-level. Does anyone know what this type of menu is called? Any help is greatly appreciated. Thanks! I believe in thread titles that get to the point. I have a basic page, when the page loads I want people to see the top of the page for a few seconds while a flash starts to load but then I want the page to scroll down a bit so the visitor can see the flash load progress status. I just want code that I can copy into my page. I don't have access to the flash code. Greg (the page under design) www.mytcanada.com/designer.html I have a programmer in the US who starts pages for me and then I much around with them until it's looks like I want. He helps me when I get stuck but he's on holidays. Any help would be great. hello, i need a website for german customers, somethign like www.podmod.de because i would like to offer the same. So if anyone has an idea where to start, or even can offer me something i can buy, please do so. my email: verenamueller999@web.de thanks verena. I have some links (in the header, the SUPPORTERS) to different websites, but when I click on them the address in the address bar does not change to the address of the website that I clicked. How do I make it show the address that I clicked on? Thanks. http://www.ac.wwu.edu/~fencing/ I am a total noob but volunteered to administrate the website, because there was no one else to do it. Hi, I am trying to find a way in which a website that is linked on my homepage can be opened while keeping at least one form of my homepage open as well. e.g.: Google images :http://images.google.com/imgres?imgu...en-us%26sa%3DG sorry for the massive link. Hope you get the idea. So what i want is to have a bar on top that is my homepage (like the google bar in the link), but the rest is the actual website that has been linked. I don't really care much about the url. It doesn't have to be my homepage url, it can be the actual website url. Google has been able to do that somehow, so it is possible. I would just like to know how and if it is hard to do. If someone knows how to do it, it would be great if you could give me a link to a tutorial, or explain it. thanks |