26 replies [Last post]
ascelon
ascelon's picture
Offline
Regular
Last seen: 12 years 7 weeks ago
Joined: 2007-09-25
Posts: 16
Points: 0

Greetings,

I searched for about 20 minutes on this topic and I didnt really find anything that I thought helped. This could entirely be based on my CSS knowledge (which is not non-existent; but, its low).

I dont have any code to post currently as I am not on my home machine. I am trying to convert a site design Ive done into a CSS format, and Ive taken the project on as my first real learning experience with the CSS language

The general idea is this.

I have a wrapper that will center the page content and also set its width, say 800px. The page has a header w/ horizontal list navigation (got that down, no problem), then a secondary header image which displays the category of the blahblahblah (got that down, no problem), and finally the third tier which is actually the page content. In this case, the page content is a list of products.

In terms of using tables, I have a 3 column table that displays a product thumbnail, a vertical list of smaller thumbnails (50x50), and a content box, respectively. The "content box" displays the title of the product, a description, and the price. What I am having trouble with is conceptualizing how to go from this table mindset into a CSS one...

I know that I want essentially 3 main div tags (let's call them, "thumbnail," "thumblist," and "productinfo"). I know that each product will contain these 3 tags and that the class for each div within these tags needs to be generalized so that I can create multiple products on one page without having to use positioning (ie left: XXX, top: XXX, etc).

I was hoping that someone may chime in to help me really start off on the right foot with figuring this out so that I can create my basic idea in a format which displays similar across firefox, safari and IE. I've already looked at some of the great (and classic) 3 column css examples out there (specifically Glish) but those didnt really help me with my idea. Sure, they showed me how to make a 3 column layout, but I want to incorporate that into a wrapper already and make it repeatable to the degree that I can have multiple products all running from the same classes on a page.

Thanks in advance Smile
ak

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 17 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Show us a quick image of

Show us a quick image of what you want and we'll help you get it up and running.

You should easily be able to do it with as few divs as possible, some semantic markup, and a liberal sprinkling of floats.

Verschwindende wrote:
  • CSS doesn't make pies

hethinksitsreal
Offline
Regular
Last seen: 11 years 3 weeks ago
Joined: 2007-04-05
Posts: 25
Points: 0

I have a vague idea

I have a vague idea of what you're after. It sounds like you're formatting your content within the content div.

Honestly, if it were me, I'd just make the table for this section and make classes for each column for things like padding, font, etc. What you might want to do is place the table within your content div.

People here will probably tell you that this is an appropriate use of tables. In web standards, the goal is to end the use of tables for layout purposes, not altogether. In other words, it is completely fine to format content, like your example implies, in a table. That's why W3C hasn't deprecated the table tags yet.

I hope this helps. Post a link if you get something up and running.

ascelon
ascelon's picture
Offline
Regular
Last seen: 12 years 7 weeks ago
Joined: 2007-09-25
Posts: 16
Points: 0

thepineapplehead wrote:Show

thepineapplehead wrote:
Show us a quick image of what you want and we'll help you get it up and running.

You should easily be able to do it with as few divs as possible, some semantic markup, and a liberal sprinkling of floats.

When I get home, Ill upload something Smile Thanks!

ascelon
ascelon's picture
Offline
Regular
Last seen: 12 years 7 weeks ago
Joined: 2007-09-25
Posts: 16
Points: 0

ascelon

ascelon wrote:
thepineapplehead wrote:
Show us a quick image of what you want and we'll help you get it up and running.

You should easily be able to do it with as few divs as possible, some semantic markup, and a liberal sprinkling of floats.

When I get home, Ill upload something Smile Thanks!

Here's a nice example, cut from photoshop...

http://www.10thstjdm.com/misc/css_question.gif

You can see that I did not space it properly in the design print, but that's not a big deal. I'd like to shoot for consistent spacing in the actual css for it.

I may try a tabled version this evening, it will probably accomplish what I want -- however, like I said, I'd like to learn how to perform a similar task using CSS only (just for overall knowledge, ya know).

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 17 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

I see absolutely no need for

I see absolutely no need for tables.

But code it up yourself in tables, see how you'd do it, then I can take a look and show you how I'd code it.

Verschwindende wrote:
  • CSS doesn't make pies

ascelon
ascelon's picture
Offline
Regular
Last seen: 12 years 7 weeks ago
Joined: 2007-09-25
Posts: 16
Points: 0

Alright here's my proposed

Alright here's my proposed solution, thoughts? Essentially its a bit the "Faux Columns" trick. However, it may be overkill...

@charset "utf-8";

p {
color: #000000;
text-align: justify;
font-family: tahoma;
font-size: 0.7em;
font-weight: normal;
line-height: 1.2;
margin: 0.67em 0 0;
}

#wrapper {
position: relative;
margin: 0 auto;
width: 880px;
border: 0px;
}

