The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> CSS Spacing
Jason89
post May 11 2017, 08:35 AM
Post #1





Group: Members
Posts: 3
Joined: 11-May 17
Member No.: 26,406



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 11 2017, 10:13 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason89
post May 11 2017, 11:09 AM
Post #3





Group: Members
Posts: 3
Joined: 11-May 17
Member No.: 26,406



Thank you, that helped solve my problem (including the vertical spacing issue) smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 11 2017, 11:10 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



It did? I never noticed anything happened with that. biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason89
post May 11 2017, 11:13 AM
Post #5





Group: Members
Posts: 3
Joined: 11-May 17
Member No.: 26,406



lol, I meant to say "vertical alignment" tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 11 2017, 01:33 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Well, I didn't notice that either. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 05:38 AM