|
CSS - Help In Css Complex Table
I wish to set up a table but do not know how to go a step further.
What I have done up to now is... Code:
<html>
<head>
<style type="text/css">
.container {
width: 500px;
height: 300px;
}
.colLeft {
width: 30px;
height: 400px;
float: left;
background-color: beige;
}
.barTop {
width: 400px;
height: 30px;
float: left;
background-color: LightBlue
}
.colRight {
width: 30px;
height: 400px;
float: left;
background-color: LightGreen;
}
</style>
</head>
<body>
<div class="container">
<div class="colLeft">cl</div>
<div class="barTop">bt</div>
<div class="colRight">cr</div>
</div>
</body>
</html>
But what I need to get is... Can you help me? Thanks! Similar TutorialsSo I have a layout I am totally stumped on how to get it to work. Its a centered layout. I have three divs (left, center, right) the left and right divs can't scroll up and down but the one in the middle can. The scroll bar needs to appear on the far right (just like on a normal layout). I was able to get something very close by making the two side divs fixed, but when I do this and make the screen small so that a left-right scroll bar appears when I scroll only the content in the middle scrolls (so it overlaps into the left div). Any help would be appreciated. I can't post images but if you want more info message me and I can send you a picture of the layout I would like to do the following on a web page but not sure how. Tried a few things but it didnt display what I was hoping for... I want essentially a 3 layered background image. The main background is one image that is tiled in all directions The second image is tiled in x but attached to the top of the screen The third image is the same as the second image but attached to the bottom of the screen. Over the top of this I want to use html tables and have the background displayed through the empty table cells. Is this possible? Any help appreciated Help? I have designed a look for one of my buddies companies. However, it is quite complicated. I have attached the .GIF file for you to reference. The design needs to be cross-browser friendly. The navigation is going to be dynamically built using a backend application built in PHP. The nav_links will be text not images, as well as the text next to the "did you know" items. I imagine that the placement of some of the "did you know" items can be arranged to ease the slicing process. Also, the left main image (the guy) needs to be dynamic in that it rotates through images on refresh or a revisit (probably some javascript). On top of all that, I need the "featured" or "did you know" items i.e. the round images and text to dynamically change also. These will be likes into specific sections of the site. My major concern is getting the main header pieced together correctly while meeting cross-browser compatibility. I have some CSS knowledge but as i mentioned the design is quite advanced. Any ideas on how to correctly structure it to work? TIA BA Does anybody know of a 3 column layout that does not use absolute positioning and uses X/HTML code like the following? I've found one where the left two columns are contained in an extra <div> (here), but I kind of need the opposite. Code: <div id="left"> </div> <div id="container"> <div id="main"> </div> <div id="sidebar"> </div> </div> I am trying to create a completely non-uniform layout for one of my clients using only CSS. I would like to accomplish this using only floats that are cross-browser supported. The layout is split up into 9 different panels that need to be positioned correctly. Is this achieved simply by using float and clear? I have been experimenting and have been failing. What about positioning? Would kind of positioning would I use to arrange something inside of a parent div? See attached file for layout. P.S. I know I can get this exact layout done using tables, but I would much rather do this with some "simple" CSS. I'm having trouble with a table layout I'm trying to convert to a float layout my attempt so far is as follows Code:
--loop--
lfloat{
float:left
}
boatLeft{
width:100px;
}
#cls# gets replaced with a class that only sets the background for odd and even rows.
<div class="lfloat boatLeft #cls#" style="border-right:1px solid black;height:150px;">
<a href="javascript:void(0);" onclick="displayVessel(#rssearch.YSNNUM#);">View Details*<br />
<img id="thumb#currentrow#" style="border-color:white;width:100px;" src="#getpic.thumbpicname#" alt="#boatname#" />
</a>
</div>
<div class="#cls#">
<div class="boatLeft lfloat">
<strong>Boatname</strong>
</div>
<div>
<strong>#BOATNAME#</strong>
</div>
<div class="clear"></div>
<div class="boatLeft lfloat">
LOA
</div>
<div>
#loam#m / #loaft#' #val(loain)#"
</div>
<div class="clear"></div>
<div class="boatLeft lfloat">
Builder
</div>
<div>
#MFGNAME#
</div>
<div class="clear"></div>
<div class="boatLeft lfloat">
Naval Architect
</div>
<div>
#hulldsnr#
</div>
<div class="clear"></div>
<div class="boatLeft lfloat">
Designer
</div>
<div>
#designer#
</div>
<div class="clear"></div>
<div class="boatLeft lfloat">
Decorator
</div>
<div>
#decorator#
</div>
<div class="clear"></div>
<div class="boatLeft lfloat">
Stylist
</div>
<div>
#stylist#
</div>
<div class="clear"></div>
</div>
<div class="clear"></div><!--- clear the float for the outer div --->
-end loop--
in both ie and FF this looks terrible. I'm not sure If I should just be using a table here or if I should be using floats. Gary you should probably have somehting to say about that... the attachment show's how its supposed to look. The black boxes represent block level elements, not borders. Dave My first time posting a thread, any help is greatly appreciated. After inserting an id to the body tag in order to achieve an active page in my image sprite navbar, all of my center aligned content becomes left aligned. Here is the associated css for one link: Code: body {
margin: 0;
text-align: center;
background-color: #000;
}
#wrapper {
margin: 50px auto 0px auto;
text-align: left;
width: 900px;
}
.........
#navbar {
padding: 0;
margin: 0;
list-style: none;
width: 900px;
height: 50px;
overflow: hidden;
}
#navbar li {
float: left;
}
#navbar a {
display: block;
background-image: url(images/main-navbar.gif);
padding-top: 50px;
text-decoration: none;
}
#home {
width: 182px;
}
#home:hover {
background-position: 0px -50px;
}
#home:active {
background-position: 0px 0px;
}
#home li.home a {
background-position: 0px -50px;
}
..........
And the html: Code: <body id="home">
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Top Navbar -->
<div id="topnavbar">
<ul id="navbar">
<li class="home"><a id="home">Home</a></li>
<li><a id="events" href="events.html">Events</a></li>
<li><a id="menu" href="menu.html">Menu</a></li>
<li><a id="photos" href="photos.html">Photos</a></li>
<li><a id="contact" href="contact.html">Contact</a></li>
</ul>
</div>
<!-- End Top Navbar -->
.....................................
</div>
<!-- End Wrapper -->
</body>
Navigation bar works perfect but wrapper is not center aligned as it was previously. This is driving me crazy and I'm running out of time! Please Help. -Thanks I'm a designer first and foremost who is now working on learning CSS based layouts. In the past, I've always handed my PSD file off to a coder who generates the HTML/CSS. I'd like to learn how to do that portion myself. I know my way around the basics of CSS based layouts in setting up a standard 2 column layouts using floats and also 3 column layouts using absolute positioning for the left and right columns. The video tutorials from Chris at CSS-Tricks dot com were fantastic in getting me jump started by the way. Highly recommended. I'm now looking at how to draw up the framework for a more complicated layout in CSS rather than reverting back to old table based HTML but I'm stumped. Here is an image of the layout in question sans logo and content: codedpreview dot com/?view=5361 As you can see, in the body there are three columns, one spanning 50%, two spanning 25% and each column has 1 or 2 rows of section containers. This layout would be a no brainer using nested HTML tables. I'm confused on how to set up these rows within the columns using CSS. Would you essentially do the same and nest div tags within the three columns? Does anyone have any good tutorials or resources I could review in regards to setting up the body portion of this layout in particular? Thanks so much for your time and help! 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. 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. 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! 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, 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? I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information. I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what). URL The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background. Could someone solve this, or alternatively reccommend another way. Hello, I am having problems trying to convert a table into a 'div'. The problem I am running into is due to the fact that this table contains a header (see attachment), rows and cells. How would I go about adding 'rows' and 'cells' to a div? The current CSS code I am using (external file) to create the table in the attachment is the following: Code:
td
{
background-color: #454545;
border-bottom: solid 1px #000;
border-right: solid 1px #000;
border-left: solid 1px #000;
padding: 5px;
}
td.header
{
background-image: url(../img/tableheader.gif);
background-repeat: repeat-x;
border-top: solid 1px #000;
text-align: center;
font-weight: bold;
}
table
{
margin-top: 10px;
}
table.mid
{
margin-left: auto;
margin-right: auto;
}
What I would need is the same thing created but by making use of div's, not tables. I know it is sometimes okay to use tables for tabular data, though I want to totally get rid of them. Any help would be appreciated. Heya guys, Im having this problem with my table, where when I put alot of text, or list things in the middle, the left-most and right-most tables expand with it, which isnt a problem, but the content of those two get centered vertically on the cell itself. My question is what code can I use to keep the content of those two tables at the top all the time, no matter what the circumstance? |
|||||||