Forums / Templates, Stylesheets, Page Layout / Drastic css layout change in product listing please help!

Drastic css layout change in product listing please help!

Locked

Views: 4,414

Results 1 to 20 of 21
This thread is locked. New replies are disabled.
12 Jul 2008, 4:11 AM
#1
paha avatar

paha

Zen Follower

Join Date:
Mar 2008
Posts:
100
Plugin Contributions:
0

Drastic css layout change in product listing please help!

Hello

I have been trying to make the following change showed in the attached

pictures been after the look i AM TRYING TO ACHIEVE

I tried some modification on the style sheet but i messed up other things

i tried changing

p, address (line 169)

{

line-height: 7px;

padding-top: 0.5em;

padding-right: 0.5em;

padding-bottom: 0.5em;

padding-left: 0.5em;

}

but it messed up with

the text

above the nav buttons

I need to shorten the space of the product description paragraph and need to align that text with the product mode, stock and manufacturer as well with the nav buttons and the text above the buttons "Product 1/3"

as showed in the pictures I attached

thanks for your guidance

12 Jul 2008, 10:00 PM
#3
paha avatar

paha

Zen Follower

Join Date:
Mar 2008
Posts:
100
Plugin Contributions:
0

Re: Drastic css layout change in product listing please help!

:oops: I forgot, I was going to write it but i forgot

https://www.nomo.cl

13 Jul 2008, 8:08 PM
#4
paha avatar

paha

Zen Follower

Join Date:
Mar 2008
Posts:
100
Plugin Contributions:
0

Re: Drastic css layout change in product listing please help!

hello anybody please :)

14 Jul 2008, 2:04 PM
#5
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Drastic css layout change in product listing please help!

