SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Cincinnati, OH
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Some CSS Help Please

    I don't know CSS. Someone created my CSS file and I'd like to make some changes, perhaps you can help me with these.

    1. My web page encompasses the entire screen. I think it's too wide. I'd like it to be more narrow like this one: http://successdoctor.com/index.htm

    Why is mine so wide and what can I do to change it? Also, if I make this change, what line in the CSS would I add or modify to designate the side color to the right and left side of the web page?

    In FrontPage I indented the first paragraph but it doesn't show. I assume this is because of CSS. How do I modify the CSS to add paragraph indents?

    Also, I use lots of subheads in my copy. Since these lines are centered I don't want the paragraph indent on these lines. How do I accomplish this and how do I tell FP these lines aren't centered?

    Thanks in advance for your help.

  2. #2
    SitePoint Evangelist comfixit's Avatar
    Join Date
    Dec 2004
    Location
    Pasadena
    Posts
    537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You included the site you want us to look at but not the URL to your site.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Cincinnati, OH
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the url to my page that I want to modify.

    http://www.visitors2customers.com/new1stpage.htm

    Thanks.

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Perth, Western Australia
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. You can change the width of your page by applying a "container". You put a div between the body tags, put all the page content inside the aforementioned div and specify the width, padding, etc. using CSS, like so:

    Code:
    <html>
    <head>
    <title>Webpage title.</title>
    </head>
    <body>
    <div id="container">
    
    *THE REST OF YOUR WEBPAGE HERE*
    
    </div>
    </body>
    </html>
    The CSS is...

    Code:
    #container{
    width:600px;
    }
    "px" is the unit of measurement, similar to "cm" (centimetres) or "km" (kilometres). It tells the browser how wide something should be. You can change it to make it as wide or as thin as you like. But don't make it too wide or too thin.

    You must *NOT* under any circumstances remove the hash beside the word "container". This defines it as an id, a bit of CSS which can be applied to particular tags, tables/divs, etc.

    That said, you don't need to make any other modifications to your webpage. Your stylesheet is fairly simple, no set widths or anything you really need to fiddle with. Just add #container to your stylesheet and apply the HTML I gave you. If you have any problems, feel free to PM me.

    2. You need to be a bit more specific with your paragraph indentation problem. Do you want to indent the first sentence of every paragraph or the whole paragraph?
    POSTED WITH CARE BY JORDIE, WEBMISTRESS OF WWW.A-SPLODE.NET

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Cincinnati, OH
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Jordie, that seemed to work. Unfortunately I'm having problems uploading my website to the server but in preview the page is now much more narrow. In Preview in FrontPage it is aligned to the left. When it's uploaded will it be centered on the screen?

    Also, will there be side panels to the right and left of the web page? If so, can I specify what colors those are, and if so, how do I do that?

    Yes, I didn't make myself clear. I want to indent the first line of each paragraph. I'm specifying that in FP and it shows up in the Editor but it's not showing up in Preview. But I want to be able to not indent the sub-heads that go between paragraphs (otherwise they wouldn't be centered, they'd be off to the right a bit). How could I accomplish this?

    Thanks so much for your help.

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Perth, Western Australia
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To center a container on screen, make this change:

    Code:
    #container{
    width:600px;
    margin:0 auto 0 auto;
    }
    That should fix it.

    The W3C has a page on text-indent, read it here. Hope it helps.
    POSTED WITH CARE BY JORDIE, WEBMISTRESS OF WWW.A-SPLODE.NET

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Cincinnati, OH
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Jordan, that solved the centering issue. I haven't checked out the indentation yet, will do so soon.

    I notice om most of the web pages that use container there are vertical lines indicating the right and left sides of the page. Mine doesn't have this, it just tends to float in space. What need to happen to show those lines?

    Also, once this is accomplished, is there a way to choose a color for the sides?

    Thanks for all your help.


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
  •