a little html help?

[WendyWelton]

Re: a little html help?

---

As an aside, I think I will modify my wt_content() function to pull content (including images) from ANY database table, and include any filter. That may not be a perfect soln here, but will come in handy in similar situations.

Actually - that exactly spot on what I need - content areas as designed, ability to pull the images and their detail view link pulled from my existing tables.

[WendyWelton]

I'm stubborn!

I'm now seeing other places where what I originally wanted to do is actually what I need to do.

So - I'm going to try and simplify the questions:

If I need to arrange a variety elements on a page in a variety of different ways:

• grids
• regular text and images
• fields from tables, like in Steve's template

What's the best way?

When someone says "use CSS" do you mean edit the CSS file? Or do you mean use CSS coding, like tables and "align" etc?

Question 1 - Assuming it's the latter (almost has to be, the CSS file wouldn't know about individual objects) - and my big stumbling block is that the page doesn't seem to know a grid displaying a single image has a height (using paragraph moves the next thing down only one line - resulting in overlap) - what CSS commands should I be looking at? How do I say "go down and below this, and by the way, that thing is more than one line in height?"

In some cases solving this is THE solution, because I assume I could then have text wrap around that image, not be restricted to a more table-like arrangement.

Question 2 - Or table? And if I try to do this with Tables, since a grid display is already a Table, can I put a Table inside a Table? That seemed to work, but then again, I did blow up my application. "oh that" ;-)

[Steve Wood]

Re: a little html help?

Tables are certainly "easier" if you don't know CSS, and CSS is easier if you know both. Tables are absolute, you get exactly the structure you define, many thousands of modern websites use tables to define structure. Alpha's grids are built upon tables plus CSS. You can put tables inside tables. The layout you showed me yesterday (image left, description right) can be built equally with tables or CSS. Pages with lots of table definitions run more slowly that the same layout using CSS (due to caching and reduced code for the CSS model.)

There are also many thousands of websites explaining how to use CSS, including how to "float" objects left or right.

Take a look at the attachment. It shows four DIV's ("areas") that are positioned using only CSS. It is very easy to see some of the CSS for the two DIV's with class="box1" because the CSS is "in-line", appearing right there with the DIV. The key to making those sections appear on the same line, or wrap to the next line is "float, and width". You ensure the two DIV areas have a total width that allows them to fit on one line, then use FLOAT to cause them to appear on the same line. It can be a pain to line things up, which is why there are standards for how wide columns should be. Although you can see some of the CSS for these BOX1 DIV's, some also is buried in the style.css file.

You cannot see the CSS for the DIV classes main_home, main2, sidebar_home because those are defined in the style.css file.

Within each of the + symbols is more CSS and HTML. In the case of the two with class="box1", that CSS will include DIV's for the images, telling them to be flush left, have some padding, and to allow text to 'wrap' around them.

The DIV with class="clearfix" is important. If it were noted in-line, it would be style="clear:both". That separates the objects above from the objects below. Without that designation, often objects below will overlap objects above.

Although you can't see all of it in the image, the format is:

DIV CONTENT - the entire content area
DIV MAIN_HOME - the area with the four content divs

DIV BOX1 - END DIV BOX1

DIV BOX2 - END DIV BOX2

DIV CLEARFIX

DIV BOX3 - END DIV BOX3

DIV SIDEBAR_HOME - END DIV SIDEBAR_HOME

END DIV MAIN_HOME
END DIV CONTENT

[WendyWelton]

Re: a little html help?

You know - I had that example right there the whole time, now didn't I? "doh" Maybe it being built in is why I didn't see it. I need to find a class about CSS!

I find lots of useful bits and pieces, like at w3schools.com, but not a lot with things in context with each other.

I will give this a shot. I like the idea of it being a tad simpler and less time to load pages.

[WendyWelton]

Re: a little html help?

btw - what's Clearfix?

[Steve Wood]

Re: a little html help?

Clearfix is my own class name, it leads to this css:

style="clear:both"

[Peter.Greulich]

Re: a little html help?

btw - what's Clearfix?

