16 replies [Last post]
nexia
nexia's picture
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-5
Joined: 2003-03-22
Posts: 42
Points: 0

hi, i'm offering my website for Site Checks because i know my css and html is not the best at this moment, so i need suggestions...

my CSS2 validator is without errors, i've took time to make it perfect. But the site is supposed to be tableless and for now, i have to keep most of the tables where they are because i don't know how to deal with these details for now.. i don't have time to do everything, as i code, develop and write the entire site...

this is: http://mini-merveilles.com (same site in english later!)

if someone wants to check it and comment, i'd be happy. my biggest challeng is the right panel, where i use tables because i can't find other ways to set images and text the right way... if the design have to change a bit for a more efficient css, no problem btw, the community is not opened yet.

thanks!

nexialism source of all knowledges

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 10 hours 31 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5148
Points: 2746

Mini-merveilles.com

Hi Nexia,
Great site, I can see you've put a lot of work into it.
I like the tool tip that fades in, at least I think it’s a tool tip I'll have to wait for the English version to find out.

There’s a couple of way’s to go about removing the tables. Firstly I’ll deal with the site structure, the two main columns.

One way you could go about this is set up both columns as divs lets call them main and right for now so this explanation will be easier to follow. You could float the right column right and the main left, set the style of the right to something like "float: right; width: 280px; border-left: solid #CCCCCC 1px; padding-left: 5px;"
Then set the main style like "width: 60%; float: left;"
This nearly works, without knowing the exact size of the browser window, you get a gap between the columns and if the window is too small the right column falls below.

So you could try position: absolute for the right column and give the main a margin-right of the width of the right column or a bit more. So the right column style would be: "position: absolute; width: 280px; right:0; top:150px; border-left: solid #CCCCCC 1px; padding-left:5px;"
Main would need a "margin-right: 280px;"

I prefer the top solution although the bottom will give you a closer match on what you have now. Both would need much testing in various browsers and may require a few hacks to get the desired look.

Then the tables in the right column, I’m not too sure why you have multiple table there, have you tried one table with multiple rows.

To do without tables you could firstly wrap what you have now as a table in a div we’ll call it row for now and give it a style like "width: 100%; clear: both;"
Then inside the row set the link around the image "float: left" eg <a style=”float: left;”
The other link and rest of the text wrap in another div and set the style like:
"width: 60%; float: right; padding-left:5px;"

It may sound harder then it is, give it a try and let us know how it goes.

nexia
nexia's picture
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-5
Joined: 2003-03-22
Posts: 42
Points: 0

Mini-merveilles.com

Hey, Thanks Tony... you got it... i think ..lol

(yes, the floating is a tooltip - the resume of the page it shopws in...)

explanation of my framed structure... you took a look at my structure, so i will cut the details, but you found that my tables were easy to drop and change to divs... but i don't understand well how to.. you gave me some details... i'm not css god, just html wizard.. lol

under the first fieldset, i have a table that manage the entire site.... inside these two, i have two < td> .. one for left stuff that take 100% of the left space, that is generated with each page, with different content, and so on... i chosed to have a table to deal with that because i want it to be fixed size... the right panel is 275 pixel wide, to be readable and so, i was not able to fix it until today...

the right panel is fixed content... always a menu or another... but build that way, it was complicated for me to build rows inside a single table, because of the design... was by choice, because i know i can do better.. lol

point is that 100% of the site is generated by php, so i had to generate a code before looking at the design... and as i'm testing it right now, your advice is useful and very important, as i need this site to be following the better the CSS2 validation, the HTML one also... for the html , the validator is a bit old, never recognise php actions (?act=bob&CODE=notstupid)... so i can't register my site to be HTML 4.01 compliant, but it is... nevel found a validator that was recognising these btw!

ok, i'll take a look at your suggestion later today, maybe showing the results or asking for more suggestions.. Smile:)

thanks Tony

nexialism source of all knowledges

nexia
nexia's picture
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-5
Joined: 2003-03-22
Posts: 42
Points: 0

Mini-merveilles.com

the point of the left/right panels is because i have two actions to load the site...

first, we open the header that stops under the tooltip...
second, we load the site content in the left panel (forum, image library, etc!)
third, we load the right panel and the footer...

so i can't set everything in a single shot, or i have to rework my entire frame... and it's always the same pattern everywhere, loaded only once, it's easy to deal with.

