www.digitalmars.com         C & C++   DMDScript  

digitalmars.D - d-programming-language.org using olny CSS

reply Tiberiu Gal <Tiberiu_member pathlink.com> writes:
hello again,
I dropped all my tables out and switched to css. you were all right, this site
must be as light as posible ...so:
http://dworks.marte.ro/dm/template.html

this one is nick's template with a bit facelift and wearing make-up.
this one does not validate yet; it could and it will later. just look for the
design, colors.
I modified nick's design to make this one, but i think we can agree on some
general rules, so many design schemes (or themes) can be made out of css... so
anyone can see d-programming-languge.org in the colors he likes most.
May 22 2006
next sibling parent reply Lionello Lunesu <lio lunesu.remove.com> writes:
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Content-Transfer-Encoding: 7bit

Tiberiu Gal wrote:
 hello again,
 I dropped all my tables out and switched to css. you were all right, this site
 must be as light as posible ...so:
 http://dworks.marte.ro/dm/template.html

I like the looks of this! In firefox I get some strange dots next to section names at the top. Check the attached image. They don't appear in IE. L.
May 23 2006
parent Tiberiu Gal <Tiberiu_member pathlink.com> writes:
In article <e4uc48$ue$1 digitaldaemon.com>, Lionello Lunesu says...
This is a multi-part message in MIME format.
--------------080001060201050404050707
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Content-Transfer-Encoding: 7bit

Tiberiu Gal wrote:
 hello again,
 I dropped all my tables out and switched to css. you were all right, this site
 must be as light as posible ...so:
 http://dworks.marte.ro/dm/template.html

I like the looks of this! In firefox I get some strange dots next to section names at the top. Check the attached image. They don't appear in IE. L.

May 23 2006
prev sibling next sibling parent Lars Ivar Igesund <larsivar igesund.net> writes:
Tiberiu Gal wrote:

 hello again,
 I dropped all my tables out and switched to css. you were all right, this
 site must be as light as posible ...so:
 http://dworks.marte.ro/dm/template.html
 
 this one is nick's template with a bit facelift and wearing make-up.
 this one does not validate yet; it could and it will later. just look for
 the design, colors.
 I modified nick's design to make this one, but i think we can agree on
 some general rules, so many design schemes (or themes) can be made out of
 css... so anyone can see d-programming-languge.org in the colors he likes
 most.

I know less than little about CSS and such stuff, but for looks, I think this suggestion is great. -- Lars Ivar Igesund blog at http://larsivi.net DSource & #D: larsivi
May 23 2006
prev sibling next sibling parent reply Serg Kovrov <dyh pathlink.com> writes:
Hey, great looking template! Pretty and yet simple design. I like it =) 
And markup too.

Few minor suggestions...

For markup, you could move d-logo bitmap from img to span background, to 
save mobile traffic.

And for style, it will be nice to introduce 'max-width' property for 
content block, so it won't stretch too much on big screens. Perhaps in 
em's to scale with text.

Tiberiu Gal wrote:
 hello again,
 I dropped all my tables out and switched to css. you were all right, this site
 must be as light as posible ...so:
 http://dworks.marte.ro/dm/template.html
 
 this one is nick's template with a bit facelift and wearing make-up.
 this one does not validate yet; it could and it will later. just look for the
 design, colors.
 I modified nick's design to make this one, but i think we can agree on some
 general rules, so many design schemes (or themes) can be made out of css... so
 anyone can see d-programming-languge.org in the colors he likes most.

May 23 2006
parent Daniel Siegmann <gandalf optonline.net> writes:
 And for style, it will be nice to introduce 'max-width' property for 
 content block, so it won't stretch too much on big screens. Perhaps in 
 em's to scale with text.

No! That's a fine way to screw up a site for those of us using higher resolutions.
May 27 2006
prev sibling next sibling parent Daniel Keep <daniel.keep.lists gmail.com> writes:
Tiberiu Gal wrote:
 hello again,
 I dropped all my tables out and switched to css. you were all right, this site
 must be as light as posible ...so:
 http://dworks.marte.ro/dm/template.html
 
 this one is nick's template with a bit facelift and wearing make-up.
 this one does not validate yet; it could and it will later. just look for the
 design, colors.
 I modified nick's design to make this one, but i think we can agree on some
 general rules, so many design schemes (or themes) can be made out of css... so
 anyone can see d-programming-languge.org in the colors he likes most.
 

