|
CSS - Horizontal Centering Problem - Ff
Hi,
I am wanting a site that is vertically and horizontally centered. I have achieved to vertically center in both FF and IE but now I am having horizontal centering problems which is usually the easy part. I have tried many different methods and I am not able to center it in FF but I am able to center in IE. If someone could help me that would be great. Here my page: jacenta.com/TESTING/ Here is the code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>Welcome Canada - Immigration Services Inc.</title>
<style type="text/css">
body, html
{
height:100%;
}
body
{
background-color:#dddddd;
}
#outer
{
display:table;
height:100%;
#position:relative;
overflow:visible;
}
#inner
{
#position:absolute;
_top:50%;
display:table-cell;
vertical-align: middle;
text-align:center;
}
#inner2
{
#position:relative;
#top:-50%;
}
#container
{
width:100%;
}
#box
{
background-color:#FFFFFF;
width:700px;
height:500px;
text-align:left;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="inner2">
<div id="container">
<div id="box">
Text
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Similar TutorialsHello everyone, I'm trying to center a fixed size div both vertically and horizontally. Everything would work, but, as usual ... IE doesn't know how to handle it properly. Let me explain: 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 name="robots" content="ALL, INDEX, FOLLOW" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Title</title>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.d1 {
width: 1px;
height: 1px;
position: absolute;
left: 50%;
top: 50%;
}
.d2 {
width: 700px;
height: 300px;
background-color: black;
position: relative;
left: -350px;
top: -150px;
}
</style>
</head>
<body>
<div class="d1"><div class="d2"></div></div>
</body>
</html>
If you copy and paste it to explorer, everything might even look good. But if you resize the browser to be just a little bit larger than the black div, you'll notice that both vertical and horizontal scrollbars appear. Why is this happening? How do i prevent IE from acting stupid? I've tested with ie6 and ie7. I have a small problem and I can't figure out what it is that's causing it as the CSS used to replicate the issue doesn't really give any insight as to why things are getting ****ed up. My site is: ( jump for joy I got my routers firewall to forward port 80 ) http://24.224.254.115/~wayne/moorhousehome.ca/NEW The CSS in question will work, but I have comments after the two lines that cause issues. Code: css
#inner-wrap{/*there is no outer-wrap*/
position:absolute;
top:0;
left:50%; /*causes the main body to clear the navigation*/
margin-left:-400px; /*causes the main body to clear the navigation*/
}
If I comment out both lines the issue goes away, but the horizontal centering disappears too. If I uncomment either of them the issue reappears. I will leave the issue live on my website while people have a look. And once I fix this I will be fixing the two images in the bottom left corner with the text beneath each one. There won't be a hover over effect as there is in Firefox. I hope someone can help me with this, I've been messing with it for hours, and it /seems/ like it should be simple. Take a look at this page. I am trying to extend the green background of the nav bar over to the black line on the right hand side, and to center the css buttons so that the whole nav is centered within the containing div (the black lines on the web page.) Here is the relevant page code: PHP Code: <div id="navbar" class="nav"> <ul> <li class="first"><a href="/admin/events/">SUBSCRIBE</a></li> <li><a href="/admin/photos/">ISSUES</a></li> <li><a href="/admin/content/">PURCHASE CATALOG</a></li> <li><a href="/admin/press/">SELLERS GUIDE</a></li> <li><a href="/admin/resources/">PRODUCTS</a></li> <li><a href="/admin/resources/">NEWSLETTERS</a></li> <li><a href="/admin/resources/">EVENTS</a></li> <li><a href="/admin/resources/">BLOGS</a></li> <li><a href="/admin/resources/">ABOUT US</a></li> </ul> </div> and here is the CSS for the nav bar: PHP Code: #navbar { width: 768px; text-align: center; background-color: #098E00; margin-top: 35px; } .nav ul { width: 100%; margin: 0; padding: 0; text-align: center; font-size: 11px; } /* any li element within .nav container */ .nav li { float: left; margin: 0; padding: 0; list-style: none; border-left: 1px solid #fff; } /* any anchor in a .nav list item element */ .nav li a { display: block; /* expand to fill parent li */ margin: 0; /* no space between anchors */ padding: 3px 6px 3px 6px; text-decoration: none; /* no underline */ color: #fff; /* override default link color */ background-color: #098E00; } /* 1st list item has no left border */ .nav li.first { border-left: 0 none; } /* rollover effect */ .nav li a:hover { background-color: #ccc; } How do I center the nav bar, and make it so that the CSS buttons are centered on a green background that goes from the left hand black line to the right hand black line? THANKS FOR YOUR HELP. Hi, I would like to center a div inside another div (both vertical and horizontal) in such a way that the inner div would move/reside depending on the content inside it. In other words I have two divs; outerDiv and innerDiv. InnerDiv will have more html inside it and I would like innerDiv to always be in the middle of outerDiv regardless of its content. I did some research on the internet and I managed to achieve the following: 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">
<head>
<style type="text/css">
div#mbBackground{
display:block;
position: fixed;
top: 0px;
left: 0px;
width: 100% !important;
height: 100% !important;
margin: 0 auto;
z-index: 2;
background-color: #c00;
}
div#mbBackground div#mbWindow{
position:fixed;
top: 40%;
left: 40%;
z-index: 2;
margin: 0 auto !important;
margin-left: 40%;
margin-top: 40%;
height: 200px;
width: 200px;
background-color: #fff;
color: #000000;
}
</style>
</head>
<body>
<!-- start: message box -->
<div id="mbBackground">
<div id="mbWindow">
Please Wait
</div>
</div>
<!-- end: message box -->
</body>
</html>
However with the above code, innerDiv does not re-position it-self correctly based on its content. Is what I need possible? Regards, Sim085 Hey guys, Im having a bit of a confusing problem at the moment, im trying to center my navigation menu inside my fixed width. This is how it currently looks like: Im trying to center it so it doesnt matter how many <li>'s there are it will still be centered. Here is my HTML: PHP Code: <center> <div class="main_menu"> <ul> <li> <a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li> <a href="#">Portfolio</a></li> <li> <a href="#">Portfolio</a></li> <li> <a href="#">Portfolio</a></li> </ul> </div> </center> And here is my CSS: Code: .main_menu
{
border:1px solid;
width:898px;
margin-bottom:5px;
background-color:#333333;
height:30px;
line-height:30px;
color:#000000;
position:relative;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
text-align: center;
}
.main_menu ul
{
position:relative;
text-align: center;
margin: 0 auto;
list-style:none;
cursor:pointer;
}
.main_menu ul li
{
list-style-position:inside;
cursor:pointer;
text-align: center;
padding:0;
margin:0;
float:left;
background:#333333;
}
.main_menu ul li a
{
cursor:pointer;
text-align: center;
color:#FFF;
display:block;
text-decoration:none;
padding:0 25px;
}
.main_menu ul li a:hover
{
cursor:pointer;
text-align: center;
background:#3ea5ea;
color:#000;
}
Hello All, I am trying to get a "horizontal menu" in CSS to properly center in my "#topbar" dev which is basically a header that is 100% width of the page. I have the website name, then the menu which is to be centered directly below it. I have searched google for hours and found one website (I guess cause i'm new it won't let me put the url in here) and it broke down each section of the CSS and it says that to horizontally position the menu just add text-align: center; to the #tabsE ul section, but that doesn't change anything at all. I have also tried replacing the float values with margin-left: auto; and margin-right: auto; (I've used those to center images before) and that just destroys the menu (it all shifts to the right side of the screen, and spaces out vertically). I am really kind of stuck here, I'm pretty new to CSS and most the basics are clicking, it seems to me that centering items so far has been one of the biggest pains yet. Here is the CSS: Code: /*- Menu Tabs E--------------------------- */
#tabsE {
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsE ul {
margin:0;
padding:10px 10px 0 0px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
text-align: center;
background:url("tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
text-align: center;
display:block;
background:url("tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#000;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFFFFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}
#tabsE #current a {
background-position:0% -42px;
}
#tabsE #current a span {
background-position:100% -42px;
}
I tried to post the HTML (its just a standard <ul> with list </ul>) but it won't let me, because it contains url's so, I can e-mail you that if neccesary. I truly appreciate any help you can offer. Thanks, Chris Let me start by saying I'm a PHP/MySQL guy, not a designer. I know enough CSS to get by, but my focus has been the data side, not the design side. Hell I usually just use tables so I don't have to mess with any of this crap. I guess it's come to the point where I need to update my design skills or be left in the dust (since you can outsource LAMP guys for $4 a friggin' hour now ) I'm using the pretty standard UL-LI menu set to display vertically. Now I've added a couple links and it's too big for one line if I want to maintain style at 800 x 600. I figured the easiest way was to let it wrap to 2 lines. It wraps fine, but everything is either left aligned or right. I'd like both of the rows to be centered. Is there an easy way to do this? Here's the general layout: PHP Code: // .main is the style for the container // #main is the positioning of this instance of main // .tree_menu_list is the vertical stuffs <div class="menu" id="main"> <ul class="tree_menu_list"> <li><a href="index.php">Home</a></li> <li><a href="index.php?p=vision">Vision</a></li> <li><a href="index.php?p=buying">Buying</a></li> <li><a href="index.php?p=renovation">Building</a></li> <li><a href="index.php?p=selling">Selling</a></li> <li><a href="index.php?p=payout">Payout</a></li> <li><a href="index.php?p=opportunities">Opportunities</a></li> <li><a href="index.php?p=services">Services</a></li> <li><a href="images.php">Photos</a></li> </ul> </div> Good evening, I'm trying to center a horizontal menu on a website, and I can't seem to get the right code tags in the write places. I'd like to get the links on the menu to center on the page, and perhaps to display in a consistent width text box. My menu bar is 900px, and there are 10 links, so for instance I would like to reduce these boxes containing the links to a consistent 90px. Any thoughts? website - http://www.squadron282.com CSS Code: Code:
.nav2 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.0em;}
.nav2 ul {float: left; width: 900px; margin: 0px; padding: 0px; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(127,162,202); font-weight: bold; white-space:nowrap}
.nav2 li {display: inline; list-style: none; margin: 0px; padding: 0px;}
.nav2 li a {display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;}
.nav2 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;}
.buffer {clear: both; width: 900px; height: 30px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);}
HTML Code: Code: <div class="nav2"> <ul> <li><a href="index.html">Home</a></li> <li><a href="missions.html" class="selected">CAP Missions</a></li> <li><a href="sqinfo.html">Squadron Info</a></li> <li><a href="commanderscorner.html">Commander's Corner</a></li> <li><a href="resources.html">Member Resources</a></li> <li><a href="pics.html">Photo Gallery</a></li> <li><a href="contact.html">Contact Us</a></li> <li><a href="sitemap.html">Sitemap</a></li> </ul> </div> Hello! I used CSS to vertically center my web site however when it is viewed in the horizontal mode on an iphone, the site is cut off and not centered. How can I fix this? Here is the css I used to center the site: #wrapper { width:850px; height:650px; position:absolute; top:50%; margin-top:-325px; left:50%; margin-left:-425px; } And here is the site: (URL address blocked: google Maid Marian Muffins) I need the result to be fully functional i.e. zoom & pinching functions must still work. Hi there! I recently decided to start designing in Web 2.0 to the best of my ability... including appearance, organization, and all of that good stuff. However, I am running into a rather annoying problem. At the top of my website, I have a horizontally-aligned list for navigation. Unfortunately, as my code is... organized... Firefox (Not IE8-- gasp!) is treating my line breaks as an extra . As a result, the little separators aren't aligned correctly. HTML Code: Original - HTML Code <div id="bannerNav"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> <div id="bannerNav"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> CSS Code: Original - CSS Code #bannerNav { background: #000 url('images/topNav.gif') repeat-x; border-bottom: 1px solid #FFF; font-size: 18px; color: #EEE; line-height: 40px; height: 40px; width: 100%; } #bannerNav ul { list-style: none; display: inline; } #bannerNav li { background: transparent url('images/topNavLinkSeparator.gif') no-repeat right; display: inline; } #bannerNav li a { padding: 5px 20px 5px 20px; }
Does my problem make any sense? Because an extra space is being added, all of my links are being shifted to the right one space's width, so separators aren't centered anymore. Any help would be greatly appreciated! Thanks! Hi Everyone! Here is a quick problem for any CSS gurus out there! I have created a horizontal navigation bar which has a horizontal drop down subnav on roll over of the top nav links The top nav don't link to a page but only act to display the subnav - dont worry I have posted the code below! I am having real trouble with one aspect - when you navigate to a page on the subnav (e.g. the "webcam" page) I want the subnav links for that section (eg "watch") to be displayed rather than only appearing when you roll over one of top navs links. Has anyone got any ideas of if this is possible with the way that I have structured the nav currently? Any help would be much appreciated! Thanks in advance! Here is the code Code: <style type="text/css">
* { margin: 0; padding: 0; }
html {height:100%;}
body{
background-color: #42530D;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.75em;
height:100%;
}
p {
padding:5px;
list-style: inside disc;
font-size: 1em;
}
#wrap{
width: 784px;
margin: 0 auto;
border: 0;
margin-bottom: 10px;
}
#top_text{
color:#FFFFFF;
padding: 6px 78px 5px 0;
font-size: 11px;
text-align: right;
}
/* Here is the code for the nav! */
#container {
position: relative;
font-size: 1.2em;
background-color:#5F5C47;
position: relative;
height:52px;
}
#navbar {
background-color: #C1C1B0;
position: absolute;
float: left;
padding: 0;
width:100%;
text-transform:capitalize;
}
#navbar li {
list-style: none;
float: left;
text-transform:capitalize;
}
#navbar li a {
display: block;
text-decoration: none;
color: #333333;
padding:5px 10px 5px 10px;
font-weight: normal;
text-transform:capitalize;
}
#navbar li a:hover {
color: #FFFFFF;
background-color:#5F5C47;
}
#navbar li ul {
display: none;
}
#navbar li:hover ul, #navbar li.hover ul {
color: #FFFFFF;
position: absolute;
display: inline;
left: 0;
width: 100%;
margin: 0;
padding: 0;
}
#navbar li:hover li, #navbar li.hover li {
float: left;
}
#navbar li:hover li a, #navbar li.hover li a {
color: #FFFFFF;
}
#navbar li li a:hover {
color: #333333;
background-color: #C1C1B0;}
</style>
<script>
//Here is the javascript for the nav!
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<div id="wrap">
<div id="top_text"></div>
<div id="bodywrap">
<div id="navwrap">
<div id="container">
<ul id="navbar">
<li><a href="#">HOME</a> </li>
<li><a href="#">WATCH</a>
<ul>
<li><a href="webcam/index.htm">WEBCAM</a></li>
<li><a href="index.htm">GALLERY</a></li>
</ul>
</li>
<li><a href="#">EXPLORE</a>
<ul>
<li><a href="projects/index.htm">PROJECTS</a></li>
<li><a href="tours/index.htm">VIRTUAL TOURS</a></li>
<li><a href="games/index.htm">GAMES</a></li>
</ul>
</li>
<li><a href="#">LISTEN</a>
<ul>
<li><a href="podcasts/index.htm">PODCASTS</a></li>
</ul>
</li>
<li><a href="#">LEARN</a>
<ul>
<li><a href="blog/index.htm">BLOG</a></li>
<li><a href="about">ABOUT</a></li>
<li><a href="projects/index.htm">PROJECTS</a></li>
</ul>
</li>
<li><a href="#">PARTICIPATE</a>
<ul>
<li><a href="get-involved.htm">GET INVOLVED</a></li>
<li><a href="user-gallery.htm">USER GALLERY</a></li>
<li><a href="forum/index.htm">FORUM</a></li>
<li><a href="../send-a-postcard/index.htm">SEND A POSTCARD</a></li>
</ul>
</li>
<li><a href="#">SUPPORT</a>
<ul>
<li><a href="support/index.htm">DONATE</a></li>
<li><a href="other-ways-of-helping.htm">OTHER WAYS OF HELPING</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
here is the code that I have based my menu on, http://www*dynamicdrive*com/style/csslibrary/item/suckertree-menu-horizontal . What I changed was the ".suckertreemenu ul li a" style width to auto instead of 90px. I need the style to auto so that the width of each button is proportionate to the text in the button. My problem is that in IE6 each button stretches across the entire area. Does anyone have a hack for this? Any help is greatly appreciated. Thanks Hi I am trying to create a horizontal menu for my interface and am running into a problem. I created the menu and it seems to work fine, but after I try to move it to where I want it, it leaves a blank spot in my content area that I cant get ridd of. Here is the link www.isostudios.com Im a little new to css so dont be to hard on me Hi people. In need of some help with this horizontal navigation. IE7 positions everything correctly, but when testing in firefox, chrome and safari the issues then arise. Got two images of the working styled in IE7 which is the way I was planning on having it and then the non working menu in other browsers... Live example: please click here for live example Code Code:
/* Start Menu */
#topmenu {
height: 32px;
margin-bottom:20px;
background: #FFFFFF url(menu_bg.png) repeat-x top;
width: 100%;
overflow: hidden;
float: left;
}
#topmenu li {
border-left: 1px solid #dedbd1;
float: left;
line-height: 32px;
}
#topmenu li a {
color: #333333;
display: block;
margin: 0 1px 0 0;
padding: 0 15px;
}
#topmenu li a:hover, #topmenu li.active a {
color: #425775;
text-decoration: none;
}
#nav, #nav ul {
padding: 0;
float:left;
list-style: none;
}
#nav {
padding: 0;
}
#nav a {
display: block;
}
#nav li {
float: left;
line-height:32px;
}
#nav li a:hover {
background: none;
background: #FFFFFF url(menu_bgmo.png) repeat-x top;
}
#nav li ul {
position: absolute;
width: 100%;
left: -999em;
padding-top:1px;
overflow: hidden;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
z-index:1000;
}
#nav li ul li {
border-bottom:1px solid #dedbd1;
border-left:1px solid #dedbd1;
border-right:1px solid #dedbd1;
line-height:32px;
width: 100%;
overflow: hidden;
}
#nav li:hover, #nav li.hover {
position: static;
}
#nav li ul ul {
margin: -29px 0 0 100%;
overflow: hidden;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul {
left: auto;
}
#nav li:hover ul ul, #nav li:hover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul {
left: auto;
overflow: hidden;
}
/* Finish Menu */
Any help would be great. Thanks very much in advance! terra See the last post for the solution. Before I get to the CSS and the markup, some background info: I am rebuilding a web-based database to be all-CSS (except for the tabular data, of course). I want to make it accessible in Safari, Firefox/Mac and Firefox/Win. Anything else would be a plus but is not necessary. The markup relies heavily on PHP. The problem lies with a horizontal nav bar I have at the top of every page. I'm using a modified version of the Suckerfish Dropdown that you can find on either HTML Dog or A List Apart. In Safari, this works to perfection. In Firefox/Mac, the alignment is a little off (which I'll fix later), but other than that works pretty well. In Firefox/Win, this absolutely blows up all over the place. There are a lot of symptoms to describe, so for now I'll provide the CSS and the markup, and if more description is necessary, I'll provide it as best I can. Without further ado, here's the CSS for the menu: Code: #main_menu {
top: 0;
left: 0;
position: fixed;
width: 100%;
background: #D8DCEF;
margin: 0; padding: 1px 0;
text-align: left;
border: 1px dotted #446CB4;
border-width: 0 0 1px 1px;
}
#nav, #nav ul {
float: left;
list-style: none;
padding: 0;
margin: 0 2px;
font-weight: bold;
}
#nav a { color: #111; }
#nav li, #nav li.search {
float: left;
padding: 1px 4px;
margin: 0 2px;
border: 1px solid transparent;
background: transparent;
text-align: center;
}
#nav li.search { padding: 0 4px; border: 0; }
#nav li:hover { border-color: #3466B1; background: #fff; }
#nav li.search:hover { background: transparent; }
#nav li span { font-size: 9px; line-height: 11px; }
#nav li ul {
position: absolute;
left: -999em;
width: 150px;
font-weight: normal;
border: 1px solid #3466B1;
margin: 1px 0 0 0;
}
#nav li li {
width: 142px;
margin: 0;
padding: 0 4px;
line-height: 1.5em;
border: 0;
background: #fff;
text-align: left;
}
#nav li li a {
display: block;
width: 142px;
text-decoration: none;
padding: 0;
}
#nav li li a:hover { color: blue; }
#nav li ul ul { margin: -1.6em 0 0 150px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li li:hover, #nav li.sfhover { background: #D8DCEF; }
#nav ul.end { width: 300px; }
#nav ul.end li, #nav ul.end li a { width: 292px; }
#nav ul.long { width: 165px; height: 300px; overflow: auto; }
#nav ul.long li, #nav ul.long li a { width: 142px; }
#nav li.flyout { background: url(../images/icons/arrow.gif) center right no-repeat #fff; }
#nav li.flyout:hover { background: url(../images/icons/arrow.gif) center right no-repeat #D8DCEF; }
#nav li.separate { border-top: 1px solid #3466B1; background: #EFF1F9; font-style: italic; }
And here's an anonymized version of the markup: Code: <div id="main_menu"> <ul id="nav"> <li>Menu 1<ul> <li><a href="#">Choice 1</a></li> <li><a href="#">Choice 2</a></li> </ul> </li> <li>Menu 2<ul> <li><a href="#">Choice 1</a></li> <li class="flyout">Submenu 2a<ul class="end"> <li><a href="#">Subchoice 1</a></li> <li><a href="#">Subchoice 2</a></li> <li><a href="#">Subchoice 3</a></li> </ul> </li> <li><a href="#">Choice 2</a></li> </ul> </li> <li>Menu 3<ul> <li><a href="#">Choice 1</a></li> <li><a href="#">Choice 2</a></li> <li><a href="#">Choice 3</a></li> </ul> </li> <li>Menu 4<ul> <li><a href="#">Choice 1</a></li> <li><a href="#">Choice 2</a></li> </ul> </li> <li class="search"><form name="search" action=""><input name="name_search" type="text" onFocus="if(this.value=='Search')value=''" onBlur="if(this.value=='')value='Search';" value="Search" size="25"> <input type="submit" name="Submit" value="Go"></form></li> </ul> </div> When I comment out the main menu, the pages load just fine, so it has to be somewhere in the code for the main menu (or that means it's somewhere else entirely). Thanks in advance for taking the time to look at my code, and any help at all is extremely appreciated. I'm having a problem centering the table so that its centered in the browser. Below is the code. Code: <html>
<head>
<title>Untitled-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:1196px;
height:892px;
}
#TopAdLeft {
position:absolute;
left:0px;
top:0px;
width:140px;
height:415px;
}
#LeftSpace {
position:absolute;
left:140px;
top:0px;
width:8px;
height:840px;
}
#LogoSpace {
position:absolute;
left:148px;
top:0px;
width:900px;
height:177px;
}
#index-04 {
position:absolute;
left:1048px;
top:0px;
width:148px;
height:1px;
}
#RightSpace {
position:absolute;
left:1048px;
top:1px;
width:8px;
height:839px;
}
#TopAdRight {
position:absolute;
left:1056px;
top:1px;
width:140px;
height:415px;
}
#CenterMiddleSpace {
position:absolute;
left:148px;
top:177px;
width:900px;
height:5px;
}
#CalendarSpace {
position:absolute;
left:148px;
top:182px;
width:900px;
height:658px;
}
#LeftMiddleSpace {
position:absolute;
left:0px;
top:416px;
width:140px;
height:9px;
}
#RightMiddleSpace {
position:absolute;
left:1056px;
top:416px;
width:140px;
height:9px;
}
#BottomAdLeft {
position:absolute;
left:0px;
top:425px;
width:140px;
height:415px;
}
#BottomAdRight {
position:absolute;
left:1056px;
top:425px;
width:140px;
height:415px;
}
#BottomLeftSpace {
position:absolute;
left:0px;
top:840px;
width:148px;
height:52px;
}
#EmailSpace {
position:absolute;
left:148px;
top:840px;
width:900px;
height:52px;
}
#BottomRightSpace {
position:absolute;
left:1048px;
top:840px;
width:148px;
height:52px;
}
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#000000; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; ">
<!-- ImageReady Slices (Untitled-3) -->
<div id="Table_01">
<div id="TopAdLeft">
<img src="images/LeftTopAd.jpg" width="140" height="415" alt=""> </div>
<div id="LeftSpace">
<img src="images/LeftSpace.jpg" width="8" height="840" alt="">
</div>
<div id="LogoSpace">
<img src="images/logo.jpg" width="900" height="175" alt=""> </div>
<div id="index-04">
<img src="images/index_04.jpg" width="148" height="1" alt="">
</div>
<div id="RightSpace">
<img src="images/RightSpace.jpg" width="8" height="839" alt="">
</div>
<div id="TopAdRight">
<img src="images/TopAdRight.jpg" width="140" height="415" alt="">
</div>
<div id="CenterMiddleSpace">
<img src="images/CenterMiddleSpace.jpg" width="900" height="5" alt="">
</div>
<div id="CalendarSpace">
<iframe name="I1" id="I1" title="Hollywood Drink Specials" src="http://www.calendarwiz.com/" align="center" frameborder="0" height="658" width="900"></iframe>
</div>
<div id="LeftMiddleSpace">
<img src="images/LeftMiddleSpace.jpg" width="140" height="9" alt="">
</div>
<div id="RightMiddleSpace">
<img src="images/RightMiddleSpace.jpg" width="140" height="9" alt="">
</div>
<div id="BottomAdLeft">
<img src="images/BottomAdLeft.jpg" width="140" height="415" alt="">
</div>
<div id="BottomAdRight">
<img src="images/hob.jpg" width="140" height="415" alt=""> </div>
<div id="BottomLeftSpace">
<img src="images/BottomLeftSpace.jpg" width="148" height="52" alt="">
</div>
<div id="EmailSpace">
<img src="images/EmailSpace.jpg" width="900" height="52" alt="">
</div>
<div id="BottomRightSpace">
<img src="images/BottomRightSpace.jpg" width="148" height="52" alt="">
</div>
</div>
</body>
</html>
Hi, centering problem I have this small box (table) which shows up when a user didn't decide yet which stylesheet he or she prefers. Everything works fine but I would like the first two lines, which are in bold, to be centered within that red box. I've done so much fun and great stuff with css but this last simple thing doesn't seem to work out. Any help? http://www.jefspalace.be/digital/index.htm stylesheets at: http://www.jefspalace.be/css/print.css http://www.jefspalace.be/css/visualstyel2.css http://www.jefspalace.be/css/visualstyle3.css http://www.jefspalace.be/css/warningtable.css IE problem have a look for yourself, i don't seem to find the problem. It used to be correct, but then, over time, I made some changes, never checking in IE and now I'm stuck. Thanks a lot Kind regards, Jef I got a problem trying to center the image called white.gif I would like it if there is some one on here that could take a look at the code. HTML Code:
<html>
<head>
<title>Backtrack tutorials.</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<center>
<?php include('includes/header.php'); ?>
<img src="images/box_top.gif" />
<p class="white">Test</p>
<img src="images/box_bottom.gif" />
<?php include('includes/footer.php'); ?>
</center>
</body>
</html>
CSS Code:
body {
background-color:#000000;
}
img {
border:0px;
}
.mainbox {
background-color:#777777;
width: 960px;
border-style:none;
border-width:0px;
}
p.white {
background-image:url('../images/white.gif');
background-repeat:repeat-y;
margin-top:0px;
margin-bottom:0px;
}
I have a lblock, mblock and rblock div tags inside the content div tag. I am trying to center block tags so there will be 10px free space on each side of content div tag. You can check it at: http://www.refinethetaste.com/html/ PHP Code: #content { width:796px; margin: auto;} #lblock { width:198px; float:left; } #mblock { width:200px; float:left; margin-left:2px;} #rblock { width:375px; float:left; margin-left:1px;} Hi, I have a problem getting this to work in IE 5. It works in IE 6+, FF, etc but not IE 5. Anyone know why? Code:
#centerMe {
position: relative;
margin-left: auto;
margin-right: auto;
width: 760px;
}
And if there's any other IE 5 tips I should know... |
|||||||