|
HTML - Page Doesn't Align When Screen Is Shrunk
Can someone please please view my sit at resconsultingnyc.com, i used microsoft expression web 3 to make everything aligned. When the page is maximized on my computer it is all nice and neat but if the screen is not maximized everything falls out of frame. when I tried it on another computer even their maximized page had things out of frame. How can I make all the tables and content stay nice and neat and keep in tact when the page size changes? All the pages have the same problem...thanks
here's the code... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Template</title> <meta name="description" content="" /> <meta name="keywords" content="h" /> <link href="styles/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="all" style="height: 772px"> <div class="top"> <OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="766" HEIGHT="233" id="construction" ALIGN=""> <PARAM NAME=movie VALUE="construction.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="construction.swf" quality=high bgcolor=#FFFFFF WIDTH="766" HEIGHT="233" NAME="construction" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT> </div> <div style="margin:0 0 5px 0 "> <OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="766" HEIGHT="60" id="menu" ALIGN="" style="z-index: 1; position: absolute; top: 246px; left: 444px"> <PARAM NAME=movie VALUE="menu.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="menu.swf" quality=high bgcolor=#FFFFFF WIDTH="766" HEIGHT="60" NAME="menu" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT></div> <table width="740" border="0" cellspacing="0" cellpadding="0" id="cont" style="z-index: 2; width: 740px; height: 370px; position: absolute; top: 310px; left: 456px"> <tr> <td valign="top" width="295"> <div id="left_block" style="width:289px; height:234px; margin:0 0 7px 0 "> <img src="images/tit1.gif" alt="" style="margin:25px 0 15px 29px " /><br /> <p style="margin:0 0 3px 43px; width:162px "> </p> <p style="margin:0 0 3px 43px; width:162px; height: 57px;"> </p> <p style="margin:0 0 5px 43px; width:162px "> </p> </div> <div id="left_block2"> <img src="images/question.gif" alt="" style="margin:28px 0 8px 26px " /><br /> <table width="75" border="0" cellspacing="0" cellpadding="0" style="margin:0 0 4px 36px "> <tr> <td width="36"><img src="images/mail.gif" alt="" /></td> <td>E-mail:</td> </tr> </table> <p style="margin:0 0 0 36px "> resconsultingnyc@gmail.com</p> </div> </td> <td valign="top"> <div id="right_block" style="width:445px; height:201px; background:#F1F1F1 url(images/bgs1.gif) no-repeat 100% 100% "> <img src="images/tit2.gif" alt="" style="margin:25px 0 13px 36px " /><br /> <p style="width:335px; margin:0 0 4px 50px ">Welcome to RES Consulting NYC inc.</p> <p style="width:335px; margin:0 0 15px 50px ">Your company for all of your residential and commercial construction consulting services.</p> </div> <img src="images/tit3.gif" alt="" style="margin:28px 0 23px 31px " /><br /> <table width="388" border="0" cellspacing="0" cellpadding="0" style="margin:0 0 0 33px "> <tr> <td valign="top" width="103"><img src="images/pic1.jpg" alt="" /></td> <td valign="top"> <p>Personal dedication to each and every client</p> <p style="margin:10px 0 0 0 "> </p> </td> </tr> </table> </td> </tr> </table> <div id="footer" style="z-index: 1; position: absolute; top: 693px; left: 473px; bottom: 85px; width: 733px"> <table width="620" border="0" cellspacing="0" cellpadding="0" style="margin:14px 0 0 56px "> <tr> <td width="286" valign="top" style="color:#7D7D7D; "> Copyright © 2009 resconsultingnyc.com <br /> All rights reserved. </td> <td valign="top"> <a href="index.html" class="f_link">Home</a> <a href="index-1.html" class="f_link">Company</a> <a href="index.html" class="f_link">News</a> <a href="index-2.html" class="f_link">Projects</a> <a href="index-3.html" class="f_link">Services</a> <a href="index-4.html" class="f_link">Solutions</a> <a href="index-5.html" class="f_link">Contacts</a> </td> </tr> </table> </div> </div> </body> </html> Similar TutorialsI'm trying to get this form from this food site to align just like the one I did for this Insurance site but doesn't seem to work. What is the problem? Hey guys, What I am trying to do is align a whole table to the right inside of a td tag of another table. It looks fine in IE, but in firefox it comes out wrong. Any idea what I can do? Here is the code: Code: <table border="1px" style="width: 100%;" id="rptPrintform:alignBtn_pg_id">
<tbody>
<tr>
<td class="alignRight">
Correct
</td>
</tr>
<tr>
<td class="alignRight">
<table border="1px">
<tr>
<td class="alignRight">
Text
</td>
<td class="alignRight">
Text 2
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="alignRight">
Correct
</td>
</tr>
</tbody>
</table>
What I would like is for it to work in firefox the exact same way it works in IE. Thanks, Grae Hi, I was hoping someone could work out why when i assign text-align:right to a col element it doesn't align all the text in that column to the right. I've called the column col1, and in the css have put col1 { text-align:right }. Any ideas why this doesn't work? The text-align:right does work if put it straight into all of the td's within that column. Thanks, Matthew Millar Hello, I've put the Code: <div align="center"> below the Code: <body> tag and closed it with the Code: </div> before the Code: </body> tag. The page doesn't center at all. Is looking fine in 1024x768 but in any bigger resolution, the page is aligned to the left. The page that I am talking for is this. Any idea? Hi All, I have a problem with centering a page to the screen on a new site. The page is 945px wide, and is fine in IE. But in both Firefox and Safari the page is moved to the left of the screen. Does anyone have an idea of what I have done wrong here? Here is a link to the page:- Website New poster here! Recently been creating a website using HTML & CSS from scratch using Notepad++. I was under the impression that the more flat, or spread out the design, browsers would squish it automatically to fit on the page. Apparently this is not the case. I current have a page where the main content starts 250 pixels from the left hand side of the screen, this causes some of the content disappear of the right hand side of on lower resolution screens. Should I be starting the content at the far left, or is there another web page design convention I should be following? I assume there is a way around this however I can't seem to find it! Any help would be greatly appreciated. These forums are a wealth of knowledge! Hey, Don't really know exactly how to pose this question, so i'll try to explain it in several ways, and maybe one of you can help me. I'm trying to find code, HTML or Java, which would cause the browser to automatically start focused on a different part of the page other than the top (as it normally does when a new page loads). For example, lets say i have an image or text several scrolls down on a page. I want the browser to automatically load the page centered on this. Any ideas on how to do this? Any help would help so much.... i tried to search for it, but i didn't know exactly how to phrase it so i wasn't able to find anything. Thanks again. When I create a test page using DIV and set it to 480 px wide, my iPod Touch does not have it initially filling the screen; I have to double tap it to have it fill the screen. What step am I missing? Many thanks... Todd Hey everyone, I'm having trouble with this and I have no clue whatsoever how to solve it. My splash page has a css-centered background image which I would like to make it 'look' like a link, v.g. if you click anywhere on the page, the main page loads. I've seen this behavior in some lyrics pages, with a new page opening in a popup when you click anywhere in the screen, but what I need is to make the whole page behave like a giant "A HREF" tag, to load a new page in the same window. Is there anyone out there who can help me with this? Thanks in advance! hi guys, I have this code he Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Under construction</title>
</head>
<body style="background-color:#121212">
<div style="background: url(under_construction.jpg) no-repeat center top ;
height: 1024px;
margin: auto;">
</div>
</body>
</html>
the image under_construction.jpg is basically the page itself, it has a size of 1680x1024. As of right now the page doesn't adjust automatically to the users screen. Please help me change the code so that it'll adjust automatically to the user screen I placed all my adsense ads into iFrames but when I resize the window small all the ads are pushed to the middle of the screen. How can I make them stay put. I tried working with divs too but it makes the ads the highest layer and it makes an invisible border stretching across the screen and I cant click anything thats in that border range. heres some of my code: <html> <head> <link rel="stylesheet" type="text/css" href="style2.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <center> <head> <title>BIO</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> </tr> </table> <!-- End ImageReady Slices --> <iframe src="/adsense.htm" width="120px" height="600px" frameborder="0" style="position:relative;Left:1173;bottom:865" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense2.htm" width="120px" height="600px" frameborder="0" style="position:relative;Left:-92;bottom:865" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense3.htm" width="728px" height="90px" frameborder="0" style="position:relative;Left:50;bottom:518" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> <iframe src="/adsense4.htm" width="336px" height="280px" frameborder="0" style="position:relative;Left:195;bottom:1560" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe> </body> </center> </html> Hi everyone Let me first say how awesome it is for the web to have a place like this where other html coders can relate. I've been lurking here for a couple months and now I come in with a bang, ha, yes a question. Nonetheless...I'm very greatful to be here. So onto my question.. I'm an assistant on a web design project and I'm having trouble aligning text on a website. I used divs on a WYSIWYG editor to place the text and when I opened the page everything looked fine, of course that was because it was done on this computers resolution specs. Now if you look you will see that when you are either: A) On a different resolution on another computer the text look ambiguous and doesn't align propery B) Minimizing the window or changing its shape the text also doesn't align. So my question is, how do I resolve this matter. Any html pro's or programmers in whatever arena would be truly appreciated in taking a look at this issue for me. Oh and about styles..I don't know much about css as I'm still a beginner and I'm thinking I can't even use styles since I already have that <style> code in there already, but it's not a css one. So I've written that off. Here is the website so you can see the issue (assuming you're not on 1280 for your width in resolution and not in full screen). URL - http://blendsphere.com/mailconnect/ Once at the site you can pull up the html code to see it too. Again thanks for any support or solutions on this. I am relatively new to the web design world so if you do have any solutions if you could make it brief that would be fantatstic. Ok thanks again. Please enlighten this noob, so far I've been enjoying html and hope to do so for much longer. I've kept up with things and it's no surprise that after all these years HTML is still so damned popular. Alright then. If I want to make a way to have that table move ends? Hello this is going to sound really basic so any way How do you style font to appear in the middle of your page using CSS as im aware you can either float left or right, am i right in saying you have to use padding? margins? to get it to be where u want it to sit? Hi, i am restarting a site. I have the old HTML in text docs that I saved. I am using Cpanel. The home (index.html) page worked fine. But, from there I am trying to add another page (about_us). So what I am doing is creating a new file, and naming it about_us.html. Then I edit the file and paste in the code. But when trying to view the page as site.com/about_us it doesnt show up. But if I type site.com/about_us.html it does show up. The new file is displayed right above the index page in the file manager and all... I don't want our visitors to have to type ".html" at the end, they won't be likely to remember to anyway. I have no idea why it's doing this because I don't remember doing it before. The navigation bar I used previously used to work but now the links in it don't work because they dont have ".html" at the end of the link. (ex.<a href="http://www.site.com/about_us">About us</a>). I've got a page that, on starting, checks its URL for a hash extension and behaves accordingly. So the hash, or lack thereof, is important. I want this page to contain some hyperlinks to itself, with various hash extensions. It doesn't work! If the URL is just to the page (eg. mypage.html) it reloads fine. But if the URL is, for example mypage.html#&e=extrastuff, the page doesn't reload at all. Is there a solution to this? Basically I want to put this page "http://3d-story.com/Old-Afgan.html" into a 3rd party widget. When I place this 3rd party widget on my page I can scale the widget frame to any size I want, but the page within it doesn't scale. Looks like this "http://www.wix.com/mettam/test" What code do I need to put into my HTML code so that it will scale to the frame of the widget ? Here is an example of my code with in the widget. Code: <html>
<head>
<title>Old Afgan</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (Old Afgan.jpg) -->
<script type="text/javascript">
<!--
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
Old_Afgan_03_over = newImage("images/Old-Afgan_03-over.gif");
preloadFlag = true;
}
}
// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- ImageReady Slices (Old Afgan.jpg) -->
<table id="Table_01" width="977" height="695" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="http://3d-story.com/images/Old-Afgan_01.gif" width="977" height="82" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://3d-story.com/images/Old-Afgan_02.gif" width="190" height="613" alt=""></td>
<td>
<a href="#"
onmouseover="changeImages('Old_Afgan_03', 'http://3d-story.com/images/Old-Afgan_03-over.gif'); return true;"
onmouseout="changeImages('Old_Afgan_03', 'http://3d-story.com/images/Old-Afgan_03.gif'); return true;"
onmousedown="changeImages('Old_Afgan_03', 'http://3d-story.com/images/Old-Afgan_03-over.gif'); return true;"
onmouseup="changeImages('Old_Afgan_03', 'http://3d-story.com/images/Old-Afgan_03-over.gif'); return true;">
<img name="Old_Afgan_03" src="images/Old-Afgan_03.gif" width="497" height="251" border="0" alt=""></a></td>
<td rowspan="2">
<img src="http://3d-story.com/images/Old-Afgan_04.gif" width="290" height="613" alt=""></td>
</tr>
<tr>
<td>
<img src="http://3d-story.com/images/Old-Afgan_05.gif" width="497" height="362" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
I am not sure where to put this question. I have noticed that some webpages have graphics to make it look like a piece of paper stuck on the wall (and there is a certain amount of blank space left and right - see http://www.infinetwebsolutions.com/) while some webpages occupy the whole screen - see http://www.speakteen.com/. Can someone tell me if there are technical advantages/reasons for doing this? I have been reading webpages and blog pages for dozens of hours and am starting to feel that blogs all look alike. Part of the reason is that almost all of them have the "cut page" look rather than the full page look. Is there an artistic reason to do this? some advantage? I really like nice cut and dried technical stuff but I am more likely to be considered autistic than artistic How the screen to divide into four parts a line? |
|||||||