...

View Full Version : repeating/editable regions or CSS?



sixrfan
11-05-2009, 08:59 PM
i'm going to have multiple product pages, and i want the same layout on each page, whereby the product headings appear in bold on the left. next to each heading is the product specific content. then in the upper right i want an image of the product with a View Larger link.

is the best way to go about construction this sort of layout with a Table and making use of the repeating editable region functionality in dreamweaver, or should i be using CSS?

if CSS, what's the overal gist of how i should set it up? i'm not really sure how i would get the headings in the left column to align right, then have the input/content right next to it, align left where they are and have everything line up.

please advise. thanks!

bazz
11-06-2009, 04:19 AM
this is one for css. I don't use dreamweaver so I can't comment on that part of your question.

basically, it sounds like you want a three column table and for the cells in the left col, to be align:right with the cells in the middle column, align:left and the cells in the right column to be align:center;

bazz

sixrfan
11-06-2009, 04:23 AM
well yeah, that's what i want. but how do i set it up with css? the problem is there's going to be a few cells/divs in the middle, which contain product descriptions, that are bigger for some products and smaller for others.

so i dont know how i could possibly line up 3 divs next to eachother and have the headings in the very left div stay horizontally aligned with their descriptions in the next div.

any advice? thanks.

bazz
11-06-2009, 04:34 AM
I would just use a table. I avoid them where possible but they are very OK for tabular data.



<table id='theTable'>
<tr>
<td class='left'></td>
<td class='middle'></td>
<td class='right'></td>
</tr>
<tr>
<td class='left'></td>
<td class='middle'></td>
<td class'right'></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<table>


css:


#theTable {
border:1px solid #000;
background:#fff;
}
#theTable td { /* applies attributes to all tds because the class ain't added*/
width:150px;
border:1px solid #ccc;
}

#theTable td.left{
border:1px solid #ff8080;
}


view that in your page and post back when you want to learn more.

bazz

sixrfan
11-06-2009, 04:42 PM
that's perfect. thank you!

sixrfan
11-06-2009, 07:03 PM
now if i want to put a UL and a few LIs within a certain cell (for instance, middle cell row 1 needs a list), how do i attribute CSS features to it? thanks!

sixrfan
11-06-2009, 08:13 PM
nevermind, i figured it out. need to put something like this in:



#prodtable ul {
margin: 0px;
padding: 0px;
background-color:#FF00FF;
}
#prodtable ul li {
list-style-type: none;
}

bazz
11-06-2009, 09:12 PM
You could do that but watch for two things:

1. if you have the following code at the top of your css, you shouldn;t need to re-declare the borders etc.


* {
border:0;
padding:0;
margin:0;
}



2. is your data still tabular? if it is, you may not need to make a list or; if you do, maybe none of should be in a table?

bazz

sixrfan
11-06-2009, 10:40 PM
ummm, now i'm a little confused.

i do NOT have that code at the top of my css. what does that mean when there's an asterisk before the start of some css?

what do you mean by data still tabular?

bazz
11-07-2009, 01:28 AM
the asterisk makes that css instruction apply to all browsers (that I know of) and helps with x-browser consistency/compatibility.

with regard to tabular data; I was saying that what you initially described sounded like a table was correct. You seemed to want the data in each column to line up with the columns either side, which you weren't sure how to achieve with a series of divs. However, now you have mentioned including a list, within the table. That may be OK (coz I don't know the content) but, if it needs to align with data to its left (or right), it may not. I didn't mean that you should stop using a table. I just meant that you should ensure that your data is still correctly placed in a table, otherwise, reverting to a div idea might be semantically better.

It's your site: it's your call.

bazz :thumbsup:

Excavator
11-07-2009, 01:29 AM
ummm, now i'm a little confused.

i do NOT have that code at the top of my css. what does that mean when there's an asterisk before the start of some css?



The * is a leftover from the old DOS days. Means all or everything. Have a look at this - http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum