I'm trying to replicate Excel's Vertical Text feature in HTML and wondering if anyone has tried this or knows of an easy way to do this?
I want my text to look like:
T
H
I
S
inside of a <th> element
You could try this. Gives a little more control over spacing than using <br />
From the site:
CSS:
#vertical {
width:15em;
padding:0;
margin:0 auto;
list-style-type:none;
font-size:1.4em;
font-family:georgia, "times new roman", serif;
}
#vertical li {
float:left;
border:0.2em solid #eee;
margin:0.1em;
}
#vertical li a {
text-decoration:none;
color:#000;
display:block;
width:1.5em;
height:1.5em;
border-top:0.1em solid #000;
height:auto;
}
#vertical li a em {
font-style:normal;
display:block;
text-align:center;
background:#fff;
border-left:0.1em solid #000;
border-right:0.1em solid #000;
}
#vertical li a em.nd {
border-bottom:0.1em solid #000;
}
#vertical li a:hover {
background:#eee;
}
#vertical li a:hover em {
background:#eee;
color:#800;
}
And the markup:
<ul id="vertical">
<li>
<a href="../menu/index.html">
<em>D</em><em>E</em><em>M</em>
<em>O</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../menus/index.html">
<em>M</em><em>E</em><em>N</em>
<em>U</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../layouts/index.html">
<em>L</em><em>A</em><em>Y</em><em>O</em>
<em>U</em><em>T</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../boxes/index.html">
<em>B</em><em>O</em><em>X</em>
<em>E</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../mozilla/index.html">
<em>M</em><em>O</em><em>Z</em><em>I</em>
<em>L</em><em>L</em><em class="nd">A</em>
</a>
</li>
<li>
<a href="../ie/index.html">
<em>E</em><em>X</em><em>P</em><em>L</em>
<em>O</em><em>R</em><em>E</em><em class="nd">R</em>
</a>
</li>
<li>
<a href="../opacity/index.html">
<em>O</em><em>P</em><em>A</em><em>C</em>
<em>I</em><em>T</em><em class="nd">Y</em>
</a>
</li>
</ul>
IE-only soltuion:
<div style="writing-mode:tb-rl;filter: flipv fliph;">
The Vertical Text
</div>
You can try same thing for th tag.
Related
I use this code below to show up right column on my wordpress blog. (List structure is generated by wp_list_categories.)
<div class="rcolumn">
<li class="categories">Categories
<ul>
<li class="cat-item1">
Cat1
</li>
</ul>
<ul>
<li class="cat-item2">
Cat2
</li>
</ul>
</li>
</div>
The thing is, that the contents of this column ignore div and are actually outside of it. Whole li categories goes outside of rcolumn.
.lcolumn {
display:inline;
float:left;
}
.rcolumn {
float:left;
display:inline;
padding:0 5px;
}
.categories {
margin-top:10px;
border:1px solid #aaa;
list-style:none;
}
What am I missing?
.rcolumn {
float:left;
display:inline;
padding:0 5px;
overflow: hidden; <-- try this?
}
i am trying to create a menu bar with list items.i applied css for the list items.i want all of them to lie on a single line i mean when zoom in to 500% and zoom out to 25% all the list items should be in same line.but in my implementation they are going out of the line.i'm a beginner please help me
css:
.menu
{
margin-top:5px;
margin-bottom:5px;
background-color:#4c4c4c;
color:white;
position:relative;
display:inline-block;
text-align:center;
padding:0px 85px 0px 85px;
border:2px solid #4c4c4c;
}
#menuitem1
{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
text-align:center;
margin:auto;
}
#menuitem4
{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
<html>
<body >
<div id="page">
<div id="bar">
<ul>
<li class="menu" id="menuitem1" >Home</li>
<li class="menu">contact us</li>
<li class="menu">pay</li>
<li class="menu" id="menuitem4" >plans</li>
</ul>
</div>
</div>
</body>
</html>
jsfiddle
Set the width of the .menu in percentage so the li's are responsive.
JSFIddle
HTML
<body >
<div id="page">
<div id="bar">
<ul>
<li class="menu" id="menuitem1" >
Home
</li>
<li class="menu">
contact us
</li>
<li class="menu">
pay
</li>
<li class="menu" id="menuitem4" >
plans
</li>
</ul>
</div>
</div>
</body>
CSS
.menu
{
margin-top:5px;
margin-bottom:5px;
background-color:#4c4c4c;
color:white;
position:relative;
display:inline-block;
text-align:center;
padding:0px 0px 0px 0px;
border:2px solid #4c4c4c;
width:20%;
}
#menuitem1
{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
text-align:center;
margin:auto;
}
#menuitem4
{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
You can try using percentage width values for width of your li elements.
.some-class {
width: 25%
}
I've made some changes on jsfiddle just to show it is possible with this kind of implementation.
If you are concerned about mobile devices. Take a look at meta tags with device-width.
You can add:
ul {
white-space: nowrap;
}
to prevent wrapping -> jsfiddle
I have a problem with position. I want to make the icons on the right align while links are on the center of navigation. But seems like I hit a wall.
This is my HTML
<div id="nav">
<ul>
<li> HOME
</li>
<li> ABOUT
</li>
<li> MUSIC
</li>
<li> GALLERY
</li>
<li> CONTACT
</li>
<li class="navimage"> <img src="abc.jpg" />
</li>
<li class="navimage"> <img src="abc.jpg" />
</li>
<li class="navimage"> <img src="abc.jpg" />
</li>
<li class="navimage"> <img src="abc.jpg" />
</li>
</ul>
</div>
and this is my CSS
#nav {
border-bottom:2px solid #FFF;
margin-bottom:20px;
padding:0;
text-align:center;
}
#nav li {
display:inline;
}
#nav a {
display:inline-block;
padding:10px;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}
#nav a:hover {
color:#DEB887;
}
.navimage img {
width:30px;
height:30px;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
}
.navimage img a {
text-align:right;
}
here is the jsfiddle to check.
http://jsfiddle.net/zN92c/
Replace:
.navimage img a {
text-align:right;
}
With:
.navimage {
float:right;
}
According to your css
.navimage img a
is being aligned right. But the list item itself has no position, Try floating it to the right using:
.navimage { float: right; }
That would alight the list item to the right.
I'm trying to create a mega drop down menu just like the one from the following link : http://i48.tinypic.com/2ln97ip.png
I have created this fiddle but the things aren't going well because of positioning and border of second ul is not ok :(
http://jsfiddle.net/H8FVE/16/
<ul id="firstUl">
<li><a>mainSimple</a></li>
<li>
<a>MainMenu</a>
<ul id="secondUl">
<li>
<a>SecondLevel1</a>
<ul id="lastLevel">
<li>
<a>LastLevelX</a>
</li>
<li>
<a>LastLevelY</a>
</li>
</ul>
</li>
<li>
<a>SecondLevel2</a>
<ul id="lastLevel">
<li>
<a>LastLevel</a>
</li>
<li>
<a>LastLevel</a>
</li>
<li>
<a>LastLevel</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
#firstUl{height:42px; position:relative; background:#ccc;}
#firstUl li{ float:left; border:1px solid #fff; padding:10px; border:1px solid red;}
#secondUl{display:none; background:#fafafa; }
#secondUl li{
float:left;
display:block;
border:1px solid #eaeaea;
}
#lastLevel{
display:none;
}
#firstUl li:hover> #secondUl{
border:1px solid red;
display:block;
position:absolute;
top:100%;
}
#firstUl li #secondUl li:hover> #lastLevel{
display:block;
position:absolute;
top:100%;
left:0;
}
#firstUl li #secondUl li #lastLevel li{
float:none;
}
Can someone help me with this pls.
Try setting the #secondUl li to position:relative so that the child's (UL) position depends on it:
#secondUl li {
...
position: relative;
}
This you can find a Fiddle example, and here is the code :
<div class="menu-alto">
<ul>
<li>
<a title="Link" href="#">Link</a>
</li>
<li class="newsletter">
<a title="Newsletter" href="#">Newsletter</a>
</li>
<li class="last">
<label style="color:#99cc00">cerca </label>
<input type="text" style="width:116px;" />
<input type="submit" style="width:40px;" class="bottone" value="VAI" />
</li>
</ul>
</div>
.menu-alto ul
{
list-style:none;
padding:0;
margin:0;
border:0;
}
.menu-alto li
{
display:block;
float:left;
font-family:Arial;
text-transform:uppercase;
color:#7c7c7c;
font-size:10px;
padding-right:16px;
}
.menu-alto li a:link,
.menu-alto li a:visited
{
color:#7c7c7c;
text-decoration:none;
letter-spacing:1px;
}
.menu-alto li a:hover
{
text-decoration:underline;
}
.menu-alto .last
{
padding-left:5px;
position:relative;
top:-5px;
}
.menu-alto .bottone
{
position:relative;
top:2px;
height:21px;
font-size:11px;
}
As you can see (just on IE7) the label with the text CERCA is not align (as middle) with the other links, and on Chrome (for example) the button is in the botton of the vertical-middle align. How can I fix this?
You should vertically center using vertical-align:middle; on all your <li> children instead of using relative position.