Topic: Using Divs and tables Pages that link to <a href="https://ozoneasylum.com/backlink?for=11101" title="Pages that link to Topic: Using Divs and tables" rel="nofollow" >Topic: Using Divs and tables\
 
Author Thread
Blaise
Nervous Wreck (II) Inmate

From:
Insane since: Jun 2003

 IP logged posted posted 11-14-2003 02:28 Edit Quote

Hi guys how's it going?

I've a question about using tables within divs and how things get pushed around.

I've a page with two divs one called nav and one called content, the nav simply has an unordered list of links, and the content has a table inside which shows some data drawn from my DB.

I've got the CSS from this page, and I want the layout to look similar.

My layout doesn't look like this though instead my tabular data gets pushed to below where the nav div finishes, like if there was no style attached, I thought the float attribute of the nav would fix this.

Well I removed my table and text in the content div works, but how can I use this layout or a similar idea with a table?

Please help if you can!

Cheers,

Blaise
Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

 IP logged posted posted 11-14-2003 02:40 Edit Quote

Putting a table inside a div shouldn't make a difference. It would probably help if we could see the page and the code.


___________________________
Suho: www.liminality.org
krets
Paranoid (IV) Mad Scientist

From: KC, KS
Insane since: Nov 2002

 IP logged posted posted 11-14-2003 02:41 Edit Quote

Yep. Lessee dat code!

:::11oh1:::
Blaise
Nervous Wreck (II) Inmate

From:
Insane since: Jun 2003

 IP logged posted posted 11-14-2003 02:55 Edit Quote

Alright but I didn't want to post a whole load of HTML but here goes...

code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

<link rel="stylesheet" href="../includes/cssAdmin.css" type="text/css" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>

<div id="main">

  <div id="menu">

    <h1>Admin</h1>

    <h2>Main Menu</h2>

    <ul>

      <li><a href="list.asp?type=Content">Content Pages</a></li>

      <li><a href="list.asp?type=Image">Image Library</a></li>

      <li><a href="list.asp?type=Document">Document Library</a> </li>

      <li><a href="list.asp?type=Notice">Notice Board</a></li>

      <li><a href="list.asp?type=Calendar">Calendar</a></li>

      <li><a href="list.asp?type=Results">Results</a></li>

    </ul>

  </div>

    <div id="content">

      <p><form name="form1" method="post" action="addItem.asp?type=Notice">

      <table width="100%"  border="0" cellspacing="0" cellpadding="0">

        <tr>

          <td><h3>List Item</h3></td>

          <td><h3>Functions</h3></td>

        </tr>

        <tr>

          <td nowrap>my Titles - 31/10/2003</td>

          <td nowrap><input name="edit2" type="button" id="edit2" value="Edit" onClick="editMe('2','Notice');">

          <input name="delete2" type="button" id="delete2" value="Delete" onClick="deleteMe('2','Notice');">

          <input name="preview2" type="button" id="preview2" value="Preview" onClick="previewMe('2','Notice');"></td>

        </tr>

		

        <tr>

          <td nowrap>Thuis is hte mamazing title - 11/05/2003</td>

          <td nowrap><input name="edit5" type="button" id="edit5" value="Edit" onClick="editMe('5','Notice');">

          <input name="delete5" type="button" id="delete5" value="Delete" onClick="deleteMe('5','Notice');">

          <input name="preview5" type="button" id="preview5" value="Preview" onClick="previewMe('5','Notice');"></td>

        </tr>

		

        <tr>

          <td nowrap>new title - 17/04/2003</td>

          <td nowrap><input name="edit4" type="button" id="edit4" value="Edit" onClick="editMe('4','Notice');">

          <input name="delete4" type="button" id="delete4" value="Delete" onClick="deleteMe('4','Notice');">

          <input name="preview4" type="button" id="preview4" value="Preview" onClick="previewMe('4','Notice');"></td>

        </tr>

		

        <tr>

          <td>&nbsp;</td>

          <td><input name="submit" type="submit" id="submit" value="Add New"></td>

        </tr>

      </table>

      </form></p>

    </div>

