#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    3
    Rep Power
    0

    CSS and HTML Help...please


    Ok. Not sure what I did, but this is a MENU problem.

    I have my website pretty much setup, just designing it and adding images and what not. Well, the menu on ALL of my pages work fine...hover and href'ed and stuff. Well the menu on my index.html page doesnt work at all. you can hover the mouse over the "Home" button..any button really...and nothing happens, cant even click on it. Everything looks fine in the HTML. I even used the html code for the NAV Menu on my other pages and pasted it into the INDEX page...still nothing. Any help is appreciated!

    I figured it could be something with the CSS...BUT all my pages menu buttons is based off the same CSS...so idk what going on.
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8
    Can you post your HTML for the index.html page and also the corresponding CSS?

    Are you using an external stylesheet?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    3
    Rep Power
    0
    Originally Posted by Nanomech
    Can you post your HTML for the index.html page and also the corresponding CSS?

    Are you using an external stylesheet?
    I had gotten it fixed, glad I save the index.html file on a flash drive before working on it again, then the menu messing up.

    But another question, what is the best way to create a contact form?
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Welcome to DevShed Forums, webs2012.

    That's a bit like asking "what's the best way to repair my car?" Please give us more detail. Do you just need help with the HTML and CSS or do you need help with the server-side scripting, e.g. PHP, to make it work as well?

    P.S. New users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8
    When creating a form, I usually go about it like this:

    Code:
    <form action="" method="post">
    	<fieldset>
    		<legend>My Form</legend>
    		<p><label for="name">Name:</label><input type="text" name="name" id="name" maxlength="40" /></p>
    		<p><label for="email">Email:</label><input type="text" name="email" id="email" maxlength="40" /></p>
    		<p><label for="age">Age:</label><input type="text" name="name" id="age" maxlength="40" /></p>
    		<p><input type="submit" value="Submit" name="submit" /><input type="reset" value="Clear Form" />
    	</fieldset>
    </form>
    The 'for' attribute of the <label> tag must match the 'id' of the <input> tag.

    Regards,

    Nm.

    Comments on this post

    • Kravvitz agrees
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    I'd make two suggestions to improve on Nanomech's markup. The first is that perhaps the reset button is not really necessary. I suggest you read Reset / Cancel Button Considered Harmful.

    The second is that HTML5 input types are very helpful for mobile device users.
    Code:
    <form action="" method="post">
    	<fieldset>
    		<legend>My Form</legend>
    		<p><label for="name">Name:</label><input type="text" name="name" id="name" maxlength="40" /></p>
    		<p><label for="email">Email:</label><input type="email" name="email" id="email" maxlength="40" /></p>
    		<p><label for="age">Age:</label><input type="number" name="age" id="age" maxlength="40" /></p>
    		<p><input type="submit" value="Submit" name="submit" /></p>
    	</fieldset>
    </form>
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    3
    Rep Power
    0
    Originally Posted by Kravvitz
    I'd make two suggestions to improve on Nanomech's markup. The first is that perhaps the reset button is not really necessary. I suggest you read Reset / Cancel Button Considered Harmful.

    The second is that HTML5 input types are very helpful for mobile device users.
    Code:
    <form action="" method="post">
    	<fieldset>
    		<legend>My Form</legend>
    		<p><label for="name">Name:</label><input type="text" name="name" id="name" maxlength="40" /></p>
    		<p><label for="email">Email:</label><input type="email" name="email" id="email" maxlength="40" /></p>
    		<p><label for="age">Age:</label><input type="number" name="age" id="age" maxlength="40" /></p>
    		<p><input type="submit" value="Submit" name="submit" /></p>
    	</fieldset>
    </form>

    Ok thank you! Now as far as the CSS portion of the code, how do I go about editing it to look the way I want it to look. Sorry, first time making a contact form. And how would I get the form to work properly, when submitted, the information sends to my email?
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8
    Originally Posted by webs2012
    Ok thank you! Now as far as the CSS portion of the code, how do I go about editing it to look the way I want it to look. Sorry, first time making a contact form. And how would I get the form to work properly, when submitted, the information sends to my email?
    The CSS I usually go with would look something like this:

    Code:
    form {width: 55%;
    	 margin: 2% 0% 2% 2%;}
    
    fieldset {border: 1px solid #000;
           background-color: #362911;}
    	  
    legend {border: 1px solid #000;
          background-color: #1d631d;
    	  padding: 3px 6px 3px 6px;
    	  font-size: 15px;
    	  font-weight: bold;
    	  text-decoration: underline;
    	  color: #fff;}
    	  
    label {width: 15%;
         float: left;
    	 text-align: right;
    	 margin-right: 1%;
    	 display: block;
    	 font-size: 13px;
    	 font-family: 'dejavu sans';
    	 color: #e8e8e8;
    	 padding-top: 0.4%;}
    	 
    input[type="text"] {border: 1px solid #000;
                      background-color: #1d631d;
    				  color: #fff;
    				  margin-right: 2%;}
    				  
    input[type="submit"]{border: 1px solid #000;
                       margin: 3% 2% 0% 16%;
    				   font-size: 14px;}
    				  
    input[type="reset"]{border: 1px solid #000;
    				  font-size: 14px;}
    				 
    textarea {border: 1px solid #000;
           background-color: #1d631d;
    	   color: #fff;
    	   margin-right: 2%;
    	   resize: none;}
    	   
    select {border: 1px solid #000;
          background-color: #1d631d;
    	  color: #fff;}
    				  
    input[type="text"]:focus {background-color: #238230;}
    textarea:focus {background-color: #238230;}
    If you take the HTML and CSS that I posted and put them together, you will see the setup's I use for my forms in general.(the colors are just ones which I am using atm in my current project that I'm working on, obviously change to suit your needs).

    @Kravvits - I was aware of them but I try to stay away from HTML 5 until it is considered standard. Are they any different from using type="text"? Seen examples where the poster has used those type of inputs but I haven't really ever looked into it.

    Also, that link is very interesting. Thank very much indeed.

    Kind regards,

    NM.
    Last edited by Nanomech; December 1st, 2012 at 07:47 PM.
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    You're welcome.

    Here are two good articles on that:
    Style Web Forms Using CSS
    Fancy Form Design Using CSS
    You can also try Google for more.

    And how would I get the form to work properly, when submitted, the information sends to my email?
    You need a server-side language, like PHP, for that. It would be best if you would create a new thread in the appropriate language's forum to address that part of your question.
    Last edited by Kravvitz; December 1st, 2012 at 08:08 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  18. #10
  19. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Originally Posted by Nanomech
    I was aware of them but I try to stay away from HTML 5 until it is considered standard. Are they any different from using type="text"? Seen examples where the poster has used those type of inputs but I haven't really ever looked into it.
    I understand that perspective. However, in this case, I feel UX is more important and they gracefully fallback to type="text" (at least the two types I recommended using in this case) in browsers that don't support the new types. Yes, mobile devices handle them differently. The article I linked to includes some screenshots of how a mobile device provides different onscreen keyboards depending on the input type. For example, on an iPhone to get to the number buttons or the "@" (at) symbol, you have to click another one first by default, but when you use a type="email" the "@" is added to the first group of character buttons. Likewise, when you use type="number" the numerical digits are brought on screen, so you can get to them faster.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  20. #11
  21. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    8
    Ahh I see. I should really upgrade my phone from my 9.99 one
  22. #12
  23. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Originally Posted by Nanomech
    Ahh I see. I should really upgrade my phone from my 9.99 one
    Yeah, one tends to gain a greater appreciation for these new input types when one starts using a smart phone. One also gets to see which iOS apps and web sites make use of them and which don't.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo