Question for CSS Experts.

Deleted User 234324

Deleted User 234324

Deleted User 234324

Permabanned
Joined
25 Oct 2004
Posts
9,078
Im currently working on a project which involves creating several templates for a classified/auction website due for launch next year for the Volunteer sector, while im quiet happy designing the templates in HTML, I wouldnt mind getting to grips with CSS, specially in a more advanced way.

Before I jump into the deep end and pull my hair out in frustration would it be possible to create this sort of layout using just CSS.



The data in the Category column is dynamic as is most of the information, the php code behind it creates a table dynamically for that information.

Would it be possible to recreate the layout of the site using advanced CSS, to cut down on the use of tables, cos I can tell ya now theirs loads of em.
 
I dunno, once you got into it, I don't think that design would be too difficult to achieve. damn sight easier to do it in css than html alone anyway
 
I think the easiest way to do it is definitely a table-based layout... *cringe* but don't do that. It can be done in CSS, I think the most tricky bit would be the two columns in the middle area (recently listed / hottest listings), other than that it's just a bog standard 3 column + header layout.
 
furnace said:
I think the easiest way to do it is definitely a table-based layout... *cringe* but don't do that. It can be done in CSS, I think the most tricky bit would be the two columns in the middle area (recently listed / hottest listings), other than that it's just a bog standard 3 column + header layout.
Click to expand...

How would you go about doing the categories box etc in the left and login box in the right column ? use tables for those sections or could you do nested div thingies ?
 
well for example;

PHP: 
excuse this im wondering if we still have a white background or if it's been reset to blue

This might be the code for the left column...

Code: 
<div id="templateLeftColumn">
  <div id="categories">
    text blah blah
  </div>
  <div class="clear">&nbsp;</div>
</div>

and the css for categories might be something like...
Code: 
#templateLeftColumn #categories {
    background-image: url('/images/template/categoryheader.gif');
    image-repeat: none;
    background-position: bottom left;
    border: 1px solid #0000FF;
    margin: 0px auto;
    padding: 4px;
    padding-top: 50px;
    width: 150px;
}
.clear {
    clear: both;
    font-size: 1px;
}

and that would auto-expand for your height, and the clear will make sure the parent box expands with it. try it without this as, depending on your approach, you might not need it.

I can dig up some more useful things for you if you want, this is really just me typing out my thought process rather than me actually trying to come up with a solution for you ;)
 
You could try a website called Dynamic Drive. It has a section full of different CSS layouts both static and liquid. You get to try out the design and at the bottom of the page it gives you the code and CSS.

You will most likely have to tweak it for your own needs but it should give you a good head start, even if it is just to use the examples to learn from.

One piece of advice when creating your CSS is to validate it after making any changes. The smallest thing can royally screw up the results. The validator should catch any daft mistakes and probably save you hours of trying to tear your own ears off :p
 
You must log in or register to reply here.
Back
Top Bottom