12 replies [Last post]
thelinking
thelinking's picture
Offline
newbie
Last seen: 12 years 14 weeks ago
Timezone: GMT+2
Joined: 2010-05-10
Posts: 8
Points: 9

I got a request about how to use div instead of table.
In more and more forums i see people saying: Use div instead of table, to make your markup.
Thats all fine, and i see why it a good idea to use div's.

Now i tried for a long time to find a how-to, that suit my needs, but i cant find any how-to's Sad(
Normally i make a expanding table, where i use 3 row's and 3 col's.

Each corner is: no-repeat.
Middle is: repeat.
top, bottom is: repeat-x.
left, right is: repeat-y.

This makes use of minimal graphic, cause the graphic repeat itself, when the user change window size.

I use really many boxes on my pages, and need to make all these tables into div's and smaller code.
But it's way to complicated for me to learn all what it takes, and when i read some guides telling me, that this is the way to do it.
I never saw a guide who can explain it, so i understand it.

Maybe i'm to old or something...
But if someone here in this forum, know a good how-to, or can guide me somehow, point me in a direction etc...
I will be very thankful.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 49 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

thelinking, you're never too

thelinking, you're never too old, just ask Ed. When you're transitioning from tables-based layouts, to css-based layouts; its best to change the way you think. divs are not replacements for tables. div is just another html tag we can use. the idea behind this new way of building webpages, is simple. Dont use tables for page layout. Use css to style the html tags. tags like ul, p, h1-h6, span, and so-forth. the styled html tags make up the layout of the design. visit the following websites for further reading...

http://www.htmldog.com
http://www.w3schools.com/default.asp

I dont think I understand the "Q" graphic. is it a graphic of the letter "Q"? Why dont you just use the actual letter rather than a graphic? style it with css.

thelinking
thelinking's picture
Offline
newbie
Last seen: 12 years 14 weeks ago
Timezone: GMT+2
Joined: 2010-05-10
Posts: 8
Points: 9

I saw this thread before you

I saw this thread before you ansvered my Q=question thread
http://csscreator.com/..., and there you told:

The best way for you to grow, is to research and discover. Please go to the following URL's to begin your journey!! Also, to answer your question, research floats and lists. The next time you post, be sure to read the posting guidelines...

And a moderator answered you:
CTJ, don't you think he's made an effort? Sometimes you know what you want but don't know how to phrase the query. Sometimes you don't recognize a solution because 1) it doesn't directly address your issue, and 2) you may not be familiar enough with what you're shown to recognize the possibilities...

I tried learn this technique for quite some time, i did go throw the guides on w3schools months ago, but did not find any helpful info there. I goggled and did read loads of how-to's and still i don't get the method.

This technique is more advanced, and thats why i went here, to try get some help.
If you think back in your life, i'm sure you had to learn things from other people.
I just love when i can teach others what i learned, but thats just me.

So where all is, i still need help on this technique, and will be thankful to get a example,
who address this technique in a way, so i can understand it, and learn it the right way.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 49 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

CupidsToejam wrote: I dont

Quote:

I use really many boxes on my pages, and need to make all these tables into div's and smaller code.
But it's way to complicated for me to learn all what it takes, and when i read some guides telling me, that this is the way to do it.

You made it seem like you were wanting help understanding the transition from tables to divs. forgive me for providing constructive guidance to help you along. you seem very ungreatful.

CupidsToejam wrote:

I dont think I understand the "Q" graphic. is it a graphic of the letter "Q"? Why dont you just use the actual letter rather than a graphic? style it with css.

Maybe you can answer my question...

thelinking
thelinking's picture
Offline
newbie
Last seen: 12 years 14 weeks ago
Timezone: GMT+2
Joined: 2010-05-10
Posts: 8
Points: 9

Ok i named this thread: Q

slice.jpg
Ok i named this thread: Q Graphic using div instead of table
Thats how it can turn out, when i try to be short in description, so here goes again
I have a Question about using graphic in a div-layout instead of a table-layout.

I provided a photo, to try be more specific about what i try achieve.
Number "1" & "2" is a photo width 1 height 33, who repeat itself horizontal.
Number "3" & "4" is a photo width 33 height 1, who repeat itself vertically.
The 4 corners "c" is a photo width 33 height 33, who don't repeat itself.
And finally "5" is a photo width 1 height 1, who repeat itself.

This makes my box-design load really fast, and makes the boxes able to adjust to the users liking.
I saw different ways to achieve this, but i newer managed to make it right, so the expanding sides
"1, 2, 3, 4, 5" get filled with the graphic the right way.

