Training

• Home
• Training Classes

"Winners make choices,
losers make excuses."
Decide to be a Winner!!!!

± Getting Started

± Phase 1
Planning

± Website Tools

± Phase 3
Conceptual Design

± Helpful Information

± Phase 4
Physical Design

± Phase 5
Testing

± Phase 6
Implement and Market Website

± Other Web Development Items

± Multimedia

± Useful Utilities

± Programming

± Advanced Programming

± Microsoft Office Products

± Computer Maintenance

± Other

---

NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.

CSS - Block vs Display

Example of CSS Display: none

The text above is formatted: <div class="hidden">This is a hidden heading</div>
Notice that the hidden text does not take up space.
.hidden {
display:none;
}
Example 1

Display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as the element is not there:

Example of CSS Visibility: hidden

The text above is formatted <div class="hidden2">This is a hidden line</div>
Notice that the hidden text still takes up space.
.hidden2 {
visibility:hidden;
}
Example 2

Visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

Example of CSS display:inline

• line 1
• line 2
• line 3

The list above is formatted:
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
</ul>
The CSS is:
ul li{
display:inline;
}

Example 1: show block below: CSS block: hidden/visible; Notice how the space is reserved for the block.

Example 2: Show block below by mouseover and mouseout to hide. Notice that the next line shifts when the section is displayed.

It is much better to put the block of text that you want to disappear below the link. Example 3 below must click and double click to work.

Example 3: Show block above by clicking and by double clicking to hide. Cannot mouseout to hide because when the text shifts down, it naturally mouses out, so the text always disappears.

This is the css and javascript used to display this text.

<style type="text/css">
<!--
#block1_visibility {
visibility:visible;
visibility: hidden;
background-color:#069;
}
#block2_display {
display:block;
display:none;
background-color:#069;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
function MM_showHideLayers2() { //v9.0
var i,p,v,obj,args=MM_showHideLayers2.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'block':(v=='hide')?'none':v; }
obj.display=v; }
}
//-->
</script>

 

top of page

Page last updated: June 27, 2015 10:55 AM