Question

I’m new to stackoverflow and HTML/CSS/Javascript. I have four tabs and I want them to be able to all be 1/4 the size of the browser width. This is primarily for mobile use and thus 1/4 the width of the browser should be fine.

Again, I’m pretty new to HTML/CSS/Javascript, but I have experience with Java. Thus I know programming basics but I don’t really know how HTML, CSS, and Javascript all interact together.

Thanks!

edit: So after seeing a couple comments and such I think I need to be a bit clearer. So I guess I’ll clear some stuff up. First, yes I styled some stuff to look like tabs. I just googled it and I found a way. I don’t know if it’s the best way though. I’ll include some code below.

<ol id="toc">
<li><a href="Password.html">
    <span class="title">Password</span></a></li>
<li><a href="SSID.html">
    <span class="title">SSID</span></a></li>
<li class="current"><a href="Info.html">
    <span class="title">Info</span></a></li>
<li><a href="Logout.html">
    <span class="title">Logout</span></a></li></ol>

And my CSS

ol#toc {
height: 1em;
list-style: none;
margin: 0;
padding: 0;
}

ol#toc a {
background: #bdf url(tabs.png);
color: #ddd;
display: block;
float: left;
height: 2em;
padding-left: 20px;
text-decoration: none;
}

ol#toc a:hover {
background-color: #3af;
background-position: 0 -120px;
}

ol#toc a:hover span {
background-position: 100% -120px;
}

ol#toc span.title {
font-size:0.6em;
vertical-align:bottom;
font-family: 'Droid Serif', Georgia, Times, serif;
}

ol#toc li {
float: left;

}

ol#toc li.current a {
background-color: #48f;
background-position: 0 -60px;
color: #fff;
}

ol#toc li.current span {
background-position: 100% -60px;
}

ol#toc span {
background: url(tabs.png) 100% 0;
display: block;
line-height: 3.1em;
padding-right: 20px;
}

But I also saw some great stuff using JQuery. I just didn’t really know how to use that either.

Answer 1

Well, I assume that you already have your <li> tags looking like tabs already? If that is the case, the CSS is trivial:

/* Note that my choice of selector here is HEAVILY dependent on the styling you already have*/
li span.title
{
    width: 25%;
}

Understanding the interaction is CSS/Javascript/HTML is very simple to learn. If this answer didn’t make sense, I encourage you to read a good book on that subject first.