|
CSS - Centering Inline List Inside Div
Damn another problem good thing you guys are so helpful....
What am I doing wrong here? css Code: #footer{
position:relative;
z-index:-1;
margin-top:-50px;
background-color:#666666;
width:100%;
height:100px;
margin-left:auto;
margin-right:auto;
border-top:#000000 10px solid;
}
#footer ul{
position:absolute;
padding:0px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
#footer li{
display:inline;
padding:0px;
margin:0px;
}
#footer a{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
border-right:#FFFFFF 1px solid;
}
html Code: <div id="footer">
<ul>
<li><a href="#">Nav 1</a></li>
<li><a href="#">Nav 2</a></li>
<li><a href="#">Nav 3</a></li>
<li><a href="#">Nav 4</a></li>
<li><a href="#">Nav 5</a></li>
<li><a href="#">Nav 6</a></li>
<li><a href="#">Nav 7</a></li>
</ul>
</div>
Just can't seem to get the list centered inside the div Similar TutorialsI'm having trouble understanding how to vertically center an inline list in a div. Can anyone recommend some reading? The list is used for a horizontal nav bar with a background. I've set the height of the div to 20px because that's the height of the bg image. Also: Should the font specs be where they are (#nav ul) or maybe in the #nav section? Here's the code: Code: #nav {
background: url(../images/nav_bg2.gif);
text-align: center;
overflow: hidden;
height: 20px;
}
#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav li{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.75em;
display:inline;
margin:0;
padding:0;
}
I need to style all images within a div. For example, I want to do something like this: <div style="img{border: 0;}"> <img src="" /> <img src="" /> <img src="" /> </div> But that does not seem to work. Is it this possible with css? It is for an ebay template, so I don't think I can reference a separate stylesheet. thanks. Charley Hello, I have a question about div's set to display: inline. First let me explain what I'm trying to do so that if I'm going about it the wrong way you can show me the light. I'm trying to have multiple divs centered on the screen and lined up horizontally, like so: | (div1)(div2)(div3)(div4) | The thing is, I have images in the divs. I also have a border on the divs. So when I set display: inline, the border goes through the image (although the divs are positioned correctly with the body text-align: center). However, when I set display: block, the border is exactly how I want it (i.e. it includes the image) but the divs are placed one on top of the other vertically and they are left-aligned. Is there a simple way to do this? Thanks Ok, so maybe I don't understand the display attribute quite right. What I'm doing makes sense to me, but it's not working right when displayed. I have a div that is set to display inline (so that I don't have to use floating). Since inline elements can't have height/width attributes, i have another div inside of it, with display set to block. This inner div has height and width attributes. Now, if I place another similar structure (block div inside inline div) in the code, the two outer divs /should/ (in my mind) render side-by-side with the heights and widths of their child div's. When I try it though, it displays everything as block-type. Any ideas? PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <style type="text/css"> img{ border: 0px black solid; height: 200px; } div.outerholder{ display: inline; } div.innerholder{ text-align: center; height: 200px; width: 267px; margin: 0px; padding: 0px; display: block; } div.centerme{ text-align: center; margin-left: auto; margin-right: auto; } </style> </head> <body> <div class="centerme"> <div> <div class="outerholder"> <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> <div class="outerholder"> <div class="innerholder" style="margin-left: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> </div> <div> <div class="outerholder"> <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> <div class="outerholder"> <div class="innerholder" style="margin-left: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> </div> <div> <div class="outerholder"> <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> </div> </body> </html> P.S. It also doesn't center properly in FF, but that's secondary... Im trying to get an input field and form button to line up to the right of an <li> tagged menu and not sure of the approach i should take. I'd prefer not to use a table if possible, and the table im using now is a bit buggy anyway. this is a page with the menu as it shows right now.... http://www.seesawusa.com/products/ this is the page with the basic idea of what im trying to do http://www.seesawusa.com/pages/74/ Things i'v tried 1. put the form inside a LI tag.... This results in putting the search box below the list of menu items across all my test browsers. 2. put the UL and the FORM inside a table with 2 cells... in FF, i get the result i want... except the LI and INPUT field are not aligned to the right in IE6 & 7 I get it lined up the way i want it. But the table pushes the the height and width of the containing div to an unacceptable level I've seen this type of thing before and in my searching other sites i've only found complicated table based layouts that use it. Does anyone know an approach that would allow me to leave out tables, or at the very least only use one? Thanks for the glance. P.S. Interestingly enough, the page you are reading has a menu and text field configuration that im wanting to use, but it is very table oriented. Hello, I know that putting a block level element (such as <p> or <div>) inside an inline element (such as <a>) is against "xhtml 1.0 strict" rules, so I'm putting a <span> (inline) within an <a> (also inline). I've made my <span> "display: block;", and it works in all browsers and validates fine, but I feel like I'm cheating the system a bit? The thing is, I need to put a margin under a piece of text without using <br /> (as when a browser forces a line break, it will use that rule and make different pieces of text look odd), but all the text is within an anchor tag, so I can't use <p> or <div>. Would appreciate any thoughts on the matter, Cheers! I'm trying to center the <div class="menu"> inside the <div id="nav"> but I cannot figure out what to do exactly. I've tried so many different things with the text-align:center to putting it into a table and centering that... Nothing I try is making it go to the center. Will someone please assist me in getting this centered? EDIT: The way I have it currently, If I put text outside of the <div class="menu"> then that will be centered fine like I want the div. HMTL code Code:
<div id="nav">
<div class="menu">
<ul>
<li><a class="hide" href="#">Top 1</a>
<ul>
<li>Sub Top 1.1</li>
<li>Sub Top 1.2</li>
</ul>
</li>
<li><a class="hide" href="#">Top 2</a>
<ul>
<li>Sub Top 2.1</li>
<li>Sub Top 2.2</li>
</ul>
</li>
</ul>
</div>
</div>
CSS code Code:
#nav{background-color:Blue;height:35px;width:auto;text-align:center;}
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; height:100px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
I am trying to simulate a vertical table using divs and css, but I can't figure out how to center elements. How do I center (horizontal and vertical) these 3 boxes inside the 3 frames? Code:
<html>
<head>
<style>
.frame {
width: 200px;
height: 200px;
border: 2px solid black;
}
.box1 {
width:50px;
height:50px;
background-color: red;
}
.box2 {
width:100px;
height:100px;
background-color: yellow;
}
.box3 {
width:150px;
height:150px;
background-color: green;
}
</style>
</head>
<body>
<div>
<div class="frame">
<div class="box1">Box 1</div>
</div>
<div class="frame">
<div class="box2">Box 2</div>
</div>
<div class="frame">
<div class="box3">Box 3</div>
</div>
</div>
</body>
</html>
Ok, i have this menu with links, but i have a few problems. 1) Don't know why, but i can't center the menu links. There is more space from left to the menu, than from the right to the end of the menu. 2) I'd like to change the properties of each link (using CSS) individually, so i can resize each one like i want. I've done it, but it nly worked in IE. here's the site PS: I still haven't converted pictures to .gif, so it takes a little bit to load all pictures (3). Hi all, Im hoping someone out there can help me. Ive just discovered ive made a massive mistake by designing my site and viewing it in IE. It looks fine in IE, but of course there is one part that looks terrible in FF ( not FFs fault i know!) The navigation bar is an inline list that is supposed to appear tabbed but in FF one of the tabs is pushed up a lot higher and I cant figure out what is pushing it up. i thought it might be the #ul secondary pushing it up (as this appears a bit wonky as well...)and i tried adding /* Hides from IE-mac \*/ #ul secondary { position: absolute; margin: 0; padding: 0; bottom: -41px; left: 1px; width: 100%; } /* End hide from IE-mac */ but this didnt change anything. i tried using the DOM inspector that comes with firebug but I still cant figure out whats pushing up the one home page tab.... Any tips anyone might have would be greatly appreciated. My style sheets is /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~* 2 column container ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ #content-container-two-column { margin-top:3px; margin-left:auto; margin-right:auto; padding:10px; width:728px; position:relative; margin-bottom: 50px; } #content-main-two-column { width:728px; float:left; } #content-side-two-column { float:right; width:160px; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~* 3 column container ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ #content-container-three-column { margin-top:3px; margin-left:auto; margin-right:auto; padding:10px; width:728px; position:relative; } #content-main-three-column { width:355px; float:left; margin-left:25px; } #items-left { width:148px; float:left; margin-right: 45px; } #items-right { width:148px; float:right; margin-right: 45px; } #content-side2-three-column, #content-side1-three-column { width:150px; font-size:1.1em; } #content-side2-three-column { float:right; } #content-side1-three-column { float:left; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~* index page ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ #three-column-container { background:url(../../images/bg-three-column-home.png) repeat-y; padding:0; margin:20px 0 10px 0; } #three-column-side1 { float:left; width:148px; margin-right: 45px; } #three-column-side2 { float:right; width:142px; background-color: #E9E9E9; padding-left: 2px; padding-right: 2px; } .centre { background-position: center; margin-bottom: 5px; text-align: center; padding: 0px; } #three-column-side22 { float:right; width:148px; } #three-column-middle { width:340px; margin:0px 10% 0px20%; margin-right: 10%; margin-left: 20px; } #three-column-middle-air { width:340px; margin:0px 10% 0px20%; margin-right: 10%; margin-left: 20px; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~* html ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ body { margin:0px; background-color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.7em; line-height:1.4em; color:#666666; } p { margin:10px 0; } p.no-padding-no-margin { padding:0; margin:0; } hr{ color: #E5E5E5; background-color: #E5E5E5; height: 1px; border:0; margin:15px 0; _margin:10px 0; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~* headings ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ h1, h2, h3, h4, h5, h6 { font-size:1.8em; font-family:Verdana, Arial, Helvetica, sans-serif; line-height:1.1em; margin:5px 0; } h1 { margin-bottom:0; } h1, h2 { margin-top:0px; } h2 { font-size:1.3em; } h3 { font-size:1.1em; } h3.small { font-size:1.2em; } h4 { font-size:1.1em; } h5 { font-size:1.1em; } h6 { font-size:1em; } a:link { color:#d61719; text-decoration:none; } a:visited { color:#980000; text-decoration:none; } a:hover { text-decoration:none; } a:active { color:#980000; } #content-side-two-column a:link, #content-side2-three-column a:link, #content-side1-three-column a:link, #content-side-two-column a:visited, #content-side2-three-column a:visited, #content-side1-three-column a:visited { text-decoration:none; } #content-side-two-column a:hover, #content-side2-three-column a:hover, #content-side1-three-column a:hover { text-decoration:underline; } .img_text { float:left; margin-top:0px; margin-right:10px; margin-bottom:0px; } #poster-photo-container { margin-left:auto; margin-right:auto; width:750px; position:relative; } .poster-photo-image { display:block; } ul { margin:0; padding:0; list-style:none; } li { list-style:none; background:url(../../images/list-bullet-02.gif) no-repeat 0 .8em; padding:.2em 0 .2em 1em; margin-left:0.4em; } #content-side1-three-column ul.list-of-links, #content-side2-three-column ul.list-of-links { margin: 0 0 30px 0px; } ul.list-of-links li{ background-image:url(../../images/list-bullet-01-link.gif); } ul.list-of-links li.current { background-color:#E5E5E5; } ul.no-lines, ul.no-lines li { border:none; } .feature-area { background-color:#6799D1; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~* images ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ img { border:none; } .img_footer { border:none; padding-right:10px; } .photo-border { padding:0px; margin-bottom:5px; display:block; /*background-image: url(../../images/bg-photo.png); background-repeat: repeat-x; background-position: top;*/ } .photo-float-left { float:left; margin-left:0px; margin-right:10px; margin-top:0px; margin-bottom:40px; } .photo-float-details { float:left; margin-left:0px; margin-right:10px; margin-top:0px; margin-bottom:1px; } .image-border-none { border:none; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~* FOOTER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ #footer { margin-top:3px; margin-left:auto; margin-right:auto; width:740px; padding:.8em 0 1em 10px; position:relative; font-size:0.9em; text-align: center; } #footer a:link, #footer a:visited { color:#555450; text-decoration:none; padding:0px 0px 0px 10px; } #footer a:hover { color:#64645c; text-decoration:none; padding:0px 0px 0px 10px; } #footer a:active { color:#FFFFFF; padding:0px 0px 0px 10px; } .arrow { vertical-align:middle; } .clear { clear:both; } .none { display:none; } .dent { margin-left: 20px; } /*Tabs*/ html, body { margin: 0px; padding: 0px; } body { text-align: left; } #Wrapper { font-family: Georgia, Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; text-align: left; width: 750px; margin-top: 20px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding: 0px; } #Container { background-color: #FFFFFF; color: #333; clear: both; margin: 0px; padding-top: 2.2em; padding-right: 0; padding-bottom: 0; padding-left: 0; width: 750px; float: left; border-top: 1px solid #C0C0C0; display: block; } #Content { background-color: #FFFFFF; border-top-width: 1px; border-top-style: solid; border-top-color: #C0C0C0; padding-bottom: 20px; margin: 0px; width: auto; height: auto; } #Navigation { margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight:bold; color: #333333; position: relative; height: 50px; display: block; width: auto; } ul#primary { margin: 0; padding: 0; position: absolute; bottom: -1px; width: 728px; } ul#primary li { display: inline; list-style: none; } ul#primary a,ul#primary a.active { width: 10em; display: block; float: left; text-align: center; font-family: tahoma, verdana, sans-serif; font-size: 12px; text-decoration: none; color: #333; letter-spacing: .1em; margin-top: 0px; margin-right: 2px; margin-bottom: 0; margin-left: 0; padding-top: 4px; padding-right: 0; padding-bottom: 4px; padding-left: 0; } ul#primary a.active,ul#primary a.active:hover { border-top: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; border-bottom: none; border-left: 1px solid #c0c0c0; background: #ffffff; color: #333; margin-top: 0; margin-right: 2px; margin-bottom: 0px; margin-left: 0px; padding-top: 4px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; } ul#primary a { border-top: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; border-bottom: none; border-left: 1px solid #c0c0c0; margin-top: 0px; margin-right: 2px; margin-bottom: 0px; margin-left: 0px; padding-top: 4px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; background: #e8e9e1; } ul#primary a:hover { margin-top: 1; border-color: #c0c0c0; color: #333; padding-bottom: 3px; margin-right: 2px; margin-bottom: 0px; margin-left: 0px; padding-top: 4px; padding-right: 0px; padding-left: 0px; background: #e9eaea; } ul#secondary { position: absolute; margin: 0; padding: 0; bottom: -21px; left: 1px; width: 100%; } /* Hides from IE-mac \*/ #ul secondary { position: absolute; margin: 0; padding: 0; bottom: -41px; left: 1px; width: 100%; } /* End hide from IE-mac */ ul#secondary li a { width: auto; display: block; float: left; padding: 0 10px; margin: 0; text-align: center; border-top: none; border-right:none; border-bottom: none; border-left: none; background: none; color: #666; background-color: #FFFFFF; text-decoration: none; } /* Hides from IE-mac \*/ #ul secondary li a { width: auto; display: inline; float: left; padding: 0 10px; margin: 0; text-align: center; border-top: none; border-right:none; border-bottom: none; border-left: none; background: none; color: #666; background-color: #FFFFFF; text-decoration: none; } /* End hide from IE-mac */ ul#secondary li a:hover { color: #333; border-top: none; border-bottom: none; border-left: none; margin: 0px; padding-top: 0; padding-right: 10px; padding-bottom: 0; padding-left: 10px; background: none; } ul#secondary li a:active { color: #000; font-weight: bold; } ul#secondary li:last-child a { border: none; } .bold { font-weight:bolder; color:#000000;} #number { width:20opx; } And some of the html <div id="Wrapper"> <img src="pics/logo2.gif" align="right" /> <div id="Navigation"> <ul id="primary"> <li><a href="index.html" class="active">Home</a></li> <li><a href="print.html">Printing</a> <ul id="secondary"> <li><a href="about.html">About us</a></li> <li><a href="environment.html">Environment</a></li> <li><a href="links.html">Links</a></li> </ul> </li> <li><a href="products.html">Products</a></li> <li><a href="cart">View Cart</a> <li><a href="contact.html">Contact us</a></li> </ul> </div> <div id="Container"> <div id="Content"> <div id="poster-photo-container"><img src="pics/header6.jpg" alt="" class="poster-photo-image" /></div> <div id="content-container-two-column"> <div id="content-main-two-column"> <h1> Welcome to The Picture Works Printing Room</h1> 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;
}
My page has: 1) a left-sidebar which goes from the top-left corner and stretches down 2) a top-bar which goes from the edge of the left-sidebar and stretches all the way across to the right side of the page 3) a main content which covers the rest of the page I want to place an image in the center of the top-bar but so far it only is centered when the window is maximised...I want it to be centered no matter what size the window is. currently my css rules a Code: #topBar {
position: absolute;
height:15%;
text-align: center;
left:30%;
margin:0px auto;
}
the xhtml source code for the topBar and image is: Code: <div id="topBar"> <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p> </div> (the image id is just concerned with the size of the image at this time) any suggestions as to how to I can have the image centered within the <div>? some bright spark on Yahoo Answers failed to spot that I'm using xhtml (which tbf is only mentioned once) and told me to try: Code: <div id="topBar"> <p><center><img src="../logo1.jpg" alt="..." id="sirgLogo"/></center></p> </div> or Code: <div id="topBar" align="center"> <p><img src="../logo1.jpg" alt="..." id="sirgLogo"/></p> </div> Unless I'm mistaken, these are possibilities which will cause w3's validator to throw up an error. For the record I'm using XHTML 1.0 Transitional and I presume my doctype declaration is correct as it was automatically generated by dreamweaver when I first made the document! Hello, I am trying to display a three column menu (each column is a list). I created a single container. Within that I created three more containers(each about 33% width). Each internal <div> for the separate columns are set to inline. When I put text in each of the 4 pairs of <divs> they display side by side. Just fine. But If the DIV contains a list, despite the fact that the DIVs defined as inline, it still drops to the next line and things like the background color don't even render. All of the box styles are identical except for the background color. Shouldn't the <DIV> (defined with the display:inline) let me place whatever I want inside it? Just out of curiosity, I changed the first column into a 1 item list and it sifted to the right,.I don't know what that was based on. It also seemed to act like a block display, everytning went to the next line, and the background color was ignored. But the color attribute did render. ????? I haven't seen anything discussing the issues with defining lists inside of inline DIVs. I'm working with Firefox because that follows the standards better than IE although I have to make it work w/ IE too. What did has me pounding my head is how a UL tag seems to wipe out most (but not all) of the settings for the DIV containing it. I am thinking of making the columns each list items as a work around but I don't know why what I tried doesn't work. Thanks! Randy This is an simple example: Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#box1 {
width:100px;
height:100px;
background-color:#FFFF33;
display:inline;
}
#box2 {
width: 100px;
height: 100px;
background-color:#FF8833;
display:inline;
}
#box3 {
width: 100px;
height: 100px;
background-color:#88FF33;
display:inline;
}
#box4 {
width: 100px;
height: 100px;
background-color:#CCCCCC;
display:inline;
}
#container {
width: 550px;
height 150px;
background-color:#CC66FF;
}
li {
list-style:none;
}
</style>
</head>
<body>
<div id="container">
<div id="box1">Column 1</div>
<div id="box2">Column 2</div>
<div id="box3">Column 3</div>
<div id="box4">
<ul>
<li>Column 4</li>
</ul>
</div>
</body>
</html>
How do i center the image both horizontally and vertically.... I have read the < ALIGN > has be depreciated and must use style, but STYLE="vertical-align:middle" dpesnt seem to work in either/both the < DIV > and < IMG > tags I am using an external CSS with a hiehgt of 168px, and calling the < DIV > block, then just using a < IMG > tag. How can i align the image int he middle?? Hello guys, I know this is asked several time, but this case is different and can't find a working solution. I'm creating a navbar using ul lists with items as images, and want to center it. I'm using the blueprint css framework, and the list items contains images instead of text. Here's the HTML code : Code: <body> <div class="container"> <div id="header" class="span-24"> <div id="header_wrapper"> <ul> <li><img src="images/nav_03.png" /></li> <li class="selected"><a href="#"><img src="images/nav_04.png" /></a></li> <li><a href="#"><img src="images/nav_05.png" /></a></li> <li><a href="#"><img src="images/nav_06.png" /></a></li> <li><a href="#"><img src="images/nav_07.png" /></a></li> <li><img src="images/nav_08.png" /></li> </ul> </div> </div><!--End Header--> </div> </body> Here's the CSS code : Code:
#header{
padding-top:53px;
border:#F00 solid 1px
}
#header_wrapper ul {
text-align: center;
}
#header_wrapper ul li {
display: inline;
}
I tried many code configurations but can't get it to work! a live preview is available here As the title says... Design constraints unfortunately mean I need to do achieve the basic design shown in the example below (using a list) I have created an example to illustrate the problem I am experiencing. Problem example The list item text is wrapping too early in IE6 and IE7, though fine in my other target browsers such as Firefox and Opera. removing clear:left stops the wrapping, but then when 2 or more nav items have short content they sit on the same line which is no good obviously Any ideas / solutions etc. would be most welcome I have the following list that I want displayed horizontally. I chose to do it with display:inline instead of float:left as that seemed to be the only way to get it to center on the page: http://www.jimandkris.com/listtest.html However, now I can't figure out how to get those submenus to align under their respective parent. Hopefully this is an easy one, any suggestions? Hello, I was wondering if anyone could shed some light on this problem I'm having with my navigation bar. I've Googled and tried every [seemingly] logical combination, but can't get it to work -- and it's driving me nuts! Basically, I have a div containing an unordered list and an image. The image is a non-semantic hack I've had to put in for the design, without making it massively complicated... Anyway, the problem is with the ul, which contains lis that are just images (tabs). Like so: Code: <div id="tabs">
<ul>
<li><a href="..."><img src="..."></a></li>
<li><a href="..."><img src="..."></a></li>
[etc.]
</ul>
<img src="filler.png">
</div>
Each image is a different width; and the above is simplified for clarity... Anyway, this works perfectly in Firefox, Opera and even IE. However, in Safari and Chrome, the lis have a few extra, blank pixels of padding on the right edge of the image; whereas I want all the images to butt-up against each other. My CSS is as follows: Code: #tabs {
word-spacing: -4px;
}
#tabs ul {
display: inline; list-style: none;
margin: 0px; padding: 0px;
}
#tabs li {
display: inline;
}
The word-spacing for the div removes the spacing you automatically get in Firefox/Opera/IE -- I found -4px was enough to remove the gap entirely -- but in Safari/Chrome, a gap remains. If you make the value even smaller (e.g. -5px, -60px, etc.) it makes no difference in any browser; if you make it bigger, then the gaps widen in all browsers. However, WebKit browsers always have that extra padding on the right edge. Any ideas on how to get rid of this?... I've tried "display: inline-block", "-webkit-border-horizontal-spacing" with various values, "white-space: nowrap"; even altering the HTML so that the images and lis have explicitly defined widths. Nothing works! I have two problems with template I am creating. I could not center the page whatever I tried and for some reason list-style do not appear correct. edit: Actually just realized list styles does not appear at all. http://efetuncel.win.aplus.net/ryt/new/ 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 |
|||||||