Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ CSS Spacing

Posted by: Jason89 May 11 2017, 08:35 AM

Hi,

I’m struggling to get the vertical spacing right for my college assignment - can someone help me out?

I’d like everything to be centralised, similar to the attached image but everything is skewered to the right



Attached thumbnail(s)
Attached Image

Attached File(s)
Attached File  index.html ( 2.3k ) Number of downloads: 562
Attached File  style.css ( 1.11k ) Number of downloads: 528

Posted by: pandy May 11 2017, 10:13 AM

This rule screws things up. I would remove all of it except the border (commented out what I think should go).

CODE
input[type="text"] {
  /*display: table; */
    /* margin-right: 200px; */
    /* width: 100%; */
    border: 2px solid #d9d9d6;
}



This rule too.

CODE

form{
margin: 20px auto;
    width: 320px;


The above rule does center the form on the page, but since the table is much wider than 320px it will stick out from the form, to the right. Put borders on FORM and TABLE and you can see what happens. Remove all of the above and use this instead.

CODE
form    { width: 100% }


Now the form spans all of the page and you can center the table within it by giving it auto left and right margins.

CODE

table   { margin-left: auto; margin-right: auto }


The submit and reset buttons can be centered by putting them in a DIV that you style with text-align: center (if you want them centered).

About the vertical spacing, exactly where and how do you want it?

Posted by: Jason89 May 11 2017, 11:09 AM

Thank you, that helped solve my problem (including the vertical spacing issue) smile.gif

Posted by: pandy May 11 2017, 11:10 AM

It did? I never noticed anything happened with that. biggrin.gif

Posted by: Jason89 May 11 2017, 11:13 AM

lol, I meant to say "vertical alignment" tongue.gif

Posted by: pandy May 11 2017, 01:33 PM

Well, I didn't notice that either. tongue.gif

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)