It's looking good :) I'm glad we managed to bring you over to the dark si-er, light side of the force. Here's some constructive criticism: 1. You've got two blank lines before the "<?xml" prologue: this makes the page invalid. 2. You're setting the page's mime type as "text/html": this is really REALLY bad; it should be "application/xhtml+xml". Either that, or don't make it XHTML at all. 3. Your printer CSS file is marked with ``media="screen"``. 4. You have margins on the BODY element: you should use CSS for that (otherwise, if you disable CSS, the page will be squished against the edges). 5. You've got an alt tag that reads "logo2.gif": alt tags should always be a description of the graphic if and only if such a description is useful. Parroting back the filename does nothing to help disabled users. 6. "sesarch" :P 7. The search link is a hyperlink using Javascript; this means that the search function will fail to work on any browser that either doesn't support Javascript, or where it's been disabled. If you want to keep the elements stylistically linked, you can use images with alt text. 8. You should try to avoid using all those H2s in the navigation list. You're not actually delineating sections of content. 9. On a related note, you're using H2s, but you don't have any H1s! The document should be structured with a top level H1 (such as "Overview"), and then H2s to denote the subsections. 10. Your CSS is portable enough that you can simply move the search box, the navigation and header below the content. Ideally, the page should be sequenced like so: * Page title or header * Page content * Quick navigation * Search * Full navigation * Misc. legal junk That said, I haven't yet worked out a way to push the legal stuff below everything else. 11. Although most of the absolute layout stuff is OK (I tend to avoid it because it can cause headaches), I'd recommend replacing the width of the navcol and the "left" offset of the maincol with 'em's. This ensures that as the text scales, the columns will also scale. For reference, I used 11em for the navCol's width and 14em for the mainCol's left offset. 12. 'px' values for font sizes. I can't remember who is breaking the spec on this one; all I know is that IE won't scale px font sizes. For safety, best to use 'em's. Minor quibbles: 13. The text in the header links seems to be a little to high... maybe bring them down a smidgen more? 14. The hover colour for said links isn't different enough. It's very difficult to tell if they're "hovering" or not based on the colour. 15. Interestingly, the tab order for the header is actually backwards :P It's not bad, just... unusual :) The only *possible* problem with this is that the logic order of links "Home, Language, Compilers, ..." is the exact reverse of the visual order "Wiki, Tutorials, Community, ...". 16. I agree with Serg: make the logo the background of a DIV so that when you switch off styles, you're left with the pure text. Ok, I think I'm done for now :) Very nice work; the design is very clean and simple, and looks professional. Keep up the good work. -- Daniel Keep -- v1sw5+8Yhw5ln4+5pr6OFma8u6+7Lw4Tm6+7l6+7D a2Xs3MSr2e4/6+7t4TNSMb6HTOp5en5g6RAHCP http://hackerkey.com/
May 23 2006
prev sibling next sibling parent Max Samuha <Max_member pathlink.com> writes:
In article <e4u9u6$2smu$1 digitaldaemon.com>, Tiberiu Gal says...
hello again,
I dropped all my tables out and switched to css. you were all right, this site
must be as light as posible ...so:
http://dworks.marte.ro/dm/template.html

this one is nick's template with a bit facelift and wearing make-up.
this one does not validate yet; it could and it will later. just look for the
design, colors.
I modified nick's design to make this one, but i think we can agree on some
general rules, so many design schemes (or themes) can be made out of css... so
anyone can see d-programming-languge.org in the colors he likes most.

Looks great! I'm viewing the template in IE, screen resolution 1280x1024. It'd be nice to have line spacing a bit increased. And text lines are too long for comfortable reading. Thanks
May 23 2006
prev sibling next sibling parent Johan Granberg <lijat.meREM OVEgmail.com> writes:
Tiberiu Gal wrote:
 hello again,
 I dropped all my tables out and switched to css. you were all right, this site
 must be as light as posible ...so:
 http://dworks.marte.ro/dm/template.html
 
 this one is nick's template with a bit facelift and wearing make-up.
 this one does not validate yet; it could and it will later. just look for the
 design, colors.
 I modified nick's design to make this one, but i think we can agree on some
 general rules, so many design schemes (or themes) can be made out of css... so
 anyone can see d-programming-languge.org in the colors he likes most.
 
 

