Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Senior Member peter77's Avatar
    Join Date
    Apr 2003
    Location
    England
    Posts
    222
    Member #
    1084
    I've started a website for a school project.

    Even though the script won't be marked I were wondering of using CSS to create a table less design so that I could show off the site in my portfolio and maybe pick up some skills.

    I've looked at a few CSS tutorials and understand the basics.

    My main problem I am having is centring it in CSS and I would also like to have a blue background colour around the content at a width of 800px and outside of that white.

    Can anyone help me?
    Blue Wolf Web Design - Will always get better!

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Well, for the content at a width of 800px/background white and centered, it should be fairly simple. Usually, you write your page like so:
    HTML Code:
    <html>
    <head>...</head>
    <body>
    <!-- CONTENT -->
    </body>
    </html>
    Instead of that, write it like so:
    HTML Code:
    <html>
    <head>...</head>
    <body>
        <div id="content">
        <!-- CONTENT -->
        </div>
    </body>
    </html>
    This is useful because you can then say the following:
    Code:
    body
    {
        background-color: white; /* white background */
        text-align: center; /* center #content in IE */
    }
    
    #content
    {
        width: 800px;
        margin: 0px auto; /* center #content in Real Browsers (tm) */
        background-color: blue;
    }
    Note that you don't actually want to use a background color of `blue', as I do believe that gives a disgustingly bright shade of blue. Navy might be a better choice, or, better yet, an rgb(###,###,###) value*.


    * - I've found that Firefox (thus, Gecko) will actually convert all CSS color values to an rgb(###,###,###) triplet. I'm not sure if that's the case with any other browser, as none that I have seen so far has anything as flexible and powerful as the DOM Inpsector to tell me as much.

  4. #3
    Senior Member peter77's Avatar
    Join Date
    Apr 2003
    Location
    England
    Posts
    222
    Member #
    1084
    OK that worked great thanks!
    Blue Wolf Web Design - Will always get better!

  5. #4
    Senior Member peter77's Avatar
    Join Date
    Apr 2003
    Location
    England
    Posts
    222
    Member #
    1084
    I'm having problems trying to create two text areas horizontal to each other.

    Does anyone know of any resources which will show me some examples because I can't seem to find any :-(
    Blue Wolf Web Design - Will always get better!

  6. #5
    Senior Member Jack000's Avatar
    Join Date
    Aug 2004
    Posts
    250
    Member #
    7173
    assign the following to the text area containers:

    float: left

  7. #6
    Senior Member peter77's Avatar
    Join Date
    Apr 2003
    Location
    England
    Posts
    222
    Member #
    1084
    LOL

    I've just figured that out today while at school but unfortunately the internet was down so I didn't see this topic :-(

    The real problem I'm having now is I've set a background colour for the content (like suggested by shadow), which only works in IE and not firefox.
    Blue Wolf Web Design - Will always get better!

  8. #7
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    It only works in IE?? Can you post at least the relevant code, preferably the page, so we can see?

  9. #8
    Senior Member peter77's Avatar
    Join Date
    Apr 2003
    Location
    England
    Posts
    222
    Member #
    1084
    It's this that you posted.
    body
    {
    background-color: white; /* white background */
    text-align: center; /* center #content in IE */
    }

    #content
    {
    width: 800px;
    margin: 0px auto; /* center #content in Real Browsers (tm) */
    background-color: blue;
    }
    It seems that the body color is overiting the content color in FireFox.
    Blue Wolf Web Design - Will always get better!

  10. #9
    Senior Member peter77's Avatar
    Join Date
    Apr 2003
    Location
    England
    Posts
    222
    Member #
    1084
    Fixed it!

    Well now I've got most my script finished and it's validated now I just need to make the graphics a bit better and then add some content and the rest of the pages.
    Blue Wolf Web Design - Will always get better!

  11. #10
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    So what was the problem?


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:10 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com