|
HTML - Issues Centering Nav Menu
HI,
Having trouble getting this menu to center. menu alone: http://www.havinc.com/menu.htm menu within the page: http://www.havinc.com/home.htm I have tried using the center tag, align="center" and no luck. I have tried within the menu fil eitself, and within the cell it is included in. Any help appreciated. tracie Similar TutorialsI have a page laid out, but its not centering the main table? All the contents should be centered on the page but its shoved to the left. Take a look he www.puliz.com/default2.htm Also, there is a gap in the graphics just below the image map that I have placed there. Any ideas? Thanks in advance! Scott I have inserted this http://www.dynamicdrive.com/style/cs...side_bar_menu/ it a test page, but there is a layout issue in FF, and possibly errors generally. It all displays ok in IE. http://www.trytest.net/testing/build/ Can someone have a look and point out the error of my ways? Or if need be point me in the direction off a better solution? Cheers Hi guys. I have a menu on this page, and the last menu item "galleries" drops down a menu when it's hovered over. http://www.dualimagephotography.com/gallery/ But in IE instead of dropping beneath it shoots out to the right. Anyone know why? I don't really mind it so much except it's really hard to hover over the submenu when it goes that way The CSS: ul#nav, ul#nav ul { margin: 0px; padding: 0px; list-style: none; } ul#nav ul { border: 0px solid #999; background-color: transparent; display: none; position: absolute; z-index: 9; } ul#nav li { display: inline; float: left; text-indent: 0px; margin: 0 12px 0 12px; float:right; } ul#nav ul li a { display: block; text-decoration: none; color: #000; padding: 2px; } ul#nav ul li a:hover { background: transparent; color: #fff; } ul#nav li ul { border-bottom: 0px solid #999; background-color: transparent; display: none; position: absolute; z-index: 9; } ul#nav li ul li { display: inline; float: left; text-indent: 0px; margin: 3px 0px 3px 0px; } ul#nav li ul li a { display: block; text-decoration: none; color: #000; padding: 2px; border-bottom: 1px solid #fff; } ul#nav li ul li a:hover { background: transparent; color: #fff; border-bottom: 1px solid #ccc; } ul#nav li li { display: block; float: none; } OK, I have a JavaScript code that toggles between the visibility of a div. When my mouse hovers over an element (lets say an li ), it would display the hidden div, on mouse out it would hide it again. When the drop down becomes visible, I click on any one of its links it takes me to the next page. The problem now is that if I was to then press the back button, the drop down menu would remain up, despite the fact that its not being triggered! Is there a code i'm missing that should correct this? How do I ensure if the user were to hit the back button, the div would reset to its original state? p.s. I had to cut some code out from the html, it exceed the character limit, but all the necessary codes are there. 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=utf-8" http-equiv="Content-Type" />
<title>facpros</title>
<link rel="stylesheet" type="text/css" href="css1.css" id="default"/>
</head>
<body style="padding-top:0px;margin:0px;padding:0px;background-image:url('images/bg.png')" >
<script type =" text/javascript" src="fac.js" >
</script>
<!--beginning of div top-->
<div id="top"class="topstyle" style="left: 0px; top: 0px; " >
<!--the logo div-->
<div id="logo" style="width:285px; height:110px;position:relative; left: 0px; top: 0px;background-image:url('images/facproslogo.png')">
</div><!--end of logo div-->
<!--begining od facpros def-->
<div id="feder" class="fed" style="float:right; margin:0px; top: -110px;">
<p class="fac" style="position:absolute; width: 565px; left: 81px; top: 6px;"> Federation des Amis Chretiens pour la Promotion Sociale
</p>
</div><!--end of facpros def-->
<!--navigation menu list-->
<div id="Navigation" style="left:0px; top: -110px; float:right;" >
<ul class="nav" >
<li class="nli" id ="home" onclick="window.location.href='home.html'"style="width: 61px" ><a><span>Home</span></a></li>
<li class="nli"id ="about" onmouseover= "fabout('over')" onmouseout="fabout('out')" ><a><span>About Us</span></a>
<ul id="aboutdrop"style="visibility:hidden;position:absolute;list-style:none;z-index:1;top:45px;left:81px;text-align:left;">
<li onclick="window.location.href='about.html'" class="ischild" style=" width:150px;left: 0px; top: 0px;line-height:2em;height:30px;" >
Mission
</li>
<li onclick="window.location.href='leader.html'" class="ischild" style=" width:150px;left: 0px; top: 31px;line-height:2em;height:30px;" >
Leadership
</li>
<li onclick="window.location.href='member.html'" class="ischild" style=" width:150px;left: 0px; top: 62px;line-height:2em;height:30px;" >
Member
</li>
<li onclick="window.location.href='sof.html'" class="ischild" style=" width:150px;left: 0px; top: 93px;line-height:2.3em;height:30px; font-size:13px;" >
Statement Of Faith
</li>
</ul>
</li>
<li class="nli" id ="event" onclick="window.location.href='event.html'"><a><span>Events</span></a></li>
<li class="nli" id ="photo" onclick="window.location.href='photo.html'"><a><span >Gallery</span></a></li>
<li class="nli" id ="contact" onclick="window.location.href='contact.html'"><a><span >Contact Us</span></a></li>
<li class="nli" id ="lang" onmouseover= "flang('over')" onmouseout="flang('out')" ><a><span >Language</span></a>
<ul id="langdrop"style="list-style:none;width:100px; position:absolute; left:351px; top:61px;background-color:transparent;visibility:hidden;z-index:1;">
<li onclick="window.location.href='frhome.html'" class="ischild" style=" width:100px;left: 0px; top: -16px;line-height:2em;height:30px;" >
French
</li>
<li onclick="window.location.href='home.html'" class="ischild"style="width:100px;left:0px; bottom:-47px; height:30px;line-height:2em; ">
English
</li>
</ul>
</li>
</ul><!--navigation ul-->
</div><!--end of navigation menu div-->
</div><!--end of div top-->
</body>
</html>
Code: body{
background-color:gray;
}
p.fac{
font-family:"Lucida Calligraphy"; color:white; position:relative;font-size:large;
margin-left:auto;margin-right:auto;
}
li.ischild{
height:20px;
position:absolute;
text-align:center;
background-color:#f0f0f0;
cursor:pointer;
color:black;
border:thin gray solid;
text-align:left;
padding-left:5px;
}
ul.nav{
font-family:Copperplate33bc;
list-style:none;
padding: 0;
margin: 0; font-size:14px;
height:45px;
}
div.fed{
background-color:maroon;
position:relative;
width:715px;
height:65px;
}
div.topstyle{
top:0px;
background-color:transparent;
height:110px;
width: 1000px;
margin-left:auto;
margin-right:auto;
position:relative;
}
div.topcenter{
background-image:url('images/topcenterbgblue.png');
height:286px;
width: 1000px;
margin-left:auto;
margin-right:auto;
position:relative;
}
div.mbstyle{
background-color:white;
width:1000px;
position:relative;
margin-left:auto;
margin-right:auto;
height:390px;
}
div.bstyle{
background-color:white;
height:100px;
width: 1000px;
margin-left:auto;
margin-right:auto;
position:relative;
}
a:link,a:visited{
text-decoration:none;color:black;
}
a:link.nn,a:visited.nn{
text-decoration:none;
color:#666666;
margin-bottom:auto;
margin-top:auto;
font-family:'Times New Roman', Times, serif;
font-size:small;
}
#Navigation{
width:715px;
position:relative;
background-image:url('images/navbg2.png');
}
li.nli
{
float: left;
display: block;
text-decoration: none;
text-align: center;
padding-left:10px;
padding-right:10px;
width:auto;
height:45px;
line-height:3.5em;
border-right-width:2px;
border-right-style:groove;
border-right-color:#CCCCCC;
cursor:pointer;
background-image:url('images/hoverbg2.png');
}
td{
padding-left:50px;padding-right:100px; margin-bottom:auto;margin-top:auto;font-family:"Times New Roman", Times, serif; color:#666666;
}
#navigation li{
}
.ischild:hover{
height:20px;
position:absolute;
text-align:center;
background-color:#c0c0c0;
cursor:pointer;
color:black;
border:thin gray solid;
text-align:left;
padding-left:5px;
}
.nli:hover{
float: left;
display: block;
text-decoration: none;
text-align: center;
padding-left:10px;
padding-right:10px;
width:auto;
height:45px;
line-height:3.5em;
border-right-width:2px;
border-right-style:groove;
border-right-color:#CCCCCC;
cursor:pointer;
background-image:url('images/hoverbg.png');
color:#990000;
}
Code: function fabout(status)
{
switch(status)
{
case("over"):
{
document.getElementById("aboutdrop").style.visibility ='visible';
}break;
case("out"):
{
document.getElementById("aboutdrop").style.visibility ='hidden';
}break;
}
}//end of fabout
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function flang(status)
{
switch(status)
{
case("over"):
{
document.getElementById("langdrop").style.visibility = "visible";
}break;
case("out"):
{
document.getElementById("langdrop").style.visibility = "hidden";
}break;
}
}//end of flang
Good afternoon, I'm currently designing a site for a large exterior decorating company. I've had trouble, but nothing I couldn't work around. My graphic design skills are great, but my web coding is amateur at best. I've compiled a fixed-width site, it looks great in every browser, and in different resoultions. here's the kicker. (and I would have included code if the site were local on this computer, but it's on my laptop) My navigation is giving me major issues. Its set up to link to the site directory folder on my pc, the preview is real-time - what i'm trying to say is you can navigate the site from my pc, although it's not online. and the links work. I have one main-navigation, with drop-downs to a maximum of 2 sublevels (ie: spry vertical menu bar). I can navigate the main level to any of the sub-levels without issue. Code: /../index.html ---- to ---- /../products/siding/wood.html BUT when navigating back to any menu (or to a different sub-level in the same category, ie: siding/aluminum.html) for lack of a better explanation - the url won't drop the current directory. What I mean by this is Code: /../products/siding/wood.html ---- to ----- products/siding/aluminum.html redirects to products/siding/siding/aluminum.html So what i'm asking is if someone can assist me in fixing my page so it doesn't do this. I feel after writing this that my issue lies in the fact that I haven't specified index.html as my root directory. You would assume it would come intuitively for the page to drop the current directory, especially when you're specifying a page in a different level.. But apparently not. Also, i've explored it before but never found a decent answer: Is there any code that will allow me to embed the navigation to each page from a single file. Allowing easy changes to the navigation, simply by editing one file - the navigation? I am trying to implement a CSS dropdown menu into my site. I have it put in and positioned properly but when I hover over the links the menu doesn't drop. I have checked z-index's but other than that I am lost. I attached just the menu and the menu in the site. Menu Only (This Works): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <style media="all" type="text/css">@import "menu/menu_style.css";</style> <div> <ul class="menu"> <li class="top"><a href="www.collegecovers.com" target="_self" class="top_link"><span>Home</span></a> </li> <li class="top"><a href="www.collegecovers.com/schools.html" target="_self" class="top_link"><span>Shop By School</span></a> <ul class="sub"> <li><a href="www.collegecovers.com/alabama.html" target="_self">Alabama</a></li> <li><a href="www.collegecovers.com/arkansas.html" target="_self">Arkansas</a></li> <li><a href="www.collegecovers.com/auburn.html" target="_self">Auburn</a></li> <li><a href="www.collegecovers.com/clemson.html" target="_self">Clemson</a></li> <li><a href="www.collegecovers.com/duke.html" target="_self">Duke</a></li> <li><a href="www.collegecovers.com/florida.html" target="_self">Florida</a></li> <li><a href="www.collegecovers.com/floridastate.html" target="_self">Florida State</a></li> <li><a href="www.collegecovers.com/georgia.html" target="_self">Georgia</a></li> <li><a href="www.collegecovers.com/gonzaga.html" target="_self">Gonzaga</a></li> <li><a href="www.collegecovers.com/georgetown.html" target="_self">Georgetown</a></li> <li><a href="www.collegecovers.com/iowa.html" target="_self">Iowa</a></li> <li><a href="www.collegecovers.com/iowastate.html" target="_self">Iowa State</a></li> <li><a href="www.collegecovers.com/kansas.html" target="_self">Kansas</a></li> <li><a href="www.collegecovers.com/kansasstate.html" target="_self">Kansas State</a></li> <li><a href="www.collegecovers.com/kentucky.html" target="_self">Kentucky</a></li> <li><a href="www.collegecovers.com/louisianastate.html" target="_self">Louisiana State</a></li> <li><a href="www.collegecovers.com/michigan.html" target="_self">Michigan</a></li> <li><a href="www.collegecovers.com/michiganstate.html" target="_self">Michigan State</a></li> <li><a href="www.collegecovers.com/northcarolina.html" target="_self">North Carolina</a></li> <li><a href="www.collegecovers.com/northcarolinastate.html" target="_self">North Carolina State</a></li> <li><a href="www.collegecovers.com/nebraska.html" target="_self">Nebraska</a></li> <li><a href="www.collegecovers.com/ohiostate.html" target="_self">Ohio State</a></li> <li><a href="www.collegecovers.com/oklahoma.html" target="_self">Oklahoma</a></li> <li><a href="www.collegecovers.com/oklahomastate.html" target="_self">Oklahoma State</a></li> <li><a href="www.collegecovers.com/oregon.html" target="_self">Oregon</a></li> <li><a href="www.collegecovers.com/oregonstate.html" target="_self">Oregon State</a></li> <li><a href="www.collegecovers.com/penn.html" target="_self">Penn State</a></li> <li><a href="www.collegecovers.com/southcarolina.html" target="_self">Oregon</a></li> <li><a href="www.collegecovers.com/texas.html" target="_self">Texas</a></li> <li><a href="www.collegecovers.com/texasam.html" target="_self">Texas A&M</a></li> <li><a href="www.collegecovers.com/texastech.html" target="_self">Texas Tech</a></li> <li><a href="www.collegecovers.com/vanderbilt.html" target="_self">Vanderbilt</a></li> <li><a href="www.collegecovers.com/wakeforest.html" target="_self">Wake Forest</a></li> <li><a href="www.collegecovers.com/westvirginia.html" target="_self">West Virginia</a></li> </ul> </li> <li class="top"><a href="www.collegecovers.com/category.html" target="_self" class="top_link"><span>Shop By Category</span></a> <ul class="sub"> <li><a href="www.collegecovers.com/bib.html" target="_self">Bed in a Bag</a></li> <li><a href="www.collegecovers.com/comforter.html" target="_self">Comforters</a></li> <li><a href="www.collegecovers.com/sheets.html" target="_self">Sheets</a></li> <li><a href="www.collegecovers.com/futon.html" target="_self">Futon Covers</a></li> <li><a href="www.collegecovers.com/crib.html" target="_self">Crib Covers </a></li> <li><a href="www.collegecovers.com/etc.html" target="_self">Accessories</a></li> </ul> </li> <li class="top"><a href="www.collegecovers.com/register.html" target="_self" class="top_link"><span>Register</span></a> </li> <li class="top"><a href="www.collegecovers.com/contactus.html" target="_self" class="top_link"><span>Contact Us</span></a> </li> </ul> </div> </body> </html> Menu on site (Not working): Code:
.bg {background: url(images/button4.gif);}
.menu {
padding:0 0 0 32px;
margin:0;
list-style:none;
height:40px;
background:#fff url(images/button1a.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
z-index: 100;
visibility: visible;
}
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;}
.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;}
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:100;}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}
Thank you for the help! I am trying to get rid of the "You have to click to activate this function" mumbo jumbo for a site I am doing. I tried following these directions... http://www.adobe.com/devnet/activeco...devletter.html but am having a rough time getting it to work... here is my code. Code: <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','900','height','140','src','GoodDock','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','GoodDock' ); //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=7,0,19,0" width="900" height="140"> <param name="movie" value="images/GoodDock.swf" /> <param name="quality" value="high" /> <embed src="images/GoodDock.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="900" height="140"></embed> </object></noscript> I have a website and I used css to make my Div tags set to absolute. The only problem is that when you open it in a browser, the browser won't open big enough and wil block out some of my content (forcing me to scroll to the left or maximize the borswer to see the whole page) . How do i make the divs always appear in the center of the page always. Also how do i make it so when you change the siz of the browser my divs will change with it to remain in the center. I tried doing the margin auto trick but it still doesn't work. Here is my stle sheet code and the web page html code... any help would be appreciated. /* CSS Document */ #wrapper {margin-right: auto; margin-left: auto; margin-top: 20px; margin-bottom: 0;;} body { margin : 0px 0px 0px 0px; background-color: #E1AE5A; background-repeat: repeat; } #top { position: absolute; height: 48px; width: 900px; left: 250px; top:3px; border:0px none; z-index:1; color: #000033; } #main { position: absolute; top: 542px; left: 328px; z-index:5; width: 745px; color: #FFFFFF; height: 28px; } #flash { position: absolute; top: 130px; left: 299px; z-index:4; width: 803px; color: #FFFFFF; height: 419px; } .style1 { font-family: Eurostile; color: #FFFFFF; } .style2 { font-family: Helvetica; } #Layer1 { position:absolute; left:300px; top:121px; width:804px; height:540px; z-index:3; background-color: #000033; border: medium solid #FFFFFF; } .style3 { font-family: Eurostile; } #Layer2 { position:absolute; left:111px; top:170px; width:71px; height:124px; z-index:4; } .style4 {color: #000000} #Layer3 { position:absolute; left:482px; top:72px; width:37px; height:56px; z-index:2; } #Layer4 { position:absolute; left:652px; top:72px; width:24px; height:31px; z-index:2; } #Layer5 { position:absolute; left:822px; top:72px; width:84px; height:58px; z-index:2; } #Layer6 { position:absolute; left:992px; top:72px; width:95px; height:50px; z-index:2; } #Layer7 { position:absolute; left:331px; top:139px; width:750px; height:446px; z-index:9; } #Layer11 { position:absolute; left:319px; top:72px; width:12px; height:10px; z-index: 2; } #Layer8 { position:absolute; left:302px; top:98px; width:791px; height:48px; z-index:10; } #Layer9 { position:absolute; left:299px; top:40px; width:32px; height:20px; z-index:0; } #Layer10 { position:absolute; left:1016px; top:595px; width:24px; height:26px; z-index:10; } and the html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" land="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="styles.css" rel="stylesheet" type="text/css"> </head> <body> <div id="top"> <h1 align="center" class="style3 style4">on The side, Inc. </h1> <p align="center" class="style3"> </p> </div> <div class="style2 style3" id="main">on The side is a value added promotional marketing organization focused on working with companies to make them more market-facing. We take time to learn about our clients' business model, industry and previous marketing agendas before taking a next step OR leap - if necessary.</div> <div id="Layer1"></div> <div id="flash" align="center"> <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="425" height="400"> <param name="movie" value="main.swf"> <param name="quality" value="high"> <embed src="main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="425" height="400"></embed> </object> </div> <div id="Layer3"><a href="who.html"><img src="who.jpg" width="100" height="70" border="0"></a></div> <div id="Layer4"><a href="what.html"><img src="what.jpg" width="100" height="70" border="0"></a></div> <div id="Layer5"><a href="ideas.html"><img src="ideas.jpg" width="100" height="70" border="0"></a></div> <div id="Layer6"><a href="why.html"><img src="why.jpg" width="100" height="70" border="0"></a></div> </body> </html> so what is the easiest and best way to center a div within a div? or a div within anything else for that matter. How do you center vertically? and How do you venter horizontally? how can i center the nav on this page? http://fantasyfootball.pzproductions.com/testing I have a page that is not being centered on the background in both IE 6&7 but looks perfect in FF. I am not sure what is wrong because the template I used is vaild Here is the page http://www.mesquitechristmas.com/wea...Z119&icao=KHQZ I have been banging my head all day an maybe just need another pair of eyes. -Thanks I'm attempting to center the logo / table located at the top of the page. I tried several various forms of alignment commands, all with no success. Any help is appreciated. Site: http://blog.camhabib.com I have the following HTML: <table id="TextArea1"> <tr> <td valign=top><img src="Images/AllProducts.jpg" alt="All Products" align=center></td> </tr> The image is placed at the top left corner of the table using the: valign=top Then, I want to center the image horizontally within the table using: align=center But, this markup is ignored. I have tried all the values for "align" and: align=right is the only one that works. What do I need to do to get this to work? Thanks. Hello, I wont call myself a website designer, but I do design my own websites. My problem is my website is only centered when monitor setting is at 1024 x 768. If an outside viewer with different monitor settings views my sites it will be really off-centered. I design all my websites in photoshop then code them with macromedia. Is their a code I could include into the html to keep my webpages centered no matter what size screen is viewing? Would appreciate any comments, JJ I'm currently using this for my blog template (i didn't make it) and it's currently aligned to the left. How would i make it so that it centers automatically regardless of window size/screen resolution? The right column has a position. Any help is appreciated. Code: <html><head>
<title>17. everything i'm not</title>
<style type="text/css">
#navbar-iframe {display: none;}
::-moz-selection {background-color:#e3e3e3;color:#666666;}
a:link,a:active,a:visited{color:#999999; text-decoration: none;}
a:hover{text-decoration: none; color: #91B1BD; text-decoration:none;}
body{background-color: #fdfdfd; background-image: url('http://i53.tinypic.com/1jvi34.jpg'); color: #666666; font-family: arial; font-size: 8pt;}
blockquote{font-family:arial; border-left: 5px solid #91B1BD; background-color:#f9f9f9; color: #666666; padding: 10px;}
.side{background:#ffffff; padding:10px; filter: alpha(opacity=70); moz-opacity:.70; opacity:.70;}
.h1 {
font:normal 12pt courier new;
color:#91B1BD;
text-align:left;}
.h2 {
font:normal 8pt courier new;
color:#999999;
border-bottom: 1px dashed #e3e3e3;
text-align:left;
padding:3px;}
</style><noembed>
</head></noembed>
<noembed><body>
</noembed>
<div style="left:0px; top:0px; position:absolute;">
<img src='http://i51.tinypic.com/152oqpk.jpg' width="700px" >
</div>
<div style="position:absolute; left:0px; top:350px; width:545px; background:#ffffff; padding:10px; filter: alpha(opacity=70); moz-opacity:.70; opacity:.70;">
<blogger>
<div class="h1">▶ <$BlogItemTitle$></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> // <$BlogItemDateTime$></div><br>
<$BlogItemBody$><br>
</blogger>
</div>
<div style="width: 250px; left:580px; top:290px; position:absolute;">
<div style="color:#91B1BD; font-family:courier new; font-size:14pt;">'cos she's everything, <br>everything im not.</div><br>
<div class="side">
<div class="h1">▶ こんにちは</div>
a warm welcome to your blog ? music players, hit counters, nuffnang ?
</div><br>
<div class="side">
<div class="h1">▶ 私について</div>
konnichiwa, watashi no namaewa deniisu desu. your sexy profile here hoho.
</div><br>
<div class="side">
<div class="h1">▶ 何か言う</div>
some space for your tagboard, max width 250px.
</div><br>
<div class="side">
<div class="h1">▶ ともだち</div>
<a href="http://" target="_blank">one</a>
<a href="http://" target="_blank">two</a>
<a href="http://" target="_blank">three</a>
<a href="http://" target="_blank">four</a>
<a href="http://" target="_blank">five</a><br>
links to your friends ? if you have any.
</div><br>
<div class="side">
<div class="h1">▶ ありがとう</div>
Layout and header image by <a href="http://blogskins.com/me/mymostloved" target="_blank">mymost</a><a href="http://heavilyybroken.blogspot.com" target="_blank">loved*</a>
with raw image from popsister scan by <a href="http://sushi-cat.net/" target="_blank">sushi-cat</a> and background from <a href="http://fivepointsapart.blogspot.com" target="_blank">fivepointsapart</a>.<br>
</div>
</div>
</body>
</html>
This is a tough one, I think. I am throwing this code into my current webpage: <div style="float:right; width:176; height:471; border:1px none solid#000"> So that I can have a side column. On a 1024 or 1280 resolution it looks fine, but once the res gets higher the column goes way too far to the right. Is there anyway to "lock it" in place? Thanks! Hey, I was working on a template and I was learning some new things so I might have messed up some where. But, the template won't center and it has a empty space next to it which I don't know how to get rid of. Can anyone help me? http://teamafterglow.com/templates/template7.html I'm currently using this template for blogger that's not made by myself and i've been trying to get it to center horizontally but it's not working. I'm hardly experienced with html so any help would be appreciated. Thanks in advance! HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML><head>
<title>The City That Never Sleeps</title>
<script type="text/javascript">
function changeNavigation(id)
{document.getElementById('content').innerHTML=document.getElementById(id).innerHTML}
</script>
<style type="text/css">
body {
background-image: url(http://i1015.photobucket.com/albums/af277/sleepingtoys/city/citybg.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-color: #F0F0F0;
font: normal 8pt "Arial", sans-serif;
color: #808080;
line-height: 1.5;
text-align: justify;
}
#navbar-iframe{
display: none;height: 0px;
}
#bottom {
background: #222;
height: 20px;
width: 100%;
position: fixed;
bottom: 0;left: 0;z-index: 1;
}
#sun{
padding:5px;
background: #222222;}
#post{
filter: alpha (opacity=90);
-moz-opacity: 0.50; opacity: 0.90;
-webkit-transition-duration:1s;
padding:1px 3px 3px 0px;}
#post:hover{
filter: alpha (opacity=100);
-moz-opacity: 1.00; opacity: 1.00;
-webkit-transition-duration: 1s;
padding:1px 3px 3px 0px;}
#posts {
background: #ffffff;
vertical-align: top;
width: 520px;
-moz-border-radius: 10px 0 10px 10px;
-webkit-border-radius: 10px 0 10px 10px;
padding: 5px 10px 10px 10px;}
#postbody img {
padding: 6px;
background:#fafafa;
border: 1px solid #e1e1e1;}
#music img {
padding: 6px;
background:#111;
border: 0px solid #222;}
#moon {
background: transparent;
position: absolute;
top: 20px;
left: 315px;
width: 60%; }
#rain {
position: fixed;
width: 250px;
bottom: 10px;
left: 50px;}
#rain #content {
-webkit-border-radius: 10px 10px 0 0px;
-moz-border-radius: 10px 10px 0 0px;
background: #222222;
color: #999;
margin: 10px 0 0;
padding: 8px; }
::selection {
color: #888888;
background: #f5f5f5; }
::-moz-selection{
background: #f5f5f5;
color: #888888;}
.blogger-labels{
border-top: 1px solid #f8f8f8;
font-size: 10px;
padding-top: 5px;
margin: 10px auto 0 auto;
text-align: right;}
strong, b {color:#81A8B8;}em, i {color: #B94159 ; font-weight:bold;}u {color: #A79C8E ;border-bottom: 1px solid #A79C8E;}
a {
font: bold 8.5pt "helvetica", sans-serif;
color: #888;
text-decoration: none;
text-transform: lowercase;}
a:hover {
-moz-transition-duration: 1s;
-webkit-transition-duration:1s;
color: #ffffff; }
blockquote {
background-image:url("http://i589.photobucket.com/albums/ss333/HeartsAloud/dl/hbq.gif");
background-repeat: no-repeat;
background-position:top right;
font: normal 8pt "arial", monospace;
color: #999;
margin: 1px 0px 1px 0px;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eee;
-webkit-transition-duration:1s;
padding: 9px 0px 9px 0px; }
blockquote:hover {
-webkit-transition-duration:1s;
color: #555; }
.date {
font: normal 20pt "helvetica", sans-serif;
text-transform: lowercase;
color:#dddddd;
letter-spacing:-3pt;}
.title {
font: normal 18pt "helvetica", sans-serif;
border-bottom: 1px solid #f5f5f5;
margin-top:-10pt;
margin-bottom:2px;
font-style:italic;
letter-spacing: -2pt;
color:#f1f1f1;
text-transform: lowercase; }
.time{
font: bold 30pt "arial", sans-serif;
-moz-border-radius: 0 7px 7px 0px;
-webkit-border-radius: 0 15px 15px 0px;
height: 50px;
background: #f9f9f9 !important;
padding: 1px 3px 3px 0px;
float: left;
position: relative;
color:#f1f1f1;
font-weight:bold;
letter-spacing:-6.5pt;
filter: alpha (opacity=70);
-moz-opacity: 0.70;
opacity: 0.70;
-webkit-transition-duration:1s;
}
.time:hover{
filter: alpha (opacity=90); -moz-opacity: 0.90; opacity: 0.90;
-webkit-transition-duration:1s;
padding:1px 3px 3px 0px;}
.clouds{
font: normal 18pt "helvetica", sans-serif;
font-color:#333333;
letter-spacing:-2pt; }
.sky{
text-align: right;
padding: 0 9px 0px 0px;
font: bold 40pt "helvetica", sans-serif;
letter-spacing:-7pt;
text-transform: lowercase;
line-height:50%;
color:#222;}
.navi {
background: #222222;
color: #555555;
border-bottom: 1px solid #333;
font: normal 8pt "helvetica", sans-serif;
letter-spacing: 3pt;
margin: 0;
padding: 8px 5px;
text-align: right;
text-transform: uppercase;
-webkit-transition-duration:1s; }
.navi:hover {
-webkit-transition-duration:1s;
background: #222;
color: #999999;
cursor: default;
border-right:140px solid #333; margin-right: 0px;}
a.label:link, a.label:active, a.label:visited {
text-decoration: none; display: block; font: bold 30pt "arial", sans-serif; color: #e4e4e4; text-align: center; padding-bottom: 3px; margin:5px;
}
a.label:hover{
color: #A6ACA7; }
</style></head>
<body>
<div id="rain">
<div class="sky">
The City That Never Sleeps
</div>
<div id="content">
<div id="music">
<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/3.jpg">
Best viewed in <b>Google Chrome</b>, screen resolution 1280 x 1024.
Do not put too much content under each header or else some of the content could not be seen.
</div>
</div>
<div class="navi" style="border-top: none;" onClick="changeNavigation('about')">ABOUT</div>
<div class="navi" onClick="changeNavigation('affiliates')">AFFILIATES</div>
<div class="navi" onClick="changeNavigation('archive')">ARCHIVES</div>
<div class="navi" onClick="changeNavigation('tagboard')">TAGBOARD</div>
<div id="sun">
</div>
<div id="about" style="display: none;">
<div class="clouds">profile</div>
<div id="music">
<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/1.jpg">
It's best to keep it short and sweet. (:
</div>
</div>
<div id="affiliates" style="display: none;">
<div class="clouds">affiliates</div>
<div id="music">
<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/5.jpg">
<a href="http://struckbywanderlust.tumblr.com" target="_blank">tumblr</a>
<a href="http://heartsaloud.livejournal.com" target="_blank">livejournal</a>
<a href="http://heartsinink.livejournal.com" target="_blank">heartsinink</a>
<a href="http://twitter.com/heartsaloud" target="_blank">twitter</a>
<div class="clouds">credits</div>
This skin is made by <a href="http://blogskins.com/me/sleepingtoys" target="_blank">sleeping</a><a href="http://about.me/halfway" target="_blank">toys</a>.<br>
Resources: <a href="http://www.sxc.hu/" target="_blank">1</a>, <a href="http://weheartit.com/entry/2591643" target="_blank">2</a>,
<a href="http://weheartit.com/entry/442753" target="_blank">3</a>, <a href="http://weheartit.com/entry/2868529" target="_blank">4</a>,
<a href="http://weheartit.com/entry/2867826" target="_blank">5</a>
</div>
</div>
<div id="archive" style="display: none;">
<div class="clouds">archives</div>
<div id="music">
<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/4.jpg">
<td width="235px" valign="top">
<form name="form1">
<select style="font-size:8pt;color:#999999;font-family: helvetica;background-color:#333333; border:1px solid #222222; padding: 0px; width: 235px;" onChange="location.href=this.options[this.selectedIndex].value;">
<option value=''>Archives</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
</select>
</form>
</td>
</div>
</div>
<div id="tagboard" style="display: none;">
<div class="clouds">talk</div>
<div id="music">
<img src="http://i1015.photobucket.com/albums/af277/sleepingtoys/wocky/2.jpg">
Any usable chat widget goes in here.<br>
A pop-up <a href="http://cbox.ws">cbox</a> is recommended.
If you do not want a pop-up cbox, its width should not exceed 250px.
</div></div>
</div>
<div id="moon">
<br><br><br>
<Blogger>
<br>
<table id="post" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="posts">
<div class="date">posted : <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
<div class="title">title : <$BlogItemTitle$></div>
<div id="postbody"><$BlogItemBody$></div>
<td valign="top" width="112">
<div class="time" align="center"><a class="label" href="#top">
<$BlogItemDateTime$> </a>
</div></div>
</td></tr></table>
</Blogger>
<br><br>
<div id="bottom"></div>
</div>
</body></html>
hello there can someone please give some advice / fixes for centering my website in IE and Chrome etc I programmed it in Dreamweaver and previewed it in Safari and Firefox where it looks lovely and central, however people have told me that in IE it is centered to the left. I can't figure out how to fix it. http://www.formconstant.co.uk any help would be greatly appreciated john Hi everyone, I couldn't really find a thread with this question... If there's already one with a solution to the problem, a link to the thread would be prefered over an answer here. Basically, my problem is that a layout I made doesn't center properly in IE. I have an y-repeated background in the center of the page, and on top a table. In Firefox everything looks fine and dandy, but in IE the table is a few pixels off to the left causing an error in the alignment. http://lastsong.sadil.net/ I don't really know how to fix it - I like it coded with tables better than with divs, so recoding it into divs won't do. (I am aware it doesn't validate on 6 points for those who care, but I can live with that for now...) If anybody has a solution to this problem, I'd love to hear it. Thanks! |
|||||||