|
CSS - Links Wont Format Inside Table Class:onscroll
Im using this to make an onscroll effect
Code:
table.left {border-collapse:collapse;
float:left;
margin-left:10px;
margin-right:10px;
background:#8f8f8f;
padding:5px;
color:#000000;
font-family:Verdana;
text-decoration:none;
}
td {padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;}
td.bg:hover {
background:url(images/yellow.png);
padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;
}
And the links don't format with the typical css markup Code:
a:active {color:#000000;
font-family:Verdana;
text-decoration:none;}
a:link {color:#000000;
font-family:Verdana;
text-decoration:none;}
a:hover {color:#000000;
font-family:Verdana;
text-decoration:none;}
Ive tried a couple different things like making td.bg:link, td.bg:active with the specifications->no luck Note:this is in IE Nevermind...I just figured it out..used a link class and set the visited attribute Similar TutorialsHiya, im trying to place a blog inside a table and also have a picture above the table and some links. In Mac Firefox and Camino it works perfectly. but in IE or Safari it just doesn't want to work. Please help Thanks guys Hey i got some cells in a table which hold links. How can i make only the links inside these cells a different color? This is the class i use on the table cells: css Code: Original - css Code .selectedContactRow{ background-color: white; color: black; }
I only know how to change the link colors in general. css Code: Original - css Code a:link{color: red;} a:hover{color: red;} etc.
thanks in advance. I am trying to define 5 different types of links in one style sheet. I have three questions. 1. How would I declare it in the style sheet? I have tried the following, which does not work: a.typea { font-weight: bold; color: #E8C960; text-decoration: underline; } 2. How would I refer to the class in the HTML? I have tried the following which does not work: <a href="link.htm" class="typea">Some Link</a> and <span class="typea"><a href="link.htm">Some Link</a> 3. Can you assign a rollover class to link classes? I tried the following which does not work: a.typea:hover { font-weight: bold; color: #06FF00; text-decoration: none; } Any help on this is appreciated. I can't be limited to only one type of link throughout an entire dynamic website. D Hello everyone. I have a site that uses a PHP command to pull the PHP modifier from the URL and use that as a class for a header. Those classes each have their own BG image in my external stylesheet. On any browser other than IE win it works fine, headers change as the class changes. On IE win though only the first one (my "about" class) works, the rest default to the standard header. I have re-typed the rest to see if it was just a text problem but nope. Everything validates fine. The page is http://holiday.mrpunkin.com/about.php My classes are as follows: they all modify the "mid" div as you can see: Code: #mid.about {background: transparent url("/img/headers/mid_about.gif");}
#mid.activities {background: transparent url("/img/headers/mid_activities.gif");}
#mid.food {background: transparent url("/img/headers/mid_food.gif");}
#mid.travel {background: transparent url("/img/headers/mid_travel.gif");}
#mid.resident {background: transparent url("/img/headers/mid_res_rel.gif");}
#mid.health {background: transparent url("/img/headers/mid_health.gif");}
#mid.fitness {background: transparent url("/img/headers/mid_fitness.gif");}
#mid.maintenance {background: transparent url("/img/headers/mid_bg.gif");}
#mid.construction {background: transparent url("/img/headers/mid_construction.gif");}
#mid.employment {background: transparent url("/img/headers/mid_employment.gif");}
Does anyone know why IE Win won't recognize the different BG images and use those? When I view the source I can tell that its outputting the class name correctly, so thats not the issue. Please get back to me asap. Thanks. edit: the sites @ www.tomaustin.dsl.pipex.com/webdev Ive been doing some googling and cant find out how it works how do i apply attributes like a:link, a: hover to an image I had some like Code:
image a:hover, a:link, a:active, a:visited {
border: etc..
}
this does not work..it comes up with the horrid blue and purple backgrounds how do i do it? tom: ) Here is the page: http://www.sdtars.com/development/o...tion/atwork.php (Note: Some pages don't work due to development) I have a class named sized and within the class there is always a img a p tag. I am trying to get the img tag to float to the left, and then have the p tag follow that up to it's right (still left aligned), with a left-margin of 10px. Every time I attempt to do that, it just forces the p tag down to the next line. Any ideas how I can get them to be inline? Hello, thanks for taking the time to read my post. I'm having a problem getting my divs to layout where I want them to. Here is the worst example:here Obviously, the footer is not in the traditional location. This seems the most logical for the code, the footer is at the bottom of the main div. I thought it would get pushed down by all the other stuff in the main div... This works ok: this But if the content for that page is short, it's going to do this: here This only works for very short content, nesting it in with the menu: here I am able to position it horizontally depending on which div I nest it in. It seems to me that I should have the footer div at the end of the 'main' div so that it winds up at the bottom. thanks for your time, juglesh What is the best way to evenly space these links inside the div? PHP Code: <div id="contain_header"> <div id="header"> <a href="index.php" class="nav">Homepage</a> <a href="manufacturers.php" class="nav">Manufacturers</a> <a href="contact.php" class="nav">Contact Us</a> <a href="carfinder.php" class="nav">Advanced Car Search</a> <a href="specialoffers.php" class="nav">Special Offers</a> <a href="faq.php" class="nav">FAQ's</a></div> </div> I want to create a css menu where a chunk or block is highlighted on mouse over but inside that block are individual hyperlinks that are also highlighted on mouse over. Here's the catch, I can't use any doctype tags like this one <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> because it makes the rest of my page look like junk. The top nav on this page is exactly what I want to do. http://www.smashingmagazine.com/tag/showcases/ How are you supposed to use the class="someCssStyle" attribute format inside of an struts html tag? I tried just putting it in, but the jsp page won't compile: <html:text property="ssn" class="textfield2" /> where textfield2 is a valid style attribute in my included css file. Surely there is a way to specify this so that the taglib will render the proper output. I'm not having any luck googling for an answer. Hello, I can't seem to figure out how to make my CSS drop down menu work the way I want it to. I am using an id in the body tag and a class in the navigatin links so the style sheet will mark what section of the site you are in by making the background change color. This works. The problem is, now that I have the sections being marked, the highlight no longer works. How can I get the highlight to work in the section you are in? I have been experimenting for hours but I can't make it work. http://www.tpxdesign.com/test/Valliant/alpha/index7.php My nav menu code and nav style sheet: Code: <!--[if !IE]><!-- start nav --><![endif]-->
<div id="side_nav_bar" class="floater">
<div id="nav_menu">
<ul id="nav">
<li><a href="demoreel.php" class="port">Portfolio</a>
<ul>
<li><a href="demoreel.php" class="port">Demo Reel/s</a></li>
<li><a href="shorts.php" class="port">Shorts</a></li>
<li><a href="musicvid.php" class="port">Music Video</a></li>
<li><a href="comvid.php" class="port">Commercial</a></li>
<li><a href="miscvid.php" class="port">Misc. Video/Film</a></li>
<li><a href="gallery.php" class="port">Photo. Gallery</a></li>
</ul>
</li>
<li><a href="services.php" class="serv">Services</a>
</li>
<li><a href="newupdate.php" class="newe">News & Events</a>
<ul>
<li><a href="newupdate.php" class="newe">News/Updates</a></li>
<li><a href="eventblog.php" class="newe">Event Calendar</a></li>
</ul>
</li>
<li><a href="bio.php" class="about">About Valliant</a>
<ul>
<li><a href="resume.php" class="about">Resume</a></li>
<li><a href="bio.php" class="about">Biography</a></li>
<li><a href="contact.php" class="about">Contact</a></li>
</ul>
</li>
<li><a href="links.php" class="link">Links</a></li>
<li><a href="index7.php" class="home">Home</a></li>
</ul>
</div>
</div>
<!--[if !IE]><!-- end nav --><![endif]-->
Code: ul {
margin: 0;
padding: 0;
list-style: none;
width: 199px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 198px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
#home .home, #about .about, #link .link, #newe .newe, #serv .serv, #port .port
{
color: #000;
background-color: #eee;
}
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. I am trying to get a Table Style layout using only DIVs and CSS and every combination I could find doesn't seem to work when it involves being dynamic. Statically, it works fine. In the image I attached, "1" is the final result I am trying to get. The Red and Blue boxes at the top and bottom will always have a static height of about 25px, but I want the Green in the center to be dynamic, to take up the rest of the space not occupied by the Red and Blue boxes. In example "2", if I set the green to 100% height, it will just flow outside the parent container. And if I don't set a height, as seen in example 3, it will just be a small bar and the bottom Blue box will just move on up with it. Using a table would be easy since I can easily create that basic structure that would always work, but I'm trying to make something in all DIV and CSS and the past many months, I found no solution! Anyone got any ideas that isn't Javascript based? Thanks! Hi All, I am trying to echo a table that I have given the following css style: PHP Code: table.paginationtable { cell-spacing: 1px; border: 1px solid #000; } table.paginationtable td.location { background-color: #6699FF; color: #FFF; font-family: arial, verdana; font-size: 11px; padding: 5px; font-weight: normal; line-height: 130%; text-align:left; } In the html I have: PHP Code: echo "<table class=\"paginationtable\"><tr>"; echo "<td class=\"location\">$location</td>"; echo "</tr></table>"; For some reason the 1 px border that I styled for the table is not showing up around my paginationtable. Can anyone see anything wrong with my code? Do the echo's look ok? Or is my CSS logic the problem? Brad. i have the following css: Code: .table1 {
border-collapse: collapse;
width: 50%;
margin: 24px;
font-size: 1.1em;
}
.table1 th {
background: #3e83c9;
color: #fff;
font-weight: bold;
padding: 2px 11px;
text-align: left;
border-right: 1px solid #fff;
line-height: 1.2;
}
.table1 td {
padding: 6px 11px;
border-bottom: 1px solid #95bce2;
vertical-align: top;
}
.table1 td * {
padding: 6px 11px;
}
.table1 tr.alt td {
background: #ecf6fc;
}
.table1 tr.over td, tr:hover td {
background: #bcd4ec;
}
However all tr and td's now getting a hover effect. i tried several methods but I'm to unpracticed with css. Grtzz whitehat 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, 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>
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 |
|||||||