|
CSS - Migrating A Simple Table To Div Blocks
Hello. My first post at this section
I'm trying to familiarize with all the positioning properties in CSS but got stuck when trying to migrate the table at the bottom of this code, to div blocks: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<style>
body
{
margin: 0;
padding: 0;
font-size: 90%;
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
background-color: #FFF;
color: #000;
}
table, div {
padding: 15px;
margin: 0;
background-color: #464646;
height: 30px;
width: 100%;
}
tr, div div {
color: #FFFFFF;
font-size: 18px;
height: 100%;
}
</style>
<body>
<table class="top"><tr><td>Product Name</td><td align="right">Company Name</td></tr></table>
</body>
</html>
I tried wrapping two <span> inside a <div> and float the second <span> to the right, but from what I read so far, floating is not the solution because it sets the element as a block even if it's inline. Although it works using plain old tables - btw why is IE rendering a somewhat different page then FF? - and I should follow the KISS rule I want to learn how can I make this work. Thank you a lot! Similar TutorialsOkay, so finally I've taken the plunge to DIVs from TABLEs after everyone raves above the benefits CSS. I've almost finished the outline of my page but I want the shadow of the main box to have a dynamic width. This is what i've ascertained from the code around on the web. I think I may have made it more complicated then necessary... My problem is when you adjust the size of the window, the shadow image in #bottom won't automatically adjust. What I think I need is a way to make #bottomright overwrite what is in #bottom. Any help would be GREATLY appreciated! The page: --------- http://www.jmusician.com/temp.php my HTML code: -------------- <div id="header"> <img src="./graphics/main_heading.gif"> </div> <div class="container"> <div id="topleft"> </div> <div id="topmiddle"> </div> <div id="topright"> </div> </div> <div class="container"> <div id="left"> </div> <div id="main"> </div> <div id="right"> </div> </div> <div id="btmlink1"> <a href="" border="0"><img border="0" src="./graphics/bottom_link_bio.gif"></a> </div> <div id="btmlink2"> <a href="" border="0"><img border="0" src="./graphics/bottom_link_comp.gif"></a> </div> <div id="btmlink3"> <a href="" border="0"><img border="0" src="./graphics/bottom_link_perf.gif"></a> </div> <div id="btmlink4"> <a href="" border="0"><img border="0" src="./graphics/bottom_link_rep.gif"></a> </div> <div id="btmlink5"> <a href="" border="0"><img border="0" src="./graphics/bottom_link_teach.gif"></a> </div> <div id="bottom"> </div> <div id="bottomright"> </div> my CSS code: ------------ html, body { margin: 5px 3% 3% 3%; padding: 0; background-color: #EEE3B9; color: #FFFFFF; } //I realised that the code for container isn't //absolutely necessary .container{ } #topleft { margin: 0px; float: left; padding: 0px; background-color: Black; width: 8px; } #topmiddle { float: left; padding: 0px; margin: 0px; width: 100%; background-color: Black; clear: right; } #topright { float: right; padding: 0px; margin: 0px; width: 8px; background-image: url(../graphics/inner_top_right.gif); background-repeat: no-repeat; clear: right; } #left { margin: 0px; float: left; padding: 0px; background-color: Black; width: 8px; height: 400px; } #main { float: left; padding: 0px; margin: 0px; width: 100%; background-color: Black; height: 400px; clear: right; } #right { float: right; padding: 0px; margin: 0px; width: 8px; background-image: url(../graphics/inner_right.gif); background-repeat: repeat-y; height: 400px; clear: right; } #btmlink1 { margin: 0px; float: left; padding: 0px; background-color: #EEE3B9; width: 134px; height: 36px; clear: right; } #btmlink2{ margin: 0px; float: left; padding: 0px; background-color: #EEE3B9; width: 128px; height: 36px; clear: right; } #btmlink3{ margin: 0px; float: left; padding: 0px; background-color: #EEE3B9; width: 173px; height: 36px; clear: right; } #btmlink4{ margin: 0px; float: left; padding: 0px; background-color: #EEE3B9; width: 136px; height: 36px; clear: right; } #btmlink5{ margin: 0px; float: left; padding: 0px; background-color: #EEE3B9; width: 133px; height: 36px; clear: right; } #bottom { float: left; padding: 0px; margin: 0px; background-image: url(../graphics/inner_bottom.gif); background-repeat: repeat-x; width: 30%; clear: right; } #bottomright { float: right; padding: 0px; margin-top: 0px; margin-left: 0px; margin-right: -8px; background-image: url(../graphics/inner_bottom_right.gif); background-repeat: no-repeat; width: 8px; position: static; clear: right; } THANKS! justin Like many PHP programmers, I've been migrating from table-based design to CSS for a few websites now, but there's still a problem I've yet to get around. Most dynamic websites have at least one page that displays a number of dynamic results that need to be displayed in a tabular format. That is, you need to display variable results in orderly columns and rows. Traditionally, this has been done with html tables. No problem. Tried and true. But WC3 has recommend the migration away from tables. Thus, I feel like I'm a "bad" web developer when I resort back to using tables for the dynamic results on my otherwise CSS-based page. Question: since this is a problem that many PHP programmers currently face, has anyone found a good resource for information on this problem? Is it even possible? I've purchased several CSS books and have combed through many websites, but I've never found information relevant to the dynamic design that we PHP programmers face. In fact, the O'Reilly book seems to indicate that it's not possible to achieve tabular layout without using tables: Quote: Tables are unique, compared to the rest of document layout. As of CSS2.1, tables alone possess the unique ability to associate element sizes with other elements--all the cells in a row have the same height, for example, no matter how much or how little content each individual cell might contain. The same is true for the widths of cells that share a column. There is no other situation in layout where elements from different parts of the document tree influence each other's sizing and layout in so direct a way. - p.331, Cascading Style Sheets: The Definitive Guide, Second Edition by Eric A . Meyer, (c) 2004, O'Reilly Media, Inc. So before I give up my search, I thought I'd post to this forum to see if anyone has found a good solution. Many thanks, Steve Stringer Hello, I'm trying to make a neat CSS version of the tabled "itembox" in the attached image. I've got this far: http://offhourscomputing.com/ibdev.php The CSS for that page is: Code:
/*Item Box*/
#ib{
margin:10px;
width:38%;
overflow:hidden;
padding:3px;
border-top:2px solid #eaeaea;
border-right:2px solid #eaeaea;
border-bottom:1px solid #eaeaea;
border-left:1px solid #eaeaea;
}
#ib #l{
width:25%;
border-right:#eaeaea 1px dashed;
}
#ib #r{
width:75%;
display:inline;
}
#ib #r #n{
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
text-decoration: none; color:#000000
}
#ib #r #n,#m{
display:block;
}
/*Item Box*/
How can i have: "SAMSUNG 40GB 7200RPM Light and Slim IDE Hard Drive, Model SP0411N, OEM Drive only ...More Testing" inline with the image? (looking similar to the attached screenshot of the item boxes) Thanks. Hi, I'm a bit confused with the relative/absolute positioning issue. I thought that relative would carry the normal flow of things, but as you can see with the code below, all of the DIV items that should follow each other are overlapping even though positioning is set to relative. Can anyone help me out as to what I am doing wrong? Thanx <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> body { padding : 0; margin-top:10px; margin-bottom:0px; background:#FFF; height: 0px; width: 0px; margin-right: 0px; margin-left: 0px; } .titleBlue{ font-family: Arial; font-size:18px; color : #003896; } .darkBlue{ font-family: Verdena; font-size:11px; color : #003896; font-weight : bold; } .smallStyle{ font-family: verdana; font-size:10px; color : #000000; text-decoration : none; } #content{ position : relative; left:50%; width:730px; margin-left:-365px; } #hrColumn{ position : absolute; top : 0; left : 0; width : 149px; border-right: 1px dotted #5D89D1; margin-right : 5px; } #hrLogo{ position : relative; top : 0; margin-bottom:5px; } #linkSection{ position : relative; margin-bottom:10px; } #columnLink{ position : relative; } #linkArrowItem{ position : absolute; top : 3px; } #linkItem{ position : absolute; left : 12px; } </style> </head> <body> <div id="content"> <div id="hrColumn"> <div id="hrLogo" class="titleBlue">Blablabla</div> <div id="linkSection" class="smallStyle"> <div id="columnLink"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">Programs and Forms</a></div> </div> <div id="columnLink"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">Development and Training</a></div> </div> <div id="columnLink" class="smallStyle"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">Careers</a></div> </div> <div id="columnLink" class="smallStyle"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">More...</a></div> </div> </div> </div> </div> </body> </html> I am creating a top nav with links that are turned into floated blocks. I have 2 issues that I can't seem to figure out. 1. How do I keep the elements from wrapping? 2. How do I make the set of floated items centered? Here is what I have so far (see code below). Because the items are floated to the left, they stay anchored to left and aren't centered. I tried giving the nav div a width. That did allow it to be centered, but I don't know what the exact width of the combined link blocks would be, so if it is too short, it wraps, and if it is too wide it doesn't center evenly. Code:
#nav{
text-align:center;
padding-top:24px;
}
#nav a{
display:block;
float:left;
padding:13px;
text-transform:uppercase;
color:#9BA047;
background:#FFF;
line-height:1em;
text-decoration:none;
font-weight:bold;
}
#nav a:hover{
color:#85231C;
}
#nav a#logo{
float:left;
padding:0px;
}
<div align="center">
<div id="nav">
<a href="/" id="logo"><img src="images/logo.gif" alt="Associated Group" border="0" /></a><a href="/about-us.html">About Us</a><a href="/exterior.html">Exterior</a><a href="/interior.html">Interior</a><a href="/display.html">Display</a><a href="/employment.html">Employment</a><a href="/location.html">Location</a><a href="/contact.html">Contact</a>
<div class="clear"></div>
</div>
</div>
I am using "Stylin' With CSS" book to learn how to do my website layout and I need to put some images on my website. I just need something simple... I have an image showing what I am trying to do but I can't post the url.... I basically just need to create a horizontal row of n images, n being 1 to 5. The images are very close in dimensions, but not exactly the same. How can I do this... Thanks, CD I have a multi-column layout. The "main" column has text within <p> tags defined thusly:
Code: #main p {
font-family: Helvetica, Verdana, Geneva, Arial, sans-serif;
font-size: 12px;
line-height: 1.7em;
padding:0 10px;
}
Within that main columns are some <div> blocks that are arranged in a row at a certain place, define like this: Code: .mid_nav {
float:left;
width:110px;
margin:0px 10px 8px;
background:url("./images/pic_nav_bg.gif");
background-repeat: repeat-y;
}
I would like to define different qualities to the <p> tags within these <div> blocks, but the original #main p definitions seem to over-ride whatever I try. Incidently, the reason I've defined the font-size in pixels is I need uniformity between IE and FF. Any suggestions? Code: a {
display:blocks;
width:100px;
height:20px;
border:1px solid #000000;
background:#CCCCCC;
}
This code works great in Internet Explorer, but Firefox doesn't seem to like the width and height settings. Does anyone know a way to do this in firefox? Thanks in advance! ok im fairly new to css and so i am working and learning from examples however i would like to know how one would go about changing the following table to a CSS layout using divs. Code:
<table style="margin: 0 auto" cellspacing="1" cellpadding="2">
<tr class="gen_small" style="height:50px">
<td align="center">{FORUM_OPEN}</td>
<td width="100">Open Forum</td>
<td align="center">{FORUM_LOCKED}</td>
<td width="100">Closed Forum</td>
<td align="center">{FORUM_NEW}</td>
<td width="100">New Posts</td>
</tr>
</table>
Hi, I'm having a problem which I though should be fairly simple, but I've been hacking at it for many hours now. I want to align blocks horizontally at the bottom of a containing block. The containing block has a fixed height while the contained block do not. Here's a mockup of what I want: URL How should I modify the following code so that it renders like the above? Code: <div style="height:50px">
<div style="float:left">one</div>
<div style="float:left">two</div>
</div>
Thanks! Hi, i'm almost finished with my first css design. Everything works fine as far as i tested it. But when i refresh the graphical page (broadband) or click on the broadband link when i'm on the broadband page i get a white block on the left and right side of the page. It is very strange because it disappears when you scroll down and back up. Sometimes i have to refresh a couple of times, or switch between small- and broadband to see the effect. Code: http://users.pandora.be/jef_patat/test/index.htm I have no clue at all greetings, de Jef hi, im not sure if im posting in the right page but after viewing the page source, i think its the best way to post it right here i just want to know what should i learn to make such beautiful block/tables whatever call it just like at kathymarks dot com? any suggestion what should i learn from? links? thanks! on the side note, how about the tables/blocks on deviant art? thanks for the replies! I am trying to set up the following table: Code: <form method='post' action='form.php'>
<table border=0 cellpadding='2'>
<tr>
<td><b>First Name: <font color='red'>*</font></b></td>
<td><input type='text' name='f_name' size=45></td>
</tr><tr>
<td><b>Last Name: <font color='red'>*</font></b></td>
<td><input type='text' name='l_name' size=45></td>
</tr><tr>
<td><b>Telephone Number: <font color='red'>*</font></b></td>
<td><input type='text' name='phone' size=45></td>
</tr><tr>
<td><b>Email Address: <font color='red'>*</font></b></a></td>
<td><input type='text' name='email' size=45></td>
</tr><tr>
<td><b>Website:</b></td>
<td><input type='text' name='website' size=45></td>
</tr><tr>
<td><b>Subject: <font color='red'>*</font></b></a></td>
<td><input type='text' name='subject' size=45></td>
</tr><tr>
<td><b>Message: <font color='red'>*</font></b></td>
<td><input type='text' name='message' size=45></td>
</tr>
<tr>
<td><input type='submit' value='Valuate'></td>
</tr>
</table>
</form>
The next to last td cell (message) I obviously need the height of this cell to be much higher and wider so people can type a message. However, I have tried td rowspan and colspan all with no results. What am I doing wrong? Hi, What is the best way achieve this using divs instead of a table. I have done it but it was such a long winded method. I've been going round in circles: Code:
<table>
<tr>
<td align="left">Stuff 1</td>
<td align="center">Stuff 2</td>
<td align="right">Stuff 3</td>
</tr>
</table>
Thanks in advance, and apologies if I look like a dumbass. APPEARS TO BE HASLAYOUT ISSUE IMAGE WITHIN ANCHOR NOT CLICKABLE. Hi Guys looking for a spot of help please. IE is driving me up the wall. Ive wrote a jQuery script for scrolling a list horizontally upon user clicking left or right. The list has anchors within it which are blocks which I want to be clickable with an image inside (fine in FF etc) but in IE the image within the anchor loses its ability to be clicked the rest if fine apart from I manually have to set the cursor to pointer to show the user its clickable still. Just when they click the item image within the anchor it does nothing. Here is a slim version of the HTML : Code:
<ul>
<li><a href="/page1.html"><span class="box_wrap"><span class="img"><img src="1.jpg" border="0" height="75" /></span><span>Item 1</span></span></a></li>
<li><a href="/page2.html"><span class="box_wrap"><span class="img"><img src="2.jpg" border="0" height="75" /></span><span>Item 2</span></span></a></li>
<li><a href="/page3.html"><span class="box_wrap"><span class="img"><img src="3.jpg" border="0" height="75" /></span><span>Item 3</span></span></a></li>
<li><a href="/page4.html"><span class="box_wrap"><span class="img"><img src="4.jpg" border="0" height="75" /></span><span>Item 4</span></span></a></li>
<li><a href="/page5.html"><span class="box_wrap"><span class="img"><img src="5.jpg" border="0" height="75" /></span><span>Item 5</span></span></a></li>
<li><a href="/page6.html"><span class="box_wrap"><span class="img"><img src="6.jpg" border="0" height="75" /></span><span>Item 6</span></span></a></li>
<li><a href="/page7.html"><span class="box_wrap"><span class="img"><img src="7.jpg" border="0" height="75" /></span><span>Item 7</span></span></a></li>
<li><a href="/page8.html"><span class="box_wrap"><span class="img"><img src="8.jpg" border="0" height="75" /></span><span>Item 8</span></span></a></li>
<li><a href="/page9.html"><span class="box_wrap"><span class="img"><img src="9.jpg" border="0" height="75" /></span><span>Item 9</span></span></a></li>
<li><a href="/page10.html"><span class="box_wrap"><span class="img"><img src="10.jpg" border="0" height="75" /></span><span>Item 10</span></span></a></li>
<li><a href="/page11.html"><span class="box_wrap"><span class="img"><img src="11.jpg" border="0" height="75" /></span><span>Item 11</span></span></a></li>
<li><a href="/page12.html"><span class="box_wrap"><span class="img"><img src="12.jpg" border="0" height="75" /></span><span>Item 12</span></span></a></li>
<li><a href="/page13.html"><span class="box_wrap"><span class="img"><img src="13.jpg" border="0" height="75" /></span><span>Item 13</span></span></a></li>
<li><a href="/page14.html"><span class="box_wrap"><span class="img"><img src="14.jpg" border="0" height="75" /></span><span>Item 14</span></span></a></li>
</ul>
CSS Code: Code:
ul {
width: 9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position: absolute;
top: 0;
}
ul li {
display:block;
list-style:none;
margin:0;
padding:0;
border:0;
text-align:center;
float:left;
width:118px;
height:133px;
}
ul li a{
display:block;
border-right:1px solid #e2f5fe;
outline:none;
text-decoration:none;
background:#FFF;
padding:3px 2px 3px 2px;
line-height:15px;
}
ul li a:hover{
background:#e2f5fe;
color:#fe0084;
}
ul li span.box_wrap {
display:block;
background:#FFF;
height:127px;
}
ul li span.box_wrap span{
padding:0px 3px;
font-size:12px;
}
ul li span.img {
padding:2px 0px 2px 0px;
display:block;
}
Just when you try to click any of the images within the boxes its not clickable. Really stumped. Any help or pointers would be greatly appreciated. Thanks in advance! 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? Hello, I have a problem that is making me crazy! I have a simple page with some news on it. Every news is a <div> and contains two floating blocks: Image(floating left) and the text(also floating left). These blocks must stay side by side and NOT one over the other. The width of the news <div> can be 500-550px max for layout reasons. If the text is longer than the space available Firefox moves the entire text block under the image, while IE resize correctly the text block. I have tried to apply diplay:inline; to both blocks with no effect. Here is the test page Link (I have limited the width to 500px to simulate the real layout.) CSS: Code:
.news {
float: left;
clear:left;
margin: 0 0 1em 0;
width: 100%;
}
.img_hl {
float:left;
margin-right: 10px;
}
.newstext {
padding-top: 1em;
float:left;
}
Please help me!! -- Bye Redhawk 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) |
|||||||