CSS-height
Anvendelse
CSS-height og CSS-width bruges til at sætte højden og bredden til f.eks. en tekstboks eller et billede. Det er så smart lavet at det tal man skriver bagefter koden, kan både angives i procent, auto eller en længde. Længden kan angives i pixels, centimeter, osv.
CSS-height og CSS-width inkluderer ikke padding, borders eller margins.
Opsætning
Hvis du vil sætte højden eller bredden, ved hjælp af css-height og css-width, skal du bruge denne kode:
p.ex
{
height:100px;
width:100px;
}
Min-height og min-width
Du kan også bruge css-height, til at sætte en minimum eller en maximum længde et element må være. Det samme gælder selvfølgelig for css-width.
Til at angive din længde, kan du bruge de samme enheder, som i de "normale" height og width.
Disse koder inkluderer heller ikke padding, borders eller margins.
Når du skal bruge disse ting, skal du bruge disse koder:
Max. højde
p
{
max-height:50px;
}
Max. bredde
p
{
max-width:100px;
}
Min. højde
p
{
min-height:100px;
}
Min. bredde
p
{
min-width:1000px;
}
Eksempler
Height og width
Her er sat en fast højde og bredde:
<div style="background-color:orange;height:125px;width:75px;"> Denne box har en fast højde og bredde. </div>
Max-height og max-width
Her er sat en maximum højde og bredde.
<div style="background-color:orange;max-height:125px;max-width:75px;"> Denne box har max-bredde og max-højde. </div>
Min-height og min-width
Her er sat en minimum højde og bredde.
<div style="background-color:orange;min-height:125px;min-width:75px;"> Denne box har min-bredde og min-højde. </div>
| Webdesign | |
|---|---|
| CSS | Placering - Egenskaber - Class - ID - Height - Width - Centrering - Margin - Border - Padding - Boksmodellen - Position - Text - Font - Farver - Backgruond - Table - List-style - Selectors - CSS3 - Media - Dropdown |
| HTML | <b> - <br> - <em> - <strong> - <i> - <cite> - <q> - <tt> - <code> - <samp> - <kbd> - <var> - <pre> - <sub> - <sup> - <h1> - <h6> - <p> - <br> - <li> - <ol> - <ul> - <a> - <a> på siden - <img> - <map> - <object> - <dd> - <dl> - <dt> - <hr> - <div> - <span> - <html> - HTML5 - <head> - <title> - <body> - <frame> - <frameset> - <iframe> - <style> - <table> - <td> - <tr> - <th> - <tbody> - <thead> - <tfoot> - <form> - <input> - <textarea> - <label> - <select> - <option> - Radio button - Checkbox - Dropdown - Input text - Input password - Submit knap - Billede - Embedding Youtube - Kommentarer - Omdirigere |