|
CSS - My Menu Is Not Centered :(
http://www.lightblu.com/
(It speaks for itself) how come on my test page, http://www.lightblu.com/test.php works fine (ie. the menu is centered correctly), but not on the homepage? What did I do wrong? Similar TutorialsI'm helping these fine folks fix a few little issues with their site but this one I can't seem to quite figure out. If you roll over the main menu you will see the sub menu slide down on the left. For the life of me I can't get it to line up under the main nav. I've tried many, many things. Can anyone provide a few hints, tips, suggestions? Thanks so much!!! 98.214.188.71/life at excel.htm Code: /*******************menu starts********************/ #menu{float:left; width:100%; background:#ffffff;} #menu a{font-weight:bold; line-height:16px;} #menu table{float:left; width:100%; background:transparent;} #menu .menu01{width:147px;} #menu .menu01 a{float:left; /*width:149px;*/width:100%; height:26px; background:url(images/menu01.gif) no-repeat right 0; float:left; color:#fff; text-decoration:none; text-align:center; padding:10px 0 0 0} #menu .menu01 a.current{float:left; /*width:149px;*/width:100%; height:26px; background:url(images/menu01.gif) no-repeat right 0; cursor:pointer;} #menu .divider{width:.5%; height:36px; background:url(images/white_divider.gif) repeat-x 0 1px;} #menu .menu02{} #menu .menu02 a{display:block; background:url(images/menu02.gif) repeat-x right 0; padding:10px 0 0; height:26px; color:#fff; text-decoration:none; text-align:center} #menu .menu02 a.current{float:left; width:100%; background:url(images/menu02.gif) no-repeat right bottom; color:#fff; cursor:pointer;} #menu .menu03{} #menu .menu03 a{display:block; background:url(images/menu03.gif) repeat-x right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu03 a.current{float:left; width:100%; background:url(images/menu03.gif) no-repeat right bottom; height:26px; color:#fff; cursor:pointer;} #menu .menu04{width:152px; } #menu .menu04 a{float:left; /*width:152px;*/width:100%; background:url(images/menu04.gif) no-repeat right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu04 a.current{float:left; /*width:152px;*/width:100%; background:url(images/menu04.gif) no-repeat right bottom; height:26px; color:#fff; cursor:pointer;} #menu .menu05{width:143px;} #menu .menu05 a{float:left; /*width:143px;*/ width:100%;background:url(images/menu05.gif) no-repeat right 0; padding:10px 0 0; text-align:center; height:26px; color:#fff; text-decoration:none;} #menu .menu05 a.current{float:left; /*width:143px;*/width:100%; background:url(images/menu05.gif) no-repeat right -43px; height:26px; color:#fff; cursor:pointer;} .exp{ display:none; clear:both; text-align:center; background:#BA8747; z-index:4; } #menu DIV.sub-mlinks A { color:#000; background:none; font-weight:bold; padding-top:2px; padding-bottom:0px; display:block; height:auto; } #menu DIV.sub-mlinks A:hover{ color:#FFF; } /*******************menu ends********************/ <div id="menu"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="970"><tbody><tr> <td style="width: 19.6%;" id="item1" class="menu01"><a href="http://www.excelfoundry.net/lifeatexcel/">Home</a></td> <td class="divider"> </td> <td style="width: 19.6%;" id="item2" class="menu02" onmouseover="expand(this.id, 'menu2');" onmouseout="collapse(this.id, 'menu2');" onmouseleave="collapseIE(this.id, 'menu2');"><a href="http://www.excelfoundry.net/lifeatexcel/">Excel Tools</a><div id="menu2" class="exp" onmouseout="collapse('item2', this.id);" onmouseleave="collapseIE('item2', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/improvement" target="_new" class="menuitem">Continual Improvement</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/service" target="_new" class="menuitem">Crusher Service (FLSP)</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/xlu" class="menuitem">Excel University</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/crm/data" target="_new" class="menuitem">Excelerator CRM</a></div><div class="sub-mlinks"><a href="http://ezlmwc.adp.com/" target="_new" class="menuitem">EZLabor</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/First%20Article/First%20Article%20Parts.xls" class="menuitem">First Article Parts</a></div><div class="sub-mlinks"><a href="https://login.postini.com/exec/login" class="menuitem">FLS Spam Filter Login</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/ecr/" target="_new" class="menuitem">FLSP ECR</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/forms" class="menuitem">Forms Library</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/iso9001" class="menuitem">ISO 9001 Procedures</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/helpdesk" target="_new" class="menuitem">IT Help Desk</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/machine-info" class="menuitem">Machine Info</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/Manu_Memos/Memos.html" target="_new" class="menuitem">Manufacturing Memos</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/metrics" class="menuitem">Metrics</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/msq" target="_new" class="menuitem">MSQ Editor</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/manuals" class="menuitem">Parts Manuals</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/parts" target="_new" class="menuitem">Parts Search</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/po" target="_new" class="menuitem">PO Tool</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/flows" class="menuitem">Process Flows</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/revSupport" target="_new" class="menuitem">Revision Support</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/routing" class="menuitem">Routing Guide</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=excel-tools/safety" class="menuitem">Safety & Training</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/docs/QRM%20Schedule.xlsx" class="menuitem">QRM Schedule</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/training" class="menuitem">Training Request System</a></div><div class="sub-mlinks"><a href="http://my.concureworkplace.com/default.asp?companyid=excet5jvd2telbgk" target="_new" class="menuitem">Travel Expense (EFM)</a></div><div class="sub-mlinks"><a href="http://my.concureworkplace.com/default.asp?companyid=smid5gr1t0br0czj" target="_new" class="menuitem">Travel Expense (FLSP)</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/xcalibur" target="_new" class="menuitem">Xcalibur</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%; color: black;" id="item3" class="menu03" onmouseover="expand(this.id, 'menu3');" onmouseout="collapse(this.id, 'menu3');" onmouseleave="collapseIE(this.id, 'menu3');"><a href="http://www.excelfoundry.net/lifeatexcel/">Our People</a><div style="top: 168px; left: 376px; width: 183px; position: static; visibility: hidden; display: none;" id="menu3" class="exp" onmouseout="collapse('item3', this.id);" onmouseleave="collapseIE('item3', this.id);"><div class="sub-mlinks"><a href="https://login.fidelity.com/ftgw/pages/fesco/html/NBParticipantLogout.html" target="_new" class="menuitem">401k Login</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/classifieds" class="menuitem">Classifieds</a></div><div class="sub-mlinks"><a href="http://excelfoundry.net/lifeatexcel/?q=our-people/hr/directory" class="menuitem">Employee Directory</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/eu" class="menuitem">Excel University</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/insite" class="menuitem">FLSmidth Insite</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.com/about-excel/company-history" class="menuitem">History of Excel</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/hr" class="menuitem">Human Resources</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/dates" class="menuitem">Important Dates</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/jobs" class="menuitem">Job Openings</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/mlb" class="menuitem">MLB Standings</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-people/phone" class="menuitem">Phone Directory</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/380" class="menuitem">Quality and Mission Statement</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/docs/EFM%20HR%20XLU%20Servant%20Leadership%20Academy.pdf" class="menuitem">Servant Leadership Academy Info</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/training" target="_new" class="menuitem">Training Request System</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%;" id="item4" class="menu04" onmouseover="expand(this.id, 'menu4');" onmouseout="collapse(this.id, 'menu4');" onmouseleave="collapseIE(this.id, 'menu4');"><a href="http://www.excelfoundry.net/lifeatexcel/">Departments</a><div id="menu4" class="exp" onmouseout="collapse('item4', this.id);" onmouseleave="collapseIE('item4', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/accounting" class="menuitem">Accounting & Administration</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/support" class="menuitem">Customer Support</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/engineering" class="menuitem">Design Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/foundry" class="menuitem">Foundry</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/hr" class="menuitem">Human Resources</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/it" class="menuitem">IT</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/machine" class="menuitem">Machine Shops</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/maintenance" class="menuitem">Maintenance</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/mktg_wo" class="menuitem">Marketing</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/materials" class="menuitem">Materials</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/193" class="menuitem">Manufacturing Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/192" class="menuitem">Production Control</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/quality" class="menuitem">Quality Engineering</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=node/187" class="menuitem">Sales</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/toolcrib" class="menuitem">Tool Crib</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=departments/warehouse" class="menuitem">Warehouse</a></div></div></td> <td class="divider"> </td> <td style="width: 19.6%; color: black;" id="item5" class="menu05" onmouseover="expand(this.id, 'menu5');" onmouseout="collapse(this.id, 'menu5');" onmouseleave="collapseIE(this.id, 'menu5');"><a href="http://www.excelfoundry.net/lifeatexcel/">Our Customers</a><div style="top: 168px; left: 752px; width: 183px; position: static; visibility: hidden; display: none;" id="menu5" class="exp" onmouseout="collapse('item5', this.id);" onmouseleave="collapseIE('item5', this.id);"><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-customers/highlights" class="menuitem">Customer Highlights</a></div><div class="sub-mlinks"><a href="http://www.excelfoundry.net/lifeatexcel/?q=our-customers/equipment" class="menuitem">Equipment Profiles</a></div></div></td> </tr></tbody></table> </div>
Hi, Ive got a joomla worksite and it has a menu on footer. The menu uses the following css code : #footmenu ul { margin: auto; padding: 0; list-style:none; margin-top:7px; } #footmenu li { float:left; border-right: 2px solid #fff; background: none; padding: 0; display: inline; padding: 10 10px; } } #footmenu a { font-family: Tahoma, Helvetica, sans-serif; font-size: 11px; font-weight: bold; float:left; display:block; height: 25px; line-height: 25px; padding: 0 15px; color: #666; } #footmenu a:hover { /*background: #e1e1e1; */ color:#98aa65; } I have read some posts and articles on the web but i didnt have any luck with it. I could make it align in left or right but not in the middle. From what i read, i have to align the whole div as one part, dunno Any help appreciated, Thanks I have a site that I am working on: test dot choupique dot com The #subpage class is centered in internet explorer 9, but not firefox 5. I can't figure out why for the life of me. Can anyone see why? Thanks Hey guys, I know that this is a well covered topic. but I am trying to get a container div to sit centered and 100% of the page. my css reads: * { margin:0; padding: 0; } html, body { height: 100%; } #container { position: relative; width: 900px; height: 100%; margin: 0 auto; background: url("imgs/backgroundmain.gif"); } It works fine for the required browsers until the contents of the page goes beyond the size of the screen then the background stops. it literally stops at 100% of window rather than 100% of content. Any ideas??? James MacLeod Ok, I give up... can't figure this one out... the navbar seems to be centered in IE but not in Firefox. www.moksha.net/index.html I notice that it doesn't seem to matter whether I am inside the header div or not. The navbar is a UL. I don't care how wide it is really... I would love to strip all this down to its most essential. Thanks! #header { padding: 1em; margin: 0px; text-align:center; width:100%; align: center; display:block; } #navbar { color:#FFCC33; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; text-decoration: none; margin:0 auto; } #navbar ul { clear:left; text-align: center; margin: 0 auto; list-style-type: none; text-indent: 0; width: 600px; background-color:#996633;} #navbar li { /* float:left; width:80px; */ padding-right: 1em; height: 3em; line-height:3em; font-size: 20px; display: inline; list-style-type: none; text-align: center; margin:0; } #navbar a { color:#FF9933; text-decoration: none; } #navbar a:hover { color:#FFCC33; } As a CSS beginner I want to change my few table based web sites to CSS based. Currently I may have a table with a border exactly fitting a graphic image... looks nice. Now I want that same image to fit perfectly in a CSS box in order to take advantage of all the extra features of color and border that comes with CSS. The problem is... nothing that I do will exactly fit the rectangular image in the CSS box. I have fooled with the dimensions of the box and image but somehow there is ALWAYS about a 4px edge of background at the bottom edge of the image. The left,top,right borders are exactly bordering the image as should be. Is this possible in CSS, I would like to follow the CSS way. #bottom_center { margin: 0px; padding: 0px; background: #ccc; width: 470px; height: 90px; border-style: ridge; } ---- then in the body ---- <div align="center"> <div id="bottom_center"> <img border="1" src="able_appraisal_web_logo.jpg" alt="Able Appraisal, Inc." width="470" height="90"> </div> </div> Hi there, sorry to bother y'all, but I've been fighting with this css for hours now and I can't seem to get it quite right. I'm trying to center a search box and button skinned with an image, which I think should be fairly simple, but I'm not very good with css yet and it's being more evil than usual. I will try my best to provide all the pertinent information, and thank you very much in advance for any assistance you might provide. My top bar is as such, at the moment (the current issue being that I can't get the text to not be on the edges with the image border while keeping the text field and the button flush against each other), although I've tried a number of other solutions, this is the closest as of yet that I have gotten. Code: <div class="header"> <div class="leftAlign"><a href="/Controller?pageRequest=home"><img src="/img/spinner.png"></img></a></div> <div class="rightAlign" id="topRight"> <jsp:include page="AccountLinks.jsp"></jsp:include> </div><br /> <form id="searchForm" action="/SearchServlet"> <input type="text" id="searchText"></input><input type="image" src="/img/searchButton.gif" alt="Search" id="searchButton"></input> </form> </div> and the relevant css is Code:
div.header{
width: 1000px;
margin: 0 auto;
min-height: 60px;
display: block;
text-align:center;
}
div.leftAlign{
float: left;
text-align: left;
}
div.rightAlign{
float: right;
text-align: right;
}
#searchForm{
vertical-align: top;
margin: 0;
line-height: 1;
outline:0;
}
#searchText{
background:url(/img/searchText.gif) no-repeat top center;
padding:0px;
margin:0;
display:inline;
border:0;
width:159px;
height: 31px;
}
#searchButton {
background:url(/img/searchButton.gif) no-repeat top center;
padding-top:0px;
margin:0;
display:inline;
border:0;
width:42px;
vertical-align: top;
line-height: 1;
height:31px;
}
Any help that you can provide would be greatly appreciated. Thank you very much. How can i accomplish this with CSS? See image he hxxp://g.imagehost.org/0398/css.png (replace x with t) Trying to build a CSS Page Centered Template, where content autostretches containers height, as opposed to setting absolute heights. If one column is longer than the others the others should auto stretch to same height. Also trying to work in a Footer that sits automatically at the bottom. Heres where I am at...as usual different story in every browser. page ---- <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="test.css" rel="stylesheet" type="text/css"> </head> <body leftmargin="0" topmargin="0"><table><tbody ><tr><td><div class="container"> <!--*******page content start*******--> <div class="top">top</div> <div class="main1">main1</div> <div class="main2">main2</div> <div class="main3">main3</div> <!--*******page content end*******--> </div></td></tr></tbody></table></body></html> CSS Sheet ---------- table { width: 100%; height: 100%; } td { text-align: center; vertical-align: top; } div.container { position: relative; margin: 0 auto; width: 780px; text-align: left; height: 100%; } div.top { position: absolute; top: -3px; left: 0px; width: 780px; height: 203px; background-color: #CCC; } div.main1 { position: absolute; top: 200px; left: 0px; width: 200px; height: 100%; background-color: #BBB; } div.main2 { position: absolute; top: 200px; left: 200px; width: 200px; height: 100%; background-color: #DDD; } div.main3 { position: absolute; top: 200px; left: 400px; width: 380px; height: 100%; background-color: #AAA; } Hello I hope this isnt a stupid questions but here goes. I have a page designed with vertically centered content It works fine but if you view the page in a smaller screen size some of the content disapears in to the menu area of the browser. Its hard to explain but if you use the sorce code below and view it in any broswer. Make it so the browser is not maximized and then change the height of the window until the scroll bar appears ... you will notice that some of the conent goes into neverland before the srollbar appears. Line 1 disapears and can not be reads. This will be an issue for people viewing my site in 800x600 Thoughts? Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#horizon {
background-color: transparent;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
margin-top: -200px;
text-align: center;
min-width: 900px;
}
#wrapper {
background-color: #fff;
position: relative;
text-align: left;
width: 900px;
height: 380px;
margin: 0px auto;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="horizon">
<div id="wrapper">
Line 1<br />
Line 2<br />
Line 3<br />
Line 4
</div>
</div>
</body>
</html>
Hi everyone, I am trying to make a horizontal navigation near the top of my website. But I can't seem to make it center but AND horizontal, i've only been able to center it but not horizontal... or have it horizontal but not center. This is my CSS so far. Quote: ul#nav li { display:inline; margin: 0 auto; width: 100%; text-align:center; } ul#nav li a { display:block; height:48px; width:113px; background: transparent url(images/nav.png); margin: 0 auto; text-indent:-9009px; } ul#nav li a:hover {background-position:0 -48px} ul#nav li#photos a { width:139px; margin: 0 auto; background-position:-113px 0; } ul#nav li#photos a:hover {background-position:-113px -48px} My home link and photo link are currently centered and on top of each other in a vertical fashion with this code. Please help! Struggling to get my <ul> to display itself on the left side of my sidebar navigation. I just want it over maybe 40 pixels to the left. I'm not sure why the ul is aligning itself in the center. I tried floating the elements left, but the ul is stuck centered. I tried adjust margins/padding but all that does is truncate the text to another line. I set absolute position and got the list to move all the way to the left, but it broke the flow of the page and the list ran over top of the headers. Any thoughts? All the CSS structures are imbedded in the STYLE section of the index file. http://www.mgan.net/work/10-20-04/ Bonus question: Anyone know why in internet explorer when you run the mouse of my top navi-bar the footer graphic for the news section disappears? Hello everyone. I would like to thank anyone who attempts to solve this in advance. I have a css page here . If you need me to post the code let me know, but I temporarily have embedded styles so I figured you could view source easily enough. The entire content of the page centers just fine in Firefox2, but unfortunately is aligned to the left in IE7 on PC. Does anyone know why this might be? Thanks again for your expertise and time, phpkata. Hello, I know basic css and html, but not much more than that. However, the site I am attempting to build is very simple, so hopefully someone here can help me stumble my way through the process. Here is an example of what I want: URL ...and when I add new content: URL I want a css grid of identical square containers, with a thumbnail in each one. The tricky part is getting the differently-sized thumbnails to be vertically centered in the containers without having to set each one by hand. This is where I have gotten so far- http://jimtierneyart.com/test/test.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {
margin : auto;
}
.wrapper {
width: 900px;
border: 1px solid #bbbbbb;
margin: 50 auto;
}
.item {
line-height: 223;
text-align: center;
float: left;
width: 223px;
height: 223px;
border: 1px solid #dddddd;
background: #EBEBEB;
}
img.a {
margin: auto;
max-width:120px;
border:0;
max-height:175px;
}
</style>
</head>
<body>
<div class="wrapper">
header
<BR>
<BR>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
</div>
</body>
</html>
I need 2 things to happen: 1. The parent container must be centered on the page (this worked fine until I added the Doctype tags. 2. the thumbnails must be vertically centered within the child containers. Can anyone point me in the right direction? I would really appreciate some help. Hi, there. Having looked around the forum for a CSS method of vertically centering an IMG within a DIV, I found the following code which works perfectly in IE but not FF : #full-image { float: right; width: 380px; height: 380px; text-align: center; line-height: 0px; background-color: #F0F5F7; margin-top: 5px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; } #full-image img { margin-top: expression(( 380 - this.height ) / 2); } That's right - works in IE but not FF, which is most unusual! Any ideas how to make this work cross-browser? Thanks in advance for any assistance. This is my rendition of Claire Campbell's "Vertical Buttons". Why is my text "Quick Links" not centered in IE? All the other text is centered? Thanks in advance. 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" >
<style type="text/css">
#quikcontainer
{
position: absolute;
top: 120px;
left: 30px;
height: 650px;
width: 143px;
background: white;
border: orange 2px solid;
margin: 0 auto;
padding-top: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: center;
color: #1E599F;
}
ul#quiklist
{
text-align: center;
color: #1E599F;
list-style: none;
padding: 0;
margin: 0 auto;
width: 100%;
}
ul#quiklist li
{
display: block;
margin: 0;
padding: 0;
}
ul#quiklist li a
{
display: block;
width: 100%;
padding: 0.5em 1em 0.5em 1em;
color: #1E599F;
text-decoration: none;
background: white;
}
#quikcontainer>ul#quiklist li a { width: auto; }
ul#quiklist li a:hover, ul#quiklist li#active a:hover
{
color: white;
background: #1E599F;
border-color: orange;
border-bottom: 2px solid;
border-top: 2px solid;
}
</style>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<div id="quikcontainer">
<p><strong>Quick Links</strong></p>
<ul id="quiklist">
<li id="active"><a href="#" target="_blank">Aaaaaaa A-A</a></li>
<li><a href="#" target="_blank">AA Aaaa aa Aaaaaa Aaaaaaaa</a></li>
<li><a href="#">Aaaaaaa A-A Aaaaaaa</a></li>
<li><a href="#">Aaa A-A Aaaa</a></li>
<li><a href="#">Aaaaaa A-A Aaaaaa Aaaaaaa</a></li>
</ul>
</div>
</body>
</html>
having trouble centering a web site what i want to precisely position elements in my site and i thought that i could put all the elements in to one div tag and make that centered. i can center it but the problem is when the browser is resized smaller that the content the site remains centered and center starts diserpering off the left edge. what i want it to do once resized smaller is for a horizontal scroll bar to appear and for content not to disappear on the left edge of the screen. i have half achieved this but now my content dose not stay in the main div check out my example the "center1" div should appear inside the top light gray box but it dose not! http://www.thehopeandanchor.net/nypd/layertest.htm the 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" xml:lang="en" lang="en"> <head> <title>redeem file</title> <style type="text/css"> <!-- div#center1 { /*position:absolute;*/ margin:0px auto; top:10px; width:600px; height:47px; background-color: #cccccc; } div#center2 { position:absolute; left: 50%; margin-left: -300px; top:80px; width:600px; height:47px; background-color: #cccccc; } div#insidebit { position:absolute; left:50px; top:10px; width:64px; height:26px; background-color: #eeeeee; } --> </style> </head> <body> <div id="center1"> <div id="insidebit">center1</div> </div> <div id="center2"> <div id="insidebit">center2</div> </div> </body> </html> What I need to do is align a series of icons to the center, but there are a few complications, they must continue to be centered with any combination of 4-5 different(same sized) icons. For example icon 3 and 4, when displayed must be centered together, and at the same time, if icon 1 and 5 are being displayed they must also be centered correctly. First of all they are appearing on 2 seperate lines, and I seem to be unable to put them on the same line without using float:left on one. But I can't just float:left image one to put them on the same line, as image one may not be displayed in the next instance(with a different combination of images). And I don't think I can set a width on the div and center it because there will not be the same number of icons displayed in each instance(could be 1-5, 14x14 icons). My guess is that some % values can make this work but I'm just not sure how. I was going to post an illustration of what I mean but I guess it's blocked... Any help would be greatly appreciated. Thanks. |
|||||||