<script src="http://www.acmeous.com/tutorials/demo/acmeousCollapsibleLists/acmeousCollapsibleLists.js" type="text/javascript"></script>Then just below it, within the <header> section of your page, add the following code -
<script> or <link> tags for some selected pages of a website. In many websites we use Content Management Systems or some templates where we can’t add different headers to different pages. But in many pages we need some extra functionality through scripts and other codes which are used differently in different pages within that site. Sometimes we need to insert the scripts within the page body tag which is not at all Web Standards compliant. The scripts and links to css or JavaScript files should always be in the head tag.
Hence you should design tabs which will take space as per the menu items. Here is how you can do it easily. You can create tabs just as in this image in few minutes. First you have to get the design as you want for your tabs. Now you need to slice them out to get these following pieces which will form your tab.You may have seen many stylish text inputs and designer forms in many websites. Just putting some text inputs and text areas and buttons, can't attract users to click there or type in some texts for you. If you wish your users grab those forms and fill out important information for you, you have to make those inputs in such a way that users get them accustomed with your site's theme. Users generally find no input forms to be interesting except it is a search box, which he/she have to use without any other option. But still f you make search inputs similar to your theme, it adds to your design and make it comfortable for your uses. After all designing is all about making elements soothing to users' eyes.
Here is a tutorial to make text inputs beautiful and matching to your website's theme. Suppose you have a login input in a bar, where users enter their passwords. Here is a sample how the input has been matched with the bar.
Here I have created a stylish input matching with the dark red colored background bar. Now lets see how you can implement it.
At first just insert normal form and input elements in your page like this.
View the source to get see the code.
This has inserted a form and a text input in your page. Notice that I have put an id="passText" in the input element. This will help you to stylize it through CSS. Now here is the CSS part.
#loginForm [
background: url(images/passText.jpg) no-repeat;
/* where passText.jpg is the stylish box image */
height: 20px;
width: 100px;
font-weight: normal;
color: #ffffff;
border: 0px;
}
#passText {
width: 80px;
height: 18px;
margin-left: 18px;
background: transparent;
color: #ffffff;
}
Now this will transform your input box just as you wished and seen in the picture. The form has the image for the text input in its background, and the input text's background is transparent. The size of the input text is made smaller than the form, so that the texts typed inside the input don't come out of the designed box.
This is the basis of form designing and in this pattern you can make your forms look beautiful and totally matching your site's theme, which adds beauty to your site. Now make designer forms and inputs and attract users to use them more and more.
align="center". Though this tag satisfies our aim and centers the element in the screen, but this tag is not recognized by W3 Validator as a valid XHTML content. Thats why if you are cautious enough about your website to be XHTML Validated, you can’t use it .
