|
HTML - Help With Center Aligning A Page
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>
Similar TutorialsDear readers, I am working on the Schools web page and I require some help. I have created a 'navagational menu bar' and i am having trouble aligning it in the center of the page no matter what the resolution of the screen is. Here is the coding: Code: <DIV ID="MainMenu">
<div id="MenuMain">
<!--Main Buttons -->
<div id="menu">
<a href="general/psmenu.htm" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MenuContainer_0', 'Menu_0',0,28,'ParentsStudents');"><img src="images/schoolmenu.png" alt="Festus School" border="0" /></a><a href="general/employeemenu.htm" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MenuContainer_1', 'Menu_1',0,28,'Employees');"><img src="images/aboutmenu.png" alt="About FHS" border="0" /></a><a href="schools/index.htm" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MenuContainer_2', 'Menu_2',0,28,'Schools');"><img src="images/psmenu.png" alt="Parents & Students" border="0" /></a><a href="depts/index.htm" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MenuContainer_3', 'Menu_3',0,28,'Departments');"><img src="images/facultymenu.png" alt="Faculty" border="0" /></a><a href="publications/index.htm" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MenuContainer_4', 'Menu_4',0,28,'Publications');"><img src="images/curricularmenu.png" alt="Extra-Curricular" border="0" /></a><a href="board/index.htm" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MenuContainer_5', 'Menu_5',0,28,'Board');"><img src="images/newsmenu.png" alt="News" border="0" /></a>
</div>
Here is the CSS: Code: #MenuMain {
/* The master div to make sure that our popup menus get aligned correctly. Be careful when playing with this one. */
position:relative;
margin:0px;
text-align:left;
width: 100%;
}
#MenuContainer_0 {
/* This ID is related to the master menu div for menu MenuContainer_0 and contains the important positioning information for the menu as a whole */
position:absolute;
left:500px;
top:45px;
z-index:300;
visibility: visible;
}
#Menu_0 {
/* This class defines things about menu Menu_0's div. */
position:absolute;
left:0px;
top:0px;
visibility:hidden;
background-color:#FFCC33;
border:1px solid #FFCC33;
width:158px;
height:111px;
}
One mo Code: BODY {
BACKGROUND:#FFCC33;
COLOR:#000000;
FONT-FAMILY:SANS-SERIF
FONT-STYLE:Arial;
FONT-SIZE:12;
}
A:LINK {
COLOR:#EB3914;
text-decoration:NONE;
}
A:VISITED {
COLOR:#EB3914;
text-decoration:ITALICIZED;
}
A:HOVER {
COLOR:#000000;
text-decoration:underlined;
}
A:ACTIVE {
COLOR:#000000;
}
.BORDER {
BORDER:1PX SOLID BLACK;
BACKGROUND:#FFBB33;
COLOR:#000000;
}
.YELLOW {
BACKGROUND:#FFCC33;
}
.MainMenu {
margin:auto;
width:800px;
}
ANY help in this matter would be most appreciated. P.S. There was more coding but I got yelled at saying it was too long. Sincerely, -gamesfreke hello, i've placed an image gallery to my website . i am unable to align it to the center, 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. 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? Okay, I dont want to align text or an image. I want to align my whole page. My page is all the way to left and I want to center it to the middle. Help! Some pages of this site are not aligning in Firefox. Please see this link http://www.ntcmc.com/news.html . If you view in FF and in IE you will see the difference. The white space below the navigation and above the text in lower left of page should not be there. Any idea why it is displaying incorrectly? THANKS! I created a layout in Photoshop CS3 and used the slice tool, which generated a table for me based on the slices. The problem is, I need the table to be aligned at the very top of the page without a space, without having to set the table height to 100%. Is there a way this can be done? 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 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> 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). i have used the iframe to locate the third party web site into my site, but i couldnt align the 3rd party's site as my wish. i.e:-If want to hide advertisements those are in the top margin on 3rd party, wat do i wanna do.i'm new to this. plz help me. thanks 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 ? 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? 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, 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. Hi guys I've spent the best part of two hours attempting this and have been failing. Miserably. What I'm trying to do is NOT to create a body background, but create an image, which will sit at the bottom of my browser window, regardless of it's size, and then go BEHIND other elements such as tables / images if my browser window size causes overlap. All help appreciated, thanks in advance. Antonz 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 |
|||||||