I want to Center the entire website! Please help!

Discussion in 'HTML & Website Design' started by CreditQueen, Apr 29, 2008.

0
Page 1 of 2
  1. #1
    I have basically NO html knowledge! I recently bought a template and with trial and error, I've been changing everything to say what I want it to say.
    My problem is that I think it would look 10 times better if i could center the entire website and have a color or design on the sides (that will be step 2). I have no idea where to start, so I don't have a sample of what I have and i'm not asking how to fix it, I KNOW NOTHING!

    my site is www.thecreditjungle.info, i know that different browsers have their ways of you looking at the html, so if its easier that way to help me, please help me!


    so... to make myself clear, how do you center the entire page, (header, ads, pictures, text, etc)???

    HELP!:(:(
     
    CreditQueen, Apr 29, 2008 IP
  2. kmap

    kmap Well-Known Member

    Messages:
    2,215
    Likes Received:
    29
    Best Answers:
    2
    Trophy Points:
    135
    #2
    using a simple div

    <div align="center">





    your page code



    </div>

    Regards

    Alex
     
    kmap, Apr 29, 2008 IP
  3. CreditQueen

    CreditQueen Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    i can do that with the entire code, like the very very top, put that , and then the very very bottom, put the other stuff?
     
    CreditQueen, Apr 29, 2008 IP
  4. CreditQueen

    CreditQueen Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    actually i realized something, i left something out... i want to have like 2 inches of space on each side, so that the entire website is squeezed, i think it looks better and the content looks longer
     
    CreditQueen, Apr 29, 2008 IP
  5. nicangeli

    nicangeli Peon

    Messages:
    828
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #5
    HTML
    
</head>
<body>
 <!-- add the below line after your opening body tag -->
<div id="center">

<!-- add the below line BEFORE your </body> tag -->
</div>
    Code (markup):
    css:

    
#center
{
padding: 0;
margin: 0 auto;
text-align: center;
width: 95%;
}
    Code (markup):
     
    nicangeli, Apr 29, 2008 IP
  6. markeh

    markeh Peon

    Messages:
    91
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    The margin: 0 auto; is the key bit to this as it fits an equal margin to both sides
     
    markeh, Apr 29, 2008 IP
  7. CreditQueen

    CreditQueen Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    i'm using html, i've set my page margins so that its set in the middle, and there's white on the side, but when i make the window smaller, it doesnt center it.

    so how do i center it and how do i change the color?

    or is there a simplier way to center it then setting a left and right margin and then doing something else, is there a way to set the page width and center it?

    thanks everyone!:D
     
    CreditQueen, Apr 29, 2008 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    No, Nic had the right code... but, I didn't look at the current site, but Nic set that div's width to 95%... and it might just be that at a small enough browser window, there's just not enough room.

    You can set space, in general, but you can't set for everyone "two inches of space" unfortunately. The best you can do is set the width of your new div to something just big enough (probably in px -- that's pixels) to keep the content the width you want, and then keep the margin: 0 auto. If the browser window gets smaller in width than the width of your site, it simply can't stay "centered" since there's not enough room.

    Since you know nothing, it's not a good idea for me to recommend a flex-width site (which could, if done right, ensure that there's at least a small amount of space on each side using body padding, while letting the actual content grow to meet the needs of wider screens), but if you end up getting a pro to screw around with it, that's a possibility.

    To set colour on the sides, you probably mean on the body? Find that CSS sheet where you put the new CSS for your new div, and find the declaration for the body (which looks something like this):
    body {
    stuff written here;
    }

    and add the colour you would like (you can google for the names of colours that browsers understand, easily enough)... let's pretend you want it red:

    body {
    the other stuff already written there;
    background-color: red;
    }

    You can also set an image in there, but I dunno if you want to go that far... if you want this site to be perfectly what you want, you should learn some real basic HTML... I recommend the tutorial at HTMLdog.com which, unlike the falsely-named "w3schools.com", isn't 10 years out of date : )
     
    Stomme poes, Apr 29, 2008 IP
  9. CreditQueen

    CreditQueen Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    thanks alot, the template that i bought does resize itself for a smaller window, i just want the default, when the window is maximized, to be smaller. my site is www.thecreditjungle.info, u can see what i mean it u check it out. i have content that i want to look longer.

    i'll definitely try that site, thanks.:D
     
    CreditQueen, Apr 29, 2008 IP
  10. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Oh wow, that site is actually quite beautiful the way it is.

    I don't see the new div; however, you didn't need it, because the whole page (unfortunately) is wrapped in a table.
    <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center" valign="top">

    The whole align="center" thing is deprecated (out of date), and the table's already 100% width : ) You could try playing with that width... keeping it a % if you want, or setting it in straight pixels. I would rather see the margin: 0 auto; width: whateverpx; instead... but then you'd give that page-wrapping table an id, so you can refer to only that one in your css.
    <table id="mainwrap" >
    <tr>
    <td align="center" valign="top"> bleh...

    CSS:

    #mainwrap {
    width: something you like;
    margin: 0 auto; (centers it)
    border-collapse: collapse; (takes place of the whole cellpadding cellspacing thing)
    border: 0; (not really necessary)
    }
    Such a pretty site, it's too bad it has crappy old code in it : )

    Good luck.
     
    Stomme poes, Apr 29, 2008 IP
  11. CreditQueen

    CreditQueen Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    thanks alot! the %age way works fine but what is that other stuff your talking about? where would i add margin? and i know im adding extra questions now but ...ummm... where exactly would i need to go to add color to the blank spaces on the side (or is that too complicated)


    you've been so helpful!:D
     
    CreditQueen, Apr 29, 2008 IP
  12. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #12
    uh, you're starting to wade into some lion dens without a chair : )

    When you're looking at your site in your browser, go to View and Page Source (or something similar, it's a little different for each browser). There you will see all the code (HTML anyway) for your page.

    Near the top, inside the <head> head tags </head>, there are (unfortunately for you) not one but THREE Css references : ( I picked the one that looked most likely to have the normal styles for the page basics, which was the first one:
    http://www.thecreditjungle.info/css/common-style.css

    I copied that url from your css reference (which looks like this:)
    <link rel="StyleSheet" href="css/common-style.css" type="text/css">
    <link rel="StyleSheet" href="css/gray.css" type="text/css">
    <link rel="StyleSheet" href="css/gray-menu.css" type="text/css">


    (you also have a javascript css thingie too... whatever that is : )

    So it was your page's URL with the css/common-style.css added to the end.

    At the very top, there was the body. If that's the only stylesheet that references the body, then that's where you'd add a colour or a background image or whatever.

    However, the other two css sheets might have colour declarations for the body too, I didn't look (I'm lazy).

    The table one, you'd have to add yourself. You could add it under the body one.

    body stuff...
    }
    #mainwrap {
    stuff for the table here
    }

    Everything in CSS is the element (the tag on the page, referenced by either what it is (table) its id (starts with #) or its class (starts with .) and then opening curly brackets { and then a list of standardised declarations, which should always end with a ; and then the closing curly bracket }. We don't want to just say
    table {
    stuff: here;
    }
    because you have lots of other tables on that page and you don't want to center all of them or give them the same width as your big page-wrapping one.

    Meanwhile, you'll need to add an id (or a class if you want) to the table you want to target (the first one who shows up in the HTML source).

    You're starting to get into the territory where you need to learn how html and css work, their syntax, etc, before you go further. If you want to play further, then MAKE A BACKUP of your current site so if you destroy everything, it's cool (when you make your backup, go look at it too and make sure it was copied right!!!).
     
    Stomme poes, Apr 29, 2008 IP
  13. CreditQueen

    CreditQueen Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    so i've opened commonstyle.css but i dont know where to change the color, it seemed like u said i gotta make a new one.... i tried to send u what commonstyle.css looked like but it wouldnt allow me

    ... do i add something or change something
     
    CreditQueen, Apr 29, 2008 IP
  14. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Not before you save a copy somewhere and learn some basics. Seriously, it's not hard except when you're blindly trying to follow the instructions of a moron like me over teh interwebz : )

    Also, since it's a template, I don't know how yours is working. It might actually have the HTML part written in some script like PHP (so that you only have to change any code in your header, footer, or sidebar once and all the other pages get the same change). I wouldn't even want to touch code that's wrapped in something like PHP tags...

    Css-wise, you need to learn what works meaning you need to know the syntax.

    If you can find this book at your local library it can be a big help in explaining a lot of things... esp since once you change one thing, you'll want to change another and another... trust me, that's how it goes : ) ... the book is

    Build your own web site the right way using HTML and CSS, by Ian Lloyd. And the CSS book that I pretty much thing goes with that is
    HTML Utopia: designing without tables using CSS by rachel Andrew and Dan Shafer.

    I especially like the back of the second book because it's like a reference for CSS properties... I can quick look up the proper way to use something like background.

    body {
    the other stuff already there;
    background-color: #f00;
    }

    But I did say your code wasn't beautiful... one of the not-beautiful things about it is that the HTML has some CSS stuff in it... it should not. Your HTML's CSS will always override your external CSS sheets (the three I linked to).

    In your HTML, you have:
    <BODY BGCOLOR="#FFFFFF" TEXT="#000000">

    Nasty nasty nasty... it is saying (in deprecated code) background colour is white (fff is white) and text colour is black (000). To make your CSS have any effect, you'd need to delete this so you just have
    <body>
    in the HTML.

    Then the css sheet has
    body {
    the stuff that's already there;
    background-color: #fff; (or whatever)
    color: #000;
    }

    The last, color, means the text colour.

    Make a copy of everything! before you make changes! And then get those books-- they're both old enough to be on the shelves, I would think.
     
    Stomme poes, Apr 29, 2008 IP
  15. CreditQueen

    CreditQueen Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    its so true, ever since i've started the page i've been changing and changing things everyday. with trial and error i can normally figure it out.

    i have no problem going page by page doing this, if i change the "body bgcolor" it should change the blank whiteness on the side?
     
    CreditQueen, Apr 29, 2008 IP
  16. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Actually, I don't think I'm even seeing the body colour on your online site, unless the colour is also showing through in the main text area (since that's also white, that could well also be body colour showing through... but not necessarily). If you had your site made smaller than the total width of the browser window, for instance if that table were set to something silly like 800px in width, then yes, what you'd see on a wider-than-800px screen would be the body, and yes you could just change the colour in that BGCOLOR="RED" instead of doing it properly... but I wouldn't, if I was you.

    You can teach yourself a lot by playing with code, but sometimes you'll see something and make an assumption that isn't correct. As you make more changes, your body of knowledge will grow but the errors will multiply. One thing you do NOT want is to learna bunch of bad habits. I have no problem with people smoking or anything but I wouldn't teach a kid how to smoke... just to have him come back 20 years later hating himself because he can't stop.
     
    Stomme poes, Apr 29, 2008 IP
  17. CreditQueen

    CreditQueen Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    hehe, interestingly said, i'm using the technique of making each page (one by one) a smaller percent, will i be able to change the color on the side that way or will i need to use pixels?

    or am i just screwed period on the whole color thing?
     
    CreditQueen, Apr 29, 2008 IP
  18. supergoz

    supergoz Peon

    Messages:
    86
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Try to do it as Stomme says. Delete bgcolor in html, and use css to modify the colors. You will not regret it in the future.
     
    supergoz, Apr 29, 2008 IP
  19. supergoz

    supergoz Peon

    Messages:
    86
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #19
    please don't. that's the whole point of css: to avoid modifying each and every page one by one. you change the css, and all pages change. listen to Stomme: last warning. Think pixels as size. they are not colors.
     
    supergoz, Apr 29, 2008 IP
  20. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #20
    No no, though the fact that you're working with a template (with 3THREE3!!! css sheets!!!) will mean your job will always be harder than a "normal" site. Templates always have tons of extra code in them in order to give the buyers maximum flexibility. Another reason a site like this isn't the best to learn on (aside from the crappy crappy code they used in the first place : )

    This is the general idea for websites:

    The CONTENT of the site (text, pictures that have something to say, ads, etc) belongs in the HTML. HTML should be able to say everything you want all by its ugly self (with no styles, HTML is pretty ugly... think, badly-done college paper).

    The STYLE and PRESENTATION of the site is controlled by CSS. If you had a single, external CSS sheet (you have three!! external CSS sheets), you could control the way ALL your pages look-- the positions, heights, widths, colours, fonts, etc of the boxes and text and all, with a single file. That's why it's bad to have <BODY BGCOLOR="something" in the HTML.

    Most behaviours should be done with external javascript (or other scripts), seperate from the HTML (I think that's the way you have it).

    Pixels (px) in CSS only means a unit of measurement... not the same as an actual pixel (a dot of light on the screen), but a size that's about the same as a pixel's size. They have nothing to do with colour in terms of CSS.

    I'll leave it at that for tonight... bedtime : )
     
    Stomme poes, Apr 29, 2008 IP
Page 1 of 2