|
CSS - Creating Table Styles
Hi there.
I am trying to create the attached image in style sheets. I have done everything, but now I'm stuck on the border of the bottom TD. Anyone got any suggestions on how to do this? Similar TutorialsI have two navigation menus on my site. One that is horizontal across the top and the second is vertical along the left side. Both of these have rollover effects. I would like to code this with as few lines as possible. So far, I only have the code for the left-side navigation menu. What else should I add for the horizontal menu? Code: #navbar ul{
list-style:none;
margin:0; /* removes indent in IE and Opera */
padding:0; /* removes indent in Mozilla and Netscape 7 */
border:none;
list-style-type:none; /*turns off display of bullet */
}
#navbar li{
border-bottom:1px solid #003366;
margin:0 /*dictates the space between navbar items */
}
#navbar li a {
display: block;
padding: 5px 0 5px 5px;
border-left: 10px solid #1958b7;
border-right: 0px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%
}
#navbar li a:hover {
border-left: 10px solid #1c64d1;
border-right: 0px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
i have a table that i'm using within a div. here is the style #content { float: left; padding: 0 20em 4em 3em; } #content table .content { border: 1; bordercolor: #fff; width: 100%; cellspacing: 0; cellpadding: 0; } when i reference the style for the table within the div, nothing is applying. not sure what im doing wrong here. <div id="content"> <table class="content"> please advise.. i'm guessing its syntax I have a unique problem: I am working inside of a content management system. This system uses tables EVERYWHERE. I need to place a simple border around the table (or tbody tag, which does define a style, but still no class, and covers the same area i'm looking to place the border around) defining the main body of the site. I cannot edit this table to use an id or a class, and unfortunately, unlike in the past, I cannot hijack this table's class because this is one where it is not defined. I have tried using Code:
<style type="text/css">
tbody[style]
{
border: 1px solid #000000 !important;
}
</style>
which works, but only in firefox, and not IE7, or Google Chrome. I'm guessing i've exhausted my options. But i'm not sure. Any help would be GREATLY appreciated. Also, I do hope i've explained what i'm trying to do clearly. I sometimes have a tendency to not clarify certain things as much as i should Hello, I am trying to aling two unordered lists side by side by each other. I want them to look like: Code: Example 1: Example2: *blah *blah *blah *blah *blah *blah I'm running into two problems: 1) I can't get them spaced apart from each other. I tried putting them in a table, but the cells just sit right next to each other so there's no space. 2) Since it is an UL, the dotted bullet points are centered, however, I would like them left-justified like the example. Is this possible? Thanks guys, [EDIT] After posting, the example does not display like I want it. I want a whole SPACE GAP between the two lists. The post made them run together. Hi, How to create a rounded table, which has the td elements also rounded? Thank you Hi all, i'd like to make a 'table' like div that has a column down the left hand side with one or more image tags and another cell on the right with text, however i would like to do this without specifying the height (other than 100% or 1px) or absolute position of the divs: Code: ___________________ |Image 1 |Text | |Image 2 |Text | | |Text | | |Text | ------------------- Currently i've got 3 divs: one for the outer 'table', one for the images 'cell' and one for the text 'cell'. Outer 'table' style: None (just a plain <div>) Images 'cell' style: height:100%;float:left Text 'cell' style: height:100% Here's the full code if you want it: Code: <div>
<div style="height:100%;float:left;"><img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10" border="0"><br>
<img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10"></div>
<div style="height:100%"> [div 2] Shows text on the right <br>
<br>
continues downwards no matter how much text appears<br>
<br>
<br>
<br>
<br>
<br>
Even down here [/div2] <br>
</div>
</div>
This works great in i.e. but not mozilla, anyone have any ideas? Something like this gives real thick and uneven borders, is it possible to make the borders combine and become one single border when they are next to each other? I don't want to use seperate border-top border-left etc ... Thank you. Code:
<HTML>
<HEAD>
<style type="text/css">
div.table div
{
border : 1px solid black;
/* border-collapse : collapse; */
}
div.table div.tr
{
clear : both;
}
div.table div.tr div.th
{
float : left;
font-weight : bold;
width : 25%;
}
div.table div.tr div.td
{
float : left;
width : 25%;
}
</style>
</HEAD>
<BODY>
<div class="table">
<div class="tr">
<div class="th">column 1</div>
<div class="th">column 2</div>
<div class="th">column 3</div>
<div class="th">column 4</div>
</div>
<div class="tr">
<div class="td">num 1</div>
<div class="td">num 2</div>
<div class="td">num 3</div>
<div class="td">num 4</div>
</div>
<div class="tr">
<div class="td">numAAA 1</div>
<div class="td">numA 2</div>
<div class="td">numAAAA 3</div>
<div class="td">num 4</div>
</div>
<div class="tr">
<div class="td">num 1</div>
<div class="td">num 2</div>
<div class="td">num 3</div>
<div class="td">num 4</div>
</div>
<div class="tr">
<div class="td">num 1</div>
<div class="td">num 2</div>
<div class="td">num 3</div>
<div class="td">num 4</div>
</div>
</div>
</BODY>
</HTML>
I am trying to create a table with rounded cellcorners using 1 pixel gif's. It is possible to do this with html only but this creates an enormous amount of code. Unfortunately the tables have to be inserted in the WYSIWYG editor of the Vignette V7 content management system and the people inserting the tabular data are novices and do not know anything about html. Therefore I have to use css and a very simple html table. This is the code I have created so far: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rounded Corner Test Using CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.header {
font-weight: bold;
color: #FFFFFF;
background-color: #666666;
background-image: url(dot_br.gif);
background-position: left top;
background-repeat: no-repeat;
}
.light {
background-color: #CCCCCC;
background-image: url(dot_br.gif);
background-position: left top;
background-repeat: no-repeat;
}
.dark {
background-color: #999999;
background-image: url(dot_br.gif);
background-position: left top;
background-repeat: no-repeat;
}
.rounded {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}
-->
</style>
</head>
<body>
<table width="75%" border="0" cellspacing="1" cellpadding="3" class="rounded">
<tr class="header">
<td colspan="3">Title</td>
</tr>
<tr class="light">
<td>Text</td>
<td>More text </td>
<td>Contents</td>
</tr>
<tr class="dark">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
And this is the result: URL As you can see, using the css background property I can only place a pixel in one cellcorner at the time and I need to have them in all corners. Does anybody have an idea how to do this without making the html code too complicated? Trying to create a table psuedo class so that the specific attributes apply to the target table. Not sure if my syntax is correct. What I would like is to call the ID DataTable and have it cascade thru the tr, td...... Here are my tags: #DataTable { width:auto; border-collapse: collapse; border:1px solid #cccccc; border-spacing :20px;} #DataTable tr { border-spacing:20px;} #DataTable td.headerDescription{ width: 240px;} #DataTable td.fundCell { width: 240px; text-indent:40px;} #DataTable td.percentageCell { width: 60px; vertical-align:middle; text-align:center; border-right:1px solid #cccccc;} #DataTable td.seperator { border-top:1px solid #cccccc;} #DataTable td.assetCategory { width: 240px; text-indent:20px; vertical-align:middle;} #DataTable td.headerColumn { font-weight:bold ; width:40px; background-color:#F0F0F0 ; text-align :center;} #DataTable td.leftHeaderColumn { font-weight :bold ; width:40px; background-color:#E0E0E0 ; text-align :center ; border-left:1px solid #cccccc;} #DataTable td.assetClass { width: 240px; vertical-align:middle; font-weight :bold;} #DataTable td.performanceCell { width:60px; background-color:#E0E0E0 ; text-align :center ; vertical-align :middle;} Unfortunately I am not very experienced and I am trying to edit some coding that has been done for me. The code is as follows <div title="[[TITLE]]" style='background-image: url ([bg]); padding: 5%; width:90%; height:100%; padding-left: 6%; padding-right: 6%; background-size: 100% 100%; '> Now what happens is the words I type in this box are beautifully laid out because of the padding... The images placed in the box should stretch border to border - but obviously don't because of the padding.... Can anyone please tell me what I can change to give my text padding but images with no padding? Thanks so much Hello -- new to this forum. My questions concerns a problem I've run into many times. I'm trying to be CSS-moral and use style sheets as much as possible, or a least place properties in the Header. But here's what I run into. Many times I find it necessary to have different properties for the same tag within the Body. Currently, I use CSS to create the Menu items at the top of each web page, an Unordered List, using the "li" tags. Ok, but I just discovered that by using a new CSS statement, I can use custom bullets in the Body's li tag: list-style-image : url(bullet.gif) . Cool!!! So, I went about making a little dog bone .gif and used it for my bullet graphic halfway down the page. Voila! It worked. Voila! I suddenly have dog bones in my menu (which I don't want !), which also use the li tag. I only know two workarounds. 1) is to go back to the BAD practice of using the taboo in-line style="images/dogbone.gif" in each li within the body and NOT put the statement in the Header style section or 2) at least try to use CSS in the header by making a class like li.bone { list-style-image : bone} and then repeat class="bone" for each li in the body, which is only slightly shorter than just putting in the style="xxx" in the first place. So, how do we handle using different style properties for the same tag within the body? Perplexed, Mike I'd like to seperate blocks of text with a horazontal rule. I'd like it to be dashed. So, I've come up with this: Quote: hr { border: none 0; border-top: 1px dashed #000; width:98%; height: 1px } However, although this works well in IE, it Firefox there is too much space between the HR and the text block under it. In other words, the text above the HR comes right up to the line, but the text under the line, there is a larger gap. Any way to close the gap? Any ideas? Hi for some reason some style are getting lost when ie is displaying the page i am developing, if somone could have a look that would be fantastic edited links because question has been answered Thanks everyone Basically, what i'm trying to work out is if the following is possible. Code:
.mainBodyColor {
background-color : #FFFFFF ;
color: #000000;
}
.mainBodyFont10pt {
font-size: 10pt;
<mainBodyColor>
}
.mainBodyFont14pt {
font-size: 14pt;
<mainBodyColor>
}
where <mainBodyColor> is a nested call to the style in some way.
etc etc etc
How do i go about nesting/including the mainBodyColor styling within the mainBodyFont10pt style? I know that the following doesn't work Code: <font class="mainBodyFont10pt" class="mainBodyColor "> Some text to go in here</font> What I'm trying to do is have in one place the colour and include it into many styles, so if i want to change the colour scheme of the site i just have to change it in one spot and i know that the whole site will change. Thanks in advance. Ok so what is the css substitute for the valign tag? Thanks! Hi, I remember reading that there is a css attribute for removing all browser-specific formatting from an element, for example forms, H tags and divs (which are pre-formatted differently in ie and firefox) but I can't recall what it was! Does anyone know how this is achieved as I find it very laborious when creating stylesheets to have to remember to reset all of these elements' formats. - before anyone says it, I know I could set up a generic, cross-browser-ready stylesheet for use with all my sites, and this is a system I already employ, I am simply concerned with saving bytesize and achieveing smaller stylesheets that are more easy to work with. I remember it was something like this: instead of: form{ margin:0px; padding:0px; } I'm sure you can do something like: form{ preformatting:none; } Does anyone know what I'm talking about? Or did I dream it?... cheers in advance I am hacking a clients css. Can someone tell me where I am going wrong. His site is a Smarty one. Here is the meta tags. The website is www.russiansweets.us and I am trying to format the links in the right nav menu underneath the search function that are presently red. I added class A.one:{} Class but it seems not to make a difference. I get the same color links before as after (red) Code:
<html>
<head>
link href="stylenew.css" rel="stylesheet" type="text/css">
{literal}
<style>
A
{
COLOR: red;
FONT-FAMILY: Arial, Verdana, Helvetica;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
A:hover
{
COLOR: #993300;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
// here is the part I added a.one
{
COLOR: #FFFFFF;
FONT-FAMILY: Arial, Verdana, Helvetica;
FONT-SIZE: 13px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
a.one:hoover
{
COLOR: #FFFFFF;
FONT-FAMILY: Arial, Verdana, Helvetica;
FONT-SIZE: 13px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
</style>
//end of what I added
{/literal}
Here is the html Code:
<td>
<a class="one" href="disclaimer.php">Disclaimer</a>
</td>
What is the difference between inline styles and id's? Are there places where you should use one and not the other? Sorry if this has already been answered but I couldn't find anything in a search. Newbie question...I've always struggled with getting my links to show up right (hover styles, visited styles, etc.) In this case, I want my links to show up without an underline normally, but with an underline when hovered over. When they're visited, I don't want there to be any difference. I want them to show up normally. Right now I've got Code: .leftnavtext A:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
}
.leftnavtext A:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: underline;
}
.leftnavtext A:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
}
.leftnavtext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
}
And when I hover over a visited link, it doesn't get underlined. Any idea why? Thanks. I have a page that I'm building as a prototype for a working medical exam GUI. I'm using Dreamweaver and it's pretty ugly. Is there anywhere I can download some styles that will bring this site to life? Maybe OSX or Vista-looking stuff? |
|||||||