HTML code for endless CSS possibilities?? 3

[Sleidia]

Hi guys,


I'm trying to find what would be the the most versatile bit of HTML code so that I can be sure that, whatever I want to achieve, I will never have to edit the HTML code.

Although I'm not certain that such a feat can be achieved, here is my very first attempt :

<div id="element-container">

    <div id="element">
    
        <span class="cont">
        
            <span class="cont-top">
            &#8216;
            </span>
            
            <span class="cont-middle">
            
                <span class="cont-left">&#8216;</span>
                <span class="cont-text">Content</span>
                <span class="cont-right">&#8216;</span>
            
            </span>
        
            <span class="cont-bottom">
            &#8216;
            </span>    
        
        </span>
    
    </div>
    
</div>

What do you think of the idea?
I reckon that the html code would be huge if such code was used for every distinct element.
What would be the right compromise?

Thanks for your thoughts

 

[Foamcow]

In the last 10 years or so I don't think I've ever written any HTML that would work for 'any' document on any site.

The whole point is that the HTML defines the document's structure. If all your documents have exactly the same structure then you might be able to just create a single HTML template. It's more likely that you will need to write HTML to reflect the structure of each document you need to put on the web.

I will also say that even without knowing the structure of your document, you have used way too many <span> elements in your example. I can't think that you'd need them.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[Sleidia]

Hmmm ... even if the HTML code is always the same, it doesn't mean that the structure is the same, right?

I mean, every element can be positionned differently and can be hidden too.

My attempt to create such a versatile HTML is for a CMS I've created. I want to make sure that any template could be designed on that CMS. For example, I have an e-commerce module with an area for the product description, an area for the photo, an area for the price, etc. Since the CMS is supposed to be the engine for several different websites, I want to make sure that those areas can be placed differently between eachother.

As for your last comment about the spans, how about you want a blue background color for cont-left and a red one for cont-right?

 

[Vragabond]

Foamcow is right. There is no universal HTML element, and if there was one, we'd all be out of a job. In your CMS, you could make a default module container, although that would again limit the users who would want to have a simpler design. Say that I want to have merely photos of products and have all the information appear when I hover over a photo. Using your rigid structure this would only be possible if most of the elements would be hidden.

As for the spans, yes, the structure is way too complex. You're using two elements, div and span, none of which have any semantic meaning. You could simplify a lot by introducing more intelligent elements, like headings or paragraphs. Furthermore, all your actual information is inside spans, which disallows any block level elements to be placed there. So if someone wants to display product information via a short list, your code will be no longer valid and might produce strange results.

I have been forced to work with many CMSes and frankly I have not come across one that I liked. What I liked the most were the ones that had the least amount of code added with every element I added to the page. That was what allowed me the versatility of choosing what I wanted to display.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[jstreich]

Looks like you're trying to cut up images the same way that you would for a table layout. This has no meaningful benefit over a table, other than not misusing a table. Sematically a span with a class of "cont-left" tells me nothing of the content, it's just a container to hang an image off of.

I think your coming at it from the wrong angle. HTML should change when content changes, and CSS should change when presentation changes. Remember that (X)HTML is Hyper Text -- content and CSS is Style Sheets.

[plug=shameless]

http://game-master.us/phpx-3.4.0/

[/plug]

 

[Sleidia]

You're right, I've decided to do things differently.
I'll redesign my CMS so that the HTML is totally separate from the PHP code in order to make the HTML code freely editable.

 

[Foamcow]

That's how my CMS works.

I wrote a load of PHP functions that do a particular job, like retrieve data from a database, return an array of pages, create an unordered list of page links etc.

By and large the data functions are separate from the ones that generate HTML but I can join them together as needed.
getdata()->create_html_list() etc.

When I build a new site I create an XHTML/CSS template according to the visual design and then slot in the relevant PHP functions where needed.

Occasionally I need to modify a function or write a new one, but on the whole it's worked well for a dozen sites.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.