|
CSS - Going For The No Tables Approach ;)
Hi there.
I am sick and tired of constantly working my fingers like slaves by writing <tr><td> etc all the time. I have decided to try out the tableless method of web design. So I began my quest only to trip up on the first hurdle. I wanted to create a <div> element which sits in the middle of my page, and to have paragraphs and images to the right, and perhaps a menu to the left of the div element. First off, the paragraphing to the right isn't working. I am clearly very talented. Anyway, here's my code: Code:
<html>
<head>
<title>
</title>
<style type="text/css">
<!--
body {
margin: 10% 10% 10% 10%
}
.main {
padding:20px;
background-color:#ffffff;
border:solid 1px #333333
}
.inside {
float: right;
width:500px;
}
-->
</style>
</head>
<body>
<div class="main">
<div class="inside">
<P>
This is messed up.
</P>
</div>
</div>
</body>
</html>
So what's going wrong? Cheers Similar TutorialsHow do you guys approach rendering bugs do you try apply hack, separate style sheets for each browser or do you try to change around the css so it displays the same on all browsers. I seem to be finding niggly things and differences between ie6 and Firefox all the time quite frankly it make;s me wanna go For instance today I found out about the hasLayout bug, where the top margin was not showing in ie6. Messing around with margin and padding I manged to fix it by using padding instead of margin. But sometimes on a off day I will mess around with positioning. What is the recommend solution to prevent and solve such issues, Any Advice much appreciated Hello, I building a page with a form. Tables would be super easy, but my client expects web 2.0 Here's the page: http://www.caillouette.com/Utilitrek/eight/members/search_inquiry.php I'm currently using <span class="form">, or <span> but look totally different on different computers (i.e. Firefox on PC or MAC) Here's my CSS: Code: .last_name
{
margin-right:230px;
}
.first_name
{
margin-right:220px;
}
Can anyone tell me the best approach? Basically I need each field's text to line up below and to the left. The form is a lot longer and has varied width fields throughout. Any help or ideas are appreciated. thanks -S I am new to web development and am in the process of learning XHTML, CSS, PHP and SQL. I need to know if i am making any major mistakes in my approach to making this site as far as CSS is concerned. The site is a simple file browser which displays files and their details in a table with a vertical navigation bar. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="header"></div>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="/dotastats">DoTA</a></li>
<li><a href="/phpmyadmin">phpMyAdmin</a></li>
<li><a href="upload.php">Uploads</a></li>
</ul>
<div id="content">
<table>
<thead>
<tr><td><a href="upload.php?sort=filename">Filename</a></td><td><a href="upload.php?sort=ext">Type</a></td></tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<?php
require("functions.php");
updateFiles();
$page = $_GET['page'];
$sort = $_GET['sort'];
if($sort == "")
{
$sort = "ext";
}
$files = getFiles($sort);
$i = 0;
$colours = array('even', 'odd');
foreach($files as $v)
{
if($i >= ($page * 20) && $i < (($page * 20)+20))
{
echo
'<tr class="'.$colours[$i % 2].'">
<td><a href="files/'.$files[$i][0].'">'.$files[$i][0].'</a></td>
<td>'.$files[$i][1].'</td>
</tr>';
}
$i++;
}
?>
</tbody>
</table>
<?php
echo "<br/>";
$pageCount = $i / 20;
for($i = 0; $i <= $pageCount; $i++)
{
echo " [";
echo "<a href='upload.php?page=$i&sort=$sort'>$i</a>";
echo "] ";
}
?>
</div>
</body>
</html>
Edit: Code: html, body {
margin: 0;
padding: 0;
}
a:link {text-decoration:none}
a:hover {text-decoration:underline}
#nav {
background: #9966CC;
height: 30px;
border: 1px dotted #000000;
margin:0;
padding:0;
text-align: center;
}
#nav li {
display:inline;
padding:0 10px;
margin:0;
font-size: 14;
}
#header {
background: black;
height: 100px;
}
#footer {
background: black;
height: 100px;
}
#content {
width: 800px;
margin: auto;
padding: 10px;
}
#upload {
text-align: center;
}
table {
font-size: 14;
}
table thead tr {
background-color: #6699FF;
font-weight: bold;
}
table tbody td {
width: 400px;
}
table tbody tr.even {
background-color: #B0C4DE;
}
table tbody tr.odd {
background-color: #CAE1FF;
}
table tbody tr:hover {
background-color: #9999FF;
}
I have a programmer who developed a CMS website using Javascript, PHP and CSS. He is having alot of trouble getting the website to remain consistent within all the pages of the website. There is a misalignment going from page to page. It also tends to look inconsistent when comparing it with other browsers. What are the common methods to keep the website consistent. I have told him to use a Reset sheet, do you think this will work??? What are the common pitfalls or approaches a person should do to create a consistent website? eg. reset sheet?? Approach to coding? Not using certain type of coding?? Anyone have an approach or method that ensured them their websites were consistent and had no alignment issues? I read one was to avoid positioning coding. Any help appreciated!! I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
Hi everyone, Dont actually know if this is possible (my css knowledge is way not what it should be!) Can I define a whole set of attriblutes for a table (fonts, links, hover links etc etc) and than just use it with <table class = "whatever"> etc and then that table will have all the properties I defined (for only that table, not for the rest of the page) if so how could I go about doing that. Any help is very appreciated! cheers Hello everybody, I am new to the forum and also a newbie to webdesign! I am hoping that somebody wants to help me out as I am trying to put the design of a table and the font used in CSS. I am trying to create a new table class out of: <table cellspacing="0" cellpadding="0" width="100%" class="tekst6" bgcolor="#E6373D"> (tekst6 = FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #ffffff; ) How do I do this? Many many thanks in advance for your help! Regards Buzzman Hi I would like to replace the tables that make up my page with CSS. I have a header, footer, left column and the main body. Do you know of a link to a tutorial that can help. Or perhaps you know the CSS code. Any pointers gratefully received.. For some reason the following HTML & CSS code do not render the same result as the code listed below it: CSS - Attached Style sheet Code:
td.style1{
background-color: #FFFFFF;
border-top: 1px solid #AAAAAA;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #AAAAAA;
}
HTML Code Code:
<table>
<tr>
<td class="style1">Some content to display</td>
</tr>
</table>
HTML (Intended display) Code:
<table>
<tr>
<td bgcolor="#FFFFFF" style="border-top: 1px solid #AAAAAA; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #AAAAAA;">Some content to display</td>
</tr>
</table>
Why wouldn't any browser follow the CSS in the stylesheet? Hello. I'm currently tweaking the layout of one of the websites I run. Every page on the site consists of a series of side boxes on the left and main content on the right and currently this divide is created though tables. I'm trying to replace the old tablular layout with a series of divs which are positioned with CSS. Below the header of my page is a content div, which contains two other divs, left and right. The rest of the site content resides in seperate divs in either the left or right div. I've managed to position the left div on the left hand side of the page and the right div on the right. However, the text in the right div is longer than the content in the left div and I'm finding that once the content on the left has finished, the content on the right is filling the whole of the page beneath it, when I actually want it to stay on the right and just leave the remainder of the left hand side blank. I've been trying to fix this for a while now and haven't managed to do so yet so I'm hoping someone here might be able to offer some suggestions. I've put up a sample page of the layout at http://www.mybb-emods.com/new/index.htm. Similarly, the CSS code I'm using is located at http://www.mybb-emods.com/new/stylesheet.css. If anyone could help me, I would really appreciate some advice. I've a feeling there's a really simple solution here, but I certainly haven't managed to find it yet. After discovering Css and finally understand it...(still need to get better) I have to ask, when is it good to use a table? what are their main function ? is there things you can do with a table that cannot be done with css? thanks. Hi, how can I draw these borders to a table using css? Thank you! I am looking for advice on replacing a table layout (for form layout) with a CSS design. The purpose is to put together a PHP class that auto-generates forms so that the structure of the forms, is under control of an admin interface though an API. The problem is, that many of the clients that I do work for are very particular about the layout. In other words city, state and zip code must all be on one line, but phone number must have a row to itself, etc., etc.. The form must look exactly like the paper version. Generating a good looking form through an API using a table layout where i have to worry about column spans and so forth, is not something I am looking forward to. I would like to use a CSS layout instead. What is the best way to coax divs to work in the same way table cells and rows do and still deal with any goofy IE CSS quirks? Hey Guys, Hope you are all OK! I've been away abroad for a bit and now its back the the manic life here Has anyone got any good examples of creating pretty tables using CSS? I am ideally looking to to something that maybe has alternate colors on Columns and rows and changing colors where they cross?>!? or something equally as good for looking at data! Any links to examples would be great! Charlie I grew up doing web programming knowing that tables were bad. It didn't take long before I read all the documents on why not to use tables for design. And I know firsthand... What still mystifies me to this day is why whenever I check another newer "professional" site, it's all in tables... sometimes with no CSS at all... sometimes with a little. I rarely see a site that has no tables. Why is this? Is it to minimize problem with IE? I am curious how important it is to use CSS for tables these days? I am a more of a PHP developer but have been using HTML tables for my applications since I don't do anything fancy on the front-end. I am asking because I am planning to start work on an open source project. While the project itself is intended to be used inhouse for companies and not on the Internet, it would still be nice to know if CSS or HTML tables could affect it in positive or negative ways. Thanks. **FIXED** Ok moving my site from tables to CSS in my spare time at work but im having some difficulty with height attr. Click me The Left and right bars - I would like them to go all the way to the bottom of the page. If anyone can help - please let me know! Thanks! Edit: Got it to work in Firefox just fine - but IE6 is still giving me problems. Edit #2: *sigh* needed to set body to 100% - man IE is bass-ackwards. Hello all, I have a site which I am working on right now and there is going to be text on the right side, and 3 rows on the right which on the top there will be a page banner, on bottom, just a picture, and i want to repeat the background colors on the other side. Kind of confusing to explain but he brandyn.garlic.com/headstart/aboutus.html Thats a page on the site, as you can see, there is a blank spot where I want a background to repeat but the size will obviously vary by the size of the content on the right. If someone could assist me with that, I would greatly appreciate it. Thank you, Brandyn Hi, I always used tables for my layout but want to change that to CSS. Problem is, I don't know how to get started thinking of the layout in css. I mostly make my pages centered with tables, can I do this with CSS? Does CSS use absolute position ? I was making a site with tables, but want to change that to CSS Know of any good tutorials (for people who used tables before) greets Does anyone know of some good tutorials on how to use CSS rather than tables? If so, could you providea link. Thanks a lot. andrew |
|||||||