Anyone on here work with CSS (cascading style sheets)?

[Paul the 6th]

I've always laid my webpages out using tables but I really need to get my finger out and learn to do it properly with CSS - does anyone on here know any decent resources/ebooks/tutorials which will help me along the way?

Using Microsoft Web Expression 4 so I won't be coding from scratch but am familiar with html & a tiny bit of javascript. The main thing I'm gonna struggle with is the fact that CSS objects (divs) can be unlocked and moved around to a certain extent whereas with tables you've got rows & columns to constrain things a bit..

Failing that, does anyone wanna throw some CSS templates together for me? Thanks in advance, Pt6

[timwilky]

Use a decent IDE that enables you to define all the <div> properties you want if you are winging it, otherwise design your pages properly.

Build up a framework of css that you use on all your projects, that way you are comfortable with what you are using and why it was defined.

look at the very basic stylesheet used by the org


/*================================================= =====================*\
|| ################################################## ################## ||
|| # vBulletin 3.8.4 Patch Level 2
|| # ---------------------------------------------------------------- # ||
|| # Copyright ©2000-2010 Jelsoft Enterprises Ltd. All Rights Reserved. ||
|| # This file may not be redistributed in whole or significant part. # ||
|| # ---------------- VBULLETIN IS NOT FREE SOFTWARE ---------------- # ||
|| # http://www.vbulletin.com | http://www.vbulletin.com/license.html # ||
|| ################################################## ################## ||
\*================================================ ======================*/

/* Definitions we expect */
form {
margin: 0px;
}

label {
cursor: default;
}

.normal {
font-weight: normal;
}

.inlineimg {
vertical-align: middle;
}

.underline {
text-decoration: underline;
}

.vbmenu_hilite * {
cursor: pointer;
}

/* Auto-clearing of floats */
.floatcontainer:after, .block_row:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.floatcontainer, .block_row {
display: inline-block;
}
/* IE-Mac hide \*/
* html .floatcontainer, * html .block_row {
height: 1%;
}
.floatcontainer, .block_row {
display: block;
}
/* End IE-Mac hide */

/*================================================= =====================*\
|| ################################################## ##################
|| # Downloaded: 15:25, Tue Jan 12th 2010
|| # CVS: $RCSfile$ - $Revision: 15827 $
|| ################################################## ##################



\*================================================ ======================*/


if you look at most org code the attributes are hard coded

You remember my party invites http://www.twsoft.co.uk/party, the layout was hard defined from a template that got modded for my use


* {margin:0px;padding:0px;top:0px;left:0px;}
body{
text-align: center;
background-color: #fff;
}
#central{
margin-right: auto;
margin-left: auto;
margin-top: 10px;
position: relative;
width: 1000px;
text-align: left;
}
#leftside{float: left;
width:625px;
height:618px;
}
#rightside{
float: right;
width:375px;
height:901px;
background-color:#cc6700;
position: relative;
color:#fff;
}
#header{
background-image: url(images/50th.jpg);
background-position:center;
height: 350px;
width: 625px;
position: relative;


}
#map{
height: 450px;
width: 625px;
position: relative;
}

#hotel{
height: 70px;
width: 525px;
position: relative;
float: left;
background-color: #c95202;
color:#fff;
}
#hotel-name{
position: relative;
width: 375px;
float: left;
}

#hotel-pic{
height: 70px;
width: 150px;
position: relative;
float: Right;
background-color: #c95202;
}

#distance{
height: 70px;
width: 100px;
position: relative;
float: right;
background-color: #c95202;
color:#fff;
}
#middle{
position: absolute;
top: 350px;
}
#leftside img{margin-top:2px;}
#menu{
position: absolute;
height: 513px;
width: 137px;
left: 488px;
top: 0px;
background-color: #c95202;
margin-top:2px;
}
#leftside ul{
list-style-position: outside;
list-style-type: none;
margin-top: 40px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFFFFF;
}
#leftside li{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
list-style-position: outside;
list-style-type: none;
}
#leftside ul a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
color: #FFFFFF;
text-decoration: none;
height: 25px;
width: 117px;
padding-left: 20px;
padding-top: 10px;
display: block;
}
#leftside a:hover{background-color:#ff6600;}
#rightside h1{
color:#fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
padding: 20px;
text-align:center;
}
#rightside p{
color:#fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 20px;
}
#rightside a{color:#fff;}
#rightside a:hover{background-color:#ff6600;}
#footer{
position: absolute;
height: 38px;
width: 425px;
top: 863px;
background-color: #c95202;
text-align:center;
}
#footer p{
color:#fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 20px;
}
#footer a{color:#fff;}

I still use a very old tool to manage CSS called "css editor". Never changed to more modern stuff as it works for me.

This is an excellent book...

http://www.cssmastery.com/

Online, sitepoint.com is great and also the link below is a whole curriculum on designing with web standards with a big section on CSS.

http://www.opera.com/company/education/curriculum/

[Paul the 6th]

top banana, cheers tim & mencimelyn.. The book and opera course look very good but might be just a little bit more 'in-depth' than I'm really looking for right this second. Could well end up pulling in a bit of help to create a template which I can then be modded to fit while I get upto speed on the subject. I understand the concept of it but as with riding a bike, it's best if somebody shows you how to do it properly from the off rather than falling off/getting back on/repeating over and over/and over...

Ta!

I did a course with this lot 4 years ago and they were brilliant. Their website is a vault of good "hacks" and good practice guides for CSS too.

I've always favoured the falling off/getting back on approach (when learning web design that is, not riding bikes) but I know what you mean - they are very in-depth.

Let me know if you need any help (perhaps even creating a basic structure using divs for you).

[Paul the 6th]

nice one davies - thanks for the link will have a proper read when i get home and start forging a CSS template with my hammer & spatula..

mcnpenacyllin - I may well be sending you a pm when I've finished with the hammer & spatula, and ended up with CSS cake mix all over my keyboard.

edit: that last bit sounds really smutty. Didn't mean it to lol

[christopher]

I'm a front-end developer, which basically means all I do most days is code (X)HTML, CSS and JS from a given visual. If you need any help, no matter how silly it might sound, let me know.

Do you have a visual created that you want to code up, or are you starting from scratch and going straight to code rather than having a design to work off?

If you have a design feel free to send it over and I'll give you some pointers if wanted.

[Paul the 6th]

christopher - pm sent... I could always create a photoshop visual of what I'm after if it turns out it'll be quicker to pull someone else in to do the CSS bit for me

[keith_d]

I've been writing some php to fill in someone else's CSS and hate the whole process. I wish I'd designed the CSS myself - I would have been much less frustrated.

Keith