|
CSS - Can Css Do This, Or Do I Stick With A Table?
Hi Everyone,
In learning CSS, I'm re-factoring a Perl/CGI/HTML form to use CSS to better manage the view. One component of this page is a large number of small checkboxes (with a variable length caption), which I would like to have neatly lined up. I had this with a table, and I'm wondering if I can do this with CSS. Do you guys know of any way I can replicate the way the Tables looked with CSS? (so that everything is nicely lined up) Here's the code and a screenshot of both. As you can see, the one where i used tables is nicely lined up, while the one with CSS is all jumbled together. The entire DIV that this will be wrapped in is fairly space constrained, which is why I need it to be in 3 columns, so it doesn't get too tall or too wide. Tables: CSS: Tables: Code: <table width=300> <tr> <td><input type=checkbox />foo</td> <td><input type=checkbox />abba</td> <td><input type=checkbox />zabba</td> </tr><tr> <td><input type=checkbox />bar123</td> <td><input type=checkbox />foo1</td> <td><input type=checkbox />allakazaam</td> </tr><tr> <td><input type=checkbox />ab</td> <td><input type=checkbox />foo2</td> <td><input type=checkbox />foo3</td> </tr><tr> <td><input type=checkbox />bar2</td> <td><input type=checkbox />b</td> <td><input type=checkbox />bar3</td> </tr><tr> <td><input type=checkbox />foobar1234</td> <td><input type=checkbox />alla</td> <td><input type=checkbox />poof</td> </tr><tr> <td><input type=checkbox />zap</td> <td><input type=checkbox />foofoo</td> <td><input type=checkbox />barbar</td> </tr><tr> <td><input type=checkbox />foobarfoobar</td> <td><input type=checkbox />bar321</td> <td><input type=checkbox />babba</td> </tr><tr> <td><input type=checkbox />allafoo</td> <td><input type=checkbox />barzam</td> <td><input type=checkbox />zambar</td> </tr><tr> <td><input type=checkbox />wham</td> <td></td></td> <td></td></td> </tr> </table> CSS: Code: <style type="text/css">
li
{
display: inline;
}
ul
{
width: 300px;
}
</style>
<ul>
<li><input type="checkbox"/>foo
<li><input type="checkbox"/>abba
<li><input type="checkbox"/>zabba
<li><input type="checkbox"/>bar123
<li><input type="checkbox"/>foo1
<li><input type="checkbox"/>allakazaam
<li><input type="checkbox"/>ab
<li><input type="checkbox"/>foo2
<li><input type="checkbox"/>foo3
<li><input type="checkbox"/>bar2
<li><input type="checkbox"/>b
<li><input type="checkbox"/>bar3
<li><input type="checkbox"/>foobar1234
<li><input type="checkbox"/>alla
<li><input type="checkbox"/>poof
<li><input type="checkbox"/>zap
<li><input type="checkbox"/>foofoo
<li><input type="checkbox"/>barbar
<li><input type="checkbox"/>foobarfoobar
<li><input type="checkbox"/>bar321
<li><input type="checkbox"/>babba
<li><input type="checkbox"/>allafoo
<li><input type="checkbox"/>barzam
<li><input type="checkbox"/>zambar
<li><input type="checkbox"/>wham
</ul>
EDIT: I should probably comment that I had to trim this code of business-sensitive stuff, so it's pretty sparse. I don't ACTUALLY have the width defined in the UL section of my style.css, and the checkboxes are fully functioning in the live version. I just wanted to abbreviate it to make it easier to understand my problem. EDIT2: One more thing I should mention, the number of checkboxes is dynamically generated by my CGI script. Thus, my old code automatically handled the table rows/cells, and the new code should automatically handle any additional or fewer list items (it could vary by +/-5) Similar TutorialsHey I am relativly new to CSS and i was wondering how can i make the footer of my page stick to the bottom of the screen if the page is relativly short. I use a 800x600 as my design size but there might be long and short pages. Can anyone shed some light? Here is my code PHP 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>Untitled Document</title> <link rel="stylesheet" title="Disabled for Preview-in-Browser: ../css/basics.css" type="text/css" /> <style type="text/css"> <!-- /* CSS Document */ body{ background-color:#FFFFFF; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; margin:0px; padding:0px; font-size:80%; text-align:center; } #wrapper{ width: 750px; background-color:#FFFFFF; margin: 10px auto; text-align: left; } /* ---------------------------------Header content---------------------------------------------*/ #header { height: 150px; border-bottom: 1px solid #CC0000; } /*this is to make sure al content apears below the header*/ .clearit{ clear: both; display: block; } /*---------------------------------Main Contant------------------------------------------------*/ #content { background-color:#FFFFFF; margin-left:177px; margin-top:25px; margin-right:100px; } #content p{ background-color:#FFFFFF; } #content h1{ font-size: 140%; color: #CC0000; padding: 0; margin-bottom:20px; font-weight:bold; } #content h2{ font-size: 110%; color: #CC0000; padding: 0; margin-top:30px; } #content li{ color:#000000; list-style-position:inside; list-style-type:disc; } #content form h3{ font-size: 100%; color: #CC0000; padding: 0; margin:0; } #content form h2{ font-size: 115%; color: #CC0000; padding: 0; text-transform:uppercase; } .BoldRed{ color:#CC0000; font-weight:bold; } .verse{ color:#006699; font-style:italic; } /*use for commendattions names*/ .greyed { color:#666666; font-style:italic; } .leftimage{ float: left; margin-right: 10px; margin-bottom:10px; border: 1px solid #000000; clear:left; } .container{ width:99%; float:right; } /*-------------------------------Left Collum Content---------------------------------------------*/ #leftcol { font-size:100%; margin-top:30px; float:left; width: 167px; background-color: #FFFFFF; } /*------------------------------Footer Content---------------------------------------------------*/ #footer{ margin-top:30px; border-top: 1px solid #CC0000; background-color: #FFFFFF; color: #000000; clear: both; } --> </style> </head> <body> <!-- Start wrapper --> <div id="wrapper"> <!-- Start of Header --> <div id="header"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="750" height="150"> <param name="movie" value="../homepageFlashElements/header.swf" /> <param name="quality" value="high" /> <embed src="../homepageFlashElements/header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="150"></embed> </object> <!-- Clear a line--> <div class="clearit"> </div> </div> <!-- End of Header --> <!-- Start of Left Colum --> <div id="leftcol"> <div align="left"><img src="../images/courses/colours_08.jpg" width="143" height="143" border="1px"/></div> <p> Navigation content here </p> <p></p> </div> <!-- End of Left Colum --> <!-- Start of Content --> <div id="content"> <h1>Heading</h1> <p>Some Content. This may very in length</p> </div> <!-- End of Content --> <!-- Start of Footer --> <div id="footer"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="750" height="50"> <param name="movie" value="../homepageFlashElements/footer.swf" /> <param name="quality" value="high" /> <embed src="../homepageFlashElements/footer.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="50"></embed> </object> </div> <!-- End of Footer --> </div> <!-- End wrapper --> </body> </html> Is it possible to get my content to stick to my footer? I have a sticky footer at the bottom of my page and I would like the content to always bee 100% of the page and sitting right on top of the footer. I been messing around with different things for hours and nothing I seem to do will get my content box to stay stuck to the footer at the bottom of my page. Here is a link to the site printing.ou.edu/new-index.html This is what I am trying to get printing.ou.edu/Draft3.png Thanks for your help :-) (EDIT) I have Solved this problem sadly I had to use Java Script to get it done but it works. Here is the Java Script for anyone else trying to do something like this. Code:
<script type="text/javascript">
window.onload = function() {
contentHeight();
}
window.onresize = function() {
contentHeight();
}
function contentHeight() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
var headerHeight = document.getElementById('header').offsetHeight;
var footerHeight = document.getElementById('footer').offsetHeight;
var pushHeight = document.getElementById('push').offsetHeight;
var menuHeight = document.getElementById('menu').offsetHeight;
var contentElement = document.getElementById('content');
var contentbgElement = document.getElementById('content-bg');
contentElement.style.height = (windowHeight - (headerHeight + footerHeight + pushHeight + menuHeight)) + 'px';
contentbgElement.style.height = (windowHeight - (headerHeight + footerHeight + pushHeight + menuHeight)) + 'px';
}
}
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight=window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight=document.documentElement.clientHeight ;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight=document.body.clientHeight;
}
}
}
return windowHeight;
}
</script>
See you all around Can somebody please help me with a problem i am having with my footer. I have been reading through articles and help forums for days now trying to get a footer on my theme that will stick to the bottom of the document. At the moment the Footer is sticking to the bottom of the page, but as the content of my pages are longer than the viewpoint, My footer is appearing in the middle of my content. I have been trying all sorts to try and figure this out, and everything i try seems to not work. My website is here My HTML code can be found here And my CSS Code can be found here Many thanks, Even when I zoom out to the least point, I want my background image in my webpage to stay normal size. How do I do this? Hi. How to make my header and footer stick to bottom? For the header div, I have background image and a logo (test) but the bg image does stick to the bottom to touch the menu? For the footer, it doesn't stick to the bottom of the page? Anyone can help me out? Here's the link of the test page with css inside the source code. Really appreciate if anyone can help. Thank you. yourbestproduct dot com/test.html (Sorry, I'm new user so can't put exact url) Hey all, See on http://yourfishguide.com/Main_Page the grass at the bottom is 'siting' on the bottom of the page? Then on http://yourfishguide.com/Your_Fish_Guide:About it's a little above the bottom of the page. How can I make the grass "stick" to the bottom of the page, regardless of the length of the content above it? Thanks, Jordan 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 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! 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>
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 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 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? 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. Hello, I have a table with 3 columns and I am using the usual header, footer and body sections. The first column has only an input (check box). Is it possible to make column 1 and 3 fixed width and column 2 get the remaining width? Thank You, Miguel If I want to apply a certain style to all cells of a given table, what is the easiest way tot do that ? Wrap the table within a <div> and then assign a class to the div ? something like this ? Code: .main-table table td {height:3.0em; padding:2px 7px 2px 7px; border-left:solid 2px rgb(255,255,255); border-right:solid 2px rgb(255,255,255); border-top:solid 2px rgb(255,255,255); border-bottom:solid 2px rgb(255,255,255); background-color:rgb(225,225,225); text-align:left; font-weight:normal; color:rgb(80,80,80); font-size:110%;}
Hello, I created a table, with 600px fixed width, with 3 columns. The first column contains a checkbox so I am using a fixed with. Second column should expand. Third column has only one word so I decided to make it fixed width giving it some margin. The problem is that in IE 7 the first column, the one with the check box, gets much wider then it should be. What am I doing wrong? And is there something I should to to improve the design of my table? Here is my code: <table id="ctl02_lvTags_tTags" class="Grid"> <thead> <tr> <th class="CheckBox"> </th> <th>Tag</th> <th class="Command"> </th> </tr> </thead> <tfoot> <tr> <th colspan="2">Footer Left</th> <th>Footer Right</th> </tr> </tfoot> <tbody id="ctl02_lvTags_itemContainer"> <tr> <td class="CheckBox"> <input id="cbActive1" name="cbActive1" disabled="disabled" type="checkbox"> </td> <td> Tag 001 </td> <td class="Command"> <a id="lbEdit1">Edit</a> </td> </tr> <tr> <td class="CheckBox"> <input id="cbActive2" name="cbActive2" disabled="disabled" type="checkbox"> </td> <td> Tag 002 </td> <td class="Command"> <a id="lbEdit2">Edit</a> </td> </tr> </tbody> </table> .Grid { margin: 20px; border-collapse: collapse; color: #505050; font-size: 70%; width: 600px; } .Grid th.CheckBox { text-align: center; width: 25px; } .Grid th.Command { width: 100px; } Thanks, Miguel I am just starting out with CSS layouts, I wanted to know if this would be the best way to create a CSS layout with 2 columns and 3 rows or is there a better/easier way? html4strict Code: Original - html4strict Code <div style="width: 250px;"> <span style="float: left; width:50%;">1A</span> <span style="float: left; width:50%;">1B</span> </div> <div style="width: 250px; clear:both;"> <span style="float: left; width:50%;">2A</span> <span style="float: left; width:50%;">2B</span> </div> <div style="width: 250px; clear:both;"> <span style="float: left; width:50%;">3A</span> <span style="float: left; width:50%;">3B</span> </div>
|
|||||||