- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4555
This time I was combining id's and classes. This is my HTML:
<div id="article" class="l-fixed"> Article </div>
CSS:
#article {
width: 80%;
float: left;
border: 2px solid black;
}
.l-fixed#article {
width: 600px;
}
Notice that there is no space in selectors:
.l-fixed#article
Like this we can add class on the same element with id, otherwise, with space:
#article {
width: 80%;
float: left;
border: 2px solid black;
}
.l-fixed #article {
width: 600px;
}
I would need nested element, something like:
<div class="l-fixed"> <div id="article"> Article </div> </div>
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4722
Example I took from here, but from the css and html I deleted parts which are needed for beautification.
HTML should be simple:
<ul>
<li>
Menu 1
<ul>
<li>
Menu 1 SubMenu 1
</li>
<li>
Menu 1 SubMenu 2
</li>
<li>
Menu 1 SubMenu 3
</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>
Menu 2 SubMenu 1
</li>
<li>
Menu 2 SubMenu 2
</li>
</ul>
</li>
<li>Menu 3</li>
</ul>
CSS:
ul {
list-style: none; //I dont need bullets
padding: 0px; //so that submenus are under main menu correctly aligned
}
ul li {
position: relative;
float: left;
}
li ul {
display: none; //sub menus will not be displayed
}
li:hover ul {
display: block; //display submenus when mouse is over
position: absolute;
}
Real life example
-
Menu 1
- Menu 1 SubMenu 1
- Menu 1 SubMenu 2
- Menu 1 SubMenu 3
-
Menu 2
- Menu 2 SubMenu 1
- Menu 2 SubMenu 2
- Menu 3
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4860
EM - Equal to the computed value of the font-size property of the element on which it is used.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="rootSquare"></div>
</body>
</html>
CSS:
.rootSquare {
border: 1px solid #333;
height: 1em;
}
Live example:
Notice in this my live example that "rootSquare" div is 14px - that is because parent element's font size is 14 pixels, so that means 1em = parent element font size, if font-size is not defined then default font size is taken
REM - same as the EM the only difference is that it will take font size of the root element which is usually HTML