1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Development CSS Beginner

Discussion in 'Software' started by Comrade Woody, 12 Apr 2011.

  1. Comrade Woody

    Comrade Woody Obsolete

    Joined:
    14 Mar 2011
    Posts:
    1,202
    Likes Received:
    81
    I'm currently teaching myself Dreamweaver and working on a small site for fun.

    I followed a tutorial to create a basic site in Dreamweaver which has helped me get used to where things are and given me a rough introduction to the basics, but it used templates so setting up CSS styles from scratch wasn't covered and I'd like to be able to write and edit the code myself.

    I have experience coding in languages like VB and C but the only time I've done anything web related was about fifteen years ago writing HTML into a text editor.

    I was wondering if someone would be kind enough to show me a basic CSS file for an empty page with a fixed banner across the top, fixed menu an the side, scrollable content in the main area to the right of the menu and finally a footer at the bottom (also fixed if possible).

    Also if anyone can recommend a good book on CSS that'd be great. I find Google useful up to a point when it comes to coding but I've always found books preferable due to the continuity and structure they offer over using multiple online sources. That said though, if you can recommend any sites with good tutorial content that would be great too. I have been looking at a couple of tutorials online but since I know nothing about CSS I can't differentiate between the good and the bad at a glance.

    Cheers,

    Paul
     
  2. tristanperry

    tristanperry Minimodder

    Joined:
    22 May 2010
    Posts:
    922
    Likes Received:
    41
    Comrade Woody likes this.
  3. Comrade Woody

    Comrade Woody Obsolete

    Joined:
    14 Mar 2011
    Posts:
    1,202
    Likes Received:
    81
    Thanks. What I wanted to get was content loading into a liquid main area with a header and side navigation menu that don't scroll with the rest of the page, but remain visible at all times.

    I did get it working after a fashion just by tweaking the code from the template but I had issues with the sidebar changing width for no apparent reason and obscuring the main content; the only way it would work as I wanted was to remove the sidebar from beneath the nav buttons but that wasn't ideal, so I decided it would be better to just write the CSS from scratch so that I can understand exactly what everything does. Also I couldn't get the footer to remain at the bottom of the page when there wasn't enough content above it to keep it there.

    I've got to head out now so I'll check out the links properly later on.

    Cheers,

    Paul
     
  4. sparkyboy22

    sparkyboy22 Web Tinkerer

    Joined:
    3 May 2010
    Posts:
    738
    Likes Received:
    35
    If your after a book:
    Amazon Link

    Shows numerous methods you can use to achieve various styles and discusses the merits of each.

    Its always right next to me along with Sams Teach Yourself PHP and MySQL.
     
    Comrade Woody likes this.
  5. Comrade Woody

    Comrade Woody Obsolete

    Joined:
    14 Mar 2011
    Posts:
    1,202
    Likes Received:
    81
    That looks awesome, thank you :)
     
  6. Hawkest

    Hawkest I got some 4GB new RAM

    Joined:
    22 Jun 2009
    Posts:
    257
    Likes Received:
    4
    I would recommend the missing manual css book! Amazing book, covers writing html for effective cascading style sheets. Also cover inheritance and the cascade.

    The way its written is really down to earth.

    If ur looking for the basics then work through the w3schools.com tutorials for css.

    Am in my HTC so could through together anything without checking it first!
     
    Comrade Woody likes this.
  7. Comrade Woody

    Comrade Woody Obsolete

    Joined:
    14 Mar 2011
    Posts:
    1,202
    Likes Received:
    81
    w3schools is one of the tutorials I've got bookmarked; I've not had a chance to work through it yet though. I'm glad you've recommended it because I thought it looked pretty good but without knowledge of the subject it's hard to tell how good it is without going through it all and judging it retrospectively.

    I'll take a look at the book recommendation too, thank you :)
     
  8. stuartwood89

    stuartwood89 Please... Just call me Stu.

    Joined:
    20 Aug 2008
    Posts:
    1,566
    Likes Received:
    52
    It's not quite what you wanted, but I learnt basic CSS using this tutorial. The resulting site is in my sig if you want to take a look, but you'll have to click a link that bypasses the temporary splash.
     
  9. gilljoy

    gilljoy Minimodder

    Joined:
    14 Nov 2010
    Posts:
    1,941
    Likes Received:
    67
    Check your inbox I've some material my uni provided for CSS I can send you
     
    Comrade Woody likes this.
  10. aLtikal

    aLtikal 1338-One step infront of the pro's

    Joined:
    7 May 2008
    Posts:
    943
    Likes Received:
    27
    I learnt CSS just from w3s. With a bit of application and an understanding of the difference between a fixed and fluid layout your pretty mucb there. If i wanna find out how something is done i just use the firebug plunging for FireFox.
     
  11. luwenliang

    luwenliang What's a Dremel?

    Joined:
    14 Apr 2011
    Posts:
    1
    Likes Received:
    0
    These things looked pretty good, and some that I can learn, and I hope to learn more on it!
     
  12. BentAnat

    BentAnat Software Dev

    Joined:
    26 Jun 2008
    Posts:
    7,230
    Likes Received:
    219
    W3Schools is the go-to wsite.
    also: get some of the books from Sitepoint.com (available in e-format as well, often cheaper, and with quicker delivery times).
    And keep eyes on various sites, such as smashingmagazine.com, that regularly have posts on doing cool stuff with CSS
     
  13. Hawkest

    Hawkest I got some 4GB new RAM

    Joined:
    22 Jun 2009
    Posts:
    257
    Likes Received:
    4
    I second FireFox and firebug plugin.

    W3schools also has a try it yourself section for almost all their tutorials which are really useful!
     
  14. BentAnat

    BentAnat Software Dev

    Joined:
    26 Jun 2008
    Posts:
    7,230
    Likes Received:
    219
    Firefox + Firebug recommendation from me as well.
     
  15. emilyjohnson

    emilyjohnson What's a Dremel?

    Joined:
    12 Apr 2011
    Posts:
    8
    Likes Received:
    0
    w3schools is the best online resource known to me
     
  16. Comrade Woody

    Comrade Woody Obsolete

    Joined:
    14 Mar 2011
    Posts:
    1,202
    Likes Received:
    81
    Thanks to everyone for your help :thumb:

    I've achieved a look and basic structure I'm happy with now, and have moved on to creating content for the site.

    I'll be ordering a couple of books and teaching myself some more in depth XHTML, CSS and javascript from those, but for the time being I'm happy with what I've cobbled together from the online resources. I actually changed the layout completely and opted for a single column with a menu across the top. Indecision is something I'm quite good at :D

    If anyone's interested my site can be found here: http://comradewoody.co.cc/

    (if it doesn't load it's because of the free hosting I'm using. It's pretty unreliable: some things are free for a reason I guess...)

    As I said content is pretty thin on the ground right now, but I'll be adding to it in my spare time so hopefully it'll start filling out over the coming weeks, and as I learn more tricks I'll be tweaking the site itself to improve existing elements and add new features.

    Cheers,

    Paul
     
  17. aLtikal

    aLtikal 1338-One step infront of the pro's

    Joined:
    7 May 2008
    Posts:
    943
    Likes Received:
    27
    Black and white looks so 1991 haha :D
     
  18. Comrade Woody

    Comrade Woody Obsolete

    Joined:
    14 Mar 2011
    Posts:
    1,202
    Likes Received:
    81
    You think it looks too modern?
     
  19. javaman

    javaman May irritate Eyes

    Joined:
    10 May 2009
    Posts:
    3,726
    Likes Received:
    116
    Only thing I don't like is having to side scroll =( don't want to leave just a negative comment so I'm gonna read the rest of your writing section, which is pretty good, which shall distract me from studying :thumb:
     
  20. Comrade Woody

    Comrade Woody Obsolete

    Joined:
    14 Mar 2011
    Posts:
    1,202
    Likes Received:
    81
    Criticism is totally welcome :thumb:

    I don't know how to make the title scale to fit different resolutions. It's 1200 pixels wide which is fine for all of my displays but I know it's too large for many too...

    I know how to set columns to a percentage of the screen but this didn't seem to affect images so I just set a fixed width for the entire page. If I'm being retarded feel free to tell me as it'll help me learn.

    I wasn't expecting anyone to actually read the content, just look at the layout, but I'm glad you like the writing :) To be honest I only really like Ladies' Man and the stuff by Steve (which is awesome) myself, the other stuff's there mainly to pad the site out a bit while I work on it.
     

Share This Page