Gossamer Forum
Home : Products : Gossamer Links : Discussions :

luna template fix -- sort of

Quote Reply
luna template fix -- sort of
I've spent the past week reading about 200 CSS sites, looking for a simple thing, which apparantly has been left out of CSS.... But that is another story.

In the wandering, I've read dozens of sites that talk about columns, and how that is one thing that won't be addressed until CSS 3.0, and we are barely into 2.0 at this time.

So, as they say, the spirt vs the letter of CSS comes into play. And, therefore, *tables* are not completely useless -- especially for layout, and "hard coding" in screen areas / containers.

I was working on it for my search page, and while I realize it's a few pixels off, and the shadowright graphic is 5 px too wide for this sort of layout, the idea works (at least for me).

http://beadnews.com/...nkSQL/search.cgi?d=1

I was able to apply it to the Top Rated and Login pages (to see just view the Top Rated, or click add a link) in seconds.

The "problem" is the shadowright graphics, in this sort of layout, but for now I can live with it <G>

Something about the floating sidebar and use of the shadowXXXX graphics causes problems, which make no sense to me... but maybe someone will figure it out. for now, wrapping the middle content area in a table, fixes the problem, and complies with the spirit of the CSS. Style, and such can all be altered via the style sheets, but various screen layout "blocks" are fixed.

How does it look on your browsers? In MSIE it looks ok. The search page seems to hold it's own whether the ads show on the right or not, or if the "error" or "No Matching Links" message displays on the top. The left shadow doesn't disappear, and the bread crumbs and title display and don't go invisible.

This is not a live site.


PUGDOG� Enterprises, Inc.

The best way to contact me is to NOT use Email.
Please leave a PM here.
Quote Reply
Re: [pugdog] luna template fix -- sort of In reply to
A few notes about your changes:
  • tables for layout are frowned upon by the css crowd, since they should only be used for tabular data. However, it's sometimes a real pain to do things like a column layout that's flexible with what's available. I'm still working on the sidebar issue, so hopefully I'll figure out something by the end of the week.
  • things like bgcolor have been removed from the xhtml 1.0 strict (we're using transitional, where it's still valid) since they belong in the style sheet.
  • all attribute values need to be quoted in xhtml.
  • all elements/tags are lower cased.
  • instead of changing things like #contentarea to #contentarea_toprate, you can instead use a #idofpage #contentarea {} style instead


Adrian
Quote Reply
Re: [brewt] luna template fix -- sort of In reply to
Quote:
tables for layout are frowned upon by the css crowd, since they should only be used for tabular data. However, it's sometimes a real pain to do things like a column layout that's flexible with what's available. I'm still working on the sidebar issue, so hopefully I'll figure out something by the end of the week.

Yeah, thats a real PITA. I ended up having to use;

Code:
<dl>
<dt></dt>
<dd></dd>
</dl>

Its quite amazing what you can do with those :) (I would post a link to the new site, but its not totally ready yet, so that would be silly <G>).

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [brewt] luna template fix -- sort of In reply to
Quote:
tables for layout are frowned upon by the css crowd, since they should only be used for tabular data. However, it's sometimes a real pain to do things like a column layout that's flexible with what's available. I'm still working on the sidebar issue, so hopefully I'll figure out something by the end of the week.


As I noted, it's frowned upon, only where CSS *can* do it. In cases where CSS simply can't, it's accepted in the spirt vs letter. There is hope for this in CSS 3.0, but ... they don't have 2.0 right yet :)

There really is no good way to create columns in CSS. CSS *has* to incorporate the concepts of tables, and screen areas, and relative positions as used in standard HTML layouts. There are things that are simply not possible in CSS, but which can be done with HTML, and that is not supposed to be the case.

The table is only used to divide the screen, and prevent the content areas from colliding, which seems to be happening. A table cell is a reference/grid area that is not able to be specified any other way in CSS. This is the biggest problem, and there really is no fix for it, since the "position" tags in CSS 2.0 are sorely lacking in flexibility. You can't specify a location in relation to a specific content area, or content block, only to the screen, the current named block, or an absolute reference. What is needed is a way to reference another named content area.

So, the spirit vs letter issues allow tables for placement, but frown against using nested tables for borders, and such, that can be specified in CSS. The feeling seems to be a planned, progressive migration, as CSS matures, and standards-compliant browsers actually comply with the standards.

