|
CSS - No Text Control With Div Inside Table
I am using a Body{...} style on my page (background set to black #000000) and DIV's inside Tables inside DIV's and when I set up and use a .14 (14px size and white color font syle class) my text stays black! The only thing that works is "inline styles". Not good for site wide-control. There is obviously a conflict here or something is superceding my classes. I prefer to use CSS for font control. I am using div's because of a "jquery slider" and tables because I usually design the look in photoshop and then use slices... not doing that on this site, but it's just what I'm used to. Thanks for any help.
single page site is here "petermarsphotography dot com" Similar TutorialsHi, I have centered a table horizontally and vertically. To do this I put a table inside a table. so i don't want to use absolute positioning, as the position would change if the window size changes... My problem, with relative positioning, is that I can't figure out how to put my "some text" over an image -which is inside the table cell- in the exact position i want, without "collateral damage"... The collateral damage is that if I put the <div> tag inside the table (see example 1), it will occupy the space and as result the image wll be moved down and layout won't be centered vertically anymore... If I put the <div> tag outside the table (see example 2), as result there will be more occupied space at the top, and the layout isn't centered anymore... Here you can see the code i used for both example 1 and example 2: example 1: <html> <head> <title>relative problem - example 1</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <table border=1> <tr> <td width="640" height="480"> <div id="Layer1" style="position:relative; left:50px; top:50px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> example 2: <html> <head> <title>relative problem - example 2</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <div id="Layer1" style="position:relative; left:0px; top:200px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <table border=1> <tr> <td width="640" height="480"> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> thx for letting me know... Hello everybody, I not an expert in CSS but getting better at it. I'm trying to control the look and feel of a table but its not working. Any help you can give me would be greatly appreciated. <div id="page-container"> <div class = "data_table"> have the table all setup and some css works and some done. </div> </div> Quote: <body> <div id="page-container"> <div class = "data_table"> <table width="760" border="1" cellpadding="0" cellspacing="0"> <tr> <th> Ticket # </th> <th> Description </th> <th> Created </th> </tr> <tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="DoNav('http://www.yahoo.com/');"> <td> 473875 </td> <td> unable to install network card </td> <td> Dec.03.07 </td> </tr> <tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="DoNav('http://www.microsoft.com/');"> <td> 474723 </td> <td> Need help setting up my router </td> <td> sept.03.07 </td> </tr> <tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="DoNav('http://Imar.Spaanjaars.Com/');"> <td> 463175 </td> <td> Need microsoft word training</td> <td> Jan. 07.08 </td> </tr> </table> </div> </div> from external css file Quote: #data_table .table { border: 1px solid black; border-bottom: 1; border-left-style: solid; } #data_table .th { border: 1px solid black; border-bottom: 1 solid black; background: lightgreen; } #data_table .td { border-bottom: 1px solid black; border: 1; } Hello, I have not used CSS very much, so this may be a fairly simple problem. I want a table to be 800px wide, and 'centered' in the screen (like msn page appears when you open it at any resolution greater than 800x600). Then I have a TD whom I want to be 150px wide, how can I achieve this affect just by typing: Code: <table class="masterTable"> and Code: <td class="masterCell"> Hi I have the html below and I only want to display the "initial text" and the "some more text" bits of text. Is this possible using only CSS without any modifications to the html e.g. adding id's ? <div id="snav"> <p><span id="somespan">You are he <a title="home page" href="/content/index.html">Home</a> <a href="http://www,saving.com">initial text here </a><br />Some more Text here.</span></p> </div> thanks. G Hello people I have a silly style-related question I am trying to render a simple HTML table The table has 2 rows on its left column and one cell on its right column (rowspan = 2) What I am trying to do is to cause the top-left cell to have a fixed height, and to give the remaining height to the cell below it (in the same column). This should work no matter how tall is the table Here is my snippet: Code: <html> <body> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="50" height="45" valign="top" style="padding-right:5px; padding-top:5px;"><img src="graphic.jpg" width="30" height="40" style="border:1px solid red;"></img></td> <td width="99%" rowspan="2" valign="top" style="padding-bottom:5px;">This<br> is<br> the<br> content<br> of<br> the<br> text<br> on<br> the<br> right</td> </tr> <tr> <td width="50" style="padding-bottom:5px;" valign="top">text under photo</td> </tr> </table> </body> </html> The code behaves correctly when viewed in Firefox 1.5 (see attachment screenshot) but when viewed in IE6.0, the top-left cell seems to ignore my height request... any help would be appreciated 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. Hi, This is clearly a noob question but i'm just starting to figure out CSS as a better way to navigate & layout my page. I have nested a table inside a div to get a two column effect within the main content area. In Opera, Firefox, IE 5x for mac it works fine and the table stays within the middle section. On IE for PC it runs over the right hand side of the middle section and lays under the right hand menu. I imagine there is a way to get two column layout ysing just DIVS. . . I use my site for school, I'm a high school teacher & I teach some university coursework. My site is set up with three main divs: (heavily borrowed from Eric Meyer's CSS book.) sitenav : left hand nav_bar (for site-wide) entry : min content sidebar: Right hand sub_nav_bar (within this area) ----------------- div#sitenav {position: absolute; top: 2.33em; left: 0; width: 12.5%; font-size: 11px; background-color: white; border: 1px solid red; z-index: 10;} div#entry { color: #660; margin: 0 20% 1em; padding: 0 } div#sidebar {position: absolute; top: 4em; right: 0; width: 20%; font-size: 11px; z-index: 11;} ---------------------- http://www.mrplatts.com/pitt_tech/schedule.html any help? Thanks, Rich I need two scrollable div inside a table. Please help. Details: The div contains a table that should force it to show the scrollbars. This table inside the div has specific width(1180px). The div on the other hand should have its width set to 100%. As to why i'm using a table for the layout, i'm using a masterpage that uses table. Attempt #1 i set the div width to 1180px. This showed the scrollbar. But i don't want the users to be stuck to this if they have bigger resolution. Attempt #2 i added position: absolute; --> there are scrollbars but the 2 divs are overlapping HTML: Code:
<html>
<head>
<style>
.container
{
border: 2px solid red;
overflow: scroll;
width: 100%;
position: absolute;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<td>
<div class=container>
<table border style="width: 1800px;">
<tr>
<tr>
<td width=200> January </td>
<td width=200> February </td>
<td width=200> March </td>
<td width=200> Apr </td>
<td width=200> May </td>
<td width=200> January </td>
<td width=200> February </td>
<td width=200> March </td>
<td width=200> Apr </td>
<td width=200> May </td>
<td width=200> January </td>
<td width=200> February </td>
<td width=200> March </td>
<td width=200> Apr </td>
<td width=200> May </td>
</tr>
</table>
</div>
<div class=container>
<table border style="width: 1800px;">
<tr>
<tr>
<td width=200> aaaa</td>
<td width=200> bbbb </td>
<td width=200> cccc</td>
<td width=200> ddd</td>
<td width=200> eee</td>
<td width=200> fff</td>
<td width=200> ggg</td>
<td width=200> hhh</td>
<td width=200> iii</td>
<td width=200> jjj</td>
<td width=200> kkk</td>
<td width=200> lll</td>
<td width=200> mmm</td>
<td width=200> nn</td>
<td width=200> ppp</td>
</tr>
</table>
</div>
</td>
</tr></table>
</body>
</html>
I want to know how I could possible control all the elements inside a table that is inside a div with an id. This is possible correct? So if I have: Code:
#header { width: 900px; }
And then something like this: Code: <div id="header"> <table> <tr> <td> </td> </tr> </table> </div> I'd like to then have something like: Code:
#header.table,td {padding-left: 10px;}
Which I am hoping would put a 10px padding on all the td's in the table and nothing else. Is my syntax right? Hello, I'm brand new to this CSS business, so please be gentle! I'm trying to place my AP Div objects inside a table so that their positions are relative to the edges of the table, rather than relative to the edges of the browser window. I'm guessing I need to somehow put the code for the table around the code for the AP Div objects, but I can't work out how it's supposed to look. Any guidance would be much appreciated. Thanks! Code:
-- HTML
<div id="Dashboard">
<table id="Overview">
<tr>
<td>Cost <span>$10,710</span></td>
<td>Visits <span>51,907</span></td>
<td>Cost / Visit <span>$0.21</span></td>
<td>Conv. Rate <span>1.3%</span></td>
<td>Cost / Conv. <span>16.11</span></td>
<td>Conversions <span>655</span></td>
<td class="Detail">>></td>
</tr>
</table>
</div>
-- CSS
/* Dashboard */
#Dashboard {
border: 1px solid #b5bfbf;
padding: 2px;
}
/* Overview Table */
#Overview {
width: 100%;
border-collapse: collapse;
height: 50px;
background-image: url(../images/dashboard/overviewtable_bg.png);
background-repeat: repeat-x;
}
#Overview td {
padding-top: 8px;
padding-left: 5px;
border: 1px solid #b5bfbf;
margin: 0;
}
#Overview td.Detail {
width: 45px;
}
#Overview span {
font-size: 20px;
font-weight: bold;
display: block;
margin-top: 2px;
}
so there is a DIV with a 2px padding on the inside. But when I check it in firefox, it isn't a 2px space between the outside DIV border and the border of the table. it is more like 1px space on top and left, 2px on bottom and right. I could put another div inside with a border to achieve that 2px spacing, but that just seems extraneous. I am not sure what the issue is? edit: screenshot: http://ricebox.whiteazn.com/tabpadding.png is there a problem with placing div tags inside table cells. I have a need to do this and it works fine on my FF3 and IE7 but i am told this is bad practice. is there a problem and/or workaround to using div tags inside a table cell Is there any way to make some text vertically aligned inside a DIV? Just like you would do inside a cell? Code: <table><td valign="middle" height="100">This text is vertically aligned</td></table> Apparently, the vertically-align CSS property only works if it is relative to other DIVs. What I want is some vertically aligned text inside a DIV. Thanks for the help. hi, is there any way to keep the text inside of a box, when narrowing a browser window - OTHER than to specify a minimum width? ideally i would like to have a window expand to the bottom - i have a feeling that it doesn't work though. i mean, a box can expand sideways, why not vertically as well? this is the test page i am talking about. i would love to keep the text (and the images) inside the box at all times, without specifying a min-width. it would make the whole design eligible for any screen resolution. thanx for reading Hi, I need some help for aligning text inside a css box. let me first say, that i am using a wysiwyg editor and i am aware of this being a red flag for some folks .... to make my problem better understandable, please see following picture - this is how i want it to be: the area of interest is a 3 column box (left and right are fixed widths, middle column is variable), the middle box (highlighted in blue) is the box, which has a background picture ('Melanie Wanders') on the top/left .... then it has some text (one looong line) and also a picture to the right (alignment: right). what i wanted is, that when the user resizes the window, that the text is able to wrap around the image on the top right - and it does exactly that (you can also view the online version here) well, what happens is this: my problem: when i try to use the 'p' tags to enter a paragraph, it messes up the appearance in FF (completely) and it still shows the text right on the top, above the background image. I also tried to align the text line to the bottom of the box, but it wouldn't do so. i did also try to have the image ('Melanie Wanders') as an actual image aligned Top/Left, but it wouldn't wanna work for me with the other image next to it. i might get it to work, if this is my only option .... finally, here the code used (you will also find the code online, if you follow the above link) Code:
.inner_middle_content_row { width: 100%; height:300px ; }
.inner_middle_content_row_left { background-image: url(images/inner_table/left.png); background-repeat: repeat-y; background-position: right 0; width:125px; height:300px; float:left; }
.inner_middle_content_row_right { background-image: url(images/inner_table/right.png); background-repeat: repeat-y; width:20px; height:300px; float:right; }
.inner_middle_content_row_middle { background-color: white; background-image: url(images/about_us/melanie_title.jpg); background-repeat: no-repeat; background-position: left top; width:auto; height:300px; margin-left:125px; margin-right:20px; }
Code: <div class="inner_middle_content_row"> <!--agl:cssobject id="inner_middle_content_row" type="Column Middle Scale" /--> <div class="inner_middle_content_row_left"> <p class="submenu_brown">Melanie Wanders</p> <p><a class="submenu_gray" href="wilhelm%20wanders.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Wilhelm Wanders</a></p> <p><a class="submenu_gray" href="philosophie.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Philosophie</a></p> <p><a class="submenu_gray" href="history.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">History</a></p> </div> <div class="inner_middle_content_row_right"></div> <div class="inner_middle_content_row_middle"> <img src="images/about_us/melanie_portrait.jpg" alt="" width="160" height="180" align="right" border="0" />Chef Melanie Wanders received her Culinary Arts and Management degree .... their own hand-made chocolate company - Wanders Artisan Chocolaterie.</div> it would be great to find a solution to this - the easy way out would be to just skip the background image and have the text start right on top left .... but i like the idea of having a nice title like this - please tell me your opinion though another thing i realize is, that the whole alignment is off in IE ... this is an issue i think i have read before and it has to do with this 3px or 5px off thing in IE right? i think i will look into this some other time. Thanx for reading this - please bare with me, as my mother-language is not english and i might have expressed myself not clearly Hi all, I am attempting something new (to me at least). I have added two new images that will be backgrounds in my center content area. The first is this one . Everywhere that WAS white, I want to be this. Then, on TOP of that, and encapsulating the text itself, I want this one . Now, I thought I had this right, but it all isn't working. In FF, the first image isn't showing up at all. In IE, it shows up but is overlapping the tan area on the left by a pixel or two. In addition, all of this is way down south! I think the float: left is screwing things up, but I couldn't get anything right so I left it alone. Any help would, as always be greatly appreciated! Chris PS. URL is http://www.bartlett-family.net/BBCON/index3.html & CSS is at http://www.bartlett-family.net/BBCON/main3.css 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? <div height = 100% doesn't work inside <table> but if i change height = 900px, it works. anyone know how to fix it? see example code below. thx so much <table border = 1> <tr> <td> mesg </td> </tr> <tr> <td> <div style='HEIGHT:100%; WIDTH:100%; OVERFLOW:auto'> <table border=1 width=100%> <tr><td>stuff</td> <td>more stuff</td></tr> <tr><td>stuff</td> <td>msg </div></td></tr> </table> </div> </td></tr> </table> Im trying to get an input field and form button to line up to the right of an <li> tagged menu and not sure of the approach i should take. I'd prefer not to use a table if possible, and the table im using now is a bit buggy anyway. this is a page with the menu as it shows right now.... http://www.seesawusa.com/products/ this is the page with the basic idea of what im trying to do http://www.seesawusa.com/pages/74/ Things i'v tried 1. put the form inside a LI tag.... This results in putting the search box below the list of menu items across all my test browsers. 2. put the UL and the FORM inside a table with 2 cells... in FF, i get the result i want... except the LI and INPUT field are not aligned to the right in IE6 & 7 I get it lined up the way i want it. But the table pushes the the height and width of the containing div to an unacceptable level I've seen this type of thing before and in my searching other sites i've only found complicated table based layouts that use it. Does anyone know an approach that would allow me to leave out tables, or at the very least only use one? Thanks for the glance. P.S. Interestingly enough, the page you are reading has a menu and text field configuration that im wanting to use, but it is very table oriented. |
|||||||