Page 1 of 1

Help a PHP Dev design

Posted: Thu Aug 28, 2008 11:33 pm
by The_Anomaly
Well, the title says it all. In the past, I've worked in a company that has a design department, and a development department. As one might assume, the design did all the designing (CSS and whatnot), while I could enjoy focusing on the server side scripting (PHP, Coldfusion, etc.). However, I've taken on a number of personal projects, and unfortunately, I'm in a bit of a hole. I understand HTML pretty well, but I've been relying heavily upon Dreamweaver CS3 to get the designing over with. However, I do not know how to make CSS designs, and therefore, my design code is a mash of ungodly, sickening, tabular, and all around unclean html.

I hate designing, but having such a significant part of my site lacking so severely in standards complience makes me sick. <morpheus>It's like a splinter in my mind, driving me mad</morpheus>. So, I ask my fellow PHP devs. When you have to design, how do you do it? How did you learn to do so with CSS? Do you perhaps use a better WYSIWYG than Dreamweaver? Or do real PHP devs always have designers do the designing, while the devs do the PHP?

The obvious answer is "Pick up one of the million books about CSS design," but I thought I'd ask on here if any of you guys had any recommendations.

Re: Help a PHP Dev design

Posted: Sun Aug 31, 2008 4:34 pm
by JAB Creations
You need to make sure your XHTML and CSS are valid of course. You really need to ensure that you're validating your CSS as only CSS1. CSS2 introduced positioning which basic layouts should never use!

Code: Select all

<div id="content">
<div id="margin">content</div>
</div>
 
<div id="side">
<div id="margin">side</div>
</div>
 
#content {background-color: #f00; float: left; width: 80%}
#side {background-color: #0f0; float: left; width: 20%}
The border, margin, padding, and width are added up together (outline is not though is CSS2 I think).

When you FLOAT an element left or right it's width (if not defined) will collapse to only what it's inner content requires.

If you define the width on a float (such as two divs above with 80 and 20 percent each) they will fill up 100% of the available width. (make sure you have some text otherwise the elements will not appear)

Use background-color to give you easier understanding of what you're looking at.

Now you do not want to add borders, margin, or padding on the PARENT divs (#content and #side in this example)

Why?

You might want to adding padding to them, don't! Add margin to the child!

Here is a visual reference of parent and child...

<div class="parent">
<div class="child">
<div class="grand_child">
</div>
</div>
</div>

You're NOT floating the child elements, therefor they will automatically take UP 100% of the available width.

THEREFORE when you ADD margin to the CHILD element it will SUBTRACT from the total width.

WHERE AS if you ADD margin to a FLOATED element it will ADD to the total width.

This is how CSS1 works when correctly programmed for basic layouts.

Re: Help a PHP Dev design

Posted: Sun Aug 31, 2008 4:51 pm
by marcth
Take a look at my site. What do you think of the design? I implemented it in roughly 20 mins from start to finish. All I did was pick an open source design from http://www.oswd.org/designs/favorites/ and dropped in the designers CSS and HTML layout structure--easy as Sunday morning!

If you have a free day, you should really take the time to learn HTML and CSS inside and out:
Also read the W3c standards.