And, while you may fix the side-bar issue, how will you deal with the fact most Links sites are using a 3-column format, with a 2-3 column main content area? I need 3 columns, and sometimes 4 on a page. CSS just can't do that without tables.

Without tables, or relative-to-named-content-areas positioning, CSS is simply "stream of conciousness". "float" is a poor implemenation, and seems to be an "after thought" to give some ability in this evolving but not-ready-for-prime-time standard.

There are a few good sites with examples, but none of them work really well, since they need to anchor the left and right columns to the left and right of the screen and use a sliding-width center content area -- otherwise, an errant text element such as a long word -- can break the whole thing. You can't simply get an 80% centering, or an 800 pixel centered format, and multiple columns like you can with tables and HTML.


Quote:

things like bgcolor have been removed from the xhtml 1.0 strict (we're using transitional, where it's still valid) since they belong in the style sheet.


This was a quick fix, and I was so excited to get it working, that I didn't take the time to put the table formatting tags into the CSS. But, the "bgcolor" tag is only an after thought. It actually looks good without the grey going down, but I tried to imitate the existing layout a little. I was going to play with the style sheet tomorrow, and see if I could clean it up.

The fact that tables fix/solve the problems in getting the layout I need now, from the 2.x format, means I can start to migrate my sites.

But, without the ability to accurately position multiple elements in columns, formatting is severely limited.

No matter how great CSS may be, if it can't make efficient use of the page, it has to yeild to HTML in those areas.

