1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Very new to HTML, need some help

Discussion in 'HTML & Website Design' started by Clayton Callihan, Mar 29, 2013.

0
  1. #1
    Pretty new to html/xhtml. I am creating an example of a home page for a login, one side of the page will have info, the other will have log in options. but I wanted to know this specifically...

    I want what I already have created to be centered, no matter the size of the display its on. IE: google.com, you stretch browser, google centers itself. I have tried multiple combinations of things before getting too frustrated decided to come here and see what suggestions you all have. here is my current body code (i have an external css sheet in the head linked, but font choice doesnt really matter here so body code should do it):



    <body>


    <div>
    <p style="float:left; padding-right:50px;
    font-size:48pt; ">Welcome</p>




    <img src="homepagemiddle.jpg" alt="homepagemiddlebar" style="height:500px; padding-top:50px; float:left; padding-right:50px" />


    <p style="font-size:48pt; float:left;">Sign in:</p>
    </div>

    </body>
     
    Clayton Callihan, Mar 29, 2013 IP
  2. Alcalo

    Alcalo Greenhorn

    Messages:
    100
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    20
    #2
    Just a quick question: Do you REALLY have to build your website using manual HTML? Why not using a platform like Wordpress or Joomla?
     
    Alcalo, Mar 29, 2013 IP
  3. Clayton Callihan

    Clayton Callihan Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    It's more so to get experience and get familiar w coding from scratch. A personal goal if you will. I have dreamweaver, just never use it. I want to build from the ground up (as far as skills go)
     
    Clayton Callihan, Mar 29, 2013 IP
  4. Alcalo

    Alcalo Greenhorn

    Messages:
    100
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    20
    #4
    Oh I see... Don't worry... A HTML expert will help you soon (because I'm not one of those ;))
     
    Alcalo, Mar 29, 2013 IP
  5. Clayton Callihan

    Clayton Callihan Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #5

    :) All good.
     
    Clayton Callihan, Mar 29, 2013 IP
  6. Skovy

    Skovy Greenhorn

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    23
    #6
    I am not an expert but I am experienced with HTML and CSS. I would first like to say... Try to keep all of your CSS in your external Style Sheet to keep it all nice and neat and in one place. It makes it so much easier to work with and read.

    The method I used for centering things is margin auto. I most commonly use it on the <div> tag. Seeing you are going inline style here is how it would be used:

    <div style='width:1000px;margin:0px auto;'>CONTENT</div>

    There are some other ways, but to my knowledge, this is the best way. Don't quote me on that, I may be wrong. The way this works is margin: top right bottom left;
    ex: margin: 5px 5px 5px 5px; or shorthand margin: all(top/right/bottom/left equal) ex: margin:5px; You can also right it with only two values as I did. The way I did it give the top and bottom margins 0 pixels and the left and right margins 'auto' meaning automatically adjust to the browsers width.

    Anyone with better knowledge here correct me if I am wrong.
     
    Last edited: Mar 29, 2013
    Skovy, Mar 29, 2013 IP
  7. Clayton Callihan

    Clayton Callihan Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #7
    That worked to move it, but it isnt center of the page. Hmm... could you explain what the width is referring to and why it matters in this situation, because i tampered with it and it caused dramatic differences.
     
    Clayton Callihan, Mar 29, 2013 IP
  8. Skovy

    Skovy Greenhorn

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    23
    #8
    What exactly are you trying to center? Could you paste that specific code?

    The width is how wide you want that element to be. In the example I used, it was 1000 pixels.
    You are free to choose any size but I used 1000 as an example.
     
    Skovy, Mar 29, 2013 IP
  9. rolodex

    rolodex Well-Known Member

    Messages:
    364
    Likes Received:
    37
    Best Answers:
    5
    Trophy Points:
    175
    #9
    Now, now. Your code is bad. A HTML document can only contain HTML tags.
    Please see my attachment for login page example, and please read the article below.

    http://techtalkin.com/Thread-So-what-s-wrong-with-your-website-PART-1

    My codes aren't that good, but just learn the differences. I'm learning too, you know.
     

    Attached Files:

    rolodex, Mar 29, 2013 IP
  10. Clayton Callihan

    Clayton Callihan Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #10
    trying to center the entire thing as a whole. so the image part (which is a vertical line I created) will be directly center in the middle of the page.
     
    Clayton Callihan, Mar 29, 2013 IP
  11. Clayton Callihan

    Clayton Callihan Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #11
    I pretty much found the best one at 600px. its working pretty well. :)
     
    Clayton Callihan, Mar 29, 2013 IP
  12. Skovy

    Skovy Greenhorn

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    23
    #12

    That is just a snippet of his code and from glancing at it, it looks 'correct' as far as syntax. He can have inline CSS like that. His code isn't neat and shouldn't be considered common practice but it still is 'correct'.

    For the image tag, if you set either just the height or width, it will auto adjust the other so the image is proportionate. If you set both and they are not precise it will distort the image. So if you have the height set at 500px the width should not be required for that so you may be able to omit that. Another thing to try with that... though I am not sure if its and 'acceptable' method is to use text-align:center on the image tag or put the image tag inside of a div tag that is centered using margin auto and using text-align center on the div to center the image within the div. Not trying to say this is right, but it works...
     
    Skovy, Mar 29, 2013 IP
  13. rolodex

    rolodex Well-Known Member

    Messages:
    364
    Likes Received:
    37
    Best Answers:
    5
    Trophy Points:
    175
    #13
    My bad.



    My practice.

    + Reset as habit.
    /* null margins and padding to give good cross-browser baseline */​
    html,body,address,blockquote,div,​
    form,fieldset,caption,​
    h1,h2,h3,h4,h5,h6,​
    hr,ul,li,ol,ul,​
    table,tr,td,th,p,img {​
    margin:0;​
    padding:0;​
    }​

    img,fieldset {​
    border:none;​
    }​
    ​
    + Create a wrapper div. All divs are block element. Now every new div should be inside this block, like forms, p, h1 and others if you want it to follow dimension. Its like a jar where you put everything inside nicely.

    + To center, give the wrapper an ID, specify a width and set margin to 0 auto, just like Skovy said.

    Correct me.
     
    rolodex, Mar 29, 2013 IP
  14. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #14
    As someone once said: "You can't center floats. Period".
    Get rid of the floats, find some other way around and then try to center it.

    That goes without mentioning inline style, fixed pt fonts for no reason, paragraphs, aka P, that shouldn't even be paragraphs. Just floating a paragraph makes no sense in the first place. Combining padding and height also causes severe headaches.
     
    wiicker95, Mar 29, 2013 IP
  15. Clayton Callihan

    Clayton Callihan Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #15
    Thanks for the tips fellas. :)
     
    Clayton Callihan, Apr 2, 2013 IP