|
CSS - Centering Div In Div (both Vertical And Horizontal)
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 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. PHP Code: echo "<div class=\"tbody2\">"; echo "<div class=\"client\">Client<div class=\"clientname\">Client Name</div></div>"; echo "</div>"; Using the above code it displays Client on top of Client Name. How do I make Client name appear to the right of Client using only css? I have a div that is 60px high. I want text to be centered vertically in that box. I know it is easy to do with tables, but how do you do it with css and divs? i tried using vertical-align, but that didn't seem to work. any ideas? How can I get the text to display in the middle of these boxes (vertically)? I would think vertical-align: middle would do it, but it doesn't work. Thanks in advance for any help! LauraS. Here's the code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.buttonscontainer-top {
width: 142px;
height: 36px;
}
.buttons-top a {
color: #777777;
background-color: #DDDDDD;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
display: block;
height: 36px;
text-align: center;
vertical-align: middle;
}
.buttons-top a:hover {
color: #FFFFFF;
background-color: #000000;
text-decoration: none;
}
</style>
</head>
<body>
<table width="710" height="36">
<tr>
<td class="buttons-top a"><a href="index.html">home</a></td>
<td class="buttons-top a"><a href="about.html">about</a></td>
<td class="buttons-top a"><a href="our_work.html">our work</a></td>
<td class="buttons-top a"><a href="clients.html">clients</a></td>
<td class="buttons-top a"><a href="contact.html">contact</a></td>
</tr>
</table>
</body>
</html>
hi all, need help to change this from vertical to horizontal menu. code: <html> <head> <title>Test</title> <script language="JavaScript" type="text/javascript"> // JavaScript Document startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; </script> <style type="text/css"> body { font: normal 11px verdana; } ul { margin: 0; padding: 0; list-style: none; width: 150px; /* Width of Menu Items */ border-bottom: 1px solid #ccc; } ul li { position: relative; } li ul { position: absolute; left: 149px; /* Set 1px less than menu width */ top: 0; display: none; } /* Styles for Menu Items */ ul li a { display: block; text-decoration: none; color: #777; background: red; /* IE6 Bug */ padding: 5px; border: 1px solid #ccc; border-bottom: 0; } /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ ul li a:hover { color: #E2144A; background: green; } /* Hover Styles */ li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ li:hover ul, li.over ul { display: block; } /* The magic */ </style> </head> <body> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Hosting</a></li> <li><a href="#">Domain Names</a></li> <li><a href="#">Broadband</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li> </ul> </body> </html> any help would be appreciated! Thanks!! see he http://www.christiancouriernewspaper.com/blogbase/contactpage.php What I want is for 7 fields (Name-State) on the Left just how they are Then I want the remaining fields (Country- the spam question) on the right I would like to have it so it all fits on one page without having to scroll any ideas/suggestions? the .css file is below Code: /*
----------------------------------------------------------------
GBCF-V3 BLUE STYLE SHEET - MIKE CHERIM HTTP://GREEN-BEAST.COM
----------------------------------------------------------------
To use for testing, this stylesheet must be named default.css
*/
/* === form div and elements ======================================= */
#form-div {
font-family : verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
width : 70%;
margin : auto;
color : #FF8C00 ;
line-height : 1.2em;
}
#form-div p.form-footer {
margin : -35px 2px 20px 13px;
}
#form-div p.form-footer a {
color : #003366;
}
#form-div p.form-footer a:hover, #form-div p.form-footer a:focus, #form-div p.form-footer a:active {
color : #000;
text-decoration : none;
}
#form-div p.form-footer a:focus, #form-div p.form-footer a:active {
background-color : #eee;
}
/* === form div link styles ======================================== */
#form-div a {
color : #FF6600;
}
#form-div a:hover, #form-div a:focus, #form-div a:active {
color : #000;
text-decoration : none;
}
#form-div a:focus, #form-div a:active {
background-color : #eee;
}
/* === success and error message/results box ======================= */
#form-div p.success, #form-div p.error, #form-div p.center {
color : #fff;
/* color : #000; (lite colors option - uncomment to use) */
padding : 1px 4px;
border : 1px solid #000;
background-color : #003366;
/* background-color : #bfccd9; (lite colors option - uncomment to use) */
margin : 10px 3px;
text-align : center;
}
#form-div p.error {
background-color : #bb0000;
/* background-color : #edbaba; (lite colors option - uncomment to use) */
}
#form-div p.error a, #form-div p.success a {
color : #ffff7f;
}
#form-div p.center {
text-align : center;
background-color : #edbaba;
color : #000;
margin-top : -3px;
padding : 0px 4px;
}
#form-div p.error a:hover, #form-div p.error a:focus, #form-div p.error a:active,
#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {
color : #eee;
background-color : #bb0000;
}
#form-div p.success a:hover, #form-div p.success a:focus, #form-div p.success a:active {
background-color : #003366;
}
/* === structural form elements ==================================== */
form#gbcf-form { }
fieldset.main-set,
fieldset.req-set,
fieldset.opt-set {
border : 1px solid #eee;
padding : 5px;
}
/* === textural form elements ====================================== */
#form-div legend {
font-weight : bold;
}
#form-div legend span { }
legend.main-legend {
color : #777;
font-size : 100%;
}
legend.req-legend,
legend.opt-legend {
color : #777;
font-size : 60%;
}
legend.main-legend span { }
legend.main-legend { }
legend.req-legend span { }
legend.req-legend {
margin-left : -2px;
}
legend.opt-legend span { }
legend.opt-legend {
margin-left : -2px;
}
label.req-label, label.opt-label {
color : #FF6600;
font-size : 60%;
}
label.opt-label.check {
float : right;
padding : 0;
margin : 1px 4px;
cursor : pointer;
}
label.opt-label.main-label {
margin : 0 2px;
font-weight : bold;
font-size : 75%;
}
label.opt-label.main-label span {
font-weight : normal;
color : #FF6600;
font-sze : 60%;
}
label.opt-label.main-label span.req, label span.req {
font-weight : bold;
color : #c70000;
}
label.req-label.explain {
color : #666;
font-size : .8em;
}
label.req-label.explain:hover {
color : #000;
}
/* === control and interface form elements ========================= */
/*
note: In this section you will see the hover/focus styles for the
inputs. For example: input:hover, input:focus. You will also see
these names applied as classes: input.hover, input,focus, for
example. This is not done by mistake. Those classes are needed for
the JavaScript focus script (files/focus.js) for IE 7 and older.
*/
input.text-long.address, input.text-long.address:hover, input.text-long.address:focus,
input.text-long.address.hover, input.text-long.address.focus {
border-bottom : 0;
margin-bottom : 0;
padding-bottom : 2px;
border-bottom : 1px dotted #bbb;
}
input.text-long.address2, input.text-long.address2:hover, input.text-long.address2:focus,
input.text-long.address2.hover, input.text-long.address2.focus {
border-top : 0;
margin-top : 0;
padding-top : 2px;
border-top : 1px dotted #bbb;
}
input.checkbox {
border : 1px solid #999;
width : .9em;
height :.9em;
padding : 0;
margin : 0;
cursor : pointer;
}
input.checkbox:hover, input.checkbox.hover,
input.checkbox:focus, input.checkbox.focus {
border : 1px solid #666;
}
input.text-short,
input.text-med,
input.text-long,
select.select,
textarea.textarea {
font : 0.6em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
border : 1px solid #999;
background-color : #fffffe;
cursor : text;
padding : 1px 2px;
}
select.select {
padding : 1px 0;
}
input.text-short {
width : 75px;
}
input.text-med, select.select {
width : 150px;
}
input.text-long {
width : 175px;
}
textarea.textarea {
width : 220px;
height : 100px;
}
select.select, select.select option {
cursor : pointer;
}
input.text-short:focus, input.text-short.focus,
input.text-med:focus, input.text-med.focus,
input.text-long:focus, input.text-long.focus,
select.select:focus, input.select.focus,
textarea.textarea:focus, textarea.textarea.focus {
border : 1px solid #666;
background-color : #ffe;
}
input.button {
font : 0.9em verdana, helvetica, palatino sans, tahoma, arial, sans-serif;
font-weight : bold;
margin-top : 8px;
padding : 1px 10px;
cursor : pointer;
float : right;
clear : both;
color : #003366;
}
input.button:hover, input.button.hover,
input.button:focus, input.button.focus {
color : #333;
}
/* because IE6 sucks - if you have a conditionally served IE6 style sheet add this to it */
* html input.button {
border : 1px solid #666;
}
/* EOF - Created by Mike Cherim @ http://green-beast.com =========== */
thanks ahead of time!!! We are redesigning and I have a CSS menu I like that runs vertically. I need a version that would also work running horizontal, with the drop downs underneath. Is this possible by tweaking my existing code? I got the code I am using from alistapart and I am not really too familiar with it. You can see it here http://www.caribbean-on-line.com/tables.html Thanks - Anthony This might be a dumb question ... but here it is. I have a red background on my page and a simple table with one cell. I applied, via CSS, a 5 px border in white (border: 5px #fff solid and I want the bottom border to be black (border-bottom: 5px #000 solid but I didn't expected that result : the bottom border gets angular delimitation on both sides (see the link below). Sample of the table Here is the code used; CSS Code:
<style>
body
{
margin: 0;
padding: 0;
}
div.main
{
background-color: red;
height: 100%;
width: 100%;
}
.maintable
{
border: 5px #fff solid;
border-bottom: 5px #000 solid;
}
</style>
HTML Code: <body> <div class='main'> <br /><br /> <center> <table border='0' cellspacing='0' cellpadding='0' class='maintable'> <tr> <td>Cell #1</td> </tr> </table> </center> </div> </body> What I want, is a clean table that, if the border-bottom is declared AFTER the border statement, it will color ALL the bottom white to black, and if border-bottom is declared BEFORE the border statement, it will color the bottom border black except both sides (left and right) that will remain white. I don't want angular sides like the one in the link, I want horizontal or vertical sides only, is that possible? Thanks a lot. Hi guys I'm having trouble trying to convert a CSS navbar, which renders vertically, into an horizontal navbar. Look, here is the HTML Code, and following, the CSS code Code: <div id="menutoolbar">
<ul>
<li><a href="link1.html">Opcion1</a></li>
<li><a href="link2.html">Opcion2</a></li>
<li><a href="link3.html">Opcion3</a></li>
</ul>
</div>
The CSS Code Code: div#menutoolbar {
height: auto;
width: auto;
}
div#menutoolbar li {
height: 21px;
width: 32px;
margin: 0px;
font-family: Tahoma;
font-size: small;
text-align: center;
line-height: 65px;
list-style-type: none;
background-image: url(http://alf.openu.ac.il/www_eng/icon/button.gif);
background-position: center top;
background-repeat: no-repeat;
}
div#menutoolbar li a {
font-weight: bold;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
div#menutoolbar li a:link {
color: blue:
}
div#menutoolbar li a:visited {
color: #900;
}
div#menutoolbar li a:hover {
font-weight: bold;
color: red;
}
div#menutoolbar li a:active {
color: black;
}
Does any1 know which code I have to modify to transform this vertical toolbar into horizontal ? Or maybe to point me to an easy example for doing an horizontal set of css buttons like this example... Thanks... So here's the page I'm working on: http://johannkwan.com/about.html The HTML side is simple: Code: <div id="horizon"> <div id="wrapper"> <div id="about_content">About</div> <a href="http://www.johannkwan.com" id="back">Back</a> </div> </div> The CSS side is just a horizon bar with the wrapper in the middle, the top margin offset to half the wrapper so it'll center properly. Code: #horizon {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
margin-top: -300px;
text-align: center;
min-width: 800px;
}
#wrapper {
position: relative;
text-align: left;
width: 800px;
height: 600px;
margin: 0px auto;
}
Here's my problem. If you're looking at the page on anything under 800x600 (or if you resize your browser to under 600) the top bit cuts off. You can't scroll up past part-way up the image. But it's not 300px of cut off... it's some sort of distance I haven't defined, so I'm not entirely sure where I'm going wrong. Is there a better way to vertically center my content? Or is there just something wrong in my stylesheet I'm not seeing? Any help would be appreciated. Thanks! Hi guys. I've got a single element (image) that I want to vertically center in an otherwise blank page. Can anyone tell me how I can do this, that works with all browsers, and doesn't requite tables? http://www.waxpad.com/articles/vcexample.html I found this article on it, but joy of joys, it doesn't work in Safari on a mac! Can someone please explain this to me, because I'm apparently missing something. I have a div that I am using as an overlay to my site. I want this div to be 50% wide, and 50% high, and be properly centered on the screen. I was able to get horizontal centering working almost perfectly, but when it comes to vertical centering- things just don't make sense. To center, I'm setting top & left to 50% and then using margin-top and margin-left with negative values to compensate. What I assume should work (and seems to work with horizontal centering) is that if I set the margin-left to -25%, the leftmost side of my div should end up half-way between the beginning of the browser window and the center of the browser window. But if I set margin-top to -25%, by the same logic, it should move the topmost side of the div up to between the top of the browser view area and the center. But that doesn't seem to happen- at least in FF3: Code:
<html>
<head>
<style>
div#dialog
{
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
margin-top: -50%;
margin-left: -25%;
background-color: #FFFFFF;
border-top: #FF0000 3px solid;
border-left: #FF0000 3px solid;
border-right: #FF0000 3px solid;
border-bottom: #FF0000 3px solid;
z-index: 202;
}
</style>
</head>
<body>
<div id="dialog"></div>
</body>
</html>
Instead what happens is the top of my div ends up at the very top of the viewing area of the browser- and actually a little bit ABOVE it (outside of the view area). WHY!? If I set the margin-top to -50%, which I would expect to place the topmost edge of the div at the very top of the browser viewing area, the div disappears entirely! Yet if I set margin-left to -50%, it appears along the left side of the browser window where I'd expect it to be. Why might this be happening? Again, obviously I'm missing something. Can someone please explain? Is there another/better way of doing this? Thanks, - skubik 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. 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;
}
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>
Hello, Thank you for reading my post This is what I try to create. A Vertical Navigator column with images, without knowing their size, as links and javascript actions. The images should be Horizontally centered. I want to set the width of the div 'navBar' dynamically so that the images inside the 'navElement's grows or shrink but stays in center. The images could be between 55 - 90 pixels width. And I want to have them grow or shrink between 40 - 80 px width. What I already got : The links and javascript actions are working. Also have a column working where the images are centered with a known size, but not working with images without knowing the size. I did try and search for several hours, but couldn't find a good solution. Mainly my question would be, how I can shrink or grow an image without knowing his size. Basicly my html code is Code: <div id="navBar"> <div class="navElement" id="nav1"> <img class="navImg" src="images/home.gif" /> </div> <div class="navElement" id="navN"> <img class="navImg" src="images/notHome.gif" /> </div> </div> my latest css for unknown image size Code: #navBar { /* main page navigation container */
height: 460px;
width: 70px; /* 1. this will be dynamically set */
left: 100px;
top: 151px;
position: absolute;
visibility: visible;
}
.navImg {
height: auto;
width: auto;
/* height: 60px;*/
/*width: inherit;*/
position: relative;
top:0px;
margin:0 auto;
}
#navElement1 {
position: relative;
width: auto;
height: 70Px;
top:0px;
margin:0 3px;
visibility: visible; }
With javascript I add a onclick event handler on each navImg wich trigger the action. This works to. Please, Is someone willing to help with pointers. Thanks in Advance SC Hello, i'm have a recurring problem when programming websites and it is the vertical spacing added by IE6 between two images. Here is an example template I am working on. brycecre8iv.com The lines beneath the buttons are getting an extra 10px padding at the top in IE6. Appears in order on FF2. Also for some reason the centering is not working with the main container in IE. this usually works perhaps someone can spot my errors. Thanks for any help. webg 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> 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 |
|||||||