Quote:

  • all attribute values need to be quoted in xhtml.

  • all elements/tags are lower cased.


  • I'm still doing all this by hand, in a text editor. I haven't found a CSS editor I like, or can get the hang of. Since these templates still have to be run though the CGI, it makes it hard to really just work on the pages. Some of the issues are from the generated content. But, those issues are able to be fixed up in an automated fashion in a pass through a checker/validator.


    Quote:

    instead of changing things like #contentarea to #contentarea_toprate, you can instead use a #idofpage #contentarea {} style instead


    I realize there are ways of overriding styles, but I'm still getting the hang of this stuff. Actually, there is no real difference in the styles (_toprate, _search, etc), except I didn't want to break the rest of the site. I could call them #contentarea_tables to differentiate them from the content area without tables. Since the tables are coded into the file, changing the name of the content area to reflect that is probably a good idea. That way there are table-containing and table-less files. When the CSS standards improve, that can be backcoded.

    Those are not styles that would be needed in a pure-css layout, *if* css ever gets to this point.

    Huge amounts of time/effort seem to be wasted to work around implementation and/or specification bugs, when simple alternatives in the HTML are available. When the implementation and specifications improve, over time, so can the CSS implementation of a site.

    But for now, CSS seems to be LIMITING than freeing for most sites. Governement, or purely informative sites can benefit from it, if they have lots of pages formatted similarly, and need to be accessed via different browsers or such. But, most of the links sites, and sites users of these forums are developing are cutting edge in most ways, and need to have tight control over the layout. It's not an either/or scenario. You can use the best/improved parts of CSS, but still frame your pages in HTML until CSS catches up.

    The economy is tough, money is tight, time is at a premium. CSS is supposed to _save_ time, but it seems to be wasting huge amounts of it for many projects.

    HTML is a "mature" standard, and implementation (most browsers get it 99% or 98% correct). CSS is still maturing, and browsers are all over the place in support/implemenation.

    If a couple of lines of HTML fixes hours of aggrevation, and thousands of dollars of design/graphics time, I say go with it.

    It's not going to break the CSS or HTML. Just pick the appropriate doctype... which is probably transitional. *that* can do more damage now adays than bad coding <sigh>

    Despite what many people pushing CSS say or think, *most* web publishers want their pages to display THEIR WAY, like a magazine, not distorted or reassembled by improper or alternative formatting. CSS is not up to that. HTML browsers are barely up to it! :) That was the promise CSS was supposed to bring to the HTML which was a _markup_language_ (eg: a description of how a page should display, not an actual specific display). CSS has failed to do that. It may be getting closer, but it has not delivered on the promise made when it was being planned. Tables, on the other hand, while maybe a nightmare in complexity at times, *do* deliver on the promise, in a reproducable manner at this stage of the game.

    And, the last thought... The purpose of all this is to make sure pages display as you intend on various hardware and software. Since the software can't get the INTERPRETATION/IMPLEMENTATION correct, it really doesn't matter how good your CSS or stylesheets are :) The browsers can't deal with it. KISS. Where appropriate.

    Use tables to grid out your screen. Use CSS to position and style the elements within those grid spaces. The CSS can't get out of them, without using "absolute", and you know pretty much exactly where each relative position is on the page (screen).

    Tables *are* supported, and will always be supported, because they serve a purpose. As CSS improves/matures, their purpose will keep shrinking as other more useful methods appear. But, until then, and beyond, tables for data will *always* be needed.


    PUGDOG� Enterprises, Inc.

    The best way to contact me is to NOT use Email.
    Please leave a PM here.
    Quote Reply
    Re: [pugdog] luna template fix -- sort of In reply to
    btw: the popups are pure CSS, and don't break either the standard Luna or the modified one. They do look sort of gawky if the stylesheet is missing, or the browser reverts to pure HTML.


    PUGDOG� Enterprises, Inc.

    The best way to contact me is to NOT use Email.
    Please leave a PM here.
    Quote Reply
    Re: [pugdog] luna template fix -- sort of In reply to
    I am not sure what I am supposed to be looking at specifically. I do see that the top and bottom shadow on the content, is a little short on the right (approx cell-padding width). This is because you are using a table correct? Border appears correct on the "Cool Links" page which I assume is not using a table.

    I am a little confused as I don't understand what is the benefit of using the table? Both cool links and search form display the google ads on the right.

    Everything looks fine from Firefox Mac, except I don't care for the popup red message box :-)

    I have a site supportmusicians.com using luna (if you switch to luna template set manually). I am trying to figure out what style is used where, which explains the funky colors.

    Chris
    RGB World, Inc. - Software &amp; Web Development.
    rgbworld.com
    Quote Reply
    Re: [brewt] luna template fix -- sort of In reply to
    I've got a fix for the sidebar issue, but it also means there's a small limitation - you cannot float: right (left if you've switched the layout to have the sidebar on the left) something in #content and clear it (you'll need to understand floats and clearing before any of what I just said makes any sense). However, of course this change had to break some other things in IE, so I will have to work through these issues now.

    Adrian
    Quote Reply
    Re: [rgbworld] luna template fix -- sort of In reply to
    Sorry, I didn't see the whole thread, only the original post.
    RGB World, Inc. - Software &amp; Web Development.
    rgbworld.com
    Quote Reply
    Duplicating 2.x template "look" with 3.x css In reply to
    Please excuse my inexperience with css, but I am trying to make a custom.css with a black background.

    Maybe a final adjustment to templates before GM should be concidered.
    I want my links at the same "level" as navigation. Not nested inside.

    When browsing links, The css outline is something like this:
    ----------------------------------------------------
    <div contentarea> - Outermost table, is wide as search bar.
    Test is Yellow, I want none or black. Which is easily accomplished.

    <div contentwrapper> Inside content area, no shadows.
    Test is gray, I want black or none.

    <div content> - Inside contentwrapper and HAS shadows.
    Test is orange. I want bkground gray, blue border.

    AND I want this "<div>" to end before starting next "<div>".
    crumbs and pagination is CURRENTY HERE.

    <div linklisting> - The actual link template.
    Test is gray with blue border.
    Perfect EXCEPT it is nested in "content"

    <div p.linkdescription> - Text area for link desc.
    Fine with me.


    What I really want is something like this.
    ----------------------------------------------------
    <div contentarea>
    Bkgrd Black or none.

    <div contentwrapper>
    Bkgrd Black or none.

    <div content>
    Bkgrd Gray with blue border. Like link template
    </div> ***** NOTE END DIV *****

    <div>
    Crumbs
    </div>

    <div>
    Pagination
    </div>

    <div linklisting>
    link.html
    </div>
    </div>
    </div>

    Please take a look at www.supportmusicians.com
    It is running 2.x templates which took me 45 days to rewrite and I just finished a few days ago :-( It uses globals for table and border colors, text colors etc. My globals could change the whole site theme by changing a handful of variables.
    This was my version of css :-) Now onto luna and 3.x.

    You can manually view my modified luna templates by adding ;t=luna to url once you are at "Band Websites" category. It is color coded to make sense of my comments above.

    Specifically in the "Band Websites" category.
    All I need to do is "close" the "table" that holds crumbs/page nav (orange),
    BEFORE starting the links. Links should be as wide as the nav stuff.

    The new css model is veeeeery close to being able to do exactly what I want, which is a black background.

    I would rather not spend another month rewiting luna templates. And seems I don't have a complete understanding of css, maybe it is possible, but I need to know whether a rewrite is needed or else how to do what I have been trying my best to explain. Basically a duplication of what is at my site using the 2.x templates.

    Thanks,
    Chris
    RGB World, Inc. - Software &amp; Web Development.
    rgbworld.com
    Quote Reply
    Re: [rgbworld] Duplicating 2.x template "look" with 3.x css In reply to
    Years ago, I rewrote most of my templates, to use <%color%> tags, and pretty much anything that would vary from site to site was made into a <%tag%>, from advertising blocks/locations, to basic comments, and navigations. Saves a lot of time to edit one file to set up a whole new site.

    Even if I pulled all the color out of my globals, I'd have a few dozen or hundred or so "tags" that are used by the site to lable and flag areas, or work with various plugins to provide altered content.

    Looking at your supportmusicians.com site, it lookes like a left-side bar, with right-content. no header or footer. The header/footer are contained as the first and last blocks of your right-content area.

    So, you could probably port that to CSS quite quickly, quirks and bugs aside <G>

    It's a lot easier to format a page like this with CSS than with HTML. CSS can handle 2 columns according to most accounts. It's the 3 and 4 column formats it can't.

    But I'm still learning this stuff too.


    PUGDOG� Enterprises, Inc.

    The best way to contact me is to NOT use Email.
    Please leave a PM here.
    Quote Reply
    Re: [pugdog] Duplicating 2.x template "look" with 3.x css In reply to
    Well, I am getting the hang of it. I left the funky colors up because I have 2 quick questions:

    How do I close the gap between "Cool Links (top 10)" and the paging "table"?
    I do not have any margins or cell-padding going on that I am aware of.

    What is the style or class name for the link that separate categories on the "Cool Links" page?
    It says Band Websites and will be on black. So I would like to put it in a box like everything else, or color the hyper-link yellow.

    Again, please compare the default 2.x "Cool Links" page to the luna template set (which needs to be switched to manually with ;t=luna). Looking at the old vs the new will let you see what I am talking about for closing the gap. I basically want the Cool Links header and page nav items to butt up to each other to resemble a dialog box or window.

    sample at www.supportmusicians.com

    Thanks,
    Chris

    RGB World, Inc. - Software &amp; Web Development.
    rgbworld.com
    Quote Reply
    Re: [rgbworld] Duplicating 2.x template "look" with 3.x css In reply to
    headings have a default top and bottom margin set (though I don't know what the value is). Be careful about setting the margin on h2 though (make it specific unless you're sure you want to change it for everything).

    Adrian
    Quote Reply
    Re: [brewt] Duplicating 2.x template "look" with 3.x css In reply to
    What about the "Band Websites" Category link between the pagenav and 1st link?

    What is it's class?
    Please don't tell me it is <a>, because that would make it the only thing on the page that can't have a background and/or border applied without messing up all other links.

    Also, how do I put "Cool Links" and pagenav popup menu on the same line?

    Chris
    RGB World, Inc. - Software &amp; Web Development.
    rgbworld.com
    Quote Reply
    Re: [rgbworld] Duplicating 2.x template "look" with 3.x css In reply to
    I'm not sure what you are asking, but something that may help, is that an element has one of two characteristics: inline or block.

    Text is usually "inline", but if you change it's property to "block" it puts a box around it, and it fills up the area it's in beyond the edges of the text itself.

    The nav bar is made by changing the text properties of it's items to "block". That's why the whole "box" changes color, not just the text.

    Things like a <div> are block elements, and a box is automatically drawn around it in space.


    PUGDOG� Enterprises, Inc.

    The best way to contact me is to NOT use Email.
    Please leave a PM here.
    Quote Reply
    Re: [pugdog] Duplicating 2.x template "look" with 3.x css In reply to
    Hi,

    I think you may find this reference document useful :
    http://www.meyerweb.com/...erences/css2ref.html

    You may want to look at "overflow" followed by "clipping" that is pretty handy when you are dealy with a flow of content.

    This is an interesting read aswell (I think you were talking about tables pugdog):
    http://academ.hvcc.edu/...;parent=xhtml+tables

    As for the colum layout issues you describe you may find this interesting :
    4 columns : http://glish.com/css/8.asp
    3 columns : http://glish.com/css/2.asp
    The reference home page : http://glish.com/css/

    Hope this helps if not the first is a great reference document with a useful index, nicely presented by meyer and the others are interesting reads...

    John
    Significant Media