Display and Visibility

CSS display

With the display property you can specifies if or how an HTML element is displayed in the web page.

- Values:

inline - Sets the element to be displaied as an inline element (like <span>, <a>), it has no line break and takes up as much width as necessary.
block - Creates a block box. A block element takes up the full width available, and has a line break before and after it.
inline-block - The element will generate a block box, laid out as an inline box, similar to the image behavior
list-item - Creates a block box for the content and the list item marker.
none - Removes the element from the page layout entirely. It remains in the HTML code but will not be displayed in the browser window, makes it completely invisible.

- Syntax:

display: value;

Example (remove a DIV, displays <a> tags as block elements and <li> with inline):

<style>
#idd { display: none; }
.a_block { display: block; }
#idu li { display: inline; }
</style>

<h4>Example CSS display </h4>
<p>In this HTML page a Div is not shown, displays A tags as block elements and LI with inline.</p>

<div id='idd'>Removed content.</div>
<a href='//coursesweb.net/css' title='CSS course' class='a_block'>CSS course</a> <a href='//coursesweb.net/html' title='HTML course' class='a_block'>HTML course</a>
<ul id='idu'>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>

CSS visibility

The visibility property can control if an element is visible or not. Even if the element is hidden, still affects layout and will take up space on the web page, where it should to be displayed.

- Values:

visible - The element is visible (default).
hidden - The element is invisible.

- Syntax:

visibility: value;

Example (make a <span> invisible):

<style>
 #idd span { visibility: hidden; }
</style>

<h4>Example CSS visibility</h4>
<div id='idd'>This row contains a text <span>in a SPAN tag</span> that is hidden but still takes up space.</div>

CSS clip - Define the visible portion of an element

Defining the visible surface of an element determines its visible portion. The remaining contents of that element does not disappear, but is invisible to the visitor.
The element must have set position:absolute, then, to define the visible region it's used the clip property with rect value that sets the shape of the visible region.
- Values:

rect(top, right, bottom, left) - defines the region of the visible portion.
auto - No clipping will be applied (default).

- Syntax:

clip: value;

Example:

<style>
#idd {
position: absolute;
clip: rect(0, 200px, 23px, 60px);
}
</style>

<h4>Example CSS clip</h4>
<div id='idd'>Free CSS: coursesweb.net/css</div>

<<-CSS Outline -- Positioning->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add lists into <ul> and <ol> elements?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

Which value of the "display" property creates a block box for the content and ads a bullet marker?

block list-item inline-block

.some_class {
  display: list-item;
}

Which instruction converts a JavaScript object into a JSON string.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicate the PHP class used to work with HTML and XML content in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Display and Visibility

Css Course

CSS display

CSS visibility

CSS clip - Define the visible portion of an element

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month