</div>



</body>

</html>



Cheers,

Blaise
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

 IP logged posted posted 11-14-2003 03:50 Edit Quote

Well, we would also need to see the CSS.

What it seems like is that the tbale has no bearingn on anything - rather the 2nd div is below the first, since both are block-level elements, and therefore cause a line break.

You will need to either float the div's, or use absolute positioning to achieve this.

Show us the CSS and we can help better. It will also help if you can show us the page in action....
Blaise
Nervous Wreck (II) Inmate

From:
Insane since: Jun 2003

 IP logged posted posted 11-14-2003 04:15 Edit Quote

I posted a link to the CSS in my first post, but for you I'll put it here...

code:
html, body, #main {

	margin: 0;

	padding: 0;

	background-color: #fff;

	color: #333;

	}



	

#menu {

	width: 220px;

	float: left;

	margin-left: -1px;

	padding: 10px;

	}

	

	

#content {

	padding: 10px;

	margin-left: 230px;

	border-left: 1px solid #006;

	}



#header {

	background-color: #fff;

	color: #006;

	border-bottom: 1px solid #006;

	margin-bottom: 0px;

	}

	

#footer {

	background-color: #fff;

	color: #006;

	border-top: 1px solid #006;

	font-size: 11px;

	text-align: right;

	padding: 2px 10px 0 0;

	clear: both;

	}





.spacer {

	clear: both;

	}

	

p {

	padding: 0;

	margin-top: 0px;

	font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;

	}



dd, dt {

	font-family: 'Lucida Grande', Verdana,  Geneva, Lucida, Helvetica, Arial, sans-serif;

	font-size: 0.95em;

	}



I've tried changing the style for the table to an inline element, but this seemed to have no effect, and I also tried changing the nav to a span but not the results I exected.

Cheers,

Blaise.
krets
Paranoid (IV) Mad Scientist

From: KC, KS
Insane since: Nov 2002

 IP logged posted posted 11-14-2003 05:06 Edit Quote

For one thing you need to change the HTML in your DOCTYPE to lower case. Just that might fix it. I'll have a deeper look now...

:::11oh1:::
Blaise
Nervous Wreck (II) Inmate

From:
Insane since: Jun 2003

 IP logged posted posted 11-14-2003 05:12 Edit Quote

hmm, changing the HTML didn't seem to change anything unfortunatly.

I've noticed that if I change the table size to even 99% it works a little better, I usually run my browsers at a resolution of 800x600 with a screen resolution of anything over 1024x768, It's important that it works well with at least 800x600, but will look ok with larger resolutions too. (ie, I want to be able to use percentages).

I've got a couple of pages that are all built slightly differently mostly using ASP but the layout is all mostly the same, nav, content, table inside content. on one of my other pages I need to change the tables width to 70%, 99% still drops the table.

I just don't get it, btw I've also checked on Mozilla FB 0.7 and (of course) it looks fine, it's actually on IE which I'm having these issues and it's the most important browser to get it working on in this case

Cheers,

Blaise
krets
Paranoid (IV) Mad Scientist

From: KC, KS
Insane since: Nov 2002

 IP logged posted posted 11-14-2003 05:25 Edit Quote

Once I changed the doctype and set the width of the table to anything but 100% it works for me.

:::11oh1:::
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

 IP logged posted posted 11-14-2003 16:52 Edit Quote

Well, you posted a link to where you "got the CSS from"
That's usually different from your actual CSS

Floats and 100% widths don't work well. Browser interpretation of '100%' is a little sketchy in the first place, and floating elements just confuse it that much more.

For the record, the DOCTYPE was fine. You can find a list of all valid doctype declarations here - http://www.w3.org/QA/2002/04/valid-dtd-list.html





Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu