|
HTML - Positioning Images For A Vertical Navigation Bar
Hi all,
Graphic designer here hell bent on learning web design with a question probably asinine for all those viewing but vexing to me for the last week. I have a site beautifully designed (can be seen here as a static jpeg) and seemingly straight forward and basic but making it functional on the web as I designed is proving to be quite the arduous task. I have many questions concerning this project but I'll keep this thread focused on the code for positioning images on the navbar. I have the buttons (67px by 14px) and sidebar (36px by 594px) all measured out and have tried a few different semantics to accomplish this but all for not. The images always end up stacking in the top left corner. HTML Code: <body>
<div id="butttons">
</div>
<div id="nav">
<img src="images/layout/images/Side_nav.png"/>
</div>
<div id="butttons">
<div id="nav_Home">
<img src="images/layout/images/Home.png"/>
<div id="nav_Portfolio">
<img src="images/layout/images/Portfolio.png"/>
<div id="nav_Contact">
<img src="images/layout/images/Contact.png"/>
</div>
</body>
And then this is the Refferenced style sheet HTML Code: #nav {
position: absolute;
top: 0px;
left: 0px;
}
div.nav_side {
background-image: url(images\layout\Side_nav.gif);
background-repeat: no-repeat;
background-position: top center;
width: 36px;
height: 594px;
}
#buttons {
position: absolute;
background-repeat: no-repeat;
background-position: top center;
top: 500px;
left: 36px;
}
.nav_home {
background-image: url(images\layout\Home.gif);
background-repeat: no-repeat;
background-position: top center;
position: absolute; top: 552; left: 35;
width: 67px;
height: 14px;
}
.nav_Portfolio {
background-image: url(images\layout\Portfolio.gif);
background-repeat: no-repeat;
background-position: top center;
position: absolute; top: 566; left: 35
width: 67px;
height: 14px;
}
.nav_Contact {
background-image: url(images\layout\contact.gif);
background-repeat: no-repeat;
background-position: top center;
style="position: absolute; top: 580; left: 35;"/>
width: 67px;
height: 14px;
}
I literally just started learning Html /CSS / Java a month ago; spare no details! ANY help with ANY (text formatting, background gradient that adjusts relative to a screen size, rollovers on the nav etc...) part of putting this site together will be more appreciated then most can fathom. I'd be willing to exchange some graphic work if any of you stuck this out to the end with me. Similar TutorialsHello All, With building a nested vertical navigation element, I am using "onmouseover" and "onmouseout" behaviors with some CSS. The problem I have is that, for people who have a hard time clicking quickly on the left side vertical navigation submenu elements, sometimes they mouse out before they click when the mouse is over the element. I made the onmouseover area larger than the actual sub-entries, which helps, but is not good enough. What I want to do: Somehow prolong the onmouseover event to allow maybe 1.25 seconds of onmouseout before the submenu disappears, or slow down the onmouseout for the same reason. Anyone have any ideas? Thank you, edsager P.S. I include some of the relevant code below. HTML stuff: Code: <ul> <li onmouseover="this.firstChild.style.display="block"" onmouseout="this.firstChild.style.display="none""><ul class="popout"> <li class="popout"><a class="popout" href="orig_flood.html">Stuff111111111</a></li> <li class="popout"><a class="popout" href="title.html">Stuff11111111</a></li> <li class="popout"><a class="popout" href="appraisal.html">Stuff1111111</a></li> <li class="popout"><a class="popout" href="AVM.html">Stuff111111</a></li> <li class="popout"><a class="popout" href="BPO.html">Stuff11111</a></li> <li class="popout"><a class="popout" href="orig_fraud.html">Stuff1111</a></li> <li class="popout"><a class="popout" href="lien.html">Stuff111</a></li> <li class="popout"><a class="popout" href="orig_tax.html">Stuff111</a></li> </ul><a>Home</a></li> CSS stuff: Code: @charset "utf-8";
/* CSS Document */
#services a
{
display: block;
height: 100%;
cursor: default;
}
#services li:hover
{
color: #999;
border: 1px solid RGB(179, 179, 179);
background-color: RGB(230, 230, 230);
}
#services a:hover
{
color: #666;
}
#services ul.popout
{
white-space: nowrap;
width: auto;
position: absolute;
left: 180px;
background-color: white;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
z-index: 5;
display: none;
border: 1px solid RGB(179, 179, 179);
}
#services li.popout
{
margin: 0px;
padding: 0px;
height: auto;
font-size: 10pt;
font-weight: normal;
color: #666;
}
#services a.popout
{
padding: 5px;
padding-left: 15px;
padding-right: 15px;
display: block;
height: 100%;
}
#services a.popout:hover
{
color: #333;
background-color: RGB(230, 230, 230);
cursor: pointer;
}
Hi, I recently taught my self HTML and CSS so i'm still a bit shaky i started making a website to practice. i made a website with a top nav bar and a side nav bar. i can't seem to get my text to sit in the corner of both like in most websites it just seems to sit in the middle of the vertical side bar here is my HTML code and CSS code 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 http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Testing... 1 2 3</title> <link rel="stylesheet" type"text/css" href="CSS1.css" /> </head> <body> <h1> Testing Website </h1> <ul id="nav-list"> <li><A href=Home>Home</A></li> <li><A href=HTML>HTML</A></li> <li><A href=CSS>CSS</A></li> <li><A href=JavaScript>JavaScript</A></li> <li><A href=XML>XML</A></li> <li><A href=PHP>PHP</A></li> <li><A href=SQL>SQL</A></li> </ul> <ul id="side-bar"> <li><b>HTML Intro</b></li> <li><A href=SQL>HTML Home</A></li> <li><A href=SQL>Intro</A></li> <li><A href=SQL>Getting Started</A></li> <li><b>Basics</b></li> <li><A href=SQL>Basics</A></li> <li><A href=SQL>Elements</A></li> <li><a href=SQL>Attributes</a></li> </ul> <p> lets have a look </p> </body> </html> HTML Code: @charset "utf-8";
/* CSS Document */
body {
background-color:black;
color:white;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
text-align:center;
}
ul#nav-list {
list-style: none;
margin: 0;
padding: 0;
width: 750px;
height: 20px;
}
ul#nav-list li {
display:inline;
}
ul#nav-list li a {
text-decoration:none;
padding:5px 0;
width:100px;
background: #999;
color:#fff;
float:left;
text-align:center;
border-left:1px solid #000;
}
ul#nav-list li a:hover {
background-color:#666;
}
ul#side-bar {
list-style: none;
margin:0;
padding:0;
width: 100px;
}
ul#side-bar li a {
text-decoration:none;
padding:5px 5px;
background:#999;
color:#FFF;
float:left;
width: 90px;
text-align: center;
margin-right: 20px;
}
ul#side-bar li a:hover {
background:#666;
}
p {
color:#FFF;
}
I'm trying to create a table with two rows, the first row would align to the top of the table and the second row would align to the bottom. I don't have any problems getting the rows to align correctly, but I can't get the table to fill 100% of the allotted space (it works in firefox, but not in IE or Safari). I've read that height isn't a valid piece of code, so this is why it won't expand vertically, but does anybody have any other ideas on how I could get my rows to do what I need them to? The code I'm using basically looks like this ... <table> <tr> <td valign="top"> </td> </tr> <tr> <td valign="bottom"> </td> </tr> </table> Thanks Hey, I was just wondering how I could have the navigation bar centred despite what resolution you view it in rather than fine in one and messed up in others. This is where it's for.. www.aweentertainment.com/tempindex.html Thanks. Hello, First of all I am not a fan of HTML frames but in this case it is necessary.. Please take a look at http://www.2chill.net/frame.html Basically I want the navigation (located in the top frame) to appear in front of the main frame.. is this possible? If that is undoable, is it possible to create a HTML page which contains an iframe with a height & width of 100% minus a fixed number of pixels for header and footer? If that is possible, I could set the z-index of the navigation to a higher number than the z-index of the iframe which will ensure the proper visualization (?). Thanks, John Hello Folks, I'm currently redesigning my site and am having a problem with the last bit! I know that CSS is the method of choice now for web design but I need to integrate my site with a commercial shopping cart called Actinic. This uses tables and is virtually impossible to rewrite using CSS. It makes for a seamless integration if I stick with tables for my part of the site, and less headaches trying to make the two sites look the same. I want to move some of the links away from the left hand column on the page and put them into a horizontal bar at the bottom. I've created a tile which repeats, but I want it separated a bit from the left hand column. Here's a url so you can see what I'm on about. http://www.magicalwonders.com/NewLook/Index.html You will see that the blue bar created by my tile is stuck to the side of the left hand column. My problem arises in trying to move this bar to the right of the left hand column, so that there is a gap between the two. I was hoping to avoid using a full size graphic as I want to keep the file size to a minimum. I've tried Cell Spacing & Padding which doesn't have any effect, so I've tried putting the background tile in between Div tags and specifying a width using the following code:- <td align="center" ><Div width=300px id="footerbackground">Some links go Here</Div></td> This hasn't worked though and the tile fills up the entire width of the cell that the Div is in. I would be grateful if anybody can offer any advice. Many thanks, Myles I just started learning HTML from through Lynda.com. I ran into a problem of which I cant seem to find what went wrong. This image I horizontally splitted it in 3 parts which needed to resolve in HTML as 1 image. Between each image there now is a horizontal space. This is only the case in Firefox and Google Chrome. In Explorer it works fine. What did I do wrong? <table border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="images/1.gif" alt="" /></td> </tr> <tr> <td><img src="images/2.gif" alt="" /></td> </tr> <tr> <td><img src="images/3.gif" alt="" /></td> </tr> </table> Thank you. I've got a line of text that includes some IMG tags. The images are 23 pixels high and the text is about 16 pixels high. So the IMGs increase the height of the line. Normally, Text and IMGs are aligned to "the bottom", so that the IMGs are much taller than the text. I could increase the size of the text so that it was as tall as the IMGs, but I'd rather not. I want the text to be vertically aligned to the "middle", so that the line looks better. Is that possible? Hello everyone. I have been given to task to create a signature template. I am pretty new to html. I am trying to remove the vertical spacing in between the website link/phone number and job title. I have sat here playing around with it for about an hour without much luck. What can I do? --------------------------------- here is the code i am using --------------------------------- <p> <strong><font color="blue">_______________________________________________</font></strong> </p> <p style="MARGIN-RIGHT: 0px" dir="ltr"> <font color="gray" size="4" face="Arial Narrow"><font color="gray"><strong>Debra Scott</strong></font>   ; <strong><font size="2">Newmarket Chamber of Commerce</font></strong> <br /> <font size="2"><strong><em>President & Ceo & nbsp;   ; <font size="1">"Leading Businesses. Leading Communities"</font></em></strong></font><font size="4"> </font></font> </p> <font color="#808080" size="4" face="Arial Narrow"></font><font color="gray" size="4" face="Arial Narrow"> <font color="#000000" face="Times New Roman"></font><font color="#000000" face="Times New Roman"><a href="http://www.newmarketchamber.ca" target="_blank"><font color="gray" size="1" face="Arial Narrow"><strong><img class="floatLeft" style="WIDTH: 20px; HEIGHT: 19px" border="0" src="http://NewmarketONCOC.weblinkconnect.com/External/WCPages/WCWebContent/WebContentPage.aspx?ContentID=296" width="36" height="34" />Newmarket Chamber Website</strong></font></a><font size="3"><font color="gray" size="1" face="Arial Narrow"><strong> <img class="floatLeft" style="WIDTH: 24px; HEIGHT: 19px" border="0" src="http://NewmarketONCOC.weblinkconnect.com/External/WCPages/WCWebContent/WebContentPage.aspx?ContentID=299" width="36" height="34" />905 898-5900 ex. 223</strong></font></font></font> <br /> <font color="#d5d500" size="3" face="Times New Roman">_______________________________________________</font></font> </p> Hello everyone! I'm diving head first into XHTML/CSS development. Up until this point I've been designing using only tables, background graphics, and PHP. I have seen the light so I'm now working with XHTML and am proud to say that what I've done so far is XHTML Strict valid! I took a look at phpbb.com's website and saw I really liked the layout and figured, what better practice than to create something like that, so I did! Unfortunatly I'm having trouble duplicating their method for the navbar. If anyone could point me in the direction of how to get the images all in the nav bar's div layer I'd be very thankful. Keep in mind it will need to be rollover/active/rollout classes capable. My website is http://xt-arts.com Thanks so much for your help!! I'm positioning an image within a divison that also has a paragraph of text. I've got the image floating right. It has these settings: display: inline; clear:both; float: right; I've added padding on the right side to move the image to the left or to control it's right margin so that it's not tight to the right edge of the page. When I apply a border to the image it also goes around the padding which is goes out away from the image. What is recommend as another way to control the right margin or to move image left without the padding? Think I might have it, making positioning relative and then changing right position. First off, hello everyone, I would like to start by telling everyone thank you for letting me a part of this forum. Now, as to my topic. I am looking for a script that generates a random image of four that I have selected and postions it in the lower left hand corner of the screen every time the screen is refreshed. The only thing is, I need this to be compatible with myspace's possibilites. I would tremendously help it if anyone could give me a helping hand on this issue. I have searched google several times for some help, but all the solutions involve either java script or a certain amount of knowledge of html, neither which I have. Thank you for your time, and here are the urls of the images, I would like shown. http://i23.photobucket.com/albums/b3...cience/All.jpg http://i23.photobucket.com/albums/b3...nce/Turkey.jpg http://i23.photobucket.com/albums/b3...ence/Panzy.jpg http://i23.photobucket.com/albums/b3...ce/Curious.jpg Again, thank you a lot. I want to use my images as links, but I also want them absolutely positioned relative to their parent div. However I have come across a problem, to make them links I need to wrap <a>s around them which then means their positioning becomes relative to the anchor tag. Can anyone suggest anything to counteract this problem? I do need them absolutely positioned. The only alternative is an image map, but I'm reluctant to do that because of the slow load time for the whole image, plus all the extra co-ordinate coding I'd have to do. Hi Comparing this code <div style="border:1px solid black; width:120px;height:25px; padding-top:0px;">hello</div> in Internet Explorer 9 and FireFox 4 shows, that the word 'hello' is not at the same vertical position. Is there a method, to adjust this? Thanks for your information. Patrick Hello, I have been struggling with a "dead center" align for some time now, and because I am not such a skilled html code creator, I decided to apply for some help, I'll try to be as explicit as I can be. I have a simple html page, created with Dreamweaver CS3, and I've imported a Flash object, created with Flash 8. All I want is to align this movie horizontally as well as vertically, and when the page loads I have to send the focus to the flash movie, so that the visitor won't have to click on the flash movie in order to receive the focus. I can center align the flash like this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- PICHI Media (c) 2008 All Rights Reserved --><HTML><HEAD><TITLE>Always Follow Dreams</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
html,body {
height:100%;
width:100%;
overflow:auto;
}
body,td,th {
color: #000000;
}
body {
background-color: #FFFFFF;
background-image: url();
}
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #000000;
}
a:active {
color: #000000;
}
.style4 {font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif;}
#apDiv1 {
position:absolute;
width:324px;
height:25px;
z-index:1;
left: 354px;
top: 303px;
background-color: #000000;
visibility: hidden;
}
-->
</style>
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<head>
</head>
<BODY>
<CENTER>
<DIV align=right></DIV>
</CENTER>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center
border=0>
<TBODY>
<TR>
<TD width="0" height="0" align=center vAlign=middle>
<P align="center">
</script><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','400','height','440','src','test','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','test' ); //end AC code
</script><noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="400" height="440" id="test" >
<param name="movie" value="test.swf">
<param name="quality" value="high">
<embed movie src="test.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="400" height="440"></embed>
</object>
</noscript></P>
</TD>
</TR></TBODY></TABLE>
</BODY></HTML>
As you can see this source code will center align both ways horizontally and vertically. I belive this is doing the job: Code: <TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" align=center
border=0>
<TBODY>
<TR>
<TD width="0" height="0" align=center vAlign=middle>
<P align="center">
Aligment sorted now let's get to the focus part. When the page loads I want to set the focus to the flash movie, and now I don't mean to remove that rectagle we all see in SP2 and IE7. No not that, that's easy to remove with some code. What I want is the actually focus in a text field in my flash movie. I can do this with the following 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=utf-8" /> <title>Untitled Document</title> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> </head> <body onLoad="window.document.test.focus();"> <center> <table width="100%" height="100%" align="center"> <tr> <td valign="middle" align="center"> <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','name','test','width','400','height','440','id','test','title','test', 'src','test','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','test' ); //end AC code </script><noscript><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" name="test" width="400" height="440" id="test" title="test"> <param name="movie" value="test.swf" /> <param name="quality" value="high" /> <embed src="test.swf" width="400" height="440" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" name="test"></embed> </object></noscript> </center> </td> </tr> </table> </body> </html> The focus part works with this i believe: <body onLoad="window.document.test.focus();"> where TEST is the ID of my flash movie. BUT, the movie is not vertically align. It still is horizontally, but not vertically. And this is my problem. If I combine the two examples, the one where the content is dead center, and the one where I set the focus to the flash movie it won't work, and I get this error: 'window.document.test' is null or not an object This page is right now on my site: http://www.danandrei.ro And if you double click on the small browser icon from the lower left corner, you know the one that shows error messajes like "DONE but with some errors". you can see what I mean. My question is: IS IT POSSIBLE TO BOTH CENTER ALIGN, HOR AND VERT, AND ALSO SET FOCUS TO THE FLASH MOVIE ? IF SO, DO YOU GUYS HAVE ANY CLUE HOW ? Thank you. <div align="center"> <table height="117" cellspacing="0" cellpadding="0" border="0" class="btn1 boxbtn1"> <tr> <td> <a href="images/gymfu.png" rel="lightbox[roadtrip]" title="Gym Fu - Branding">image #1</a></td> </tr> </table> </div> ----- I've tried 'valign="middle" ' in the html code, and also 'vertical-align:center' in the css. no joy. Can anyone help? Hello can anybody help my with html about a vertical line with wat codeyo can make a vertical line for your website in html. Erwin have some html code which is putting some image buttons into a menu which goes across the top of the page. I want to change this too make them go down the page. I have a css file with the code that looks like this Code: Code: #nav_menu
{
/* background: transparent; */
background: #ddd;
border: #dcdce9 solid thin;
/* margin: 10em; */
position:absolute;
top: 70px;
left: 0px;
padding: 0pt;
right:0px;
height: 51px;
/* bottom:200px; */
}
and the html code looks like this Code: Code: <ul id="globalnav">
<li><a href="index.php?here=home" class="" id="home">Home</a></li>
<li><a href="index.php?here=daybook" id="daybook" class="">Day Book</a></li>
<li><a href="index.php?here=wms" id="wms" class="">Work Management System</a>
<ul>
<li><a href="index.php?here=staff" id="staff" class="">Staff</a></li>
<li><a href="index.php?here=shifts" id="shifts" class="">Work shifts</a></li>
</ul>
what part do i need to change to make it go vertically? Is there an easy way to make a vertical line? For example, some equivalent to <HR> ? Thank you. Is there a way to align something in the dead centre of the page? here is my code so far. Code: <html>
<head>
<title>website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color: #BFE4FF;
}
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="801" height="600" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td rowspan="2">
<img src="images/logo_01.jpg" width="136" height="117" alt=""></td>
<td rowspan="9">
<img src="images/spacer_03.jpg" width="30" height="600" alt=""></td>
<td>
<img src="images/spacer_04.jpg" width="611" height="20" alt=""></td>
<td rowspan="9">
<img src="images/spacer_04-05.jpg" width="23" height="600" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td rowspan="7"><iframe name="iframe1" src="home.html" width=611 height=557 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></iframe></td>
<td>
<img src="images/spacer.gif" width="1" height="97" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer_01.jpg" width="136" height="43" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="43" alt=""></td>
</tr>
<tr>
<td>
<a href="home.html" target="iframe1"><img src="images/button_home.jpg" width="136" height="46" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="46" alt=""></td>
</tr>
<tr>
<td>
<a href="srchpat.html" target="iframe1"><img src="images/button_srchpat.jpg" width="136" height="47" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="47" alt=""></td>
</tr>
<tr>
<td>
<a href="newpat.html" target="iframe1"><img src="images/button_newpat.jpg" width="136" height="48" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="48" alt=""></td>
</tr>
<tr>
<td>
<a href="help.html" target="iframe1"><img src="images/button_help.jpg" width="136" height="47" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="47" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/spacer_2.jpg" width="136" height="252" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="229" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer_05.jpg" width="611" height="23" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt=""></td>
</tr>
</table>
</body>
</html>
I have managed to centre the page horizontally but i would like to also have the page vertically centred Thanks |
|||||||