Moja nova stran je sedaj čisto brez tabel

In to je zdaj dejansko tudi prva in edina od raznih mojih spletnih strani, ki je narejena brez ene same samcate HTML tabele, torej samo z uporabo <div> elementov in “floatCSS property-jem. Gre pa za stran naslovljeno “Tadej Persic’s website“: http://tadejpersic.50webs.com/index.html, katero sem ustvaril kot zadnjo po vrsti, sama stran pa je recimo temu “splošna stran” (oz. natančneje, ni posvečena nobeni konkretni temi), ki samo vsebuje linke do vseh mojih ostalih strani in blogov. Naj tudi ponovim, da je ta stran malo drugačna od mojih ostalih strani, npr. na njej ni veliko slikic/banner-jev, skriptov in takih in drugačnih povezav, pa tudi “meta špeha” (kot ga navadno namečem tja gor) v header-ju; skratka stran je brez vse nepotrebne navlake, v smislu kode in objektov.

Sam postopek “konvertanja” mi je vzel vsega samo nekje 10-15 minut, pri vsem skupaj pa sem naletel na en samcat problemček, ki pa se je izkazal za zelo lahko rešljivega. Tako sem spodaj dodajam moj prvi post iz topic-a “One single problem (a gap) after making my site table-less“: http://forums.digitalpoint.com/…t=391601, ki sem ga o tem problemčku odprl na DP forumu.

Hey all. Today something “triggered” me to finally convert (it wasn’t at all that hard, 10 minutes or so) my newest general personal website from layout with tables (not many tables though, in fact it was just one, and on some pages two; also see further below) to a completely table-less layout, and you can imagine that I am quite proud of it, LOL. The website’s URL is http://tadejpersic.50webs.com/index.html (and http://tadejpersic.50webs.com/about-me.html is important too for this issue), while the .css file used is http://tadejpersic.50webs.com/sheet.css

1. However, I see that there is one problem after doing so. It’s that there is one big gap that appeared below the following rows of links:

xmldata.xml | contact me | disclaimer | copyright | site policy | site label | valid xhtml | valid css

… and above the Google AdSense ad, which is itself above the following text:

“The favicon file and other icons used on this site are from the Famfamfam’s silk icons collection.”

2. And on a related note; already during a “trial & error” when I was testing the code with floats (btw. I’ve just recently started to learn about them) I saw a similar gap. Similarly to above (i.e. to finished state of documents), I wanted to get rid of it with “clear: left;” and “clear: both;” (see “about-me-mod1.html” or “about-me-mod2.html” links below), to no avail, although I must confess that I don’t quite understand the “clear” property’s principle.

And here are also few links/examples for a better picture; note that I changed them so that they use an outdated sheet-old.css stylesheet file.

http://tadejpersic.50webs.com/index-table.html (index.html page, an old design with the use of tables)

http://tadejpersic.50webs.com/about-me-mod1.html (about-me.html page, an old design with the use of tables, just the “inner” table is changed to “float”)

http://tadejpersic.50webs.com/about-me-mod2.html (about-me.html page, a totally new table-less design, although not yet completely finished)

thanks for any help that you can provide, tayiper

Kot drugo pa dodajam še enega od bolj zadnjih mojih postov v tem istem topic-u/thread-u (tule je direktni link do devetega posta po vrsti), kjer opišem moje “odkritje” glede uporabe “float” (že omenjenega zgoraj) in “height” property-jev. Eden od uporabnikov mi je namreč predlagal, naj kar preprosto izbrišem “height” property iz .css fajla, a sem jaz potem ugorovil, da če to naredim, se mi pokvari “layout”; konkretno se mi paragrafi, ki bi morali biti na desni (kot posledica flota-anja neke slikice v levo) postavijo pod slikico, česar pa seveda nočem.

Uhhh, sorry for so many consucetive posts, but I think that I’ve just learned/discovered something after validating the code and noticing that I missplaced one of the <p> starting tags compare to the <div> one (you know, inline vs. block elements), and it’s basically further about the “height:” being required …

You two guys who are already familiar with the code know that there are three <div> ids: “twist”, “content”, and “inner”. And I used/intended for the “twist” one to wrap around so that it would be “clear” for rendering where the float (i.e. menu with links) ends, and where the text that’s effectly on the right side of the float. But then after placing correctly that <p> tag mentioned above (and modifying other code too) I noticed that the “twist” id is actually not needed at all!!!

Further, I guess that there are two basic options:

… to use yet another such <div> (beside/additionally to the “twist” one), and then the “height” property isn’t required at all

… to not use any such “wrapping” <div> (like the “twist” was mentioned to be), but then the “height” property is required

And I mean “height” property being/not being required in both cases, i.e. in case of menu with links/three paragraphs of text wrapped with div with id “content” (which requires or would require somewhere around height: 480px;), and in case of picture/first paragraph which are both also inside “content” div (while the “inner” div that wraps/should wrap them requires around height: 130px;), where the first/left item in the two pairs above is floated to the left, and the second/right is consequently “moved” to the right.

So please tell me guys: I am right in this “discovery” of mine??!

Regards, tayiper

Glede tistega prvega posta zgoraj mogoče samo še opozorilo, da sem kasneje tiste fajle linkane bolj spodaj premaknil v “/sample/” direktorij na serverju od mojega “50webs” free-hosta, tako da je sedaj npr. namesto linka: index-table.html pravilen link: /sample/index-table.html.

P.S. – Za več o točno tej moji spletni strani (glede razlogov zanjo, kodiranja itd.) si lahko preberete objavo “Ustvaril sem popolnoma novo spletno stran“: http://tadej.sopca.com/…/…novo-spletno-stran, kjer je vse glede ustvarjanja te strani zelo podrobno opisano.

Tadej

3 Responses to “Moja nova stran je sedaj čisto brez tabel”

  1. Mrko says:

    Pohvaljen!
    Imaš pa 41 warningov v kodi :(
    Vglavnem manjka atribut alt v img tagu. Dva img taga nista zaključena. li ti manjka pri obrazcu za iskanje po blogu itd.
    Še mal, pa bo popolno ;)

  2. tadej says:

    Hmmm, ne bi rekel: http://validator.w3.org/check…index.html. Ti si očitno validiral moj blog, ne pa moje domače strani…

    Tadej

Leave a Reply