the only difference is that i have popups that does not show the header and the right panel, and pages without the right panel... si i have to so everything set variably... (if no-right-panel, use that value instead)...

anyway, i will rework everything .. it's time, because this site is going to public as soon as possible... and yes, thanks , i 've done lot of work on it.. not in the design, you just saw part of my work.. but it's a 6 years evolution... Smile

nexialism source of all knowledges

nexia
nexia's picture
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-5
Joined: 2003-03-22
Posts: 42
Points: 0

Mini-merveilles.com

btw, it's not only about tables, here is a site for CSS, so i will take a look at the css also...

what i'd like to have and i found none anywhere.. a place where i can choose fonts designs by examples... yah, i can't see the entire results of selecting this or that font style, because i never found a site that demo all the possible basic displays...

i can test them on my site, but i'm on a Mac, so it's not the same display on a PC, and don't have the list of basic font on a PC, so i don't know if Helvetica will show the same on a PC and i'm sure Geneva will not..

also, i'd like to have a better display for every details on my site, because the site is dedicated to parents and families. i want that site to be perfect, like many other admins, but i want it to be 100% compatible with browsers, i want the site to follow the more certifications, and be browsable by anyone interested in the subject.

i had to rebuild the css lately because i've changed from a browser to another, and most of the styles applyed were not useful or were giving strange behaviors... (so applying a selective class in a texarea was stoping us to select the content of the area)...

anyway, thanks for the help.. Smile

nexialism source of all knowledges

nexia
nexia's picture
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-5
Joined: 2003-03-22
Posts: 42
Points: 0

Mini-merveilles.com

i have an image of the way it have to look...

http://mini-merveilles.com/mainpage.jpg

the management of the content is easy, it's the style that is missing... later today, i will try your suggestions Tony... and some others...

i just thought of it, the left side have no need to be in a table if the right panel is in a div well defined, as the left side have various content and is the main content of the site.

have to suit everything to be inside my fieldset with tooltip.. Smile:)

nexialism source of all knowledges

nexia
nexia's picture
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-5
Joined: 2003-03-22
Posts: 42
Points: 0

ok, an update...

i think i will keep this topic like my site evolution thread...

ok, like suggested, i've tried the two divs side to side... was working well, but not giving me the design i want... my main problem is the fieldset that is not responding with the right panel that was build floating in absolute position, as the fieldset is growing around fixed content... so it was cutting around the left panel, but was forgetting the right one...

the design was useful to understand, but not complying with my needs. i don't see other solutions, as nothing can be compared to tables when forcing our design to have fixed size portions... but that's what i think it's the kind of situation we can use a table btw... no need to cut them completely.

for the second suggestion, to cut the multiple tables in the right panel, to have only one with different rows, it's all done... i was stupified to see i never thought of it... was not my major problem btw.. lol

problem when installing CSS in the structure of the site, is that we can't build completely a fixed page only with CSS... html is needed, and sometimes, we have to use the old stuff to build or thingies... like fieldset and table... their is not a single alternative to tables ... and even if they are supposed to be used for stylesheets, it's used also for fixed elements...

and for the fieldset, i don't know why it's a standard in html, because it's useless if you don't need a title inside a specified space... it can't be size defined, and we absolutly need to define the legend...

ok, anyway.. this is not supposed to be debated in my Site Check.. lol

i will take a look also to change the other details of my site...

nexialism source of all knowledges

nexia
nexia's picture
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-5
Joined: 2003-03-22
Posts: 42
Points: 0

Mini-merveilles.com

i've changed the most of what i know about css, basically, because i want the site to be clean and simple...

the site is now 30% less tables than before, and i even use less css.. lol

ok, thanks for the suggestions, i've tried them all, but was not able to have the needed effect for the two divs, so i keep that surrounding table... i will clean the forum tables later...

nexialism source of all knowledges

nexia
nexia's picture
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-5
Joined: 2003-03-22
Posts: 42
Points: 0

Mini-merveilles.com

btw, i'd like to have some suggestions from guys here that looked at my template, to see if some new effects can be simply done, or details suggestions... i'm not the king of design, and as the site is not opened yet, i can change things...

btw, i will add the references of csscreator.com in the important links of the site, because you were useful for me, and i hope this will continue.. Smile

Laughing out loud

nexialism source of all knowledges

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 10 hours 31 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5148
Points: 2746

