All geek questions in one place

Best strategy for creating the same HTML code when it appears on multiple pages

I have a simple HTML table with two columns containing text fields and headers for "Name", "Comments" and "Email".

I am looking for the best strategy for styling this HTML snippet, if it should appear on several pages - each page requires different sizes. I read a lot about CSS recently, but couldn't find enough information, but it's really convenient for me to know how best to create such a .css.

For example, I can show the comment form with a width of 50% on the comment page, but only 20% in the sidebar in some additional places on the site.

I'm mostly worried about how to style the width of the boxes, but of course the same approach applies for text. For example, the name field should not be as large as the email field. I think fixed widths are better than percentages.

There are many ways to stylize. Suppose I already have 1 master css file.

1) Put the percentage width in the tags input, and then the outer div will be 100% width for any panel in which it is contained. This does not require special CSS pages, but I don’t like the idea of ​​percent inside td, plus I can’t easily change the height textarea.

2) create styles for #Name, #Comments and #Email on each individual page as additional styles in <head><style>*

3), #Name, #Comments #Email css . ? , , , , - , css .

4), #Name, #Comments #Email, , . , .faqPage #Name, . , css.

5) 'emailField , nameField and commentsField` [ 2,3,4 ]

6) 'shortField , fullWidthField and textInputField` [ 2,3,4 ]

7) :)

8) -

. , ? , HTML (, , css - , , ).

<div id="pnlSubmitComments">
<table class="fieldTable"> 
    <tr> 
    <td align="right"> 
        <label for="Comments">Name:</label> 
    </td> 
    <td> 
        <input id="Name" name="Name" type="text" value="" /> 
    </td> 
    </tr> 
    <tr> 
    <td align="right"> 
        <label for="Comments">Email:</label> 
    </td> 
    <td> 
        <input id="Email" name="Email" type="text" value="" /> 
    </td> 
    </tr> 
     <tr> 
    <td align="right" valign="top"> 
        <label for="Comments">Questions:</label> 
    </td> 
    <td> 
        <textarea id="Comments" name="Comments"> 
</textarea> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    </td> 
    <td> 
        <input id="btnSubmitComments" name="btnSubmitComments" type="submit" value="Submit Questions" /> 
    </td> 
    </tr> 
</table> 
</div>
  • PS. , CommentsName - Name .
+3
3

: , , , . , ...

( ):

<style type="text/css">
<!--

form { /* set width in form, not fieldset (still takes up more room w/ fieldset width */
    font: 100% verdana, arial, sans-serif;
    margin: 0;
    padding: 0;
    min-width: 500px;
    max-width: 600px;
    width: 560px;
}

form fieldset {
    /* clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
    border-color: #000;
    border-width: 1px;
    border-style: solid;
    padding: 10px; /* padding in fieldset support spotty in IE */
    margin: 0;
}

form fieldset legend {
    font-size: 1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
    /* be careful with padding, it'll shift the nice offset on top of border  */
}

form label {
    display: block; /* block float the labels to left column, set a width */
    float: left;
    width: 150px;
    padding: 0;
    margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
    text-align: right;
}

form input, form textarea {
    /* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
    width: auto; /* set width of form elements to auto-size, otherwise watch for wrap on resize */
    margin: 5px 0 0 10px; /* set margin on left of form elements rather than right of
     label aligns textarea better in IE */
}

textarea {
    overflow: auto;
}

 /* uses class instead of div, more efficient */
form br {
    clear: left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}
-->
</style>
<div id="pnlSubmitComments">
    <form>
        <fieldset>
            <label for="Comments">
                Name:
            </label>
            <input id="Name" name="Name" type="text" value="" /><br />
            <label for="Comments">
                Email:
            </label>
            <input id="Email" name="Email" type="text" value="" /><br />
            <label for="Comments">
                Questions:
            </label>
            <textarea id="Comments" name="Comments">
            </textarea><br />
            <label for="spacing"></label>
            <input id="btnSubmitComments" name="btnSubmitComments" type="submit" value="Submit Questions" />
        </fieldset>
    </form>
</div>

. :

, . , (), CSS :

#main .pnlSubmitComments form fieldset {
    /*your CSS*/ 
}


#side .pnlSubmitComments form fieldset {
    /*your CSS*/
}

, :

<input type="text" class="email" name="email" id="email" />

, :

#main .email {
   /*your css for the .email textbox/*
}
+5

css, .

, 1 html:

<body class="page1">
  <!-- repeated html here -->
  <input />
</body>

2 :

<body class="page2">
  <!-- repeated html here -->
  <input />
</body>

css , body:

body.page1 input { width: 25%; }
body.page2 input { width: 50%; }

, html , ( id) CSS.

. , , 4. , , . , , .

+3

1) css , .

2) css css .

0
source

Source: https://habr.com/ru/post/1702675/

More articles:


All Articles