|
CSS - Centering Images In Vertical <li> Column
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 Similar TutorialsI 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 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! 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! Hello 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. 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 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 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 my navbar is a <ul> and i jsut added image icons. i have two problems, the placement and the vertical centering. placement: well, i guess its best to show you the code and what i had to do to get it in place. i used position:relative and then changed the bottom, but why is it so obscure??? Code: #navbar {
text-align:right;
background-image: url('images/menu_new.GIF');
background-repeat:repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
padding-right: 8px;
margin-top:-12;
height:31;
}
#navbar ul {
margin-right: -0.3em;
height:31px;
position:relative;
bottom:-2px;
}
#navbar ul li {
display: inline;
list-style-type:none;
margin-left: 0.3em;
margin-right: 0.3em;
position:relative;
vertical-align:middle;
}
#navbar ul li a {
padding-top:11px;
color:#495B20;
background-color:#BAD36B;
border-left: 2px solid #fff;
border-top: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
}
#navbar ul li a:hover {
background-color:#495B20;
color:#BAD36B;
border-left: 2px solid #000;
border-top: 2px solid #000;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
#navbar ul li div {
position:relative;
}
#navbar ul li img {
border:none;
width:24px;
height:24px;
padding-right:4px;
margin: 0;
}
vertical centering: i have looked at the tutorial, but i need serious help. i'm not trying it again, im missing something. can someone please show me how do do this? i want to center it like this... ....................................... . . . texttexttexttexttext. .image texttexttexttexttext. .----- texttexttexttexttext. . . ....................................... so both the image and text are centered but theyre floated left. actually, maybe they dont need to be floated cuz its just a word or two. look at the header for the best desc. i have tried this with my game box, and i'm clued out. i really hope sum1 can help me with this. http://www.viportals.com/ EDIT: DID IT ON MY OWN!!! THATS A FIRST!!! Code: #navbar {
text-align:center;
background-image: url('images/menu_new.GIF');
background-repeat:repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
margin-top:-15px;
height:31px;
line-height:31px;
margin-left:0;
margin-right:0;
}
#navbar ul li {
display: inline;
list-style-type:none;
}
#navbar ul li a {
padding-left: 0.3em;
padding-right: 0.3em;
padding-top: 4px;
padding-bottom: 4px;
color:#495B20;
background-color:#BAD36B;
border-left: 2px solid #fff;
border-top: 2px solid #fff;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
}
#navbar ul li a:hover {
background-color:#495B20;
color:#BAD36B;
border-left: 2px solid #000;
border-top: 2px solid #000;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
#navbar ul li img {
border:none;
width:24px;
height:24px;
padding-right:4px;
vertical-align: middle;
}
now i have one QUESTION: how do i get all the buttons to align center?????????? they all stay to the right oh, and not a huge deal, but the text is a couple pixels down so it brings the image down too. how can i make the text in the vertical middle? the line-height thing only worked so well. I would like a column to span the entire page vertically. When I browse my website on firefox, the page spans twice as long as the page. (www.skysupplyusa.com/a.php) Any advice? Code: #sidebar {
float: left;
background-color:#000;
width: 20%;
height: 100%;
}
#content{
background-color:#FFF;
width: 80%;
min-height: 100%;
height:auto;
float: right;
text-align:left;
}
/* Hack for IE */
* html #Content {
height: 100%;
}
/* End IE Hack */
body {
top:0;
height: 100%;
width: 100%;
margin: 0;
padding:0;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
line-height:1.5em;
background-color: #DDD6CC;
}
Hello: I'm having trouble centering my page layout. I never had a problem in the past but someone passed this coding over to me and it won't center. I have a div id named container which is what I'm using to position my layout on the page. Can someone help me out? Thanks in advance. This is the HTML: Code:
<html>
<head>
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script language="JavaScript" src="email.js" type="text/javascript"></script>
<!--[if IE]><link rel="stylesheet" href="email-archive.css" type="text/css" media="screen" /><![endif]-->
</head>
<body>
<div id="container">
<table width="850" height="27" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div id="menu">
<ul class="menu1" id="nav">
<li><span class="menu_top"><a href="#" style="padding: 0;">Communities</a></span>
<ul>
<li><a href="#">Chestatee</a></li>
<li><a href="#">Hawks Ridge</a></li>
<li><a href="#">Lake Arrowhead</a></li>
<li><a href="#">Area Map</a></li>
</ul>
</li>
</ul>
<ul class="menu2" id="nav">
<li><span class="menu_top"><a href="#" style="padding: 0;">Build On Your Own Lot</a></span>
</li>
</ul>
<ul class="menu3">
<li><span class="menu_top"><a href="#" style="padding: 0;">House Plans</a></span>
<ul>
<li><a href="under-3000.html">Examples of stock home plans under 3000 sq.ft.</a></li>
<li><a href="over-3000.html">Examples of stock home plans over 3000 sq.ft.</a></li>
<li><a href="custom-homes.html">Examples of Custom Homes Plans</a></li>
</ul>
</li>
</ul>
<ul class="menu4">
<li><span class="menu_top"><a href="#" style="padding: 0;">Available Homes</a></span>
<ul>
<li><a href="#">Chestatee</a>
<ul>
<li><a href="#">The Greens</a></li>
<li><a href="#">The Waterfront</a></li>
<li><a href="#">Linkside</a></li>
</ul>
</li>
<li><a href="#">Hawks Ridge</a></li>
<li><a href="#">Lake Arrowhead</a></li>
</ul>
</li>
</ul>
<ul class="menu5">
<li><span class="menu_top"><a href="#" style="padding: 0;">Gallery</a></span>
<ul>
<li><a href="#">Exterior Gallery</a></li>
<li><a href="#">Interior Gallery</a></li>
</ul>
</li>
</ul>
<ul class="menu6">
<li><span class="menu_top"><a href="#" style="padding: 0;">Features</a></span></li>
</ul>
<ul class="menu7">
<li><span class="menu_top"><a href="#" style="padding: 0;">Design Center</a></span></li>
</ul>
<ul class="menu8">
<li><span class="menu_top"><a href="#" style="padding: 0;">Selected Option Prices</a></span></li>
</ul>
</div> </td>
</tr>
</table>
<div id="main">
this is the main content area
<br><br>
</div>
</div>
</body>
</html>
===== This is the css file: Code:
#container
{
width: 850px;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
/* communities */
.menu1 {
width: 90px;
}
/* build on your own lot */
.menu2 {
width: 140px;
}
/* house plans */
.menu3 {
width: 95px;
}
/* available homes */
.menu4 {
width: 120px;
}
/* gallery */
.menu5 {
width: 65px;
}
/* features */
.menu6 {
width: 70px;
}
/* design center */
.menu7 {
width: 102px;
}
/* selected option prices */
.menu8 {
width: 135px;
}
#menu {
width: 100%;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
#menu ul ul li{
width: 120px;
background: #DDDDDD;
}
#menu a, #menu .menu_top {
font-size: 11px;
font-family: Verdana, helvetica, sans-serif;
display: block;
border-width: 0;
border-style: none;
border-color: #ccc #888 #555 #bbb;
margin: 0;
}
#menu .menu_top {
color: #fff;
text-align: center;
}
#menu a {
text-decoration: none;
padding: 3px 3px 4px 10px;
}
#menu a:hover {
color: #ffffff;
background: #8C8C8C;
}
#menu li {position: relative;}
#menu ul ul {
position: absolute;
z-index: 500;
}
#menu ul ul li {
background: #DDDDDD;
}
#menu ul ul li:hover a{
color: #fff;
background: #8C8C8C;
}
#menu ul ul a {
color: #000;
}
#menu ul ul a:active {
background: #8C8C8C;
}
#menu ul ul ul {
top: 0;
left: 100%;
}
#menu ul ul ul li {
background: #8C8C8C;
}
#menu ul ul ul a{
color: #fff;
}
#menu ul ul ul a:hover{
color: #fff;
background: #336699;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
/** end navbar css code **/
==== This is the other CSS file being used: Code:
body {
font-size: 100%; /* enable IE to resize em fonts */
behavior: url(csshover.htc); /* call hover behaviour file */
}
#menu ul li {
float: left; /* cure IE5.x "whitespace in lists" problem */
width: 100%;
}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
}
#menu a, #menu .menu_top {
font-size: 11px;
font-family: Verdana, helvetica, sans-serif;
/* if required use em's for IE as it won't resize pixels */
}
=== This is the .htc file: Code:
<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
* Pseudos - V1.30.050121 - hover & active
* ---------------------------------------------
* Peterned - http://www.xs4all.nl/~peterned/
* (c) 2005 - Peter Nederlof
*
* Credits - Arnoud Berendsen
* - Martin Reurings
* - Robert Hanson
*
* howto: body { behavior:url("csshover.htc"); }
* ---------------------------------------------
*/
var currentSheet, doc = window.document, activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'}
}
function parseStylesheets() {
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++)
parseStylesheet(sheets[i]);
}
function parseStylesheet(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
} catch(securityException){}
}
try {
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
} catch(securityException){}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;
var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
var affected = select.replace(/:hover.*$/, '');
var elements = getElementsBySelect(affected);
currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className, activators[pseudo]);
}
function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
node.attachEvent(events.on,
function() { node.className += ' ' + className; });
node.attachEvent(events.off,
function() { node.className =
node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i], nodes);
} return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var classname = (/\.([a-z0-9_-]+)/i).exec(select);
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
for(var i=0; i<elements.length; i++) {
result = tagName? elements[i].all.tags(tagName):elements[i].all;
for(var j=0; j<result.length; j++) {
node = result[j];
if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
classname[1] + '\\b').exec(node.className)))) continue;
nodes[nodes.length] = node;
}
} return nodes;
}
</script>
I know this is probably soooo not kosher, but this is where I'm at ... I have a star rating graphic that I got off the web that uses an HTML list, turned horizontally, to get the stars to light up when you hover over them. It took me ages to get it working, to customize it to my website's colors, and now it all works great. The only problem is I need it to appear centered in a table column, and no matter what I do with the css code I can't make it happen. I know I should probably be using divs and all, but I tried that, and ultimately decided tables is easier for this purpose. Anyway, if someone can forgive my sloppy, amateur ways and tell me how I can get this f-ing thing to center in my table column I would much appreciate it. Here's the css code: Code: /* star rating */
.star * {
float: right;
padding:0px;
margin:0px;
list-style:none;
}
ul.rating{
background:url(images/star8.jpg) bottom;
height:21px;
width:115px;
overflow:hidden;
position:relative;
}
ul.rating li{
display:inline
}
.rating a {
display:block;
width:23px;
height:21px;
float:right;
text-indent:-9999px;
position:relative;
}
.rating a:hover {
background:url(images/star8.jpg) center;
width:115px;
margin-left:-92px;
position:static;
}
.rating a:active {
background-position:top;
}
and here's the HTML code (in php format): Oops - won't let me send code because it contains URLs. Either way, it's a straight up table with three columns. Cheers. Julian Hello, I am a fan of css and use it all the time. My one and only one problem with it is centering an image in a column that has been floated right. I've tried numerous ways to do this, but none have worked. Usually I end up adding a 2 column table, fixing the right column with x px, then adding images in rows in the left table column. This really does not center the image for all screen sizes, but it does move the images to the left. Also, margin-right:xpx would do about the same thing. This long-winded explanation leads to my css question: Is there a way to center images in a column that has been floated right? Maybe I am over-looking the obvious. Regards, Lee Argh. Tried a number of variations on this probably simple task. Nonetheless: In this example how do I get the 'sidebar' to fill the vertical space of the container, and ensure the 'footer' remains positioned at the bottom (which it currently does) http://www.mandgweb.net/css_test/css_test.html Thank you Hi everyone! i have this mockup in fireworks for my personal site.. problem is... i cant put it together the way i like it using CSS here is my mockup and the slices ive made... http://www[dot]phpugph[dot]com/talk/index.php?action=dlattach;topic=8005.0;attach=1720;image im sorry for the link... i cant seem to post a proper one do u guys know how i should go about it? the middle column should be fixed width but the right and left column should be fluid thanx Having an odd rendering problem involving centering content in a fixed-width right hand column that lies within a fixed width centered master content div. Take a look at the template he http://www.ipfwcommunicator.org/devindex.php At first I tried to center the content using align="center" in the HTML markup, which I know is a no-no, so I'm not too sad it didn't work. I then tried {margin-left: auto; margin-right: auto;}, thinking it would work in IE as it does with tables, but it did not. Both of these attempts worked worked with most modern browsers (Moz/Firefox/Safari/NN7) but failed on MSIE5/Mac and IE6/Win. Nice and compliant, and I would be happy in a perfect world, but alas, 90% of my readers use a (vastly) imperfect browser. I decided to get a bit more professional and utilize CSS positioning, setting the DIVs that hold the content boxes (i.e., Weather/Search/etc.) as {position: relative; left: 15px;}This also worked in most browsers, but oddly enough on IE5 Mac (and assume IE6 win although I didn't have a chance to test) the boxes centered but the tables inside the weather/search boxes that allow for cross-platform formating jutted out the side. Lastly, and this is the current solution, since the column is fixed width and the boxes are fixed width, I used the "ice" solution of dividing the remaining margin by two, and setting margin-left: equal to that. In this case: {margin-left: 15px;} Oddly enough this works FINE on everything, even IE5/Mac, but doesn't work on IE6/Windows, which instead results in what appears to be 5 or 6px more than the defined 15px. Compare here between Firefox and IE6 and you'll see it. And CSS is here So the question: What IS the best way to center up those boxes in that column? This is my first major CSS undertaking, having worked with nested tables up until now, so any pointers on my bad markup will be gladly accepted Thanks in advance, Aiden I know a lot of people have made posts about vertical aligning but nearly all were involving text. I'm trying to vertically align a small image, but every time i do it within the img tag it screws up the adjacent text on IE and only IE. I know it has to do with how vertical align is supposed to be used, specific blocks or inline or something. How would I go about vertically aligning that small arrow image on the top properly. http://chics.onivertneb.com/align.htm Hi. I'm new here as well with cSS. Hope someone can explain this to me...darn it...cSS can be frustrating. Here is my CSS code for an external style sheet: #header { background-image: url(images/penpal-inner.jpg); height: 168px; background-repeat: no-repeat; background-position: center top; border-bottom: 20px blue solid; width: 640px;} Here is the xhmtl code: <div id="header"></div> Why won't my background image center horizontally? It stays to the left of the page. If I take out the width (640px), it will center, but than I have a problem with the bottom border. I want the border to be the same width as the image but it is the width of the entire page. So with the width (640 px) in the #header rule, I have the border the same length as the image, but not centered. Without the width, the image centers but the border is now longer than the image. how do i get the image to center on the page horizontally and still keep the bottom border the same width as the image? Help please. thanks Steve. Thanks for taking the time to read my question. I am having problems centering my navigation images below the event calendar on my page (link below). I think I know why, but can't get around it. In my general css page (http://www.pierced.ca/Pierced.css) I have the line Code: img {float:left; margin:0; padding:0;}
. I don't know what it does exactly, someone on this forum told me to put it on my page. Without it, my top margins on all my pages don't work. I think it is this code that is affecting my nav images. without the Code: td.centercalnav {
padding: 1% 0 0 44%;
}
which is in (http://www.pierced.ca/PiercedEvents.css) they center to the page, not the table row. With the current code it looks kind of ok in Fire Fox, but worse in IE. What can I do to center the nav images under the calendar. Thanks again, Brad http://www.pierced.ca/pierced-events.htm I've been having problems trying to vertically align an image within a div. I'm trying to align it to the bottom of the div. CSS as follows: #col1r1 { float: left; height: 40%; width: 33%; display: inline; text-align: right; } div#col1r1 div#image { bottom: 66%; left: 60%; color: black; vertical-align: bottom; } div#col1r1 div img.pagegr { width: 60%; } HTML: <div id="col1r1"> <div id="image"><img class="pagegr" src="images/blah.gif" alt=""></div> </div> Unfortunately this code will be appearing on multiple pages with a different image on each page - some portrait, some landscape, and of varying sizes - otherwise, I would have added some blank space to the top of image itself to make it fit and sit nicely aligned with the bottom of the box. I'd really appreciate some help. Thanks in advance. |
|||||||