|
CSS - Swapping Table For Div Or Ul
The tables I will be swapping out are 1 row in height and are used for navigation.
I have several tables with set widths I need to switch. The table columns do not have fixed widths, or in some cases several columns have set widths while the rest are relative to them and the tables set width. An example would be: Code: <table width="400"> <tr> <td>column 1</td> <td>column 2</td> <td>column 3</td> </tr> </table> Now when rendering the browser would estimate each <td> width relative to the <table> width. In this case approx 33% each. If I were to change the text in each column it would re-adjust the widths making a more even adjustment according to the content size. Now I know every one hear knows that but I just wanted to make it crystal clear as to what I am trying to do with CSS and either <DIV> or <OL> tags. If I used either methods below is there a way I could just set the text and have the <DIV> or <OL> auto apply the relative width like a <TABLE> would? Code: <div style="width:400px;"> <div style="float:left;">column 1</div> <div style="float:left;">column 2</div> <div style="float:left;">column 3</div> </div> <ol style="width:400px;margin:0px;padding:0px;list-style:none;"> <li style="float:left;">column 1</li> <li style="float:left;">column 2</li> <li style="float:left;">column 3</li> </ol> I can do a decent amount of stuff with CSS but this issue always has stumped me and no matter how long I research I don't come up with any proper answers. Similar TutorialsOk...Im developing a new site for my web design group. the url is : http://www.amweb-design.com/beta/ Anyways on the top of it i have a Featured client section that fades in when the page loads. Well i also have some < > i want to be able to switch the images of clients and them fade. Im kinda new at css so any help or examples would be great! thanks in advance Austin I'm sure it's something stupid and obvious, but could someone tell me why this works (h1 goes away and image is seen): #branding { height: 100px; position: relative; z-index: 10; } #branding h1 a { position: absolute; top: 16.5px; left: 293px; width: 214px; height: 67px; text-indent: -9999px; background: url(../images/branding.png) no-repeat; } and this doesn't (h1 goes away, but no image swap): #nav_main { position: relative; z-index: 2; height: 50px; } #nav_main h2 { position: absolute; z-index: 6; top: 0; left:0; height: 120px; width: 800px; text-indent: -9999px; background: url(../images/nav_mainh2.png) no repeat; } What I don't like about my code below is that space is kept for Sections A and B, even when they are not visible. Code: <div id="container">
<div id="A">
Section A.
<input type="button" value="Toggle extra" onClick="toggleExtra()">
<span id="extra"></span>
</div>
<div id="B">
Section B.
</div>
</div>
What I really want is for Section A to take the place of Section B when the other button is clicked. Purpose: I want the user to arrive at my web page and click a button to establish why they are there. If for A, they will be shown content for topic A. If for B, content for topic B. (Further illustration: If you toggle the extra text on in section A and then view Section B, the blank area for Section A is that much bigger...) Functional but incorrect code: Code: <html>
<head>
<link rel=stylesheet href="../common.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
//<![CDATA[
function switchIt(mode) {
if (mode == 'A') {
document.getElementById('A').style.visibility = 'visible';
document.getElementById('B').style.visibility = 'hidden';
}
else {
document.getElementById('A').style.visibility = 'hidden';
document.getElementById('B').style.visibility = 'visible';
}
}
var toggle = -1;
function toggleExtra() {
toggle *= -1;
if (toggle == 1) {
document.getElementById('extra').innerHTML = "<br>extra";
}
else {
document.getElementById('extra').innerHTML = "";
}
}
//]]>
</script>
<STYLE TYPE="text/css">
<!--
body {
text-align: center;
}
#container {
margin:0 auto 0 auto;
width:400px;
border:2px outset white;
}
#A {
visibility:hidden;
border:2px outset white;
}
#B {
visibility:hidden;
border:2px outset white;
}
-->
</STYLE>
</head>
<body>
<form>
<input type="button" value="Show section A" onClick="switchIt('A')">
<input type="button" value="Show section B" onClick="switchIt('B')">
</form>
<div id="container">
<div id="A">
Section A.
<input type="button" value="Toggle extra" onClick="toggleExtra()">
<span id="extra"></span>
</div>
<div id="B">
Section B.
</div>
</div>
</body>
</html>
Thanks! oak island Hi Guys, I'm trying to create a category list. One first load, the category list is going to be a short list of the top 5 major categories. Each major category will have a sublist of 3 subcategories below it. Lastly, there will be a link labeled 'more' that when clicked, will toggle out divs and display a full category list. Lastly, all other primary categories will have their short list hidden as well, so you only see the Primary Category followed by a 'more' link. Here's a crude example of what I mean. First block is 'first load'. Then the next block would be how it'd look if I clicked the "more" link below vehicles -------------------------------- Vehicles -Cars -Trucks -Motorcycles MORE Stuff -Musical Instruments -Camping -clothing MORE Electronics -televisions -stereos -video games MORE ------------------------------ ex. Vehicles -Cars -Trucks -Motorcycles -Boats -Tractors -antiques -commercial Less Stuff MORE Electronics MORE ------------------------------ I think every primary category (ie vehicles) will require 3 divs. Div1 - short list with 3 sub categories Div2 - full list of all subcategories Div3 - hidden list At first load, the DIV1 variant will be displayed for all primary categories. When the 'more' link is clicked for a particular primary category, it will swap it's div1 for it's div2, and at the same time, swap all other categories div1 for their div3. If the 'less' link is clicked on div3, everything would revert back to normal, all primary categories showing div1. I need to find/write some javascript which would toggle the div's. Does this make sense? Am I going about this the right way? I'd think the code would look something like the following, with each Primary category being cat1, cat2, cat3, etc. Code for first Primary Category Code: <div id="cat1div1">
sample text
<a href="javascript:toggle2('cat1div1','cat1div2');javascript:toggle2('cat2div1','cat2div3'); javascript:toggle2('cat3div1','cat3div3');">
more
</a>
</div>
<div id="cat1div2">
a whole bunch of sample text
<a href="javascript:toggle2('cat1div2','cat1div1');javascript:toggle2('cat2div3','cat2div1'); javascript:toggle2('cat3div3','cat3div1');">less</a>
</div>
<div id="cat1div3">
<a href="javascript:toggle2('cat1div3','cat1div2');">MORE</a>
</div>
I have a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc {
width:"100%";
width::fixed;
overflow:scroll;}
but it is not exactly what I want hi every one... How can I display static headers in a table, so that headers remain visible while user scrolls the table body? This is not working in IE 7 any working example please 2. iam having a column which holds data around some 100 to 200 characters... by default i want to display some 50 characters and rest of the characters can be viewed by moving the column... if this is possible let me know how to do it with some sample code......i dont know much about CSS 3. One more problem iam facing is with the number of columns displayed in the table. I have to display around 15 to 20 columns in a table... with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page) I need a fixed table width and height and also fixed column width and height..... Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns) Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<body>
<table>
<tbody>
<tr>
<td>
1<br>2<br>3<br>4<br>5<br>
</td>
<td style="background: blue;">
<table style="height: 100%; background: red;">
<tbody>
<tr>
<td style="vertical-align: bottom">
Test
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. -------------------------------------------------------------------------------- Hello, Not exactly sure where to post this question... but: I'm having a bit of trouble keeping a table at a fixed height. What I have is a Small 200x80px table above my an input form. As users type data into the input form, javascript code dynamically updates the contents of the table. I have the table width properly fixed, and the input fields have character limitations... however if a user inputs a lot of capital letters or other wide characters, the table automatically increases in height when the text wraps. It's pretty much necessary that the text wraps for the middle lines of the table, and on the other two lines I have used the javascript to remove wrapping, but I never want the table to grow longer than 80px no matter how much is typed in the fields. Is there a way that I can constrain the table height? Thanks in advance! Hi all, what i want is to customise the borders of a table... i know that <div>'s can have custom borders but, for the way that the page works i used table tags <table>. (very little experience of using <div>) is there a way that css can manipulate the borders of a table? i tried using this css: .nmhead { border-color:#cccccc; border-top:border-top-style:none; border-left:border-left-style:none; border-right:border-right-style:double; border-bottom:border-bottom-width:5px; } and then in the table doing this: <td class='nmhead'> but it didnt work (attached is what i want it to look like) any ideas? hi all ! Im having a little bit of problem to make a header and the table body match in a correct way. My header is declared as <table align="center" class="style36" id="header"> and the CSS controlling it is Code: table.style36 {
width: 1000px;
vertical-align:middle;
}
.style36 td{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
vertical-align:middle;
}
And the table wich is declared as Code: <div class="scrollingDiv">
<table border="1" bordercolor="#000000" align="center" bgcolor="#FFFFFF" class="style13" id="tableBody" >
And the CSS controlling it Code:
div.scrollingDiv {
height:420px;
overflow:scroll;
vertical-align:middle;
width:1024px;
}
table.style13 {
width: 1000px;
vertical-align:middle;
}
/* Since the table has a class of style13, all td elements under that style can be
selected as below... no need for more style definitions...
*/
.style13 td {
vertical-align:middle;
}
.style13 th {
vertical-align:middle;
}
My first idea was to declare a width for each td, something like: Code: <td width="30" bgcolor="#${color2}"><div align="center">${fila.sHoraent_Citas}</div></td>
<td width="120" bgcolor="#${color2}"><div align="center"><a href="SvMedPro?boton=Info&idPaciente=${fila.idPaciente_Citas}">${fila.nom_Paciente}</a></div></td>
AND match the header too, dosent seem to work, Im pretty new to web programing so any help is appreciated. Thanks! Hi, CSS whizz needed! I'm currently formatting a pre-determined HTML website using CSS. The website has been formatted with ID's for all tables and cells so I can specify which colour I'd like the background of the cells. The HTML is like this: Code: <table id="Description">
<tr><th class="title">Text</th></tr>
<tr><td class="data"><div class="ggcode">Text</div></td></tr>
</table>
So I've been formatting it like this: Code: div#Main
table#Description
.title {
border-color:#F0E68C;
background-color:#F0E68C; }
div#Main
table#Description
td.data {
border-color:#F0E68C;
background-color:#F0E68C; }
However the last table is like this: Code: <table id="recentPosts">
<tr>
<th class="title">
Recent Forum Posts
</th>
</tr>
<tr>
<td>
<table class="data">
<tr>
<th>Topic</th>
<th>User</th>
<th>Posted At</th>
</tr>
<tr>
<td class="clickable forumTitle"><a href="link">Text></td>
<td class="username">Text</td>
<td class="date">Text12/04/2009 03:25 PM</td>
</tr>
<tr>
<td class="clickable forumTitle"><a href="link">Text</a></td>
<td class="username">Text</td>
<td class="date">Text</td>
</tr>
</table>
</td>
</tr>
</table>
I'm able to format the cells within the <table id="recentPosts">, but I can't alter the cells within <table class="data"> - the table within the table. Any ideas how I would go about doing this? Thanks in advance I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information. I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what). URL The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background. Could someone solve this, or alternatively reccommend another way. I am really new to css and I am trying to make a simple table but I can't make the vertical borders of my columns appear. This is what it currently looks like radio.magicmonsterrecords.com/108-2 This is the code I used table { width: 100%; background-color: white; border: 1px solid black; border-collapse:collapse } #content tr td { border-top: 1px solid black; border-left: 1px solid black border-right: 1px solid black border-bottom: 1px solid black padding: 6px 24px; } tr { border: 1px solid black; border-collapse: collapse; } I am at a loss of what to do!! I would also like the first row and first column to be pink but at this point I would be happy to just get the table working. Can anyone help me? thanks could someone post a primer for changing a site from tables to css and the benefits Hello, I am having problems trying to convert a table into a 'div'. The problem I am running into is due to the fact that this table contains a header (see attachment), rows and cells. How would I go about adding 'rows' and 'cells' to a div? The current CSS code I am using (external file) to create the table in the attachment is the following: Code:
td
{
background-color: #454545;
border-bottom: solid 1px #000;
border-right: solid 1px #000;
border-left: solid 1px #000;
padding: 5px;
}
td.header
{
background-image: url(../img/tableheader.gif);
background-repeat: repeat-x;
border-top: solid 1px #000;
text-align: center;
font-weight: bold;
}
table
{
margin-top: 10px;
}
table.mid
{
margin-left: auto;
margin-right: auto;
}
What I would need is the same thing created but by making use of div's, not tables. I know it is sometimes okay to use tables for tabular data, though I want to totally get rid of them. Any help would be appreciated. Hi, I am stuck , i am banging my head on the table, please would someone help me with a css problem. I have a table, 1 row by 5 columns, i have css styled its cells with their size in pixels and the table has a width in pixels. Each cell contains the contents of a php variable, this works fine but if one of the cells contents is larger than the cell it compresses all the other cells instead of wrapping the text in the cell on multiple lines. see below: http://www.sullyworld.co.uk/newforum/tst9.php?s=60&np=5 How in css can i make a cell stay the correct width and wrap the text so the hieght changes?? Help! Paul Hello, I understand it is better to design with <div> tags, seperating content from design. But it seems to me it compromises usability. For instance, if a visually handicapped user tries to enlarge the text on a web site with a design using layers, the text just expands out of the <div> layer, where a <table> will expand with the text. How can I overcome this issue when using the <div> tag. I am trying to make my site as user friendly as possible. Thanks... I have a pretty newbish question about CSS but I dont know if it is possible or not. Ok so in CSS you can change the colors of all the td's just by putting td{}, but now I wanted to know if it is posible to change the color of one td when the td has a id name? I am helping my firiend out with his myspace page and there are a bunch td's, table's and tr's, that conain id names but not class names. Nick |
|||||||