|
CSS - Css To Replace A Table
Dear friends,
I have the following table, which I need to be replaced with CSS. How can I do it? Here is the code: Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="background: url(engine/images/onLayerWinUpLeft.png) top right no-repeat; width:51px; height:51px"><div id="closeBut" style="width: 30px; height: 30px; position:absolute; margin-left: 302px; margin-top: 10px"><img src="engine/images/closeBoxBut.png" /></div></td>
<td style="background: url(engine/images/onLayerWinUp.png) top left repeat-x;"></td>
<td style="background: url(engine/images/onLayerWinUpRight.png) top left no-repeat; width:51px; height:51px"></td>
</tr>
<tr>
<td style="background: url(engine/images/onLayerWinLeft.png) top right repeat-y;"></td>
<td style="background-color:#FFFFFF" height="400"> </td>
<td style="background: url(engine/images/onLayerWinRight.png) top left repeat-y"></td>
</tr>
<tr>
<td style="background: url(engine/images/onLayerWinDownLeft.png) bottom right no-repeat; width:51px; height:51px"></td>
<td style="background: url(engine/images/onLayerWinDown.png) bottom left repeat-x;"></td>
<td style="background: url(engine/images/onLayerWinDownRight.png) bottom left no-repeat; width:51px; height:51px"></td>
</tr>
</table>
Similar TutorialsI'm creating a site with a few div layers. Like so: Code: <div id="mainDiv"> <div id="topLinks"><a href="##" class="linkStyle">Calendar</a> | <a href="##" class="linkStyle">Site Map</a> | <a href="##" class="linkStyle">Home</a></div> <div id="siteContent"> <div id="mainContent"> <div id="header"> <a href="##"><img src="img/logo.gif" width="131" height="30" border="0" alt="Logo" title="Logo" style="padding: 10px 0px 12px 19px;" /></a> <div id="orangeNav">Top Navigation</div> </div> <div id="content"> ****** Need left navigation and right content here**** </div> </div> <div id="bottomNav">Bottom Navigation Here</div> <div id="footer">Footer Info here</div> </div> </div> The problem is with the bold green part. I'm trying to create a left-side navigation with content to the left. If I create a table, I'm done and it works. Of course, I'm trying not to use a table to set up the design. The the other div tags are all position: relative. If I add two div tags that are position: absolute and place them, the text put in the absolute tags are not affecting the rest of the page and the footer either covers or gets covered by the absolute tags. However, I can't get it to work with relative div tags. I'm a beginner so I'm struggling. I know I've done it before, but it's just not working this time. In case you need it, here's the style sheet: Code: body {
background-color: #1D1F12;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* The whole container for the page */
#mainDiv {
position: relative;
top: 0px;
left: 0px;
width: 767px;
padding: 7px 0px 25px 13px;
}
/* START: Calendar | Site Map | Home link and related styles */
#topLinks {
position: relative;
width: 757px;
padding-bottom: 8px;
text-align: right;
font-size: 10px;
color: #999999;
}
#topLinks .linkStyle {
font-size: 10px;
color: #999999;
text-decoration: none;
}
#topLinks .linkStyle:hover {
text-decoration: underline;
}
/* END: Calendar | Site Map | Home link and related styles */
/* START: items within the lighter background block */
#siteContent {
position: relative;
width: 741px;
padding: 14px 13px 35px 13px;
background-color: #393D23;
}
#mainContent {
position: relative;
border: 3px solid #ffffff;
}
#header {
position: relative;
height: 104px;
background-image: url(img/bg-header.gif);
border-bottom: 4px solid #FFF1B8;
}
#orangeNav {
position: relative;
height: 25px;
background-color: #993300;
border-top: 1px solid #ffffff;
border-bottom: 3px solid #ffffff;
text-align: center;
vertical-align: middle;
}
#orangeNav .navImg {
padding: 4px 8px 0px 8px;
}
#content {
position: relative;
background-image: url(img/bg-content.gif);
padding: 0px 0px 25px 0px;
}
#leftSide{
position: relative;
left: 9px;
top: 12px;
width: 150px;
}
#nav {
position: relative;
width: 150px;
border: 1px solid #A8A81F;
background-color: #E0DD92;
padding-top: 5px;
}
#nav .navItem {
padding: 5px 8px 5px 8px;
}
#nav .navItem:hover {
background-color: #E9E6B0;
}
#nav .link {
font-size: 10px;
color: #393D23;
text-decoration: none;
}
#nav .link {
font-size: 10px;
color: #393D23;
text-decoration: none;
}
#nav .link:hover {
text-decoration: underline;
}
#rightSide{
position: relative;
left: 200px;
top: 12px;
width: 520px;
font-size: 11px;
border: 1px solid red;
}
#bottomNav {
position: relative;
background-color: #989A8C;
padding: 2px 25px 2px 0px;
text-align: right;
}
/* START: footer area and related styles */
#footer {
position: relative;
padding: 20px 0px 0px 0px;
color: #BFC1B8;
font-size: 10px;
line-height: 14px;
text-align: center;
}
#footer .linkStyle {
font-size: 10px;
color: #BFC1B8;
text-decoration: none;
}
#footer .linkStyle:hover {
text-decoration: underline;
}
Edited to add: I have included the div tags for the left and right portions: #leftSide and #rightSide Hi! I'm making a gallery page. It should have this structu Code: _________________________ | IMAGE | IMAGE | IMAGE | | Text | Text | Text | _________________________ First I wanted to do it with tables, but I taught I'll give CSS a go. What is the "nice" way of doing this? The images are in different heights, but I want the Text aligned vertically on the same place at each cell. Please help! Chrille I used to create my website using tables before. At those times when I needed to create a field with multiple columns I used <th> attribute. Whats the best method of creating something like below without tables. :::: <table> <tr> <th> ID </th> <th> ARTICLE> </th> </tr> <tr> <td> Id numbers </td> <td> Articles </td> </tr> </table> Recently I learned of the tag <iframe> for including external stuff in my web site. It's use, of course, breaks every rule in the book concerning the strict DTD and modern CSS design. Can you suggest the proper alternative to the following?: <iframe height="250" width="190" scrolling="yes" src="../vsCalendar/upcoming.php"></iframe> Thank you for your valuable time. I have the following:
PHP Code: <td id="nav-01" onmouseover="this.className='classover'" onmouseout="this.className=''">Home</td> I realise the "this.className" will produce a class of "classover" when I do a mouseover. However I already have an id="nav-o1" and therefore the class will not overwrite this.... they are both setting different background colours to the column. Can anyone help me? PHP Code: <td id="nav-01">Home</td> That is the basic code and I would like background colour to change when doing a mouseover and then revert to original when mouse goes away. As much CSS as possible and as little javascript... Please! Hello I would like to have some text replaced after, for example 10 seconds, with new text. And with fading in and fading out Example given: after opening page fade in - show text1 "Welkom to the pleasure dome" - fade out fade in - after 10 sec "For the latest Items, go to..." - fade out fade in -after 10 sec "For ordering , call 0800-orderIT" - fade out and so on. But al on the same place ( footer ) I did see this somewhere, but I am not sure if it was CSS only. Thanks hey, I got a form and use javascript to perform simple validations on it. When all form fields are valid, ready_for_submit is true and i want to show a div saying everything is filled in correctly. (a different div is shown when not all fields are filled in correctly). I got that working but what i want is that both div's have the same position. Now when one div is hidden, an empty line is shown, and below that line the visible div is shown. (Its the other way around when the other div is hidden.) html Code: Original - html Code <td colspan="4" align="right"> <div id="not_ready" style="visibility: visible;"> <img name='img_subRegister' src='images/invalid.gif'> Not all required data is valid<br> <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)"> </div> <div id="ready" style="visibility: hidden;"> <img name='img_subRegister' src='images/valid.gif'> All data is valid<br> <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)"> </div> </td> <td colspan="4" align="right"> <div id="not_ready" style="visibility: visible;"> <img name='img_subRegister' src='images/invalid.gif'> Not all required data is valid<br> <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)"> </div> <div id="ready" style="visibility: hidden;"> <img name='img_subRegister' src='images/valid.gif'> All data is valid<br> <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)"> </div> </td> How can i set both div's on the same position? Changing visibility is done with javascript like this: javascript Code: Original - javascript Code if(ready_for_submit == false){ document.getElementById("not_ready").style.visibility = "visible"; document.getElementById("ready").style.visibility = "hidden"; return; } else{ document.getElementById("not_ready").style.visibility = "hidden"; document.getElementById("ready").style.visibility = "visible"; }
thanks in advance. I'm into redesigning our web shop, and am thinking about navigation. Today we have a 30-item tree menu, "norton commander"-style. I'm looking for a modern, user-friendly alternative. I've understood that top menus are very "in" now, so I have concidered that, but failed to narrow down the menu items. I need a vertical menu that can hold many items, but also is user friendly. this menu is good, but I would like to load the submenu items via ajax. Anybody know if anyone has done that? Can anybody point me in the right direction of any blog/article/script about how to deal with the navigation problem? Hi-- I'm sure I'm missing something incredible easy, but I'm working on no sleep so please help! I've got image buttons and for rollovers I want to have a simple color highlight on the top so I've got the image in the background of a <div> then in a nested <div> I put a 100% transparent .png inside a link tag. Using CSS, I said replace that with the semi-transparent .png. In Firefox it displays the highlight at the bottom of the button image; in IE 6, it doesn't even display the background. My code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a img {border: none;}
.button {width: 193px; height: 116px; background-image:url(button.jpg);}
.button2 a:link {background-image:url(transparent.png); border: none; width: 193px; height: 116px; display: block;}
.button2 a:hover {background-image:url(hover.png); border: none; width: 193px; height: 116px;}
-->
</style></head>
<body>
<div class="button"><div class="button2"><a href="#"><img src="transparent.png" width="193" height="116" /></a></div></div>
</body>
</html>
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. Here's the deal. I want to have one generic button image that I can use for all buttons. Therefore, I don't want to have words on the image but instead want to write them in afterward. Normally, you could just do something like Code: <input type="image" src="..." and things are fine. However, like I said, I don't want to do that because this forces me to create an image with the words already on them. I want a black button that I can write the words on, but want it to still behave like a submit button. Which means, once I type in my username and password, I just want to be able to hit enter (and not be forced to click on the button) and submit the form. Am I asking for too much? 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 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, 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! |
|||||||