|
HTML - Why Does My Horizontal Page Center Change Based On Page Height?
Below are the two sites I will use to explain my problem. For reference, I used Mozilla Firefox 3.08 and Google Chrome 1.0.154.53 in my tests.
Example 1: http://www.irishbyname.com/example1.htm Example 2: http://www.irishbyname.com/example2.htm When browsing the site in a browser other than Internet Explorer, example 1 and example 2 center to different locations on the page. In example 1, I set the height of the content area to be 200 px tall. In example 2, I set the height of the content area to be 500 px tall. When I have example 1 open in one tab and example 2 open in another, I can alternate between the two tabs and see a visual difference in alignment. The HTML code on both pages is exactly identical with the exception of the height of the content area. Can anyone tell me why the horizontal page center changes based on the height of the page? Can anyone tell me how to change my HTML to make certain the page centers correctly no matter how tall the page is? Thanks for your help in advance. Similar TutorialsSome mouses today have horizontal scroll, some call the tilt. It looks something like: http://www.htmlforums.com/attachment...1&d=1242556560 I noticed that many websites they code those horizontal scroll to go to next/prevous page. For example Discuz! forum system has this function. While you browse hundreds or thousands of posts separated into pages, the horizontal scroll can take you to previous page or next page.(not browser back/forward) How do I code like that? Or any examples? 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? http://www.freewebs.com/jaceyanimation/test.htm I can't get it to align to the middle of the page. I've had to add a load of <br>'s because the <tr align="center" valign="middle"> isn't working. Can someone please give me a better code How can I get a text or object to be displayed in the middle of the page vertically as well as horizontally? (Horizontally is sort of easy with align="center", but I cant figure it out, how to do it vertically). Hi I am new to html so I know this is probably a really simple matter however I am having trouble centering my swf file both horizontally and vertically. I have managed to center horizontally but cant seem to work out the vertical. Could anyone offer some help. My code is below <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii"> <title></title> <script type="text/javascript" src="p2q_embed_object.js"> </script> <style type="text/css" title="Default"> body, div, h1, h2, h3, span, p { font-family: Verdana,Arial,Helvetica,sans-serif; color: #000000; } body { font-size: 10pt; background : #ffffff; } table,tr,td { font-size: 10pt; border-color : #777777; background : #dddddd; color: #000000; border-style : solid; border-width : 1px; } h1 { font-size: 18pt; } h2 { font-size: 14pt; } .warning { font-weight: bold; } </style> </head> <body> <div align="center"> <p><script type="text/javascript"> <!-- if ((window.p2q_Version) && (window.p2q_Version>=2.0)) { var flashvars=""; p2q_EmbedFlash('bar_out.swf','640','480','allowFullScreen','true','FlashVars',flashvars); // Check to see if the version meets the requirements for playback if (!DetectFlashVer(9,0,0)) { document.write('<p class="warning">This content requires Adobe Flash Player Version 9 or higher. ' + '<a href="http://www.adobe.com/go/getflash/">Get Flash<\/a><\/p>'); } } else { document.writeln('<p class="warning">p2q_embed_object.js is not included or it is too old! Please copy this file into your html directory.<\/p>'); } //--> </script> <noscript> <p class="warning">Please enable Javascript!</p></noscript></p> </div> </body> </html> Hi, I'm absolute noob when it comes to building websites, so please be gentle. See, for example, this page of my website: http://home.planet.nl/~lever170/hk/hk.html The page is a frame with the photo's on the right and the BACK link on the left. I would like to vertically center the page with BACK so that the vertical line lines up with the thumbnails regardless of screen size. The code for the BACK page is as follows: Code: <html> <body style="background-color:#333333" link="white" alink="white" vlink="white"> <br> <br> <br> <br> <br> <br> <center> <table cellspacing="5" border="0" cellpadding="0"> <tr valign="top" align="left"> <td> <br><br><br><br> <a style="text-decoration:none" href="javascript: history.go(-1)">BACK</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </p> </td> <td bgcolor="#FFFFFF"><img src="http://home.planet.nl/~lever170/1pix.gif"><BR></td> </tr> </table> </center> </body> </html> How do I vertically center this? Hello, I am very new to website design and I need help centering this page: http://tommygonline.com/news.html It looks centered at my screen resolution, but it is not centered on other resolutions, is their a universal code to center on all screens? Any help would be greatful C. hy i have a problem , i don`t know how to center my all web page to be center to all display resolution`s because now when i set a big display resolution page go to left size of the page . i use search and find some things but i dont find a solution i try with css but i`m a little noob ..... someone can help me ? Hello, I am using some inline css menu but I can't figure out what to change in order to automatically center the menu on our page. The code is he http://www.greekconcierge.com/weddings.php many thanks in advance, Andy Hi Everyone Im new to this, and trying to build a website to show my artwork for college. Its a requirement for my degree course in London and I have been trying for ages to centre align a fade in/fade out image with code I found. I don't know if this the correct way of showing my code which you all probably understand way better than me, but I'll paste it below. Also the link where the page is online at the moment is here, It kind of aligns centre in Safari but not on an iPad or in Firefox etc. http://dl.dropbox.com/u/30918322/NEW...%20SITE/1.html Your help would be really greatly appreciated! Many Thanks Alex Wood HTML 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 content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
<title>Alex J Wood</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
// use this to pull the divs in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow DIV:first');
// uncomment below to pull the divs randomly
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<style type="text/css">
/*** set the width and height to match your images **/
#slideshow {
position:relative;
height:400px;
font-family: Arial, Sans-serif, sans;
}
#slideshow DIV {
position:absolute;
top:0px;
left:3px;
z-index:8;
opacity:0.0;
height: 400px;
background-color: #FFF;
}
#slideshow DIV.active {
z-index:10;
opacity:1.0;
text-align: center;
}
#slideshow DIV.last-active {
z-index:9;
}
#slideshow DIV IMG {
height: 350px;
display: block;
border: 0;
margin-bottom: 10px;
}
.hh {
font-family: "American Typewriter";
font-size: 18px;
}
.klk {
font-family: "American Typewriter";
}
.klkggh {
font-size: 28px;
color: #900;
}
a:link {
color: #900;
text-decoration: none;
}
a:visited {
color: #900;
text-decoration: none;
}
a:hover {
color: #900;
text-decoration: underline;
}
a:active {
color: #900;
text-decoration: none;
font-size: 36px;
}
.rtrt {
color: #006;
}
.fgfgg {
text-align: center;
position: absolute;
}
</style>
</head>
<body style="color: #006; font-style: normal; font-size: 36px; font-family: 'American Typewriter'; text-align: center;">
<!-- this will work with any number of images -->
<!-- set the active class on whichever image you want to show up as the default
(otherwise this will be the last image) -->
<p class="klk">Alex J Wood</p>
<p class="klk"><span class="klkggh"><a href="index.html">ENTER SITE</a></span></p>
<table width="44%" border="0" align="center">
<tr>
<th width="25%" scope="col"> </th>
<th width="16%" scope="col"><div id="slideshow">
<center>
<div class="active"> <a href="index.html"><img src="image1.jpg" alt="Not A Nugget" align="middle" /></a> <span class="hh">Not A Nugget |2012</span></div>
<div> <a href="index.html"><img src="image2.jpg" alt="Not A Nugget" /></a> </div>
</center>
</div></th>
<th width="59%" scope="col"> </th>
</tr>
</table>
<center>
<div align="justify"></div>
</center>
<p><a href="index.html" class="rtrt">[url]www.Alex[/url] J Wood.co.uk</a></p>
<p> </p>
</body>
</html>
I am a newbie when it come to html. As of right now i am 14 and creating a website for my mom's billing company. I got all of the information on the page, but i cant get the words to center with the window as it moves! and Suggestions? 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! At the bottom of each of my many pages I like to put a set of various buttons/links and I like to center them all, beginning with my email addy. I'm using the identical html on every page and so far, on every page it all has centered correctly. On the one I'm working on now, though, they are "left-justified." You can see it at http://www.sticksite.com/fishing/indexNEW.html at the bottom, directly below the horizontal line, and starting with my email addy. Can anyone please tell me why, on THIS page, that stuff will not center, when I did use the tag: <div style="text-align: center> which has worked on every other page so far? THANKS! (maybe fishing is not compatible with centering?) Below is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>One Nice Day</title> </head> <body> <div style="margin:5% 15% 0 15%;border:1px solid black;"> <img style="border:1px solid green" src="http://www.oneniceday.com/Artwork/Notice.gif" alt="[One Nice Day] now contains nudity : photographs and drawings of nude men and women, of which I will be posting on this site solely for the purpose of learning figurative art, in which I am using them as learning references / aids. If you are offended by such images, please click the Back button on your browser." /> </div><br /><br /> <div style="margin:1% 15% 0 15%;font:14pt 'Trebuchet MS',Arial,sans-serif;text-align:center;"> <a href="http://www.oneniceday.com/wordpress/" style="font-weight:bold;">ENTER</a> </div> </body> </html> When I view my web page, the <div> doesn't shrink to fit the size of the image, and there's a huge gap next to the image. U can see the result at www.oneniceday.com How do I center my image horizontally on the page? Thanks! Hello; I am a graphic designer that codes pages quick and dirty entirely with tables. The one I am currently working on needs to be centered in all browser windows at all sizes. I understand that this shouldn't be hard, however everything that I have tried so far hasn't worked. My thoughts are that since it is built entirely in tables (with a java search tool) that I need to make a centered container and place the entire page inside of it. I have tried a few codes I've pulled from other forums with no luck temporary url (and I know the code is dirty) www.showcasepublishing.com/myoutandabout Thanks in advance Hi, How to center a html table in a page. I want the table should remain in center even the browser is re-sized. I want to code to work in all browsers.. how can I do this? thanks Hi.. is there any possibility to do something like on that screen pictu http://www.speedyshare.com/387574283.html i mean a page layout with two frames, both aligned to the center of the page ? plz help :/ thx in advance Hi all, I'd really appreciate some help on this one. I have a program which outputs very long strings of text to a HTML page. At the moment the text stays on one line resulting in an annoying horizontal scrollbar. How do I get the page to automatically format the text so that it all fits within a standard width, and so there's no horizontal scrollbar? Regards, Ruth |
|||||||