webyep & bg image/colour

[Mr_worm1 (Mr worm)]

Hi all,

Just testing out some things in WP in my spare time as you do… I’m having issues with my bg colour overlapping my border style as the div expands (bottom only), when content is added. (indicated in blue)

http://www.cmlmarketing.com/2012/webyep/php.php

If I make the bg colour white in both left/right body elements it makes the bottom border line dissapear, thus loosing the style.

The inline container holding these two columns overflow is set to hidden to accomodate 2+ columns. A padding issue?

ALSO… can WP be applied to carousel pane action elements?

Any ideas guys

Worm

---

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

[ThomasKimmich]

Hi,

the carousel stuff and webyep works:

http://www.freewaytalk.net/thread/view/96137#m_96137

The rest I have to mind a bit cause it should be a just work.

I think the RIGHT1 one should have a padding-bottom of e.g. 10px (as the LEFT1) then it could work.

Cheers

Thomas

---

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

[Mr_worm1 (Mr worm)]

Ok great!!! thanks Thomas

With regards to my link, I have set them both to the same padding to 10px bottom, but still it persists?!!!

Are 2 column inline layouts using the Webyep rich text editor also required to use the Extended, top, right, bottom, left padding method in order to work?

worm

---

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

[Mr_worm1 (Mr worm)]

Anyone have a answer to why my bg colour is overlapping the border style (using webyep)

http://www.cmlmarketing.com/2012/webyep/php.php

Worm

---

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

[ThomasKimmich]

if I said “RIGHT1” - I meant “RIGHT1”.

And if I add those 20px to the bottom within your artwork it looks like this for me:

Skitch | Evernote

This has btw. absolutely nothing to do with webyep. This can only be as good as the framework it is placed in.

Cheers

Thomas

---

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

[chuckamuck]

Try adding a 10px margin to the bottom of RIGHT1

---

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

[Max_Fancourt]

If I wanted to create what you are trying to do and not use tables then this is the way I would probably approach it;
Ps I can’t tell if there is supposed to be a white border between the inner left and right panel. So I am going to presume there is and that you what both the left and right panels to have the same grey background colour:

1. Draw the outer box and apply the 1px thin grey border, Add your radius corners… say 7px. Now name this box outerBox. Apply light grey colour to the background.

2. Click in side until you see the flashing cursor and insert another html item and name it innerBox Add a 6px thick white border and a radius 6px. Expand the width to the maximum

3. now create a plain white graphic in photoshop which is 6px wide and 1px tall. Apply it to this innerBox as a background image and have it centred and repeat vertically

4. Click inside the innerBox and insert a new html item. Call this leftBox. Apply 10px padding and pull the right side of the box so the width expands 3px short of half the available width of the innerBox Apply float:left via the inspector palette.

5. Click inside the innerBox again so you have a flashing cursor again and insert another html Item and this time name it rightBox and again add 10px of padding and this time float right via the inspector palette., adjust its width so it takes up the 3px less from the half way point. You should now see two boxes next to each other with a 6pxwhite gutter between them.

6. now click in side rightBox until you see the flashing cursor and inset a webyep Richtext item and do the same with the right panel… name them correctly etc

7. finally remove the height attributes of the left, right, inner, and outer, boxes

Thats it from then on in whatever content is added to the either webyep richtext item via a browser the construction of the boxes should allow for vertical expansion… but still look like two uniform columns

I hope that what you were looking for
Max

---

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

[ThomasKimmich]

Hmm - I said I have to mind about this cause it should be in fact much more easier:

1. What I try to avoid in an inline-scenario (with or without webyep) is to use inspectors styling opportunities. If I can trust my eyes, the parent box (BODY-WRAP) is split into a tons of divs (starting with a left-upper-corner …) which basically could cause trouble with overflow of this parent-box.

2. I do not have a real big problem in not-to-see-what-I-try-to-get so therefore I’m more and more on the “class” side of life and styling by pure CSS.

3. Head first the solid framework which means: First the proper set boxes (even with dummy colors) to see how things work - then styling, double-check if it still works and so on:

This case:

Insert (or draw) the parentbox BODY-WRAP, set to width 990px, padding 10px, some color and overflow:hidden

Double-click inside BODY-WRAP, insert the two article boxes, float one left, one right (or both left, margin-right to the left-box then).

Now the styling (note that you can’t see this in your FW construction):

Select BODY-WRAP, item → extended, name: class value: box-border and add this before the closing head tag of your page:

http://pastie.org/4152921

After I’m happy with it, I “transfer” this into a “real” class style using the styles palette. Each box that shall have the same styling I just give them the class: box-border.

The result is “The bespoken box” at the bottom here:

