Centering Elements
The center tag can be used to center elements, but it will also center everything inside the element. The margin property can be used to center an element instead; just add "auto" to the end of it. This will also make a page's source more readable than using center tags.
In this example, the element is centered. Note that margin space can be added as normal. If you want margin space, replace the zero with a measurement such as 10px.
<div style="width: 200px; background-color: red; margin: 0 auto;">Text</div>
Result:
Content Overflowing Element
If an element with height defined has too much text in it, the contents will overflow the element like this:
<div style="width: 200px; height: 25px; margin: 0 auto; background-color: red;">This is a sentence that might be too long to fit into this element.</div>
Result:
This can be fixed by simply not defining the height property. The height will auto-fit to the text. This element is exactly like the one above, but the height property is left off:
<div style="width: 200px; margin: 0 auto; background-color: red;">This is a sentence that might be too long to fit into this element.</div>
Result:
Remember that even if your element looks fine on your device when you define the height property, the element could still appear badly on other screen sizes. Be careful when using the height property.
Vertically Aligning Text
If you create a box, define its height, and add text to it, you will notice that the text crammed to the top of the box (especially if the font size is much larger than its line height) like in this example:
<div style="width: 200px; height: 50px; text-align: center; border: black solid 4px; background-color: red; margin: 0 auto;">Text</div>
Result:
One way to make sure the text is vertically aligned to the center of the box is to simply not define the height. By default, the height will be set to fit to the text. If you want more space around the text as well, you can use padding.
<div style="width: 200px; padding-top: 15px; padding-bottom: 15px; text-align: center; border: black solid 4px; background-color: red; margin: 0 auto;">Text</div>
Result:
You can also use this method to vertically align the text to whatever position you want by adjusting the top and bottom padding to different amounts.
<div style="width: 200px; padding-top: 25px; padding-bottom: 10px; text-align: center; border: black solid 4px; background-color: red; margin: 0 auto;">Text</div>
Result:
Transparency
An element can be made more transparent using the opacity property. Example:
<div style="width: 200px; background-color: red; border: black solid 4px; margin: 0 auto; opacity: .5;">Text</div>
Result:
You can also change the transparency of things with color using the rgba color syntax. This HTML Color Picker can output rgb colors. In rgba colors, the fourth number that is between 0 and 1 is added. It defines the transparancy. For example, this can be used to make just the background of an element transparent:
<div style="width: 200px; background-color: rgba(255,0,0,.5); border: black solid 4px; margin: 0 auto;">Text</div>
Result:
This can be used to make text, borders, backgrounds, or anything else with a defined color more transparent.
Aligning Inline-Block Elements
The text-align property is not only used to align text. It can also align inline-block elements like this:
<div style="border: 3px solid black; text-align: center;"> <div style="display: inline-block; width: 60px; height: 60px; background-color: red; margin: 5px;"></div> <div style="display: inline-block; width: 60px; height: 60px; background-color: green; margin: 5px;"></div> <div style="display: inline-block; width: 60px; height: 60px; background-color: blue; margin: 5px;"></div> </div>
Result:
Of course, this will also center align any text inside the elements, so if you want that text to be aligned differently, you will have to add the text-align property to those elements.
Floating Elements
The float property can be used to make text wrap around elements. The MediaWiki mark-up for images has this capability. You just add a piece that says "left" or "right" like this:
[[File:Gold.png|80px|left]]
But the float property does not just work on images. Check out the table on the Headquarters Damage Calculator page.
Remember, the top of a floated element begins on the line below where the element is in the code. Example:
[[File:ResourceFountain.PNG|thumb|right|250px]] *Once the base's [[Headquarters]] is destroyed, the attack will end and rewards will be received. *Partially destroying a base without destroying the [[Headquarters]] will not result in any rewards. Note, this is not the same as attacking a base in an [[Operation]] or [[Colonel Gearheart|Colonel Gearheart's]] War Factory, see [[Operation]] and [[Colonel Gearheart]] respectively for more details. *An amount of [[Resources]] depending on how much the opponent had unprotected will be received. Learn more about resource rewards on the [[Loot System]] page. *One or more [[Victory Point]]s will be received depending on the type of base destroyed. Learn more about this on the [[Victory Point]] page.
Result:
- Once the base's Headquarters is destroyed, the attack will end and rewards will be received.
- Partially destroying a base without destroying the Headquarters will not result in any rewards. Note, this is not the same as attacking a base in an Operation or Colonel Gearheart's War Factory, see Operation and Colonel Gearheart respectively for more details.
- An amount of Resources depending on how much the opponent had unprotected will be received. Learn more about resource rewards on the Loot System page.
- One or more Victory Points will be received depending on the type of base destroyed. Learn more about this on the Victory Point page.
| Back |
| Return to Editing Guide List |
| Next |