|
HTML - Center Aligned Page With Frames
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 Similar TutorialsOk, I searched the forum and cannot find a solution for my problem. If you could please help my by suggesting what to do or pointing me to a similar topic. I HAVE to use frames: helping dad with his website - he wants to keep his frames, he likes them. I have two of them - top and bottom one. The top one holds a banner and a short, horizontal menu (no scroll), the length of the bottom one wary depending on the content, so it's "scrollable". I do not know how to deal with FireFox pushing the bottom frame left after adding the scroll bar: At the same time IE keeps it nice and centered. The code for the index file is as follows: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> </head> <frameset rows="203,*" frameborder="no" border="0" framespacing="0" > <frame src="home1.htm" name="top" scrolling="No" noresize="noresize" title="top" target="middle" > <frame src="index2.htm" name="middle" title="middle" target="middle"> </frameset> <noframes> <body> Info on using frames </body> </noframes></html> To center the table I use for the bottom (called "middle") frame I use a <center> tag: Code: <body> <center> <table> <tr><td>Long long text...</td></tr> </table> </center> </body> I was reading somewhere that this is an outdated solution, but that's how I was able to deal with that. Any suggestions on how to center the bottom frame in FF? I am trying to center a frame set (I know we should not use them) I have read so much on this and it appears I should use a dummy page to center the frames but I cannot get this to work, particulary the top frame will not move. This is the existing code but the pages appear top left instead of in the center: <FRAMESET ROWS="78,*"> <FRAME NAME="top" SRC="parent/top.htm" ID="top" SCROLLING="NO" NORESIZE MARGINWIDTH="2" MARGINHEIGHT="2" FRAMEBORDER="0" NORESIZE> <FRAMESET COLS="172,*"> <FRAME NAME="menu" SRC="parent/menu.htm" ID="menu" SCROLLING="AUTO" NORESIZE MARGINWIDTH="10" MARGINHEIGHT="10" FRAMEBORDER="0" NORESIZE> <FRAME NAME="main" SRC="recruit/recruit.htm" ID="main" SCROLLING="AUTO" NORESIZE MARGINWIDTH="5" MARGINHEIGHT="10" FRAMEBORDER="0" NORESIZE> </FRAMESET> </FRAMESET> If anybody can help it would be appreciated Paul Hi. I can't figure out how to have all the tables on my site aligned to the centre yet have the text in them aligned to the left. In other words I want 2 margins either side of the central body of my site. How can I do this? Thanks. 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? Hi Everyone, I am new HTML and Web page designing. I Want to create a web page with multiple frames. But all the frames should be interconnected i.e. If a change is made in one frame, it must be reflected in other frame. Basically i need it for using Google maps for vehicle tracking. In one frame i need to display the map and in another frame I need to display a line chart which shows a Speed/time graph. The graph change when the speed of the vehicle tracked in Google map changes. Regards,Arun Hi Is it possible to link to a page that uses frames, and specify what document appears in each frame of the target page? thanks, alex 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). 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 i dont know why the page called index doesnt work.. here is the code Code: <HTML> <HEAD> <TITLE>INDEX</TITLE> </HEAD> <FRAMESET ROWS = "120,500,70"border="0" framespacing="0" frameborder="0"> <FRAME NAME="BANNER" SCROLLING ="no" SRC ="http://ectwebdevelopment.webng.com/banner.html"> <FRAMESET COLS ="110,500"border="0" framespacing="0" frameborder="0"> <FRAME NAME="NAV" SCROLLING ="no" SRC ="http://ectwebdevelopment.webng.com/nav.html"> <FRAME NAME="home" SCROLLING ="yes" SRC ="http://ectwebdevelopment.webng.com/home.html"> </FRAMESET> <FRAME NAME="FOOTER" SCROLLING ="no" SRC ="http://ectwebdevelopment.webng.com/footer.html"> </HTML> can someone plz help me and tell me what to do to solve this problem? the site <html> Ok, I have 3 frames that take up the whole page, but the text doesnt fill them so it looks silly. How can i make everything cover only say 50% over the page and centred. also, which is better, px or %, I don't know how big px's are so thats useless here's the code for the index. <html> <head><title>title here</title></head> <frameset rows="15%,85%" border="0" frameborder="0" framespacing="0"> <frame src="title.htm" name="title" noresize scrolling="no"> <frameset cols="25%,75%" border="20" frameborder="0" framespacing="0"> <frame src="menu_bar.htm" name="sidemenu" scrolling="false"> <frame src="welcome.htm" name="mainwindow" noresize scrolling="yes"> </frameset> </framset> <noframes> Your browser does not support frames. <a href="frameless_main.htm">Please visit the frameless page.</a> </noframes> </html> Hope the title made sense, I am using Microsoft Expression Web and, I am also using Frames on my website. I have 3 Frames, One complete at the top, one on the left side and then a main page frame to fill the rest. I am using a 19" wide screen monitor, and because of that the pages I make are all unaligned with each other as they get stretched to fill the monitor. now the top frame and left frame stay where they should I have done that, but I can't keep the main page frame from moving over to the right and making everything look untidy and nasty. so could anyone help me out with this problem please, I use a background Image, text and images on the page so they all need to stay centered bu to the left of the page. Or maybe center all the frames to the middle of the screen such as www.myspace.com looks on a wide screen monitor (although i know they do not use frames.) Thanks in advance hi all I have managed to get all my links working within the forms ok but one! that being the having navigation back to my Home page or Index page. It being made up of three forms. This is the linking code i have tried i have also tried others with no luck. Pleases help if you can. <a herf = "PAGE_1.HTML PAGE_2.HTML PAGE_3.HTML PAGE4.HTML" TARGET = "FRAME_1.HTML FRAME_2.HTML FRAME_3.HTML FRAME_4.HTML" > Home Page </a> Hi. This is something I have pondered on for a very long time and wish to know how to resolve. I have no idea if it is possible but I think I have seen it done before. I need a piece of code for a frame that will automatically readjust itself to the page that is targeted in the frame, but will only go so far as the parameters I set it to. To me, it sounds like a rather complicated code and I'm really not sure whether it is possible, but if it is, it would be extremely useful for forum pages that are set to be inside a webpage. What I want to achieve with this, is to have the frame to be able to extend itself inside the page, without putting a scrollbar on the actual frame. The page I have isn't actually structured with frames, so I would like to keep it that way. I have no idea if this IS possible but I would like to know. Thanks, KGB. 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? 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>
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 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. |
|||||||