Unfortunately i can't keep the overlook when i try follow the guides i saw so far.
because none of the guides i saw, was addressed at my needs.
So i had to try make my way, to fit the codes to my needs.

i tried with nested div's, list's, but always manage to make a mistake, who screw up the codes.

thelinking
thelinking's picture
Offline
newbie
Last seen: 12 years 14 weeks ago
Timezone: GMT+2
Joined: 2010-05-10
Posts: 8
Points: 9

I did not want to be mean, i

I did not want to be mean, i just saw so many threads answer learn it yourself, instead of getting the help i ask for. So it was not meant direct for you, i just got frustrated of all those "learn it yourself post's"

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 26 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

thelinking wrote: I got a

thelinking wrote:

I got a request about how to use div instead of table.
In more and more forums i see people saying: Use div instead of table, to make your markup.
Thats all fine, and i see why it a good idea to use div's.

Sorry, the people who gave you this idea of "divs" being an alternative to "tables" were either deluded or you misunderstood them. And you are caught is a false dichotomy here, so you are asking the wrong question based on a wrong idea. And as long as you are caught in that false dilemma you will continue to ask the wrong questions and end up doing far more work than you need to do.

What you need to learn is "semantic markup" and until you set your illusions aside and learn about the right way you will just get more and more frustrated.

Right now you are sort of like someone standing in the middle of a field trying very hard to fly by flapping their arms very fast, and asking someone to help him learn how to flap their arms correctly so as to be able to fly with them. And then getting very upset when people try to explain that they are on the entirely wrong track and no amount of "help" with this project will be of any use until they decide on your own to stop it.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thelinking
thelinking's picture
Offline
newbie
Last seen: 12 years 14 weeks ago
Timezone: GMT+2
Joined: 2010-05-10
Posts: 8
Points: 9

Thanks Ed I see i was lost in

Thanks Ed
I see i was lost in looking for the right help, and walked the wrong way.
Now i can ask the right question, and look the right places.
semantic markup, i learned a new word today Wink

thelinking
thelinking's picture
Offline
newbie
Last seen: 12 years 14 weeks ago
Timezone: GMT+2
Joined: 2010-05-10
Posts: 8
Points: 9

I'm sorry that i got

I'm sorry that i got frustrated over your answer, and now i see i was asking the wrong question.
Please forgive me, it was my fault Sad

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 49 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

thelinking, what content will

thelinking,
what content will go inside this box? Also, there is a very simple easy css3 way of doing this without using mages altogether! Last question, what is the reason for having #5?

thelinking
thelinking's picture
Offline
newbie
Last seen: 12 years 14 weeks ago
Timezone: GMT+2
Joined: 2010-05-10
Posts: 8
Points: 9

all the images use opacity,

all the images use opacity, so the background-color goes throw them, thats why i also use a image in 5, who fill all the middle section.
the boxes are meant for video/music(i got this valid xhtml code for the radio stations)

<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" id="player" width="300" height="200">
<param name="url" value="mms://194.158.91.91/Rna" />
<param name="src" value="mms://194.158.91.91/Rna" />
<param name="showcontrols" value="true" />
<param name="autostart" value="true" />
<!--[if !IE]>-->
<object type="video/x-ms-wmv" data="mms://194.158.91.91/Rna" width="300" height="200">
<param name="src" value="mms://194.158.91.91/Rna" />
<param name="autostart" value="true" />
<param name="controller" value="true" />
</object>
<!--<![endif]-->
</object>

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 49 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Okay. I would do this box

Okay. I would do this box using css3 with RGBA. css3 has very powerful features like rounded corners and gradients! RGBA is the use of RGB color with Alpha channel transparency.

thelinking
thelinking's picture
Offline
newbie
Last seen: 12 years 14 weeks ago
Timezone: GMT+2
Joined: 2010-05-10
Posts: 8
Points: 9

Thanks for tip's so far But

Thanks for tip's so far Cool
But it cant cover my needs, if i don't find any other way, i need to stick to tables.
I use 2 nested tables, and for me i can say that keeps my overlook.
However it is always best to do it the right way.
I used all day yesterday to search for any clue, to make it into a div + span, list, or other placeholders for my code.
i saw an example with list inline for a horizontal menu, but i did not see any with graphic,
and i need to combine 3 cols, into 3 raws.

To show the code i use ATM, i dump a ling to one my existing radio's here: Klik here