centering using CSS

Discussion in 'Web Development & Web Hosting' started by twizzle, May 3, 2010.

  1. twizzle

    twizzle Gigabyte Poster

    1,842
    43
    104
    May 3, 2010 #1
    Remove Advertisement - Premium Membership
    I need some help. I have a contact form with an image and i want both side by side but centered on teh page. So far i can get tehm next to each other on teh left or right side but not centered. anyone suggest a solution?

    here's teh CSS


    body {
    text-align:center;
    background-image:url('images/background.gif');
    background-repeat:repeat;
    }

    h1 {
    color: #ac0c3d;
    font-family:Georgia;
    text-align:center;
    font-size:30px;
    }

    h2{
    font-family:Georgia;
    color: #ac0c3d;
    font-size:20px;
    text-decoration:underline;
    }

    h3{
    font-family:Georgia;
    color:#ac0c3d;
    font-size:18px;
    }

    p{
    font-family:Arial;
    color: #ac0c3d;
    text-align:center;
    font-size:16px;
    }

    #maindiv{
    text-align:center;
    width:400;
    margin:0 auto;
    }

    #leftcol {
    float:left;
    width: 400px;
    height: 500px;
    }


    #content {
    float:left;
    width: 300px;
    height: 500px;
    text-align:left;
    }

    form {
    font:13px Georgia, "Times New Roman", Times, serif;

    }

    form ol {
    list-style:none;
    margin:0;
    padding:0;
    }

    form li {
    padding:6px;
    margin-bottom:1px;
    }

    form li#send {
    background:none;
    margin-top:6px;
    }
    form label {
    float:left;
    width:70px;
    text-align:right;
    margin-right:7px;
    color:#ac0c3d;
    line-height:23px; /* This will make the labels vertically centered with the inputs */
    }

    form input,
    form textarea {
    padding:4px;
    font:13px Georgia, "Times New Roman", Times, serif;
    border:1px solid #0;
    width:200px;
    }

    form input:focus,
    form textarea:focus {
    border:1px solid #666;
    background:#e3f1f1;
    }

    form li#send button:hover {
    background-color:#006633;
    }


    And heres the HTML

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="stylesheet2.css" />
    </head>

    <title>Indian Log Burners</title>

    <body>

    <div>
    <h1>OUTDOOR GENUINE INDIAN LOG BURNERS<br /> FROM NORFOLK</h1>
    </div>

    <br />

    <div id="leftcol">
    <img align="center" width="400" height="600" src="images/ktphoste07004.JPG" />
    </div>


    <div id="content">
    <h2>CONTACT US</h2>
    <h3>Send us your comments and feedback: </h3>
    <h3>
    <label for="name">Name:</label><label for="name"></label>
    <input type="text" name="name" id="name" />
    </h3>
    <h3>Email:
    <input type="text" name="email" id="email" />
    </h3>
    <h3 align="left">
    Query:
    <textarea name="query" rows="5" id="query"></textarea>
    </h3>
    <input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
    </form>
    </div>


    </body>

    </html>


    Sorry it takes so much room! Help appreciated.
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  2. LukeP

    LukeP Gigabyte Poster

    1,194
    41
    90
    May 3, 2010 #2
    Remove Advertisement - Premium Membership
    Wrap both <div> blocks in another <div>

    HTML:
    <div id="wrapper">
...
...
</div>
    and add in styles

    HTML:
    #wrapper {
width: 700px;    // or whatever you want it to be
margin: 0 auto;
}
    Fire away if something's not clear

    Regards

    edit: by both <div> blocks I meant "leftcol" and "content" blocks
     
    Last edited: May 3, 2010
    WIP: Uhmm... not sure
  3. twizzle

    twizzle Gigabyte Poster

    1,842
    43
    104
    May 3, 2010 #3
    See now i'msure i tried that and it didnt work. Might have doen something wrong so will give it a go again.
    So you can wrap div's inside other div's just like nested tables?

    I'm just getting into CSS and theres a lot online for tutorials etc that its a bit overwhelming. We do websites in work but noone seems to have done any properly. By that i mean not stated a DOCTYPE! in any pages, linked correctly to stylesheets, mixed Divs with tables, started using internal and external styles then reverted to using things like font tags instead. Half the sites dont even have Title or Header sections, they just got straight into Body!
    I'm trying to do it right, from teh start. Get into good practice and carry on that way.
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,
  4. LukeP

    LukeP Gigabyte Poster

    1,194
    41
    90
    May 3, 2010 #4
    Yes, you can wrap divs in divs and yes this works, just tried on your code.

    You might need to adjust width and add some margins to separate image from the form.

    edit: Change doctype to transitional as you're breaking rule of strict doctype with <img> tag width and height
     
    Last edited: May 3, 2010
    WIP: Uhmm... not sure
  5. twizzle

    twizzle Gigabyte Poster

    1,842
    43
    104
    May 3, 2010 #5
    OK thanks for the help Luke.

    How does it look to you so far then? www.squiretwizz.co.uk/burners its not a permanent link, its my hosting that i use to test sites for work, once happy i delete them. Oh and teh form doesnt work yet as i havent been told how they want this to submit yet.
     
    Certifications: Comptia A+, N+, MS 70-271, 70-272
    WIP: Being a BILB,

Share This Page

Loading...
Remove Advertisement - Premium Membership
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Accept Learn More...