Help:Wiki University Wikitext--Width and Height

From FamilySearch Wiki
Revision as of 12:44, 15 April 2020 by Wonghk3 (talk | contribs) (add section: effect of borders on width)
Jump to navigation Jump to search

Lessons

Intermediate

Advanced

Flexbox

Additional Helps

Width[edit | edit source]

Height-width.png

Using either paragraph or div tags you are able to control the width on the page. If you wanted the text to only go part way across the page you could do it two different ways.

  • Set the width to a certain number of pixels.
  • Set the width as a percentage.

Here is the attribute coding:

width:400px (for pixels)
width:50% (in percentages)

Here is our lorem ipsum paragraph with these two attributes with a border to see the examples more clearly:

  • The width is set at 400 pixels
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.


  • The width is set at 50%
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Height[edit | edit source]

The height can be set with the attribute coding:

height:200px

  • NOTICE use pixels for the height coding, percentages will not work in height.

Here is our lorem ipsum with a height of 300 pixels:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.
  • NOTICE that the container is much higher than necessary.
  • NOTICE that the text is at the top of the container.

Width and height used together[edit | edit source]

Here is lorem ipsum in a div tag with a width of 400 pixels and a height of 200 pixels:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Here is the coding:

<div style="width:400px; height:200px; border:1px solid red">Lorem ipsum ...</div>

Effect of borders on width[edit | edit source]

  • When a border is added to an element such as a div tag, the area of the div tag if it is called out will remain. If a container is 640 pixels wide and a 50 pixel border is added, the whole element will expand to 740 pixels and expand into the right sidebars. So if you are adding thick borders, you need to assess how it will affect the width of the entire element. Here's a sample:


Try these out[edit | edit source]

Tests.gif
Exercises

In your sandbox put the lorem ipsum in a div tag container with your choice of border and a width of 200 pixels and a height of 400 pixels.


Quick Quiz
  • You can't use both width and height in a div tag
A. True
B. False
  • You can't use both width and height in a paragraph tag
A. True
B. False
  • You can use percentages in height attributes
A. True
B. False
Retrieved from "https://paas-loadb-dhtaff8ujtdt-1826058300.us-east-1.elb.amazonaws.com/wiki/en/index.php?title=Help:Wiki_University_Wikitext--Width_and_Height&oldid=3919992"