|
CSS - 2 Column Table Structure With Divs & Span
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 Similar TutorialsHi I am trying to make a table to display some stuff within a fix sized window. I want to have 5 columns of fixed width and one column that spans the rest of the remaining space. The Idea is to allow the widths of the first 5 columns to be changed by a script and having the last one adapting as needed... html Code: Original - html Code <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div> <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div> css Code: Original - css Code div.container { height: 400px; width: 800px; overflow: scroll; } table { width: 100%; } td { border-style: solid; border-color: silver; border-width: 0px; padding: 1px 3px; } th { border-style: outset; border-color: silver; border-width: 2px; background: silver; padding: 1px 3px; }
It really does fill the entire space but the last column crushes all the other into their minimal width resulting in linebreaks between words inside the cells... Please help me I am trying to create a table where I could toggle visibility of certain rows by style="display: block" and style="display: none" It works well in Internet Explorer. In Firefox the following table structure displays rows "First Name" and "Last Name" on left side. Why? I would like it positioned exactly above "State" row, like it is in IE. How do I do it? Code: <table width="100%"> <tr align="left" id="f_name_holder" style="display: block"><td width="30%" align="right">First Name:</td><td>Mike</td></tr> <tr align="left" id="l_name_holder" style="display: block"><td width="30%" align="right">Last Name:</td><td>Rourke</td></tr> <tr align="left"><td width="30%" align="right">State:</td><td>Alabama</td></tr> <tr><td width="30%"></td><td colspan="1"><input type="submit" name="submit" value="Submit" /></td></tr> </table> Thank you. Hi guys I'm having a little problem with a <table> based website Please check the following image Each circle in the image attached is a separate image file, and I must make each image to be inside design. My problem is that the images doesn't fit in the <td> area, so well... Is there a way I can make the images float over the table ? I mean, a decent way to do this without having to convert entire design form <tables> to <divs> (PS: I'm still learning tableless designs) Thanks a lot in advance Hi, http://www.dudley.nhs.uk/search.asp has a two column effect. The CSS for it is he http://www.dudley.nhs.uk/css/screen.css I was wondering why if there is a table in the right hand column with a width percentage over 77% there is some horizontal scrolling? This happens in IE. Any help would be greatly appreciated. Thanks. Janusz Jasinski 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 Hi I'm struggeling with the following: I have some span elements inside a td. If I apply padding to a span then the padding is flowing outside the td (above and below the borders of the td). Why does that happen and is there a way to make the td to autogrow to fit all the span's inside? Se example code below Code: <table border="0" cellpadding="0" cellspacing="0" align="center" style="width:300px; margin-top:50px;"> <tr> <td style="background-color:gray; text-align:center; border:1px solid black;"> <span style="margin-right:20px;">First</span> <span style="margin-right:20px;">1</span> <span style="margin-right:20px;">2</span> <span style="margin-right:20px; background-color:orange; padding:10px;">3</span> <span style="margin-right:20px;">4</span> <span style="margin-right:20px;">5</span> <span style="">Last</span> </td> </tr> </table> ******* UPDATE ******* I found this link today: http://css-discuss.incutio.com/?page=FormattingContexts which says (among other things): ************************* Only one thing impacts the vertical space between inline elements: the line height. Normally, the line height is based upon the line height for the text in that line, or the height/padding/border/margin of any replaced items. The element on a line with the largest line height or replaced height is the one to define the vertical space that line takes up. Height, padding, border or margins on text do not impact the line height or the container height. Instead, borders, padding and margins overlap from line to line. If you want to give an inline text element some padding and border, make sure you give it some extra line height, too, or else it will overlap with whatever else is above or below it. ************************* So does that rule mean that I have no way to make my TD autogrow in relation to the padding applied to the SPAN in the example above? Is there any working workarounds for this...? I want to lock columns as shown at http://web.tampabay.rr.com/bmerkey/...column-csv.html Unfortunately that only works in IE. I've had a crack at doing it with firefox and it's give me grief. Any ideas? I'm creating a site with a few div layers. Like so: Code: <div id="mainDiv"> <div id="topLinks"><a href="##" class="linkStyle">Calendar</a> | <a href="##" class="linkStyle">Site Map</a> | <a href="##" class="linkStyle">Home</a></div> <div id="siteContent"> <div id="mainContent"> <div id="header"> <a href="##"><img src="img/logo.gif" width="131" height="30" border="0" alt="Logo" title="Logo" style="padding: 10px 0px 12px 19px;" /></a> <div id="orangeNav">Top Navigation</div> </div> <div id="content"> ****** Need left navigation and right content here**** </div> </div> <div id="bottomNav">Bottom Navigation Here</div> <div id="footer">Footer Info here</div> </div> </div> The problem is with the bold green part. I'm trying to create a left-side navigation with content to the left. If I create a table, I'm done and it works. Of course, I'm trying not to use a table to set up the design. The the other div tags are all position: relative. If I add two div tags that are position: absolute and place them, the text put in the absolute tags are not affecting the rest of the page and the footer either covers or gets covered by the absolute tags. However, I can't get it to work with relative div tags. I'm a beginner so I'm struggling. I know I've done it before, but it's just not working this time. In case you need it, here's the style sheet: Code: body {
background-color: #1D1F12;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* The whole container for the page */
#mainDiv {
position: relative;
top: 0px;
left: 0px;
width: 767px;
padding: 7px 0px 25px 13px;
}
/* START: Calendar | Site Map | Home link and related styles */
#topLinks {
position: relative;
width: 757px;
padding-bottom: 8px;
text-align: right;
font-size: 10px;
color: #999999;
}
#topLinks .linkStyle {
font-size: 10px;
color: #999999;
text-decoration: none;
}
#topLinks .linkStyle:hover {
text-decoration: underline;
}
/* END: Calendar | Site Map | Home link and related styles */
/* START: items within the lighter background block */
#siteContent {
position: relative;
width: 741px;
padding: 14px 13px 35px 13px;
background-color: #393D23;
}
#mainContent {
position: relative;
border: 3px solid #ffffff;
}
#header {
position: relative;
height: 104px;
background-image: url(img/bg-header.gif);
border-bottom: 4px solid #FFF1B8;
}
#orangeNav {
position: relative;
height: 25px;
background-color: #993300;
border-top: 1px solid #ffffff;
border-bottom: 3px solid #ffffff;
text-align: center;
vertical-align: middle;
}
#orangeNav .navImg {
padding: 4px 8px 0px 8px;
}
#content {
position: relative;
background-image: url(img/bg-content.gif);
padding: 0px 0px 25px 0px;
}
#leftSide{
position: relative;
left: 9px;
top: 12px;
width: 150px;
}
#nav {
position: relative;
width: 150px;
border: 1px solid #A8A81F;
background-color: #E0DD92;
padding-top: 5px;
}
#nav .navItem {
padding: 5px 8px 5px 8px;
}
#nav .navItem:hover {
background-color: #E9E6B0;
}
#nav .link {
font-size: 10px;
color: #393D23;
text-decoration: none;
}
#nav .link {
font-size: 10px;
color: #393D23;
text-decoration: none;
}
#nav .link:hover {
text-decoration: underline;
}
#rightSide{
position: relative;
left: 200px;
top: 12px;
width: 520px;
font-size: 11px;
border: 1px solid red;
}
#bottomNav {
position: relative;
background-color: #989A8C;
padding: 2px 25px 2px 0px;
text-align: right;
}
/* START: footer area and related styles */
#footer {
position: relative;
padding: 20px 0px 0px 0px;
color: #BFC1B8;
font-size: 10px;
line-height: 14px;
text-align: center;
}
#footer .linkStyle {
font-size: 10px;
color: #BFC1B8;
text-decoration: none;
}
#footer .linkStyle:hover {
text-decoration: underline;
}
Edited to add: I have included the div tags for the left and right portions: #leftSide and #rightSide 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 Hi, I am very new to CSS and very confused. I wrote my site about 10 years ago using tables and have been working very hard the last few weeks updating the code to CSS and XHTML. I have a navigation page that was made as a table using an image to replace the bullet and act as the link. I am having a terrible time rewriting the blasted thing without using a table. The columns will not line up (I suppose I do not understand how to use the negative margin properly) and when I try to use the clear: left; code so my bullet image lays properly it will only clear the bottom of the previous column so there is a giant gap in between the links. I have no idea what I am doing. Here is a link to what the page looks like using the old code. This page will NOT validate, the code is old and depreciated but if you have a peek you can se what I am trying to achieve. www.medeaslair.net/myths.html. Here is what I wrote but I am afraid it is very long. I apologize in advance for how bad it is. CSS 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=iso-8859-1" />
<title>Tableless Three Column List</title>
<style type="text/css">
<!--
body {
color: black;
padding-top: 45px;
background-image: url("images/tan_marble3.jpg");
text-align:center;
font-family: papyrus;
font-weight: bold;
font-size: 15px;
}
#container {
width: 750px;
margin: 0 auto;
text-align:left;
}
li.col1a, li.col1b, li.col1c, li.col1d, li.col1e, li.col1f, li.col1g, li.col1h, li.col1i, li.col1j, li.col1k, li.col1l, li.col1m, li.col1n, li.col1o, li.col1p, li.col1q, li.col1r, li.col1s, li.col1t, li.col1u, li.col1v {
margin-left: 0;
}
li.col2a, li.col2b, li.col2c, li.col2d, li.col2e, li.col2f, li.col2g, li.col2h, li.col2i, li.col2j, li.col2k, li.col2l, li.col2m, li.col2n, li.col2o, li.col2p, li.col2q, li.col2r, li.col2s, li.col2t, li.col2u, li.col2v, li.col2w, li.col2x, li.col2y, li.col2z {
margin-left: 18em;
}
li.col3a, li.col3b, li.col3c, li.col3d, li.col3e, li.col3f, li.col3g, li.col3h, li.col3i, li.col3j, li.col3k, li.col3l, li.col3m, li.col3n, li.col3o, li.col3p, li.col3q, li.col3r, li.col3s, li.col3t {
margin-left: 34em;
}
.coltopper {
margin-top: -51em;
}
#listyles {
display: block;
padding-top: 45px;
margin: 0;
width: 100%;
list-style-type: none;
}
a:link {
color: #06f;
text-decoration: none;
}
a:hover {
color:#f00;
text-decoration: none;
}
image {
border-style: none;
}
li.col2a, li.col3a {
margin-top: -51em;
}
#listyles li {
line-height: 1.5em;
}
h1 {
text-align: center;
}
#email {
text-align: center;
text-decoration: none;
padding-top: 35px;
border: 0;
}
-->
</style>
</head>
The HTML Code: <body> <div id="container"> <img src="images/grapes-l.gif" style="float: left; width: 70px; height: 85px;" alt="Grapes" title="Grapes" /> <img src="images/grapestran.gif" style="float: right; width: 70px; height: 85px;" alt="Greek Man" title="Greek Man" /> <h1>Tales of Greek Mythology</h1> <img src="images/bar66.gif" style="float: left; padding-left: 100px; width: 420px;" alt="Vine" title="Vine" /> <br /> <ul id="listyles"> <li class="col1a"><u>Gods and Goddesses</u></li> <li class="col1b" style="padding-top: 10px;"><a href="aphrodite.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Aphrodite</li> <li class="col1c" style="clear: left;"><a href="apollo.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Apollo</li> <li class="col1d" style="clear: left;"><a href="artemis.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none:" alt="grapes""></a>Artemis</li> <li class="col1e" style="clear: left;"><a href="athena.html"><img src="images/grape.gif" style="float: left; text-aligh: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Athena</li> <li class="col1f" style="clear: left;"><a href="dionysus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Dionysus</li> <li class="col1g" style="clear: left;"><a href="hades.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hades</li> <li class="col1h" style="clear: left;"><a href="hera.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hera</li> <li class="col1i" style="clear: left;"><a href="hermes.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hermes</li> <li class="col1j" style="clear: left;"><a href="poseidon.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Poseidon</li> <li class="col1k" style="clear: left;"><a href="zeus.html"><img src="images/grape.gif" style="float: left; text-aligh: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Zeus</li> <li class="col1l" style="padding-top: 30px;"><u>Tales of Love and Woe</u></li> <li class="col1m" style="padding-top: 10px;"><a href="hermes.html#baucis"> <img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Baucis and Philemon</li> <li class="col1n" style="clear: left;"><a href="cupid.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Cupid and Psyche</li> <li class="col1o" style="clear: left;"><a href="pan.html#echo"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Echo and Narcissus</li> <li class="col1p" style="clear: left;"><a href="pan.html#endymion"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Endymion</li> <li class="col1q" style="clear: left;"><a href="artemis.html#orion"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Orion</li> <li class="col1r" style="clear: left;"><a href="orpheus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Orpheus and Eurydice</li> <li class="col1s" style="padding: 30px;"><u>Giants and Beasts</u></li> <li class="col1t"><a href="artemis.html#otus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Otus and Ephialtes</li> <li class="col1u" style="clear: left;"><a href="minotaur.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;"alt="grapes"></a>The Minotaur</li> <li class="col1v" style="clear: left;"><a href="cyclopes.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>The Cyclopes</li> <li class="col2a coltopper"><u>Men and Heroes</u></li> <li class="col2b" style="padding-top: 10px;"><a href="atreus.html#agamemnon"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Agamemnon</li> <li class="col2c" style="clear: left;"><a href="atreus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;"></a>Atreus</li> <li class="col2d" style="clear: left;"><a href="daedalus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Daedalus and Icarus</li> <li class="col2e" style="clear: left;"><a href="athena.html#erichthonius"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Erichthonius</li> <li class="col2f" style="clear: left;"><a href="heracles.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Heracles</li> <li class="col2g" style="clear: left;"><a href="apollo.html#hyacinthus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Hyacinthus</li> <li class="col2h" style="clear: left;"><a href="hera.html#ixion"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Ixion</li> <li class="col2i" style="clear: left;"><a href="atreus.html#orestes"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Orestes</li> <li class="col2j" style="clear: left;"><a href="dionysus.html#pentheus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Pentheus</li> <li class="col2k" style="clear: left;"><a href="perseus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Perseus</li> <li class="col2l" style="clear: left;"><a href="phrixus.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Phrixus <li class="col2m" style="clear: left;"><a href="pandora.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Prometheus</li> <li class="col2n" style="clear: left;"><a href="hades.html#sisyphus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Sisyphus</li> <li class="col2o" style="clear: left;"><a href="atreus.html#tantalus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Tantalus</li> <li class="col2p" style="padding-top: 30px;"><u>Tales of the Sea</u></li> <li class="col2q" style="padding-top: 10px;"><a href="sea.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Sea Myths</li> <li class="col2r" style="clear: left;"><a href="circe.html#glaucus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Glaucus and Scylla</li> <li class="col2s" style="clear: left;"><a href="sea.html#nereus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Nereus</li> <li class="col2t" style="clear: left;"><a href="sea.html#sirens"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>The Sirens</li> <li class="col2u" style="clear: left;"><a href="sea.html#triton"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Triton</li> <li class="col2v" style="padding-top: 30px;"><u>Tales of Interest</u></li> <li class="col2w" style="padding-top: 10px;"><a href="garden.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: 4px;" alt="grapes"></a>Mythic Garden</li> <li class="col2x" style="clear: left;"><a href="samhain.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Blessed Samhain</li> <li class="col2y" style="clear: left;"><a href="thor.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Thor</li> <li class="col2z" style="clear: left;"><a href="links.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Links and Credits</li> <li class="col3a coltopper"><u>Women and Witches</u></li> <li class="col3b" style="padding-top: 10px;"><a href="heracles.html#alcmene"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Alcmene</li> <li class="col3c" style="clear: left;"><a href="athena.html#arachne"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Arachne</li> <li class="col3d" style="clear: left;"><a href="circe.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Circe</li> <li class="col3e" style="clear: left;"><a href="dionysus.html#erigone"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Erigone</li> <li class="col3f" style="clear: left;"><a href="zeus.html#europa"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Europa</li> <li class="col3g" style="clear: left;"><a href="zeus.html#io"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Io</li> <li class="col3h" style="clear: left;"><a href="zeus.html#leda"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Leda</li> <li class="col3h" style="clear: left;"><a href="leto.html"><img src="images/grape.gif" style="float: left; text-align: middle: padding-right: 4px; border-style: none;" alt="grapes"></a>Leto</li> <li class="col3h" style="clear: left;"><a href="medea.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Medea</li> <li class="col3i" style="clear: left;"><a href="leto.html#niobe"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Niobe <li class="col3j" style="clear: left;"><a href="pandora.html#pandora"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Pandora</li> <li class="col3k" style="clear: left;"><a href="persephone.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Persephone</li> <li class="col3l" style="clear: left;"><a href="dionysus.html#semele"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Semele</li> <li class="col3m" style="clear: left;"><a href="pan.html#syrinx"><img src="images/grape.gif" style="float: left; text-alogn: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Syrinx</li> <li class="col3n" style="padding-top: 30px;"><u>Satyrs and Centaurs</u></li> <li class="col3o" style="padding-top: 10px;"><a href="chiron.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Chiron</li> <li class="col3p" style="clear: left;"><a href="dionysus.html#midas"><img src="images/grape.gif" style="float: left; text-align: middle: padding-right: 4px; border-style: none;" alt="grapes"></a>King Midas</li> <li class="col3q" style="clear: left;"><a href="apollo.html#marsyas"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Marsyas</li> <li class="col3r" style="clear: left;"><a href="chiron.html#nessus"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Nessus</li> <li class="col3s" style="clear: left;"><a href="pan.html"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Pan <li class="col3t" style="clear: left;"><a href="chiron.html#peirithous"><img src="images/grape.gif" style="float: left; text-align: middle; padding-right: 4px; border-style: none;" alt="grapes"></a>Peirithous</li> </ul> </div> <!-- end of container div --> </body> </html> OK...thbbt. Situation 1 (the one that works as I want) Code: <table style="width: 100%">
<tr>
<td style="width: 15em">Column 1</td>
<td>Column 2</td>
</tr>
</table>
In Situation 1, the second column expands to be all of the remaining width. This is good. Situation 2 Code: <table style="width: 100%">
<tr>
<td style="width: 15em">Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</table>
In Situation 2, column 2 and 3 share the remaining space. I want column 2 to take no more than exactly the space it needs. I want column 3 to expand to take all the remaining space. The only way I've found that (sorta) works is to actually use the old HTML width="" attribute and make it a percentage that's impossible. If you make it 95% or something, then all the other columns squeeze down pretty far. The issue with this approach is that it ignores the style width of the first column and just crushes it as much as possible. Anyone have an idea? Thanks Tim right guys...this one is a bit backwards. I have a table as follows: Code: <table height=100% wieght=100 cellspacing=0 cellpadding=0> <tr> <td width=50%></td> <td width=760px></td> <td width=50%></td> </tr> </table> For obvious validation reasons, i need to convert this to CSS but keep the 100% height. Example of it: http://www.ridobusinesscentre.org.uk All help is welcomed. Hi, What is the best way achieve this using divs instead of a table. I have done it but it was such a long winded method. I've been going round in circles: Code:
<table>
<tr>
<td align="left">Stuff 1</td>
<td align="center">Stuff 2</td>
<td align="right">Stuff 3</td>
</tr>
</table>
Thanks in advance, and apologies if I look like a dumbass. Hi I have a problem with tables and divs consider this table and divs: <TABLE> <TR> <TD> <DIV STYLE='hieght:30px'> text </DIV> <DIV STYLE='position:relative;top:-30px;height:30px'> text </DIV> </TD> </TR> </TABLE> if I don't put position:relative;top:-30px; inside the second div the height of table would be around 60px (you say) as expected but when I put position:relative;top:-30px;, I would expected to have my table shrinks to 30px not the same 60px because I put two divs on the top of each other. Obviously for one reason or another my assumption isn't correct. So how do I amend the code to get a correct height of table? Perhaps I can use tables in this way? Here is the relevant HTML code: <table> <tr> <td> <div style="float:left;"> <div class="middle"><div class="r"><div class="l"> <a id="gridtitle" href="javascript:void(0)" onclick="reload()"></a> </div></div></div> <div style="width: 200px;"> <a href="#" onclick="addheader()"><img border="0" src="tab_new_header.png" alt="Delete this grid"/></a> <a href="#" onclick="addfooter()"><img border="0" srctab_new_footer.png" alt="Delete this grid"/></a> </div> </div> <div style="float:right;"> <a href="#" onclick="javascript:toggleLayer('newgrid');"><img border="0" src="button_add.png" alt="Add a grid"/></a> <a href="#" onclick="deleteGrid()"><img border="0" src="button_delete.png" alt="Delete this grid"/></a> </div> </td> </tr> <tr> <td> <div id="gridbox3" class="gridbox" width="870px" height="600px" style="background-color:white;"></div> </td> </tr> </table> And the relevant CSS code [which just sets the background of the tab]: .l {background: url(../../datadir/client/images/billinggrid/name_sidebg1.png) 0 0 no-repeat; height: 43px;} .r {background: url(../../datadir/client/images/billinggrid/name_sidebg2.png) 100% 0 no-repeat; height: 43px;} .middle {background: url(../../datadir/client/images/billinggrid/name_sidebg.png); height: 43px;} This is the output (i can't post images?) http://i34 [.] tinypic [.] com/4hpqag [.] png The first problem I am having is that the div my gridtitle (CIBC) is in does not set its width automatically to the text width. Instaed, it spans the whole table ... Position-wise, I would like the tab with "CIBC" to be to the far left, the header and footer tabs to be right of "CIBC" but still floating left, and the + and x signs to be floating right, all on the same line. Help? Thanks in advance. Hi all, i'd like to make a 'table' like div that has a column down the left hand side with one or more image tags and another cell on the right with text, however i would like to do this without specifying the height (other than 100% or 1px) or absolute position of the divs: Code: ___________________ |Image 1 |Text | |Image 2 |Text | | |Text | | |Text | ------------------- Currently i've got 3 divs: one for the outer 'table', one for the images 'cell' and one for the text 'cell'. Outer 'table' style: None (just a plain <div>) Images 'cell' style: height:100%;float:left Text 'cell' style: height:100% Here's the full code if you want it: Code: <div>
<div style="height:100%;float:left;"><img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10" border="0"><br>
<img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10"></div>
<div style="height:100%"> [div 2] Shows text on the right <br>
<br>
continues downwards no matter how much text appears<br>
<br>
<br>
<br>
<br>
<br>
Even down here [/div2] <br>
</div>
</div>
This works great in i.e. but not mozilla, anyone have any ideas? I am trying to work on a project from HTML Utopia: Designing without Tables Using CSS. It is from Chapter 9. It should be a layout with a header and three columns. A footer was added to the bottom and floats were incorporated to the content and sidebars so that nothing interferes with the footer. So, the footer shows up okay, but the positioning of the sidebars is now screwed up. It would be nice if I could show you an image of what this looks like, but this site won't let me do that because I am a new member. I will try to describe it the best I can. Instead of being a layout with a header and three columns on top with the footer on the bottom, it has the header and middle content div on top and the two sidebars are both on the bottom with lots of space above them. The footer is on the bottom as it should be. Here is the code (this is not the whole code--this is the code I think would effect the layout): body { margin: 0; padding: 0; background-color: #050845; color: white; background-image: url(web_site_files/02_creating_the_layout/img/bg.jpg); background-repeat: repeat-x; font: small Arial, Helvetica, sans-serif; } #wrapper { background-color: #fdf8f2; color: black; margin: 30px 40px 30px 40px; padding: 10px; } #sidebar2 { float: left; width: 159px; border-top: 1px solid #b9d2e3; border-left: 1px solid #b9d2e3; border-bottom: 1px solid #b9d2e3; background-color: white; color: black; margin: 0; padding: 0; top: 1px; } #main { width: 100%; margin-top: 10px; } #sidebar { float: right; width: 220px; background-color: #256290; margin: 0; padding: 0; color: white; } Does anything look weird with the code above? If all of that looks right, then I can look and see if it is something else. I am seriously confuzzeled. I appreciate the help--I am trying to learn this on my own. (: I'm trying to vertically align two divs inside a table cell. I have the cell's vertical-align property set to text-top because I want the first div to be aligned at the top of the td but I can't, no matter what I try, get the second div to align to the bottom. Is there a better way to accomplish this without nesting tables or is this the right way and I'm just missing something? HI all... i have been loving my table layouts, but it seems that if i dont convert i will get left behind, so help a fellow out... the problem is that i have a complex 3 col layout, and i need the divs to auto size to fill the whole div... code will explain it better i think Code: <div style="border:1px solid white;width:100%;height:600px;"> <div style="border:0px solid blue;height:300px;float:left;"> <div style="border:1px solid blue;width:100px;height:100px;"></div> <div style="border:1px solid red;width:100px;height:100%;"></div> <div style="border:1px solid yellow;width:100px;height:100px;"></div> </div> <div style="border:0px solid yellow;height:300px;float:left;"> <div style="border:1px solid blue;width:100px;height:100px;"></div> <div style="border:1px solid red;width:100px;height:100%;"></div> <div style="border:1px solid yellow;width:100px;height:100px;"></div> </div> <div style="border:0px solid yellow;height:300px;float:left;"> <div style="border:1px solid blue;width:100px;height:100px;"></div> <div style="border:1px solid red;width:100px;height:100%;"></div> <div style="border:1px solid yellow;width:100px;height:100px;"></div> </div> </div> the first div is the wrapper, the first is the left then the middle then the right... but if the middle one changes height the rest are left at there default, and i just cant seem to locate the problem, i give it a day, then its back to tables.... this is not helping me like this CSS stuff just a note the whole lot will be centered with a margin of 20-30px... so no fixed positions for the inner divs.. frank/ I have a positioning puzzle for you. It's as part of a web design assignment, so broad accessibility is not required. even working on IE is not required. YES! here is the problem, explained by means of an image. because a picture speaks a thousand words. so they say. [IMG](URL address blocked: See forum rules)[/IMG] Any assistance or suggestions are welcome. Thanks in advance. |
|||||||