CODEWITHSUNDEEP
htmlcss
Ergo Proxy
Ergo Proxy

Reputation: 361

How can I make my form take only a limited space?

HTML CODE

<ul id="cool">
    <li>
        <form action="/send.php" method="post">
            <p id="submit">XYZ
                <select name="server">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="2">2</option>
                </select>
                <br />
                <br />Nickname
                <input type="text" name="Nickname" maxlength="16" required="required" autofocus="autofocus" />Email
                <input type="email" name="Email" maxlength="254" required="required" />
                <input type="submit" value="Sumbit">
            </p>
        </form>
    </li>
</ul>

CSS Code

#submit {
    width: 125px;
    height: 135px;
    margin: 0 auto 20px;
    ul {
        list-style-type: none;
    }
    #cool:hover {
        background-image: url(nav-bg.png);
        background-repeat: no-repeat;
    }

So after trying to put a background on the code using :hover I noticed that the form width expands on the whole page while it is centered.I tried using width in the ul{} but that put my form on the left. So my question is, how to make the form not expand on the whole page?

Excuse my code, I'm only a beginner, anything else I could provide you to assist you in assisting me (irony :P) please tell me.

Upvotes: 2

Views: 250

Answers (2)

AppleBud
AppleBud

Reputation: 1541

Rather than applying css on the

tag and ul, you should try giving your form an id and then apply your css on that. As for eg, 

<form action="/send.php" method="post" id="submit">
  <p>
    XYZ
 <select name="server">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="2">2</option>
     </select> <br /> <br />
  Nickname
     <input type="text" name="Nickname" 
     maxlength="16" required="required" autofocus="autofocus" />
     Email
    <input type="email" name="Email"
    maxlength="254" required="required" />
    <input type="submit" value="Sumbit">
    </p>
    </form>

and then apply your css

   #submit
   {
    width: 150px;
    align:center;
   }

Hope it works. You can also use "%" instead of "px".

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157394

ul is a block level element by default, it will take up entire horizontal space on the page, so you need to assign some fixed with to your ul element, and than use margin: auto; to center the form.

ul {
    list-style-type: none;
    width: 250px; /* Approximately */
    margin: auto;
}

Demo

Upvotes: 4

Related Questions