[Pro] How to keep vertical line even with type column?

On several pages of a site, I have an HTML vertical line dividing two columns on a site and I want the bottom edge of it to stay even with the block of type at left (see screenshot of one page).

The type is in a table cell and I had tried to have the line in an adjacent cell to its right, but that didn’t do it. So right now it’s not in any cell at all, just on the page with the table layer behind it. You can see it’s not even

Seems to me it should still be in a cell with the line having an indeterminate length somehow but no preset length makes it disappear.

Any ideas how to get this to work?

http://animalarrestli.com/screenshot.html


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

This is how I would do it - http://www.deltadesign.co/FW6Test/table-divider.html

Select the table cell and in the inspector under the 3rd Tab click on the extend button. In the box that opens Click Add and type class in the first box and rightborder in the second.

Now in Page >Html Markup choose the before section and add the following code:

<style type="text/css">
 td.rightborder {
border-right: 1px solid grey;
padding-right: 10px;
}
</style>

Adjust padding, colours etc. to suit.

David


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

Tried it on the site. I see the logic, but not the line. Doesn’t appear.

In case they would conflict, I removed any pre-existing padding settings first, but still no go.


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

Can you post a link to an online page where you have tried this - likely we will be able to spot where you have gone wrong.

David


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

And here is your page with that additional code

http://www.deltadesign.co/FW6Test/animalarrest.html

D


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

Try these duplicate pages:

On the first one, I applied it to the main text box at left and removed the Google Analytics markup from the page in case it conflicted. No clear evidence of that, to me.

On the second, I applied the changes just under the GA page code and to the long, vertical, left table cell instead of the one with text, adjusting the code accordingly. That’s me preferred location, but it still didn’t work.


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

On the first example you have added the Class to the row and not the cell

<tr class="rightborder">

As the code is specific to the cell it doesn’t work.

Similarly on the second example you have added the Class to the row and not the cell

<tr class="leftborder">

So make sure you are adding the class to the cell.

D


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

I think, you applied the class to the wrong element (table-row tr or table-data td?).

Is there any specific reason for using an ugly (in this context) table?

Cause honestly, it would be a lot easier to use a simple HTML item (which could be called DIV) and wrap text there. This item (DIV) a “border-right or left” applied and you’re done (within 12 seconds).

I can’t see your construction, but what about using the above mentioned method on the element named item4?

Cheers

Thomas


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

Whoever created this page:

http://shouldiusetablesforlayout.com

Cheers

Thomas


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

Ha, ha Thomas – brilliant!


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

I tried Dave’s solution again (since I’m such an illiterate on how to use divs), and it’s still not happening:

Ignore the green line – it’s just an external guideline for aligning the new black line once it appears. The code’s been applied to the left cell next to the text. Everything “right” has been switched to left.


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

Oops - forget what I said. Upon refresh, it appeared! Thanks for the help, gents!


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

What I used to do when I used tables was to create a column 1px wide and apply a colour to it.


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

Nice trick. Now I have 3 ways to do it and I’m starting to get it. My Inner Geek is creeping out thanks to you all.


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

I must admit I’m confused about some of you being against using tables when I thought that was the best way to keep the elements of busy layouts in place. What’s the beef?


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

Tables have their place for certain things but page layout is definitely not one of them. They create excessive markup (code) that inhibits accessibility, breaks semantic meaning and can slow down load times for starters. They are a (long) outdated structure for laying out a web page.

Todd

I must admit I’m confused about some of you being against using tables when I thought that was the best way to keep the elements of busy layouts in place. What’s the beef?


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

So, given that Freeway is geared toward non-coders like myself, are we still best off using html items that simplify FW’s code but may run the risk of things moving around?


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

Freeway is definitely going to do its best to make the code for you without requiring you to actually write it, but you really do need to learn and understand how it works. Craftsmen (if they are any good) understand their materials. HTML is your material, and you need to know which way it bends, and which way it breaks.

Walter

On May 15, 2014, at 5:38 PM, Joe wrote:

So, given that Freeway is geared toward non-coders like myself, are we still best off using html items that simplify FW’s code but may run the risk of things moving around?


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


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

Yeah, that’s the rub – I have to art to do too. Only so much time to delve into the advice across the web and see what really makes sense. Thanks.


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

If you do print, you had to learn about dot gain, and how to mix a super-black without blowing up a press. You had to learn about paper grain and creep and scoring before you fold. If you go back as far as I do, you had to learn how to kern headlines with a Typositor, and ruin a fair few pairs of pants when the developer leaked out of it. And how to figure out how to count column inches at a given type size and font. And how to smile sweetly and get the typesetter to fix something that was really your own fault. It’s turtles all the way down, no matter which side of design (or any craft) you choose to look at. No matter how much you learn, there’s always more.

Walter

On May 15, 2014, at 7:18 PM, Joe wrote:

Yeah, that’s the rub – I have to art to do too. Only so much time to delve into the advice across the web and see what really makes sense. Thanks.


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


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