Also, Google this: HTML CLEARFIX

[aburningflame]

Re: a little html help?

Wendy what I'm trying to tell you what you are trying to learn (the way you are going about it) is the wrong way, that's all.

"The wrong way" - what is wrong with learning HTML and CSS? Just because Alpha makes it easier for you - does not mean you should completely scrap/disregard the basics. Learning basic html and css would help a lot of people on this forum - and I commend wendy for doing that.

[kkfin]

Re: a little html help?

"The wrong way" - what is wrong with learning HTML and CSS? Just because Alpha makes it easier for you - does not mean you should completely scrap/disregard the basics. Learning basic html and css would help a lot of people on this forum - and I commend wendy for doing that.

This is so ridiculous message that I have to comment it.

I must say that I never did get impression from this thread that Pete said that learning HTML and CSS is wrong. If you read carefully he did post to Wendy that "the way you are going about it" is the wrong way.(In message #13)

And when I read all the suggestions to Wendy after # 13 post I must say that Pete was 100% right.

[aburningflame]

Re: a little html help?

This is so ridiculous message that I have to comment it.

I must say that I never did get impression from this thread that Pete said that learning HTML and CSS is wrong. If you read carefully he did post to Wendy that "the way you are going about it" is the wrong way.(In message #13)

And when I read all the suggestions to Wendy after # 13 post I must say that Pete was 100% right.

The way she was going about it can be done. Not everything needs to be done in a grid. there are many situations where i have used html/css/xbasic to output - instead of using a grid (after all - under the hood all the grid does is use xbasic to load database information and use html/css to output it). The way she was going about it was not the best, but it was not "wrong". Maybe I should have said that 'Using xbasic/Css/Html' is not the wrong way - instead of the word learning.

[aburningflame]

Re: a little html help?

The way I see it is this:
The grid is like a building with many floors.
Now - if I need to build a 1 story house - would it be better to take that grid and demolish all the floors above 1? Or would it be easier to build a house from the ground up?

There are situations for the grid, but sometimes its just easier to start from scratch instead of trying to find/edit all the css/settings you need to.

:)

[WendyWelton]

Re: a little html help?

I love seeing some debate about the methods - because I and other newbies can learn from it. But I think we should get entirely away from any and all blanket statements and judgments.

[peteconway]

Re: a little html help?

Here is the solution to the single grid delivery of the topic. It was wrong of me to comment the way I did, but please be assured it was out frustration that the tools made available by v10+ in the grid are not being used to capacity. I was saying the process was crazy (in light of what I knew) and thats's all, if anyone has any questions or comments let me know - I have also posted a new thread of the some 13 minute video that details the solution for those not following the thread. I hope you find it of assistance. Pete

Run Video

The Ajax
function isEven(rowNum) {

if(rowNum % 2 == 0) return true;
return false;

}

[Bob Moore]

Re: a little html help?

Nice work Peter.

The Ajax
function isEven(rowNum) {

if(rowNum % 2 == 0) return true; 
return false;

}

It's not The Ajax (I clean my shower with that!) it's the JavaScript!

Here's another alternative, using JavaScript unary ? operator

function isEven(rowNum){
     return (rowNum %2 == 0) ? true:false;
}

[aburningflame]

Re: a little html help?

Here is the solution to the single grid delivery of the topic. It was wrong of me to comment the way I did, but please be assured it was out frustration that the tools made available by v10+ in the grid are not being used to capacity. I was saying the process was crazy (in light of what I knew) and thats's all, if anyone has any questions or comments let me know - I have also posted a new thread of the some 13 minute video that details the solution for those not following the thread. I hope you find it of assistance. Pete

Run Video

The Ajax
function isEven(rowNum) {

if(rowNum % 2 == 0) return true;
return false;

}

Thats fine pete :) sometimes people misword things.
There are some situations where I try using the grid to its full capacity and some areas where I shy away from the grid. If it takes me an hour to write some xbasic/html/css - which I am very proficient at - I am going to take that route over the wading through documentation and trying to find and learn some hidden grid feature.

Anyways, no harm done. :) Enjoy your day.