Some minor things thou: 1. the left hand menu is wider than needed thus wasting space 2. the the content stops resizing after a certain width (could bee lover I would prefeare if viewing it with a with of 400px would work) 3. when the links at the top does not fit on a single line the button background gets messed up needlesly. I have seen other designs without this problem so it can bee fixed (http://www.studio7designs.com/templates/nautica02liquid/) Otherwise it looks all good.
May 23 2006
prev sibling next sibling parent David L. Davis <SpottedTiger yahoo.com> writes:
In article <e4u9u6$2smu$1 digitaldaemon.com>, Tiberiu Gal says...
http://dworks.marte.ro/dm/template.html

WOW! "Tiberiu u tha Man!" It really looks great and clean, good job. David L. ------------------------------------------------------------------- "Dare to reach for the Stars...Dare to Dream, Build, and Achieve!" ------------------------------------------------------------------- http://spottedtiger.tripod.com/D_Language/D_Main_XP.html
May 23 2006
prev sibling next sibling parent Justin C Calvarese <technocrat7 gmail.com> writes:
Tiberiu Gal wrote:
 hello again,
 I dropped all my tables out and switched to css. you were all right, this site
 must be as light as posible ...so:
 http://dworks.marte.ro/dm/template.html
 
 this one is nick's template with a bit facelift and wearing make-up.
 this one does not validate yet; it could and it will later. just look for the
 design, colors.
 I modified nick's design to make this one, but i think we can agree on some
 general rules, so many design schemes (or themes) can be made out of css... so
 anyone can see d-programming-languge.org in the colors he likes most.

Cool! I'll vote for it. -- jcc7
May 23 2006
prev sibling next sibling parent Alexander Panek <alexander.panek brainsware.org> writes:
Tiberiu Gal wrote:
 hello again,
 I dropped all my tables out and switched to css. you were all right, this site
 must be as light as posible ...so:
 http://dworks.marte.ro/dm/template.html
 
 this one is nick's template with a bit facelift and wearing make-up.
 this one does not validate yet; it could and it will later. just look for the
 design, colors.
 I modified nick's design to make this one, but i think we can agree on some
 general rules, so many design schemes (or themes) can be made out of css... so
 anyone can see d-programming-languge.org in the colors he likes most.
 
 

Yay! Wonderful! votes++; /Alex
May 23 2006
prev sibling next sibling parent reply nick <nick.atamas gmail.com> writes:
Content-Type: text/plain; charset=ISO-8859-1
Content-Transfer-Encoding: 7bit

I like it! I think your colors are more appropriate than mine.
I have attached matching c, d, and quote.

In theory it is possible to make the header items scale better (make the
items always fill the box as the font size is changed). To do this, you
can try specifying item dimensions in terms of em units instead of %.
However, most sites out there don't bother with this. It's just a
personal schizoid item on my checklist.



Tiberiu Gal wrote:
 hello again,
 I dropped all my tables out and switched to css. you were all right, this site
 must be as light as posible ...so:
 http://dworks.marte.ro/dm/template.html
 
 this one is nick's template with a bit facelift and wearing make-up.
 this one does not validate yet; it could and it will later. just look for the
 design, colors.
 I modified nick's design to make this one, but i think we can agree on some
 general rules, so many design schemes (or themes) can be made out of css... so
 anyone can see d-programming-languge.org in the colors he likes most.
 
 

May 23 2006
parent reply "Bob W" <nospam aol.com> writes:
"nick" <nick.atamas gmail.com> wrote in message 
news:e51001$198f$1 digitaldaemon.com...
I like it! I think your colors are more appropriate than mine.
 I have attached matching c, d, and quote.

 In theory it is possible to make the header items scale better (make the
 items always fill the box as the font size is changed). To do this, you
 can try specifying item dimensions in terms of em units instead of %.
 However, most sites out there don't bother with this. It's just a
 personal schizoid item on my checklist.

Requesting the use of 'em' is definitely a good thing. As typical screen resolutions are ranging from 800 to 2k+ pixels in width, em is the only way to ensure that web pages will display in a similar manner on most screens. I'd stay away from 'px' as much as I can ..... ;-)
May 25 2006
parent nick <nick.atamas gmail.com> writes:
Bob W wrote:
 Requesting the use of 'em' is definitely a good thing. As typical screen
 resolutions are ranging from 800 to 2k+ pixels in width, em is the only
 way to ensure that web pages will display in a similar manner on most
 screens.
 
 I'd stay away from 'px' as much as I can .....   ;-)

That would be ideal. You could make the website resize along with the window without re-wrapping the text. This goes along with the idea that there is an ideal line width (in number of characters) for reading.
May 25 2006
prev sibling parent Stewart Gordon <smjg_1998 yahoo.com> writes:
Tiberiu Gal wrote:
 hello again,
 I dropped all my tables out and switched to css. you were all right, this site
 must be as light as posible ...so:
 http://dworks.marte.ro/dm/template.html

Only CSS? Seemed doubtful from the start, and now I see indeed that you've used XHTML as well. And that you haven't got round to validating yet.... A few more nitpicks: 1. The "sesarch" [sic] link isn't going to work if the user disables JS. Turn it back into a button. 2. Why is there an alternative stylesheet called "Printer"? And I can't see the difference between the two stylesheets at the moment.... Stewart.
May 30 2006