#product {
overflow: hidden;
position: relative;
margin: 0 auto;
border: 0px;
}

#product div {
float: left;
background: #fff;
width: 360px;
margin-bottom: -200px;
padding-bottom: 200px;
}

#product ul li {
list-style-type: none;
padding: 0;
margin: 0;
}

#product .thumblist {
background: #fff;
width: 70px;
margin: 0 auto;
}

#product .info {
background: #fff;
width: 400px;
}

html










Morbi feugiat metus sit amet urna. Etiam faucibus diam at mi egestas elementum. Mauris tempus, neque quis scelerisque lacinia, risus purus ornare enim, ut dignissim ante leo quis mauris. Maecenas pellentesque. Nulla magna metus, pretium et, scelerisque sed, faucibus lacinia, ante. Ut placerat. Phasellus a sapien. Donec porttitor tincidunt velit. Pellentesque eget sem. Duis ac sem ac sapien euismod consequat. Ut tortor urna, bibendum sed, fringilla sit amet, tempor quis, ipsum. Sed vehicula tempor nibh. Aliquam et nunc.


Curabitur sapien risus, vulputate quis, lacinia eu, tincidunt ut, pede. Sed nec tortor eu quam interdum molestie. Sed sodales iaculis ligula. Sed non nulla vel nibh imperdiet elementum. Vestibulum augue lorem, cursus vel, faucibus vel, euismod in, sem. Sed vitae quam a dolor pulvinar cursus. Pellentesque molestie, libero sit amet auctor venenatis, velit odio condimentum elit, eu rhoncus justo risus a justo. Sed quis pede. Aliquam erat volutpat. Sed diam est, imperdiet at, convallis et, congue vel, ante.







thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 17 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Could you attach the images?

Could you attach the images? I'm playing with a source-ordered AP box, this is what I've got so far:

CSS Creator help me solve this problem (moving from table format to css based)



.product {
border: 1px solid #000;
position: relative;
}

.product h2, .product h3, .product p {margin-left: 475px;}
.product ul, .product li {margin: 0; padding: 0; list-style: none;}
.product img {position: absolute; top: 10px; left: 10px; margin-left: 0;}

.product ul img {position: static;}
.product ul { position: absolute; top: 10px; left: 380px;}
.product ul li {margin-bottom: 15px;}

