|
CSS - Centering Divs In Nav Column Reliably Cross-platform
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 Similar TutorialsIs there any way to center a <div> block itself, not the text in it? Using this code:
Code: #block{
padding:2px;
margin-left:auto;
margin-right:auto;
width: 480px;
}
(which I am currently using) centers it in Firefox, but not IE. Also the code which adds a rollover effect to the links in the menu works in Firefox but not IE. Code: #menu li:hover{
background-color:#369;
}
The site's current URL is here, because my webhost's disk is full, and they are having problems with PHP scripts not working. Right up front, here's the CSS/markup I am concerned about: http://www.triple-bypass.net/testpage.htm http://www.triple-bypass.net/testpage.css It consists of a simple div with a colored background, and a couple anchor elements sitting on top of it. The anchors are treated as blocks, making this a nice little menu. The problem is that multiple platforms are displaying the anchor boxes in different places. Right now, it looks fine in Firefox 1.5.0.6 on WindowsXP. The anchor boxes stick up about 2 pixels in Firefox 1.5.0.6 on Mac OSX Tiger. And the anchor boxes stick down about 3 pixels in Firefox 1.5.0.6 on Linux. Here's a screenshot from Firefox on Linux: URL (Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.0.6) Gecko/20060808 Fedora/1.5.0.6-2.fc5 Firefox/1.5.0.6 pango-text) My guess is that each platform is setting a different baseline for the anchor text, and growing the padding box around it from there. The "top" value that works on Windows, therefore, does not work on OSX or Linux. The simplest 'solution' would seem to be "Forget Linux and OSX, they're of no concern in the Windows world". However, as an alternative OS advocate, this is something I cannot do. I'm not too concerned about supporting other browsers, but supporting one browser across platforms is important to me. So has anyone had any experience with this? Is there a way to fix it? Or a hack to get around it? HTML Code: <div id="nav"> <ul> <li class="first"><a title="#" href="#">About Company</a></li> <li><a title="#" href="#">RRR News</a></li> <li><a title="#" href="#">Apartment Communities</a></li> <li><a title="#" href="#">Commercial Properties</a></li> <li><a title="#" href="#">Current Developments</a></li> <li class="last"><a title="#" href="#">Resident Login</a></li> </ul> </div> CSS Code: /*** Main Navigation Styling ***/
#nav {
border-top: 1px solid #897409;
border-bottom: 1px solid #897409;
background:#fff url(../images/nav_off_back.jpg) repeat-x center;
height: 29px;
}
#nav ul{
font-size: 17px;
margin:0;
float:left;
text-align:center;
width:100%;
}
#nav li {
display:inline;
margin:0;
float:left;
list-style: none;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
min-height: 27px;
height: 27px;
line-height:27px;
padding:1px 0;
}
#nav li.first {
background:url(../images/nav_bars.gif) left center no-repeat;
padding-left:2px;
_margin-left:24px;
}
#nav li.first a,
#nav li.first a:link{
border-left:0;
}
#nav li.last {
border-right:1px solid #fff;
}
#nav li a {
color: #000;
text-decoration: none;
text-align:center;
min-height: 27px;
height:27px;
padding:6px 17px 6px 17px;
border-right:1px solid #b49f36;
border-left:1px solid #fff;
}
#nav li a:hover {
text-align:center;
background: url(../images/nav_on_back.jpg) repeat-y center;
color:#fff;
min-height:27px;
height: 27px;
padding:6px 17px 6px 17px;
}
This code produces a centered horizontal navigation menu in FireFox Mac and IE6 PC. However, in FireFox PC the whole menu is shifted a bit to the right off-center (about 15 px). In IE7 PC, the menu sits on the left and is not centered at all. I am willing to use a browser sniffer to fix the IE7 problem, but I'm not sure what to do for Firefox. The PC and Mac versions of Firefox usually play nice, but not this time. I'd rather not use both a platform AND browser sniffer, but I'm running out of ideas. The addition of a pixel-specific line-height for #nav li { helped some earlier issues, but did not fix them all. Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. With my limited knowledge of css, html, etc. I can mold my page to look just the way I desire on my given screen size (1280x1024) and browser (mozilla) but can not seem to get a fix for all variables (1024x768, etc.). I've tried containing divs & percents and a few other solutions to no avail. Just want to know if you guys know any quickfix or a recommended strategy in tackling this issue going further. id post code here, but the site wont allow it due to external links. so please check it out here and let me know http://needaputer.com css is at same url just located at .com /css/styles.css my goal: -- auto center content on page horizontally - (based on screen size - cross browser compatible) -- make sure header and footers are absolute top and bottom of page always (based on page size and cross-browser compatible) -- toggle "page zoom" for entire page via buttons (if needed and possible to adjust content for each screen size) Ok, so I've having some problems getting a webpage I'm designing looking good (I'm better at the "behind the scenes" coding, not so much the visual part). Anyway, I'm having some problems in Firefox and even more in IE, so here goes. In Firefox I want it to extend all the way to the bottom of the page, I tried adding "min-height:100%" to the container's styles, but that doesn't work. Can I not use a percent for the min-height? If I directly declare the height to be 100%, then the body can expand outside of the container rather than the container expanding with it. I also want to make sure that the body is always completely filling the container. The page in question is he http://www.magicsoftinc.com/michigans_edition/ My styles are below and you can view the page source or use Firebug to see the elements I'm talking about Code: a:link {
color:black;
text-decoration:underline;
}
a:active {
color:black;
text-decoration:none;
}
a:hover {
color:black;
text-decoration:none;
}
a:visited {
color:black;
text-decoration:underline;
}
body {
background-color:#BBCCFF;
font-family:Calibri, Arial, Helvetica, sans-serif;
margin-bottom:0;
margin-top:0;
}
div {
border:0px solid #FF0000;
border-top-width:0;
}
img {
border-width:0;
}
.even{
background-color:#FFCCBB;
}
.odd {
background-color:#BBCCFF;
}
.preload{
display:none;
left:-9001px;
position:absolute;
top:-9001px;
}
#background {
height:100%;
left:0;
margin:0;
overflow:hidden;
padding:0;
position:absolute;
top:0;
width:100%;
z-index:-9001;
}
#backgroundLeft{
position:fixed;
top:0;
left:0;
height:100%;
}
#backgroundRight{
position:fixed;
top:0;
right:0;
height:100%;
}
#body {
background-color:#FFFFFF;
color:#000000;
min-height:250px;
}
#container {
border:1px solid black;
border-bottom-width:0;
border-top-width:0;
height:100%;
margin:0 auto 0 auto;
min-height:100%;
min-width:760px;
width:95%;
}
#diggThis {
background-color:transparent;
margin-left:-27px;
z-index:-9001;
}
#footer {
background-color:#FFFFFF;
text-align:center;
font-size:small;
}
#header {
background-color:#000000;
height:271px;
}
#leftMenu {
background-color:#BBCCFF;
float:left;
margin-right:4px;
padding:4px;
width:260px;
}
#main {
min-width:500px;
padding:4px;
}
#main .title {
font-size:xx-large;
font-weight:bold;
}
#menu {
background-image:url("images/menuGradient.png");
background-repeat:repeat-x;
border-top:1px solid #7E7E7E;
border-bottom:1px solid #4E4E4E;
color:#FFFFFF;
font-weight:900;
height:35px;
position:relative;
top:-35px;
}
#menu a:link {
color:white;
text-decoration:underline;
}
#menu a:active {
color:white;
text-decoration:none;
}
#menu a:hover {
color:white;
text-decoration:none;
}
#menu a:visited {
color:white;
text-decoration:underline;
}
#menu .button {
background-image:url("images/menuButtonUp_blue.png");
background-position:center;
background-repeat:no-repeat;
color:#FFFFFF;
font-weight:600;
height:35px;
overflow:hidden;
padding:0;
text-align:center;
width:106px;
}
#menu table {
padding:0;
text-align:center;
width:100%;
}
#menu tr {
padding:0;
}
#userPanel {
position:absolute;
right:3%;
top:136px;
width:200px;
height:100px;
background-color:#BBCCFF;
}
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 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 geniuses. I know this is likely a very silly question. I am a designer looking to move closer to the 21st century of web development. how do I keep a group of divs generated in the form of a page as I have set up at: http://greentypeoftube.com/div/home1.html basically I want the whole group to be centered regardless of browser window. I've tried a bunch of things, including putting it all in a container, but it just bleeds over. please to help me someone, I appear to be obsessed and am not performing my duties here chained to the desk. - I have another question which may be better separated to another ? but I'll also add it here just in case someone knows both answers... in this same situation, is there a way to allow for the content window to automatically place scrollbars such as if I used an I-frame? thankyou for the genius of help. p I'm having a little problem with centering divs: I have a dynamic page that displays items. Each item has it's own div containing an image and a title. I want these divs to be centered but also to drop onto multiple lines if necessary, for example: There is room for 4 items per row within the container div, so one item would be centered, two items would be centered, and so on, but 5 items would have 4 divs on the top row and one div centered underneath: 1 item: [div] 2 items: [div][div] 4 items: [div][div][div][div] 5 items: [div][div][div][div] [div] 10 items: [div][div][div][div] [div][div][div][div] [div][div] and so on. I can get this to work by using float to automatically drop the next 4 onto the next row, but is there a 'center' attribute or technique I could use to keeps these divs centered? I hope this makes sense to you all!! Hi, I'm new here. I wasn't sure if this was a javascript problem or a css (I'm thinking it's probably a css problem). I've been using css for about a year, all very straight forward until my friend asked me to make some changes to his site Bascially what he wanted me to do is 1. vertically center the entire site to the browser window, and 2. also vertically center the title and caption for his photogallery Below is a link to the site I'm working on Code: http://theo.mypreview.co.uk/gallery/test I added some javascript that I found searching on google which isn't working quite right. This is the javascript code Code: (function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = (ph - ah) / 2;
$(this).css('margin-top', mh);
});
};
})(jQuery);
If you follow the link posted to the site I'm working on you should see 3 thumbnails, 1st thumbnail is a video which is my main struggle to center vertically. The other 2 thumbnails are for images. If you click on one of the thumbnails for a picture you will see how the title and caption align vertically (not quite center)* For some reason the div containing the main image content ignores the height so the margins are too big. *Video is posted within the span class called "phototext" which is where the descriptions for the images appears. side note - this javascript seems stop IE6 and 7 from loading the page Thanks Larss Are there any recommended techniques for centering a DIV in a page regardless of the screen size? I'd like to have an image centered on the page, and several images positioned over it. I envision the main image and the other images positioned relative to the top left of the main DIV, which is always centered on the page... I'm trying to create a gallery, composed of an image and description divs (like so); pic1 What I want is to wrap these divs with a bordered div, that will accomodate as many of them per row as will fit the width of the browser, but also centering the wrapper like thus examples: pic2 This is what I have so far: Code:
<html>
<head>
<title></title>
<meta http-equiv=content-type content="text/html; charset=iso-8859-1">
<style>
html, body
{
margin: 0px;
}
div#item_container_box
{
position: relative;
width: 100%;
left: 0;
top: 0px;
}
#item_container
{
margin: 10px;
border: solid 1px #000;
padding: 2px 0px 2px 0px;
}
html>body #item_container
{
padding: 2px;
}
div.spacer
{
width: 200px;
background-color: #333;
clear: both;
}
div.center
{
width: 50%;
}
div.item
{
float: left;
text-align: center;
/* float: left; */
width: 200px;
height: auto;
margin: 2px;
}
div.data
{
float: left;
width: 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<div align=center>
<div id="item_container_box">
<div id="item_container" align="center">
<div class="spacer">.</div>
<div class="center"></div>
<div class="item"><img src="_data/images/records/1.jpg"><div class="data">Item 1</div></div>
<div class="item"><img src="_data/images/records/2.jpg"><div class="data">Item 2</div></div>
<div class="item"><img src="_data/images/records/3.jpg"><div class="data">Item 3</div></div>
<div class="item"><img src="_data/images/records/4.jpg"><div class="data">Item 4</div></div>
<div class="item"><img src="_data/images/records/5.jpg"><div class="data">Item 5</div></div>
<div class="item"><img src="_data/images/records/6.jpg"><div class="data">Item 6</div></div>
<div class="center"></div>
<div class="spacer">.</div>
</div>
</div>
</div>
</body>
</html>
Some help on this, would be very much appreciated. Hi, I'm building a table -like structure with divs and spans. When the columns have long text, the text overflows a bit funnily, so that the text in right column continues from left column. I have example at: http://www.viewinteractive.fi/tests/div.htm The page was validated before I put the code there within the textarea. The important part is he Code:
<html>
<head>
<style type="text/css">
div.r1 {
background-color: #ccc;
width: 400px;
}
div.r2 {
background-color: #eee;
width: 400px;
}
span.s1 {
color: #700;
width: 150px;
border-right: 2px solid black;
float: left;
}
span.s2 {
color: #070;
}
div.sep {clear: both; }
</style>
</head>
<body>
<div class="r1">
<span class="s1"> Sometimes this stuff get's quite long. </span>
<span class="s2"> And it is not a problem, if both columns are long.</span>
</div>
<div class="sep"></div>
<div class="r2">
<span class="s1"> Now if... </span>
<span class="s2"> ... only right column is long, the page looks a bit funky. </span>
</div>
<div class="sep"></div>
<div class="r1">
<span class="s1"> If left is long, it looks ok in IE, but not Firefox. </span>
<span class="s2"> And right is short.</span>
</div>
</body></html>
I'd rather do this with tables, but that is not an option atm. Any helps? t.j Hi all, Just made a tables site runs oke on a pc but not on a mac. So now i want to create a mac-css. How can i include the right css-file based on an user platform????? Javascript or php?? |
|||||||