- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 4274
Title (and content) of the article I stole from this web site.
From that same web site copy / paste of the key sentence:
HTML layout traditionally was not designed to specify vertical behavior
To have properly working vertical alignment, in my case, I had to introduce a table, this is my HTML:
<div style="height: 800px" class="detail-control"> <table style="height:100%"> <tbody> <tr> <td> <img style="vertical-align: middle" border="0" alt="Please press the play button." onerror="this.src='path to image to be displayed if original one is not found'" src="/URL of an image"> </td> </tr> </tbody> </table> </div>
Notice height of div (800px for the sake of testing), and height of table (100% to cover whole div), then in img tag note style.
- Details
- Written by: Stanko Milosev
- Category: CSS
- Hits: 3652
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: 3784
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