img {display: block; border: 1px solid #000;}

CCFL Rings - "Angel Eyes"








Morbi feugiat metus sit amet urna. Etiam faucibus diam at mi egestas elementum. Mauris tempus, neque quis scelerisque lacinia, risus purus ornare enim, ut dignissim ante leo quis mauris. Maecenas pellentesque. Nulla magna metus, pretium et, scelerisque sed, faucibus lacinia, ante. Ut placerat. Phasellus a sapien. Donec porttitor tincidunt velit. Pellentesque eget sem. Duis ac sem ac sapien euismod consequat. Ut tortor urna, bibendum sed, fringilla sit amet, tempor quis, ipsum. Sed vehicula tempor nibh. Aliquam et nunc.


Curabitur sapien risus, vulputate quis, lacinia eu, tincidunt ut, pede. Sed nec tortor eu quam interdum molestie. Sed sodales iaculis ligula. Sed non nulla vel nibh imperdiet elementum. Vestibulum augue lorem, cursus vel, faucibus vel, euismod in, sem. Sed vitae quam a dolor pulvinar cursus. Pellentesque molestie, libero sit amet auctor venenatis, velit odio condimentum elit, eu rhoncus justo risus a justo. Sed quis pede. Aliquam erat volutpat. Sed diam est, imperdiet at, convallis et, congue vel, ante.



Price: $160.00 or $200.00


Verschwindende wrote:
  • CSS doesn't make pies

ascelon
ascelon's picture
Offline
Regular
Last seen: 12 years 7 weeks ago
Joined: 2007-09-25
Posts: 16
Points: 0

Sure, here they are. Now

Sure, here they are.

Now yes, I could use plain text for the product title and the pricing but my buddy (who I am building this for) its fairly partial to a the Futura font family, something which most do not own.

I like what you've done so far, thank you so much for the help!

ak

AttachmentSize
nissan_prod_ar_thumb.jpg 24.96 KB
prod_ccfl_list.jpg 4.61 KB
prod_ccfl_title.jpg 3.22 KB
prod_ccfl_price.jpg 5.86 KB
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 17 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

ascelon wrote:Now yes, I

ascelon wrote:
Now yes, I could use plain text for the product title and the pricing but my buddy (who I am building this for) its fairly partial to a the Futura font family, something which most do not own.

That's where our good cowboy friend Tex Replacement comes in Wink

Verschwindende wrote:
  • CSS doesn't make pies

ascelon
ascelon's picture
Offline
Regular
Last seen: 12 years 7 weeks ago
Joined: 2007-09-25
Posts: 16
Points: 0

Haha elaborate if you

Haha Smile elaborate if you please?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 17 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Have a Google for CSS Text

Have a Google for CSS Text Replacement, should give you a few ideas Wink

Verschwindende wrote:
  • CSS doesn't make pies

ascelon
ascelon's picture
Offline
Regular
Last seen: 12 years 7 weeks ago
Joined: 2007-09-25
Posts: 16
Points: 0

Wonderful thank you

Wonderful thank you Smile

Also, I am about to try out your CSS idea(Drunk. Hopefully Ill see what Ive done incorrectly and have a finished product soon!

/edit -- just looked it up, damn Wink

ascelon
ascelon's picture
Offline
Regular
Last seen: 12 years 7 weeks ago
Joined: 2007-09-25
Posts: 16
Points: 0

If I wanted multiple

If I wanted multiple products on each page, would I continue the div tags or the entire wrapper?

ak

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 17 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Just re-use the class

Just re-use the class structure, eg:

CCFL Rings - "Angel Eyes"

Morbi feugiat metus sit amet urna. Etiam faucibus diam at mi egestas elementum. Mauris tempus, neque quis scelerisque lacinia, risus purus ornare enim, ut dignissim ante leo quis mauris. Maecenas pellentesque. Nulla magna metus, pretium et, scelerisque sed, faucibus lacinia, ante. Ut placerat. Phasellus a sapien. Donec porttitor tincidunt velit. Pellentesque eget sem. Duis ac sem ac sapien euismod consequat. Ut tortor urna, bibendum sed, fringilla sit amet, tempor quis, ipsum. Sed vehicula tempor nibh. Aliquam et nunc.

Curabitur sapien risus, vulputate quis, lacinia eu, tincidunt ut, pede. Sed nec tortor eu quam interdum molestie. Sed sodales iaculis ligula. Sed non nulla vel nibh imperdiet elementum. Vestibulum augue lorem, cursus vel, faucibus vel, euismod in, sem. Sed vitae quam a dolor pulvinar cursus. Pellentesque molestie, libero sit amet auctor venenatis, velit odio condimentum elit, eu rhoncus justo risus a justo. Sed quis pede. Aliquam erat volutpat. Sed diam est, imperdiet at, convallis et, congue vel, ante.

Price: $160.00 or $200.00

CCFL Rings - "Angel Eyes"

Morbi feugiat metus sit amet urna. Etiam faucibus diam at mi egestas elementum. Mauris tempus, neque quis scelerisque lacinia, risus purus ornare enim, ut dignissim ante leo quis mauris. Maecenas pellentesque. Nulla magna metus, pretium et, scelerisque sed, faucibus lacinia, ante. Ut placerat. Phasellus a sapien. Donec porttitor tincidunt velit. Pellentesque eget sem. Duis ac sem ac sapien euismod consequat. Ut tortor urna, bibendum sed, fringilla sit amet, tempor quis, ipsum. Sed vehicula tempor nibh. Aliquam et nunc.

Curabitur sapien risus, vulputate quis, lacinia eu, tincidunt ut, pede. Sed nec tortor eu quam interdum molestie. Sed sodales iaculis ligula. Sed non nulla vel nibh imperdiet elementum. Vestibulum augue lorem, cursus vel, faucibus vel, euismod in, sem. Sed vitae quam a dolor pulvinar cursus. Pellentesque molestie, libero sit amet auctor venenatis, velit odio condimentum elit, eu rhoncus justo risus a justo. Sed quis pede. Aliquam erat volutpat. Sed diam est, imperdiet at, convallis et, congue vel, ante.

Price: $160.00 or $200.00

CCFL Rings - "Angel Eyes"

Morbi feugiat metus sit amet urna. Etiam faucibus diam at mi egestas elementum. Mauris tempus, neque quis scelerisque lacinia, risus purus ornare enim, ut dignissim ante leo quis mauris. Maecenas pellentesque. Nulla magna metus, pretium et, scelerisque sed, faucibus lacinia, ante. Ut placerat. Phasellus a sapien. Donec porttitor tincidunt velit. Pellentesque eget sem. Duis ac sem ac sapien euismod consequat. Ut tortor urna, bibendum sed, fringilla sit amet, tempor quis, ipsum. Sed vehicula tempor nibh. Aliquam et nunc.

Curabitur sapien risus, vulputate quis, lacinia eu, tincidunt ut, pede. Sed nec tortor eu quam interdum molestie. Sed sodales iaculis ligula. Sed non nulla vel nibh imperdiet elementum. Vestibulum augue lorem, cursus vel, faucibus vel, euismod in, sem. Sed vitae quam a dolor pulvinar cursus. Pellentesque molestie, libero sit amet auctor venenatis, velit odio condimentum elit, eu rhoncus justo risus a justo. Sed quis pede. Aliquam erat volutpat. Sed diam est, imperdiet at, convallis et, congue vel, ante.

Price: $160.00 or $200.00

Verschwindende wrote:
  • CSS doesn't make pies

ascelon
ascelon's picture
Offline
Regular
Last seen: 12 years 7 weeks ago
Joined: 2007-09-25
Posts: 16
Points: 0

Thank you so very much for

Thank you so very much for your help!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 17 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

How are you getting on with

How are you getting on with it?

Verschwindende wrote:
  • CSS doesn't make pies

ascelon
ascelon's picture
Offline
Regular
Last seen: 12 years 7 weeks ago
Joined: 2007-09-25
Posts: 16
Points: 0

Its working well Thanks so

Its working well Smile Thanks so much. If I get a chance to finish the page this week Ill throw a link up!

I have another question in regards to this 3 column sort of setup. I am working on a header for another project page and its relatively similar in concept. What I am having issues with is actually getting the navigation menu to do what I want (align center, a px amt from the top margin).

I thought perhaps that I adapted your original code, but perhaps I am missing something. Right now, I simply cannot get the Li for the navigation to center...perhaps you would be willing to look at this Smile

The header itself is fairly straightforward, I just dont know what I am over looking. I am using your approach which uses classes rather than multiple divs (which is great!). The header is 155px tall, with a background which will span the entire top portion of the page. On the LHS it has a logo, in the center it has a navigation menu (which needs to remain centered and also a distance from the top-margin) and on the RHS a small spot for a banner ad.

.header {margin:0 auto; background: #fff url("thisprojectslogo.png") repeat-x 0 100%; height:155px; padding:0; }

.header ul, .header li {position: relative; display: inline; margin: 0 auto; padding: 0; width: 100%; text-align: center; font-weight: bold;}
.header img {position: absolute; top: 0px; left: 0px; display: block;}
.header ul img {position: static;}

.header ul li {text-align: center; margin-top: 73px; padding:0 .9em; display: inline; color: #ffc000; }
.header li a {text-decoration: none; font-size: 0.8em; padding: 2px; margin: 0; color: #fff; width: 100%;}
.header li a:hover { color: #ffc000; }

.banner img {float: right; display: block;}

  • Lorem
  • Ipsum
  • Dolor
  • Sit
  • Amet
  • Consectetuer

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 17 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

You haven't got it online

You haven't got it online anywhere, have you?

Verschwindende wrote:
  • CSS doesn't make pies

ascelon
ascelon's picture
Offline
Regular
Last seen: 12 years 7 weeks ago
Joined: 2007-09-25
Posts: 16
Points: 0

Sure, Ill throw it up for

Sure, Ill throw it up for you today sir Smile

/edit -- http://wrxatl.com/misc/test/pinapple.htm

Ive managed to keep it center without any problems, but I cannot get it to take the margin declaration. I also commented out the banner, if you want to play with it, just uncomment it.

ascelon
ascelon's picture
Offline
Regular
Last seen: 12 years 7 weeks ago
Joined: 2007-09-25
Posts: 16
Points: 0

have a chance to look it

have a chance to look it over mr pinapple? Smile

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 5 years 18 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Sir? TPH will already be

Sir? TPH will already be feeling old now... Wink

mihir Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 17 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

What happens if you add the

What happens if you add the top margin to the UL as opposed to the LI?

Verschwindende wrote:
  • CSS doesn't make pies

ascelon
ascelon's picture
Offline
Regular
Last seen: 12 years 7 weeks ago
Joined: 2007-09-25
Posts: 16
Points: 0

If I add it to the UL, it

If I add it to the UL, it applies that to the entire background as well.

ascelon
ascelon's picture
Offline
Regular
Last seen: 12 years 7 weeks ago
Joined: 2007-09-25
Posts: 16
Points: 0

Man I feel like an idiot

Man I feel like an idiot Smile

So, really all that was required was to position the background absolutely and define a 100% width for the background image...

body { margin: 0; padding: 0; font:83%/1.5 tahoma,verdana,sans-serif; }

.header {position: absolute; margin:0 auto; padding: 0; background: #fff url("http://www.wrxatlanta.com/forums/images/6.0/header_bg_tall.png") repeat-x 0 100%; width:100%; height:155px; }

.header ul, .header li {position: relative; margin: 0 auto; padding: 0; width: 100%; text-align: center; }
.header img {position: absolute; top: 0px; left: 0px; display: block;}
.header ul img {position: static;}
.header ul {margin-top: 73px;}
.header ul li {padding:0 .9em; display: inline; color: #ffc000; font-weight: bold;}
.header li a {text-decoration: none; font-size: 0.8em; padding: 2px; color: #fff; width: 100%;}
.header li a:hover { color: #ffc000; }

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 5 years 18 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Absolutely positioning? i

Absolutely positioning? i tend to avoid using it. i will try to take a look in the evening..

mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

ascelon
ascelon's picture
Offline
Regular
Last seen: 12 years 7 weeks ago
Joined: 2007-09-25
Posts: 16
Points: 0

Its not my first choice, but

Its not my first choice, but it did *work*

Currently, I'm attempting to work around it.

I'm sure its something so simple, I dont know where I am going wrong here. Its fairly simple. There is a header that spans 100% of the top of the page, a logo on the LHS which is position absolutely and a series of navigation links in the center and a certain distance from the top margin.

Currently, I can do that if the background is positioned absolutely but thats not the goal here...