|
CSS - Change Simple Table Into Divs And Css
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. Similar TutorialsHi, Take a look at this page: http://nazgulled.home.sapo.pt/table.html This is easly done with tables as you can see, now, I want reproduce the same effect with divs but I don't know how. My exact problem is, how can I center more than 1 div tag in the same "line". And for any div tag I use the float option, I can't align the text to anywhere, how can I do this too? I am sure that you've seen these types of divs/boxes that people use on their webpage. almost everyone uses it pretty much it's a div or a table cell where the cell has background colour and a thin border around it (usually lighter) for a nice effect. Then obviously within the box, there is text to be displayed. I can't seem to get this!! I've tried using tables but what happens is that the border starts overlapping with the other cells and I don't have the effect I won't what's the easiest way of implementing this type of design? thanks! 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. (: 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 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? 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'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, 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... 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. like you see in pic table rows are different color. but i wanna block this for popup. this is popup html Code: <tr> <td class="td_popup"><div class="f1">First Name :</div></td> <td class="td_popup"><input name="firstname" id="firstname" type="text" /></td> </tr> js for css Code:
$(document).ready(function() {
zebraRows('tr:odd td', 'odd');
$('tbody tr').hover(function(){
$(this).find('td').addClass('hovered');
}, function(){
$(this).find('td').removeClass('hovered');
});
//default each row to visible
$('tbody tr').addClass('visible');
css Code:
th:hover {
cursor:pointer;
}
.td1
{
background:#666666;
height:25px;
text-align:left;
font-weight:bold;
font:arial;
font-size:12px;
line-height:10px;
color:#FFFFFF;
padding:2px;
margin-left:auto;
margin-right:auto;
text-indent:3px;
}
td.odd {
background-color:#F0F0F0;
}
.td_popup{
background-color:#DDD;
}
I haven't got this one to work so I thought one of you might will know the answer. See the class, "tdTestNarrow" that I'm having trouble with... Thanks... Code:
<style type="text/css">
table.tableCreditBureaus
{
float: left;
width: 196px;
font-size: 9pt;
}
td.tdCreditBureausColumn1
{
width: 150px;
/* border: 1px solid #000000; */
}
td.tdCreditBureausColumn2
{
width: 11px;
/* border: 1px solid #000000; */
}
td.tdCreditBureausColumn3
{
width: 35px;
text-align: right;
/* border: 1px solid #000000; */
}
td.tdCreditBureausTriColumns
{
width: 196px;
/* border: 1px solid #000000; */
}
td.tdTestNarrow
{
height: 2px;
}
</style>
<table class="tableCreditBureaus">
<tr>
<td class="tdCreditBureausTriColumns">
<span style="font-weight:bold;text-decoration:underline;">Equifax</span>
<tr>
<td class="tdTestNarrow">
<tr>
<td class="tdCreditBureausColumn1">
Saved Report
<td class="tdCreditBureausColumn2">
$
<td class="tdCreditBureausColumn3">
1.00
<tr>
<td class="tdCreditBureausTriColumns">
<tr>
<td class="tdCreditBureausTriColumns">
<span style="text-decoration:underline;">Products</span>
<tr>
<td class="tdCreditBureausColumn1">
Credit Report (I)
<td class="tdCreditBureausColumn2">
$
<td class="tdCreditBureausColumn3">
10.00
<tr>
<td class="tdCreditBureausColumn1">
Credit Report (J)
<td class="tdCreditBureausColumn2">
$
<td class="tdCreditBureausColumn3">
1.00
<tr>
<td class="tdTestNarrow">
<tr>
<td class="tdCreditBureausTriColumns">
<span style="text-decoration:underline;">Ancillary Products</span>
<tr>
<td class="tdCreditBureausColumn1">
Safescan
<td class="tdCreditBureausColumn2">
$
<td class="tdCreditBureausColumn3">
1.00
<tr>
<td class="tdCreditBureausColumn1">
Beacon
<td class="tdCreditBureausColumn2">
$
<td class="tdCreditBureausColumn3">
1.00
<tr>
<td class="tdCreditBureausColumn1">
On-Line Directory
<td class="tdCreditBureausColumn2">
$
<td class="tdCreditBureausColumn3">
1.00
<tr>
<td class="tdCreditBureausColumn1">
OFAC Alert
<td class="tdCreditBureausColumn2">
$
<td class="tdCreditBureausColumn3">
1.00
</table>
hi all. is there a way to change the css border-color attribute of a table with onmouseover? so the table, where the mouse is on, is highlighted in a new color? thanks. j0sh I would like to have the background-color of a complete table row changed when I move the mouse over it. Any ideas how to realize this within a CSS file (not with javascript) Thanks in advance ok im fairly new to css and so i am working and learning from examples however i would like to know how one would go about changing the following table to a CSS layout using divs. Code:
<table style="margin: 0 auto" cellspacing="1" cellpadding="2">
<tr class="gen_small" style="height:50px">
<td align="center">{FORUM_OPEN}</td>
<td width="100">Open Forum</td>
<td align="center">{FORUM_LOCKED}</td>
<td width="100">Closed Forum</td>
<td align="center">{FORUM_NEW}</td>
<td width="100">New Posts</td>
</tr>
</table>
Hey i got some cells in a table which hold links. How can i make only the links inside these cells a different color? This is the class i use on the table cells: css Code: Original - css Code .selectedContactRow{ background-color: white; color: black; }
I only know how to change the link colors in general. css Code: Original - css Code a:link{color: red;} a:hover{color: red;} etc.
thanks in advance. I am trying to set up the following table: Code: <form method='post' action='form.php'>
<table border=0 cellpadding='2'>
<tr>
<td><b>First Name: <font color='red'>*</font></b></td>
<td><input type='text' name='f_name' size=45></td>
</tr><tr>
<td><b>Last Name: <font color='red'>*</font></b></td>
<td><input type='text' name='l_name' size=45></td>
</tr><tr>
<td><b>Telephone Number: <font color='red'>*</font></b></td>
<td><input type='text' name='phone' size=45></td>
</tr><tr>
<td><b>Email Address: <font color='red'>*</font></b></a></td>
<td><input type='text' name='email' size=45></td>
</tr><tr>
<td><b>Website:</b></td>
<td><input type='text' name='website' size=45></td>
</tr><tr>
<td><b>Subject: <font color='red'>*</font></b></a></td>
<td><input type='text' name='subject' size=45></td>
</tr><tr>
<td><b>Message: <font color='red'>*</font></b></td>
<td><input type='text' name='message' size=45></td>
</tr>
<tr>
<td><input type='submit' value='Valuate'></td>
</tr>
</table>
</form>
The next to last td cell (message) I obviously need the height of this cell to be much higher and wider so people can type a message. However, I have tried td rowspan and colspan all with no results. What am I doing wrong? I'm assuming this is going to be a CSS issue. I have a table cell which contains text, and for the sake of accessibility, I'm allowing text resizing and would like to prevent the table cell from changing in height when the font size is increased. Basically, as the font size increases, the width of the cell is the only thing that will change, not the height. First, is this possible? Second, if so how can this be achieved? I'm pretty sure that I've seen other sites do this, just can't remember where. Thanks in advance! Hello. My first post at this section I'm trying to familiarize with all the positioning properties in CSS but got stuck when trying to migrate the table at the bottom of this code, to div blocks: 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></head>
<style>
body
{
margin: 0;
padding: 0;
font-size: 90%;
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
background-color: #FFF;
color: #000;
}
table, div {
padding: 15px;
margin: 0;
background-color: #464646;
height: 30px;
width: 100%;
}
tr, div div {
color: #FFFFFF;
font-size: 18px;
height: 100%;
}
</style>
<body>
<table class="top"><tr><td>Product Name</td><td align="right">Company Name</td></tr></table>
</body>
</html>
I tried wrapping two <span> inside a <div> and float the second <span> to the right, but from what I read so far, floating is not the solution because it sets the element as a block even if it's inline. Although it works using plain old tables - btw why is IE rendering a somewhat different page then FF? - and I should follow the KISS rule I want to learn how can I make this work. Thank you a lot! I am trying to create a table with rounded cellcorners using 1 pixel gif's. It is possible to do this with html only but this creates an enormous amount of code. Unfortunately the tables have to be inserted in the WYSIWYG editor of the Vignette V7 content management system and the people inserting the tabular data are novices and do not know anything about html. Therefore I have to use css and a very simple html table. This is the code I have created so far: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rounded Corner Test Using CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.header {
font-weight: bold;
color: #FFFFFF;
background-color: #666666;
background-image: url(dot_br.gif);
background-position: left top;
background-repeat: no-repeat;
}
.light {
background-color: #CCCCCC;
background-image: url(dot_br.gif);
background-position: left top;
background-repeat: no-repeat;
}
.dark {
background-color: #999999;
background-image: url(dot_br.gif);
background-position: left top;
background-repeat: no-repeat;
}
.rounded {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}
-->
</style>
</head>
<body>
<table width="75%" border="0" cellspacing="1" cellpadding="3" class="rounded">
<tr class="header">
<td colspan="3">Title</td>
</tr>
<tr class="light">
<td>Text</td>
<td>More text </td>
<td>Contents</td>
</tr>
<tr class="dark">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
And this is the result: URL As you can see, using the css background property I can only place a pixel in one cellcorner at the time and I need to have them in all corners. Does anybody have an idea how to do this without making the html code too complicated? |
|||||||