Add to the bottom of your stylesheet:```
.navNextPrevWrapper {width: 190px; margin-left: 100px; padding-left: 0;}
h1#productName, h2#productPrices {margin-left: 110px; padding-left: 0;}
#productDescription {margin-left: 110px; padding-left: 0;}
#productDescription p {margin-left: 0; padding-left: 0}
#productDetailsList {margin-left: 110px; padding-left: 1.2em;}
#cartAdd {margin-left: 100px; width: 70px; float: none; text-align: left;}
#productReviewLink {width: 200px; float: none; margin-left: 110px; padding-left: 0;}
#productTellFriendLink {width: 190px; float: none; margin-left: 110px; padding-left: 0;}


You have seven <p> elements in your description, four of them empty. Eliminate those and you will have better spacing there. If you still need tighter spacing, try margin-top: 0; for 
#productDescription p {}.
14 Jul 2008, 6:53 PM
#6
paha avatar

paha

Zen Follower

Join Date:
Mar 2008
Posts:
100
Plugin Contributions:
0

Re: Drastic css layout change in product listing please help!

Thank you very much gjh42 :clap:

worked perfectly nice :D

there is one thing do, and is that I need less space between paragraph

added "You have seven <p> elements in your description, four of them empty. Eliminate those and you will have better spacing there. If you still need tighter spacing, try margin-top: 0; for
#productDescription p {}. "

as you suggested but didn´t change the space between the paragraph
what should i do :dontgetit

14 Jul 2008, 7:38 PM
#7
paha avatar

paha

Zen Follower

Join Date:
Mar 2008
Posts:
100
Plugin Contributions:
0

Re: Drastic css layout change in product listing please help!

also I am trying to add more space after the product description text

and the add to chart quantity box and button i added padding-top: 200; to #cartAdd but didn´t work :(

also how can i put the quantity box at the right of the ad to chart button?

thnak you

14 Jul 2008, 7:55 PM
#8
paha avatar

paha

Zen Follower

Join Date:
Mar 2008
Posts:
100
Plugin Contributions:
0

Re: Drastic css layout change in product listing please help!

I fixed the space betwen description text and quantity box

in line 426

but i still don't know hoe to place the add quantity box to the right of the add to chart button, instead of having it on top?

and shorten the space between paragraphs in the product description

thank you for your guidance

14 Jul 2008, 8:14 PM
#9
paha avatar

paha

Zen Follower

Join Date:
Mar 2008
Posts:
100
Plugin Contributions:
0

Re: Drastic css layout change in product listing please help!

I added line-height: 0px; to #productDescription p

helped a little bit but there is still some space between paragraphs that i would like to get rid of

I added a little bit of space between product price and product description.

can figured out how to place the add quantity box to the right of the add to chart button, instead of having it on top. :cry:

14 Jul 2008, 8:41 PM
#10
paha avatar

paha

Zen Follower

Join Date:
Mar 2008
Posts:
100
Plugin Contributions:
0

Re: Drastic css layout change in product listing please help!

hello

mmm cheking with IE and some changes we did don´t show up the right way in Internet explorer

what could be wrong?

14 Jul 2008, 10:28 PM
#11
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Drastic css layout change in product listing please help!

There are a number of CSS properties that IE6 doesn't know how to handle, and a lot of bugs that show up in specific circumstances. Most of those have known fixes or workarounds, but sometimes they are tricky to fix.

If margin-top doesn't fix the <p> spacing, try margin-bottom.

15 Jul 2008, 4:42 AM
#12
paha avatar

paha

Zen Follower

Join Date:
Mar 2008
Posts:
100
Plugin Contributions:
0

Re: Drastic css layout change in product listing please help!

Ok will try

I really need to fix what is going on with IE explorer in the product description page

Can you help me ? because it is looking horrible

the quantity box it is far to the right from the add to cart button

and the product details also are far to the right, really messy :yuck:

maybe a conflict of some sort?

http://nomo.cl/index.php?main_page=product_info&cPath=1_6&products_id=3

hope you can help me with this one :(

15 Jul 2008, 4:39 PM
#13
paha avatar

paha

Zen Follower

Join Date:
Mar 2008
Posts:
100
Plugin Contributions:
0

Re: Drastic css layout change in product listing please help!

margin-bottom did the trick

I have been unable to fix the IE problem I think is a conflict between rules I get rid of some that where repeating it selfs in some parts but nothing happen, don´t know if there are others cosing the problem

any ideas ?

thank you

17 Jul 2008, 6:24 PM
#14
paha avatar

paha

Zen Follower

Join Date:
Mar 2008
Posts:
100
Plugin Contributions:
0

Re: Drastic css layout change in product listing please help!

Hello

can somebody help me with this Internet explorer problem please

nomo.cl

I am lost

thank you

20 Jul 2008, 7:13 PM
#15
paha avatar

paha

Zen Follower

Join Date:
Mar 2008
Posts:
100
Plugin Contributions:
0

Re: Drastic css layout change in product listing please help!

anybody please :cry::cry:

20 Jul 2008, 11:44 PM
#16
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Drastic css layout change in product listing please help!

This is just a guess, but in your stylesheet find

#productDetailsList {margin-left: 140px; padding-left: 1.2em;}

and after it add

#productDetailsList li {margin-left: 0; padding-left: 0;}

Does that affect the IE display? (I can't test it myself.)

22 Jul 2008, 12:45 AM
#17
paha avatar

paha

Zen Follower

Join Date:
Mar 2008
Posts:
100
Plugin Contributions:
0

Re: Drastic css layout change in product listing please help!

ho man, I added it but nothing happened

:(

when i change :

#productDetailsList (line 759)

{

margin-left: 140px;

padding-left: 1.2em;

}

to
#productDetailsList (line 759)

{

margin-left: 73px;

padding-left: 1.2em;

}

in Internet explorer

this get aligned with the buttons and the rest of the text

Modelo: 0002-flecha cursor roja
100 Unidades en Stock
Diseñado por: El Milagro

but in the other browsers it get to far to the left.

i am lost :blink:

23 Jul 2008, 5:58 PM
#18
paha avatar

paha

Zen Follower

Join Date:
Mar 2008
Posts:
100
Plugin Contributions:
0

Re: Drastic css layout change in product listing please help!

any ideas? :unsure:

27 Jul 2008, 9:49 PM
#19
paha avatar

paha

Zen Follower

Join Date:
Mar 2008
Posts:
100
Plugin Contributions:
0

Re: Drastic css layout change in product listing please help!

nobody ?

:shocking:

5 Aug 2008, 12:05 AM
#20
paha avatar

paha

Zen Follower

Join Date:
Mar 2008
Posts:
100
Plugin Contributions:
0

Re: Drastic css layout change in product listing please help!

still have the problem :cry: