SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: CSS + Template

  1. #1
    SitePoint Enthusiast Sindi's Avatar
    Join Date
    Nov 2007
    Location
    Boucherville, Québec
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool CSS + Template

    Hello all! I just received my 3 SitePoint books today and I'm burried in them; they're awesome.

    I am totally new to web design and I've been reading alot lately. I am building my site with a CSS file (took me a few days to grasp the concept). My site is ... ok ... but I will start from scratch again (i.e. 5th time). It's way too difficult to fix what I don't like than to start over until I totally understand what I'm doing.

    The point of my post (aside from saying hello ) is: is it ok to have a template and a css file? My site is up and it works but I haven't really came upon that combo in my numerous readings.

    Thanks for reading and looking forward to getting an aswer before I start my 5th attempt!

  2. #2
    SitePoint Enthusiast guioconnor's Avatar
    Join Date
    Oct 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure I understand your question, but one vision about how web sites are developed (ie, the one I share) is that HTML must be used to build structure and CSS to build the visuals.

    Keep in mind that by structure I don't mean the structure of the layout, but the structure of the information. This is a list, that is an image, this is a paragraph, that is heading, etc...

    Then you go with CSS to style what would be on a column, what would be red, how typography would look like.

    Layout is the harder part in CSS so, as a study plan, I'd suggest to build a pretty simple page in HTML (without ever using tables for layout, do it linear instead) and use CSS to style fonts and colors.

    After you got how to make HTML and CSS and how to make them work together, you can take the plunge on the hard part of CSS.

    Hope it helped!
    Guilherme Zühlke O'Connor
    www.z-oc.com

  3. #3
    SitePoint Enthusiast Sindi's Avatar
    Join Date
    Nov 2007
    Location
    Boucherville, Québec
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I think I wasn't clear

    I understand the difference from HTML and CSS ... took a while, but I think I understand the concept.

    Ok, I'll try to be clearer. You have your first HTML page, then you have your CSS file. What do you do to make your second page? Just copy your first page and go from there?

    What I was doing with the template was, open new from template.

    Is it superflous to have a template once you're happy with your CSS file?
    I used to have an open mind but my brains kept falling out.

  4. #4
    SitePoint Enthusiast guioconnor's Avatar
    Join Date
    Oct 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now I understand your point!

    I think that to find the answer to that you have to start thinking on three parts of the page, instead of two. The HTML that is the structure, the CSS that is the layout and the content poperly said, that is what the HTML will structure.

    So, let's say we have a little project in which you will write pages about your favorite musicians.

    Every page will have the name of the artist as a title, something like
    HTML Code:
    <h1>The Beatles</h1>
    Then it will have a history paragraph like
    HTML Code:
    <p class="history">Crated in Liverpool...</p>
    And a list of albums
    HTML Code:
    <ul id="albums">
    <li>Sgt. Pepper's...<li>
    </ul>
    The name of the artist, the history and the list of albums will vary from page to page, but each one will have the same strucutre, only the content will vary.

    Because you want a visual homogeneity across the site, elements will look the same in different pages, so you create only one CSS file and attach to all of them

    Code:
    h1 {
      font-face: ...
      background: ...
    }
    
    p.history {
      ....
    }
    
    ul.albums {
      ....
    }
    So basically, your template would be the HTML structure without the content and a single CSS. Then you can either include content dynamically through server-side scripting or you make copies of your empty HTML and fill in the blanks.
    Guilherme Zühlke O'Connor
    www.z-oc.com

  5. #5
    SitePoint Enthusiast Sindi's Avatar
    Join Date
    Nov 2007
    Location
    Boucherville, Québec
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm, I think I'm starting to understand.

    What is throwing me off are 3 parts of the site I'm building:
    Header: contains the logo, 2 small lines, then 2 nav links
    Left column: contains the main navigation
    Footer: main nav links (in case the page gets really long) and the copyright

    So, let's say that 2 months from now, I want to add another page. I will need to add that in the main navigation and in the footer.

    From what I know, I will need to go add that additional page (in the main navigation) in all the other pages that I already have, as well as in the footer. Right?
    I used to have an open mind but my brains kept falling out.

  6. #6
    SitePoint Enthusiast guioconnor's Avatar
    Join Date
    Oct 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just a sec... are you using a CMS or a server-side language, or are you doing some plain HTML files?

    Because if you are using a CMS, then there a template in your CMS might not be exactly what I called a template.

    If you are using plain HTML, I am assuming that the header, the left column and the footer are all placed on the same HTML file.

    When you want to create a new page you will copy the one you have and change the content accordingly, inlcuding any change on navigation, footer or whatever is suited.

    The CSS remains the same, though, once the elements the page is build upon won't change.

    Now, if you are keeping a navigation bar in static pages, every time you add a new page, you will have to add a link to the new one in all the previous ones. So when you add the 100th page, you will have to manually add a link to the new page in all other 99. This is when a CMS or a server side script comes in handy, but this is another story.
    Guilherme Zühlke O'Connor
    www.z-oc.com

  7. #7
    SitePoint Enthusiast Sindi's Avatar
    Join Date
    Nov 2007
    Location
    Boucherville, Québec
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Euh no, I'm not using a CMS or server-side language at all! I ain't going there for now. Just started 6 days ago!

    Yes, I am using a plain HTML file with CSS.

    So, you did answer my question, I will need to change all the pages if I need to change something in those 3 parts...yuck This is why 'thought' that having a 'template' would address that issue. But, from all the readings I've done, nobody mentions CSS and Templates living together.

    I so need to rethink my layout. Just looked at my site again, it's fugly!
    I used to have an open mind but my brains kept falling out.

  8. #8
    SitePoint Enthusiast Sindi's Avatar
    Join Date
    Nov 2007
    Location
    Boucherville, Québec
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And why is DW telling me that min-height is an unsupported property :/

    Oh, and thanks for being here quioconnor I feel some moral support behind me!
    I used to have an open mind but my brains kept falling out.

  9. #9
    SitePoint Enthusiast guioconnor's Avatar
    Join Date
    Oct 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sindi View Post
    Yes, I am using a plain HTML file with CSS.

    So, you did answer my question, I will need to change all the pages if I need to change something in those 3 parts...yuck This is why 'thought' that having a 'template' would address that issue. But, from all the readings I've done, nobody mentions CSS and Templates living together.
    Well, there is no such thing as a template in HTML, but there are templates in CMSs, you can use Joomla, Wordpress or many others laying around that can make your work much easier.

    If you want to be a web developer, though, you'll learn more doing things by hand for a while. Here is a hint for you:

    It would be nice to create single file for the footer, one for the header and one for the nav and include it in all html pages you create isn't it? A change in each one would reflect in all.

    Unhappily there is no such include in HTML. Happily, there is such thing in server side languages that are not hard to learn.

    My hint: create all your files as php, even if you are not programing php. Php syntax will allow you to use plain HTML just as you know it. Instead, when you want to include a file you can add

    PHP Code:
    <?php include("header.php"); ?>
    That's all the php you'll need so far, and you can learn it better here.

    Quote Originally Posted by Sindi View Post
    And why is DW telling me that min-height is an unsupported property :/
    Yes it is unsuported on the famous devilish browser, Internet Explorer. But as microsoft enjoys to spend time implementing proprietary features instead of standards, there are often workarounds.

    You can add a rule like
    Code:
    width:expression(
    	document.body.clientWidth > (500/12) *
    	parseInt(document.body.currentStyle.fontSize)? "30em": "auto" );
    to make explorer do what would be done in other browsers with
    Code:
    max-width: 30em;
    Similar hacks apply to min-width, min-height and max-height. This is what I use on my blog to keep the paragraphs to max-width.

    Quote Originally Posted by Sindi View Post
    Oh, and thanks for being here quioconnor I feel some moral support behind me!
    I'm glad I can be helpful.
    Guilherme Zühlke O'Connor
    www.z-oc.com

  10. #10
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    I think your initial question/s were confusing because:
    1. "Template" can have diff. meanings. It is a coded design w/ 'dummy' text and graphics that one can then customize. It's also, as your helper pointed out, pages that are used in a content managment system [like WordPress].
    2. CSS doesn't place content; it styles content ;-).

    When I use a template, it's one I've made that has:
    - some basic HTML tags
    [doctype, container div, header div with h1, left div with ul lists of links, content div, footer div, etc.]
    - internal CSS up in the head section
    [with commonly-used style rules for the tags used above]

    I open this up when starting a new layout, then tweak all of the styles and content: or add / delete elements from the basic template. When that's done, I'll take out the CSS and make it an external one, that's linked to in the head section.

    Then as you'd mentioned, just copy and paste a page's code to begin new pages within the site - changing the links and content to reflect the differences - then save with a new name.

    ...the external CSS is applied to them all, so that doesn't matter. Though you'll need to make additions to it when new html content sections/styles are added/needed. [While it may seem like a pain to add and take out small differences betw. site pages, having an external .css file makes updates a breeze in the end!]

    If you have to use DW, try sticking to Code View...it'll make cutting, pasting and making small edits a lot easier.

    Have fun w/ it,
    El
    F-Fox 2.0 :: WIN :: el design :: US

  11. #11
    SitePoint Enthusiast Sindi's Avatar
    Join Date
    Nov 2007
    Location
    Boucherville, Québec
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again quioconner, I'll refer to those infos once my site is rebuilt and need to address those issues again. Way too much info to grasp all in one sitting at this point!

    Hi LJK! thanks for the clarifications as well. I am using DW but I'm mostly cutting and pasting codes and don't really look at the other window.

    I've learned alot lately but getting lost in different layouts. I think I need to take a break and look at it again tomorrow

    One small question. If I messed too much in my site's files on my computer, can I download them back from the host back to my computer? I assume I would need to rename the folder I have here on my computer?

    Yeah, I messed with it way too much and now it's totally broken and I need to revert to what's up on the ftp :/
    I used to have an open mind but my brains kept falling out.

  12. #12
    SitePoint Enthusiast guioconnor's Avatar
    Join Date
    Oct 2007
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sindi View Post
    One small question. If I messed too much in my site's files on my computer, can I download them back from the host back to my computer? I assume I would need to rename the folder I have here on my computer?
    If you haven't uploaded a most recent version over them, you can download them at any time with FTP.
    Guilherme Zühlke O'Connor
    www.z-oc.com

  13. #13
    SitePoint Enthusiast Sindi's Avatar
    Join Date
    Nov 2007
    Location
    Boucherville, Québec
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sweet ... got my files back with FTP. I had previously made sure to rename the folder on my drive before doing so. I messed alot with it but had some good sections in there

    Thanks again
    I used to have an open mind but my brains kept falling out.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •