Jump to content

another newbie question


Nucklehed

Recommended Posts

In order to place text and images side-by-side horizontally on a page do I need to use tables? Isn't there a better way to do it, using CSS? My independent studies have not taken me this far, yet. :)

Traditionally, tables would be used. But its possible, its less cluttered, and its the more acceptable way to go using CSS:
<div style="float:left;">image one<br />text one<br /></div><div style="float:left;">image two<br />text two<br /></div><div style="float:left;">image three<br />text three<br /></div>

This will get you started. Other scenarios and what else you put on the page may effect how you end having to code this - this that is the way to start.

Link to comment
Share on other sites

I have seen and tryed this. It's certanly the best way to make horizontal menus.But I would like to know how to make vertical ones too. Whatever I do, I can't get the menu on the left(nor right) AND have the main content in the center of the page. Tables are the only solution I had found, but that's certanly not the thing I want to do. CSS is the future. Tables are there only for tabular data.

Link to comment
Share on other sites

one way of putting vertical menus with tables in is what i do - although change the width value to however wide the menu is, and add whatever other attributes you want into there.put this table either inside another table, or use div tags to seperate the page.

<table width="100"><tr valign="center"><td>some menu thing</td></tr><tr valign="center"><td>some menu thing</td></tr><tr valign="center"><td>some menu thing</td></tr><tr valign="center"><td>some menu thing</td></tr><tr valign="center"><td>some menu thing</td></tr><tr valign="center"><td>some menu thing</td></tr></table>

i've yet to explore the css path of doing menus...so whatever anyone says about them, will be new to me.

Link to comment
Share on other sites

one way of putting vertical menus with tables in is what i do - although change the width value to however wide the menu is, and add whatever other attributes you want into there.put this table either inside another table, or use div tags to seperate the page.
<table width="100"><tr valign="center"><td>some menu thing</td></tr><tr valign="center"><td>some menu thing</td></tr><tr valign="center"><td>some menu thing</td></tr><tr valign="center"><td>some menu thing</td></tr><tr valign="center"><td>some menu thing</td></tr><tr valign="center"><td>some menu thing</td></tr></table>

i've yet to explore the css path of doing menus...so whatever anyone says about them, will be new to me.

That is one way to do it, but its a lot of useless code unless you code some functions into the <td>.One table cell per row is just like saying this:
<div style="width:100px;">some menu thing<br />some menu thing<br />some menu thing<br />some menu thing<br />some menu thing<br />some menu thing<br /></div>

Easier to read, code and troubleshoot. :)

Link to comment
Share on other sites

That is one way to do it, but its a lot of useless code unless you code some functions into the <td>.One table cell per row is just like saying this:
<div style="width:100px;">some menu thing<br />some menu thing<br />some menu thing<br />some menu thing<br />some menu thing<br />some menu thing<br /></div>

Easier to read, code and troubleshoot. :)

True, but here comes our fist issue: The Table menu&data pages consist of at least 2 cells per row(from what I have seen that is). One for the menu, and another for the data. Some have 2 cells and 2 rows... the top left for a logo, the top right for a horizontal menu, the bottom left fot a vertical menu and the bottom right for the content. have So what should one do to recreate two or more cells per row on a table with CSS? I mean... the content must be visible and yet the menu must stand from the side.The way I see it now is still a table with two cells and one row. The left cell holds the menu made with the above example of CSS. The right one holds the data.That's still not what I'm personally looking after thogh it is a temporary solution.
Link to comment
Share on other sites

You can use a combination of <div>'s and css positioning to display your site as you want.div#id_name {position: absolute;left: pixel_value;top: pixel_value;}

Link to comment
Share on other sites

jonas illustrates the best way to go about doing this. But to respond to boen_robot response regarding tables, here is how a left nav page would be set up in a table:

<table><tr><td valign="top" colspan="2">HEADER<br /></td></tr><tr><td  valign="top">LEFT NAVIGATION<br />some menu thing<br />some menu thing<br />some menu thing<br />some menu thing<br />some menu thing<br />some menu thing<br /></td><td valign="top"><br /><br />BODY/CONTENT AREA<br /><br /><br /></td></tr><tr><td valign="top" colspan="2">FOOTER<br /></td></tr></table>

My point here is if you are going to stack a left nav with each element on its own line, there is NO reason to waste code making a table where each row has only one column - again - unless you plan on giving a special treatment to the <td>. Then again, what ever you would want to "specially" to the <td> could be done via CSS - even if it included javascript.Case in Point:www.deepcreeklakebreezmotel.com

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...