|
HTML - Center Menu In Page
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 Similar TutorialsBelow 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. So I'm doing a website with horizontal menu that is centered. The page is 100% width, and the menu can be with or without fixed width. The menu is fine otherwise, but the sub items are not next to each other. This is because they only align the width of their parent. However, I'd like them to be centered under their parent regardless of how many sub items there are (so ultimately they could be as wide as the whole menu, provided there were enough sub items). So in the code I now have, the 3 sub items align so that 2 are inline, and the 3rd is under them. These should be inline, stretching over the width of their parent's width. Thanks for the help! Code: <body>
<div id="banner">
<div id="centeredmenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item with Sub</a>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Long Sub Item 3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a></li>
</ul>
</div>
</div>
</body>
</html>
Code: #banner {
position: absolute;
width: 100%;
height: 100px;
top: 0;
}
#centeredmenu {
height: 55px;
float:left;
width:100%;
overflow:hidden;
position:relative;
top: 0px;
}
#centeredmenu ul {
float:left;
clear: both;
list-style:none;
margin:0;
padding:0;
position: relative;
left:50%;
text-align:center;
}
#centeredmenu li {
width: 180px;
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#centeredmenu a {
display:block;
margin:0 0 0 0px;
padding:0px 10px;
background:#C03;
color:#fff;
text-decoration:none;
}
#centeredmenu ul ul {
position: absolute;
width: 100%;
display: none;
z-index: 400;
}
#centeredmenu ul ul li {
position: relative;
width: 50%;
z-index: 500;
}
#centeredmenu ul li a:hover {
background: #C03;
color: #3FF;
}
#centeredmenu ul li:hover ul{
display: block;
}
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 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 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 ? 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. 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? 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>
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?) 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 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 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! 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 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? First let me apologize if this post has been made and/or belongs in another area but I'm not too sure even sure how to ask this. My humble site is set up like such using HTML and CSS: As of right now I have it such that when a navigation link is clicked it loads a whole new page. How can I do this such that only the "main text" area (which sits inside a table) is loaded? I hope that makes sense! here is the (ineffective) code currently: <img style="float: left; width: 169px; height: 73px;" src="img/logo1.png" alt="" /> <h1 style="text-align: center;">random text</h1> the image shifts the left margin such that the text is centered as though the page width was 169px less than it really is. i'm not debating the code itself; the code above behaves as its meant to. aka no surprises. i just cant figure out the appropriate code to center the text across the entire real width of the page as though there was no image. i've tried div tags & all the things google hunting advised. no luck. other than finding this forum, which seems like it'll be a boon! thanx in advance for advise/comments/feedback/help. |
|||||||