Mini-merveilles.com

Hi Nexia,
Good to see you've reduced the tables where possible.
Here is a suggestion to replace the tables in the right column.

<div class="mrow">
    <a class="nav" href="http://mini-merveilles.com/index.php?s=4d3f72104cd955589337e2ba50a7d63f&act=idx">
    <img src="http://mini-merveilles.com/graphics/legend_buttons/forums.jpg" width="93" height="62" class="border" alt="Les Forums" longdesc=""></a>
    <div class="rtxt">
        <a class="portmediumtitle" href="http://mini-merveilles.com/index.php?s=4d3f72104cd955589337e2ba50a7d63f&act=idx">Les Forums</a>
        <div class="maindroite">Le lieu de toutes les discussions, Les Forums servent à regrouper tous les sujets de discussions en catégories.</div>
    </div>
</div>

and the CSS to go with it.
.mrow{width:100%; clear:both; padding-top:10px}
.rtxt{width:60%; float:right; padding-left:5px;}
.nav{float:left;}

Of course you would need to check this out in your target browsers.

nexia
nexia's picture
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-5
Joined: 2003-03-22
Posts: 42
Points: 0

great!

great, Tony, it's working cool. (and sorry, it's not my usual language!)

i've applyed your last change, it's crisp and clean...

but btw, why do you think it's SO important to cut off all tables we can cut ?!... i don't see why, because tables are working...

i don't do it for my logical needs, i do it for web requirements for now... Smile i want my website, and the next ones to be the best way built possible...

ok, thanks Tony.. i will apply the new change, and see if i can do it for the internal tools.. because the front page hides about 500 different content pages..

nexialism source of all knowledges

nexia
nexia's picture
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-5
Joined: 2003-03-22
Posts: 42
Points: 0

Mini-merveilles.com

hum.. i found that the IE for Mac on OS-X is forgetting details in the panel... buttons are shown scaled.. each next button push the content to the right... like if there was a missing </div >...

but i think i'm one of the only guys to use IE for Mac on OS-X... lol.. and i make advertisment to use the Mozilla things...

nexialism source of all knowledges

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 10 hours 31 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5148
Points: 2746

Mini-merveilles.com

Hi Nexia,
If tables are working for you, like the right column keep using them. I was merely offering an alternative.

nexia
nexia's picture
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-5
Joined: 2003-03-22
Posts: 42
Points: 0

Mini-merveilles.com

Tony wrote:
Hi Nexia,
If tables are working for you, like the right column keep using them. I was merely offering an alternative.

that's what i asked for... and i have tested the solutions... my problem is not your suggestion, but the browsers that does not understand them really...

btw, i was able to change many other effects on the site with these suggestions.. this is mostly why i posted here.. Smile:)

thanks Tony!

nexialism source of all knowledges

nexia
nexia's picture
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-5
Joined: 2003-03-22
Posts: 42
Points: 0

Hi tony... and the others..

i've modified my display in the forums, i'd like to have your opinion...

http://mini-merveilles.com/index.php?act=SF&f=1

you see a link in the bottom of the left block.. infrench: Afficher les Options et Navigation

... Show Options and Navigation.... click on it, and it shows a block of functions for the forum... same thing in the Topics, with different functions...

do you think i can add a scrolling effect on that, like if we click the link, the block shows in a scrolling motion to the bottom ?!

and btw, what do you think of it?!... is it well written ?!. can it be possible to make it better with css only instead of javascript ?! .. because javascripts are sometimes buggy in browsers... it took me 3 hours to find the solution on that one that had simply a "" instead of a '' ... damns IE.. lol

nexialism source of all knowledges

nexia
nexia's picture
Offline
Regular
Last seen: 11 years 39 weeks ago
Timezone: GMT-5
Joined: 2003-03-22
Posts: 42
Points: 0

update report...

Update Report...

it's been a long time since my last visit here...
was very occupied rebuilding my site and code some tools...

btw, you can see the result here: http://mini-wonders.com , as it's the english side and completely cloning the other that is in french.

i'm using css at it's basic, not using too much gadgets, because i don't know how to deal with all browsers yet... but i think my skin is good...

your opinion ???

nexialism source of all knowledges

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 10 hours 31 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5148
Points: 2746

mni-wonders

Looks good Nexia,
A well thought out site with lots of features.

I'm sure the site will do well, Good luck.