|
CSS - Creating A Table
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. Similar TutorialsHi 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? Hi, How to create a rounded table, which has the td elements also rounded? Thank you 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>
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? 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;} 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? 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. One thing I've never been able to replicate using CSS that you can do w/ tables is a simple content area with tab, where the border goes just around those areas and there's a set width for the tab but no set width to the area beneath it. I'll try to graphically depict what I mean he _____________ |************|____________________ |*********************************| |*********************************| |*********************************| |*********************************| |*********************************| ------------------------------------------------- Seems simple enough, right? Just imagine that's a solid border and the asterisks are the content area, and I want to create this using only CSS and divs. The tab, say, is fixed at 100px, but the area below is at some percent, say 90% of the page. The problem ends up being the portion to the right of the tab. I need to create a div there so that the top right border is drawn, which is really the bottom border of that space. I can't simply give the area below a top border because then it would place a border under the tab, and I want the tab to be seamless with the area beneath. CSS can't figure out what the remaining width of the div to the right of the tab (at least without using the under developed display:table-cell), so I can't specify the width of that div, which means I can't know how far to extend it to reach the right side of the area below. So, generally, as far as I can tell, the above depiction can't be done without tables. Can anyone find a workaround? Please let me know if I'm not explaining this well enough. Thanks! hye peeps i need to create a external css for my website www. losttv . 50webs. com would someone please help me, i have no idea. ive made the site how i want it to look and i need the css else i wont pass my assignment. i have no idea how to create it either and have tried reading books? any advise would be SO welcome ricki is it possible to create this in css ? if so, does anyone have a tutorial on how to ? or what its called so i may research it more (content box? container box?) ty btw, just the style not the stuff inside them lol Hello, I'm trying to create about 4 columns to hold different things in an organized manner with css. My site is www.rafm.org and if you go to the paste section, and look at the recent pastes, I want them to be in columns with column headers. So, how do you create columns with css? I want to have all my hyperlinks in my CSS file, so I can call them all at once. Is there any way to do this? Or do I have to code them into every page individually?? 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>
-------------------------------------------------------------------------------- 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 create a menu using 'list' but so far without much success :-( Problems? Not displaying horizontally in browser. Can't center text in box. Adding 'padding' didn't work. Any help would be much appreciated, Mike P.S. Please ignore the colors ;-) //paste.pocoo.org/show/207718/ Please add http to the above - I'm not yet allowed to .. I know this should be possible - I'm not a CSS noob, nor a grand master I'm trying to create an internal webapp that only needs to work with current modern browsers - so I'm not constrained by all the IE hack stuff. It uses jquery-ui in places I can get a version that nearly works in Safari, and one that nearly works in FF - but not one that works in both. And all attempts still have minor glitches. (sorry - forum wouldn't let me post live links - you will have to copy and paste) The target would be this: ptone.com/temp/wrad/target.png With the layout being fluid both vertically and horizontally - status bar always visible on the bottom - overflow content in the tab divs would be scrolled (see transcript tab in examples below) Neither of these are perfect, but here is the one that works in Safari: ptone.com/temp/wrad/test-layout.html and here is the version that almost works in FF ptone.com/temp/wrad/test-table.html Neither works in the other browser I've looked at lots of stuff about two column fluid vertical - but they almost all involve just one of the columns being fluid and one being set to content height. I want everything to be fluid (with a min h/w) except for the tabbed content Absolute positioning seems to be the way to go here - but I'm struggling getting the jquery-ui tabs not to collapse in one browser or another. Any help appreciated. -Preston I am working on a project in which users will be able to sign up for a program, lets compare it to a myspace page... and they can customize the look and feel of that page to a very limited extent. What is the best way to have them choose colors of the page through CSS, have those changes be there always applied to their page and their page alone? I don't need help with the implementation, I currently have it to where users can choose from pre-built stylesheets and those are used, but how do you set it up to where what options they choose in the setup wizard are then creating a new stylesheet just for that user on the fly? Thanks a ton, SS |
|||||||