http://kimmich-dm.de/screenerstuff/index.html

The box “Myriad Pro Web Italic” is by the way a duplicate of box-border class-style, named it box-border-2 and removed the border:8px solid white;.

Please note again:

This is my way to do - due the fact, that CSS3 can do so much things these days and I’d like to be independent of “styling-actions”.

Furthermore, I try to prepare myself to the upcoming time of externalized styles which will be (I’m sure once a key-feature of FW, too. Meanwhile I do it manual.

Cheers

Thomas

---

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

[ThomasKimmich]

Hmm - I said I have to mind about this cause it should be in fact much more easier:

1. What I try to avoid in an inline-scenario (with or without webyep) is to use inspectors styling opportunities. If I can trust my eyes, the parent box (BODY-WRAP) is split into a tons of divs (starting with a left-upper-corner …) which basically could cause trouble with overflow of this parent-box.

2. I do not have a real big problem in not-to-see-what-I-try-to-get so therefore I’m more and more on the “class” side of life and styling by pure CSS.

3. Head first the solid framework which means: First the proper set boxes (even with dummy colors) to see how things work - then styling, double-check if it still works and so on:

This case:

Insert (or draw) the parentbox BODY-WRAP, set to width 990px, padding 10px, some color and overflow:hidden

Double-click inside BODY-WRAP, insert the two article boxes, float one left, one right (or both left, margin-right to the left-box then).

Now the styling (note that you can’t see this in your FW construction):

Select BODY-WRAP, item → extended, name: class value: box-border and add this before the closing head tag of your page:

http://pastie.org/4152921

After I’m happy with it, I “transfer” this into a “real” class style using the styles palette. Each box that shall have the same styling I just give them the class: box-border.

The result is “The bespoken box” at the bottom here:

http://kimmich-dm.de/screenerstuff/index.html

The box “Myriad Pro Web Italic” is by the way a duplicate of box-border class-style, named it box-border-2 and removed the border:8px solid white;.

Please note again:

This is my way to do - due the fact, that CSS3 can do so much things these days and I’d like to be independent of “styling-actions”.

Furthermore, I try to prepare myself to the upcoming time of externalized styles which will be (I’m sure once a key-feature of FW, too. Meanwhile I do it manual.

Cheers

Thomas

Oh - yes:

Finally I just apply the webyep-rich-text to both of that article boxes. Leave the dummy text in. WY automatically uses the pre-set content-style.

---

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

[Mr_worm1 (Mr worm)]

Hi guys… right I have tried all your suggestions & stilll get the same result!!! Im left scrathing my head, as I must be doing somehting wrong???

http://www.cmlmarketing.com/2012/webyep/php.php

the inner area is intended to be all white, with a 1px grey border & 9px corners! I thnk it may be the corners i’m using in the inspector palette that are causing the issues?!! as they create an almost auto padding to allow for the corners. I may be wrong tho…

& yes it needs to allow for vertical expansion & still look like 2 uniform columns

Max, I followed your workings… but its when I add the WP element to the inner left/right boxs & uplaod the bg colour grey is visible! should I colour the wp element bg colour too?

Worm

---

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

[Max_Fancourt]

Hi Worm
I just tried it and it worked, so I am presuming there is something wrong with your construction… so here is a link to a quick bit of artwork I quickly slapped together but is broadly the same as I described.
I have also done a screen shot showing it working
cheers max

http://web.me.com/servondesign/filechute/example.zip

---

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

[Mr_worm1 (Mr worm)]

Hi Max, thank you do much that helped!!!

It was the left & right inner box column elemnts that I had not set there respective overflow to hidden!!

I’m guessing that any element that you wish to expand vertically needs to be set to hidden as a general rule of thumb when working with inline, WP & liquid layouts?

But works non ethe less, just needs tweaking now to make perfect!

Worm

---

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

[Mr_worm1 (Mr worm)]

One last question, both columns are styled & built exacty the same, yet the left column appears to have more padding at the top, If doudle checked everything… why is this?

http://www.cmlmarketing.com/2012/webyep/php.php

Wrom

---

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

[Ernie_Simpson]

The text on the left side is wrapped in paragraph

tags. The text on the
right is not wrapped in any tag. The browser knows how to style the text on
the left, but not so much the text on the right.

And may I say, there are so many divs wrapped in divs - I cannot fathom
why. Is this a feature of web-yep construction?

–
Ernie Simpson

On Wed, Jun 27, 2012 at 7:59 AM, Mr worm email@hidden wrote:

One last question, both columns are styled & built exacty the same, yet
the left column appears to have more padding at the top, If doudle checked
everything… why is this?

http://www.cmlmarketing.com/2012/webyep/php.php

Wrom

---

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options