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.
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;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments