|
CSS - Mixing Table And Div?
--edit 2 SORRY FOR CONFUSING YOU ALL ----
it works but everytime i click on the link i get extra space underneath the <tr with id>??? http://plumstead-mosque.co.uk/test/admin/outofStock.php here is the revised code: PHP Code: $res = mysql_query($q);?> <table> <tr> <td>Product Id</td> <td>Name</td> <td>Stock Left</td> <td></td> </tr><?php while($ro = mysql_fetch_array($res)){ echo "<tr><td><a href=\"javascript:toggle('$ro[0]');\">$ro[0]</a></td><td>$ro[1]</td><td>$ro[2]</td></tr>"; $q2 = "select * from productsizes where productid = '{$ro[0]}'"; $res2 = mysql_query($q2); while($ro2 = mysql_fetch_array($res2)){ //if echo "<tr style=\"display:none; font-size:smaller; color:grey;\" id=\"$ro[0]\">"; echo "<td>$ro2[1]</td><td>$ro2[2]</td><td>$ro2[3]</td></tr>"; } } echo "</table>"; ?> ----edit 2 is it possible to do this: <table> <div><tr><td></td></tr></table ?? because i have a link that hides/unhides this div. and it doesnt seem to be working? but if i remove all the tables then it works? basically i do know the solution (i think) currently i have id and style on div that says "display:none" and change it using JS. so i THINK i can move them to the tr? the only problem with this would be if there are more than one tr as i cant have two tr with same id.. --edit never mind got this to work, each tr will have "unique" id so there is no point using class. HOWEVER when i used class as var m = document.getElementByClass("name") it didnt work --- PHP Code: $res = mysql_query($q);?> <table> <tr> <td>Product Id</td> <td>Name</td> <td>Stock Left</td> <td></td> </tr><?php while($ro = mysql_fetch_array($res)){ echo "<tr><td><a href=\"javascript:toggle('$ro[0]');\">$ro[0]</a></td><td>$ro[1]</td><td>$ro[2]</td></tr>"; echo "<div style=\"display:none; font-size:smaller; color:grey;\" id=\"$ro[0]\">"; $q2 = "select * from productsizes where productid = '{$ro[0]}'"; $res2 = mysql_query($q2); while($ro2 = mysql_fetch_array($res2)){ echo "$ro2[1] $ro2[2] $ro2[3]"; } echo "</div>"; } echo "</table>"; Similar TutorialsHi guys, thanks for reading my thread (once again!) I have the code below that is my first ever "play" with CSS. The site is nothing serious yet but I am learning how to lay things out in a clear fashion and get used to CSS syntax. Code:
<HTML>
<TITLE>My Page</TITLE>
<HEAD>
<STYLE type="text/css">
body {background-color:#ffffff; font: 13px;}
div {border: 0px}
#main {margin: 0px auto; width=800px; position: absolute; left: 0%;}
#headerlogo {float: left; width: 200px; height: 55px; background-color: #7EC0EE; text-align: center;}
#headertext {float: left; width: 350px; height: 55px; background-color: #7EC0EE; text-align: left; font: 13px;}
#blankspace {float: left; width: 25px; height: 55px; background-color: #F5F5F5;}
#headerlogin {float: left; width: 225px; height: 55px; background-color: #7EC0EE;}
</STYLE>
</HEAD>
<BODY>
<div id="main">
<div id="headerlogo">
<h3>Site Logo</H3>
</div>
<div id="headertext">
Site text goes here. This sentence is a test to see how much text I can fit in this div before things start to go out of line. It appears that there can be quite a lot
</div>
<div id="blankspace">
</div>
<div id="headerlogin">
<table width="220" border="0"><FORM NAME="login" ACTION="dologin.asp">
<tr><td width="70" STYLE="font: 13px">Login:</td><td width="80"><INPUT STYLE="width:70px; height:20px; font: 12px;" TYPE="text" NAME="loginname" SIZE="4"></td><td width="70" rowspan="2"><INPUT STYLE="width: 70px; height: 20px; font: 12px;" TYPE="submit" NAME="submit" VALUE="Login"></td></tr>
<tr><td width="70" STYLE="font: 13px">Password:</td><td width="80"><INPUT STYLE="width:70px; height:20px; font: 12px;" TYPE="password" NAME="Password" SIZE="4"></td></tr>
</FORM>
</table>
</div>
</div>
</BODY>
</HTML>
The result can be seen by pasting the above into a notepad file. I have got a mock "login form" on the right panel, and the only way that I could get the fields to display how I wanted was to put them in a small table. I get the impression (from reading other peoples threads) that mixing tables with CSS is bad practice as it is mixing style and structure. Other posts have said that a small amount of tables is ok. Should the tables above be replaced with CSS? I tried to set it up myself, but all I could do was get the elements to line up under each other! : Login: <text field> Password: <pass field> <submit button> Also, is there any way to get the two text fields (as in, rows of the table) closer together when using CSS? In a table sense I guess it is the opposite of "cell top and bottom padding?" Thanks for any help anyone can offer me. Regards, Porky I have 2 columns. I have a very tall, narrow column on the left that needs to be exactly 22em wide. I also have a short, fat column on the right that I want to take up the rest of the screen's width. The problem is that I have to contian my code so that after all of the formatting syntax is done, I can put in a whole ton of text and the text will stay in the right column, and then when the text gets past bttom of the left column it will take the entire width of the screen. The way I'm doing it right now is by floating to the left both columns and using 29% width for the thin left column and 70% width for the fat right column. This adds up to less than 100% so the browser places them paralell. But if I were to absolutely size the left column (as I want to), 22em + 100% is definately more than 100%. I can't constrain it so it thinks 100% is 100% of the space available to the right column because the text has to be in that "corner" between the right side of the left column and the bottom of the right column. Any ideas on how I could solve this? If you can do it without floats, that would be even better- it might solve another of my problems. The page in question is here by the way. All of the formatting code is transcluded in, you probably won't be able to see it unless you're familiar with wikipeida. Please don't edit the page directly Thanks, froth I'm using a PHP script from A List Apart to generate a random image for my header whenever it is called. While the script is great, my image sizes need drastic reduction. These header images are composed of two parts - 1)The title text 2)A background photograph. I can increase the compression of the background photograph to get it down from 120kb to about 20kb with little notice in quality - a great improvement! However, when I do this, the text suffers a great loss of quality. Since I can save the text as a .gif which would only register about 6kb, I was wondering if there was a way I could combine the script to get the random photograph and have the text lay on top. Ive tried putting both img codes in the same div and giving the text a higher z-index, but that does not work. I know that the best-case scenario would be to just use actual styled text in the div to go on top of the photograph. But I can't get the stroked look I'd want by doing this. Any suggestions? Hello I'm kinda new to css. (PHP programmer by day) and would like some help making something like this. stevenbarre dot com / sample.jpg I want the whole thing to stay in the browser (100% width and height) so you never get scroll bars. The top orange part should have a height in px as well as the bottom purple part. The green should have a width in px and the blue should be whatever is left over. I've done some googleing but haven't been able to find much on 100% height designs. Your help is much appreciated as well as links. Hello, I am trying to absolute position two elements within a relatively positioned DIV. My relatively positioned DIV is necessary to center my content on the page. The elements within this DIV must be placed in the upper left corner of the DIV. The reason why is because I want them to be placed on top of one another. Here is the code I have thus far: <div> <div id="elem1Container" style="height:400px; width:400px; position:relative; top:0px; left:0px;"> <img id="myItem1" src="image1.png" /> </div> <div id="elem2Container" style="height:400px; width:400px; position:relative; top:0px; left:0px;"> <img id="myItem2" src="image2.png" /> </div> </div> Can anyone help me accomplish my goal? For some reason, the second image is always below the first image. In reality I need it right on top of the first image. At the same time, these two images centered in relation to my page. That is why I placed them in a general div element. Thank you! Crystal Common scenario: A floated div that is set to have width:100% to fill up the entire horizontal space. Here's the problem: I want to bump the div 45px from the left (i.e. adding a 45px left margin). Having both the width: 100% and margin-left: 45px declaration in the CSS expands the div way too far (100% of the screen + 45px for the margin). Because of the design, I cannot use a 45px left padding instead. A constraint: I don't want to touch the HTML. I know an easy way would be to add a div within the floated div and use a 45px left padding on the floated div. Almost makes me pine for the IE5.0 broken box model... p.s. any one have any general advice when mixing 100% widths with absolute values for padding/margins for both floated and non-floated elements? I am using style sheet for fonts etc. I was wondering is it OK to use style sheet and <Font> tags at the same time on a page. I mean if you are using certain font only once. Why bother creating a class in style sheet and then calling using that class .. I'm trying to create a header bar with some navigational links. The basic idea is that I have a little banner image about 400 pixels wide on the left. To the right of it, I have 5 navigational links listed horizontally. I want them to be evenly spaced across the rest of the page, regardless of its width. I could do this with percentages if I had them in a parent element equal to the width of the page minus the width of the image to the left. So basically, I know this isn't actual CSS syntax, but I'm looking for the functional equivalent of saying: #linkContainer{width:100%-400px;} Anybody know a good way to do something like this? This would be easy with a table, but I'm trying to stick to CSS for layout and tables only for tabular data. I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. 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=utf-8" />
<title></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
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. -------------------------------------------------------------------------------- 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 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. 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, 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! 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 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 |
|||||||