Autor Zpráva
miomilas
Profil
Dobrý nad ránem,

pracuji s se souborem, který se pracovně nazývá Tabbed Menu, je to k náhledu na

http://blixt.org/media/a/1/tabs-js/page.html#page=page-1

Chtěl bych si roztáhnout ony tři butony, které ovládají MENU na delší šířku. Např. v tom Google Chrome při inspekci elementu se objevují rozměry těch butonů, ale já nevím, jakým způsobem se to dá změnit.
Když se podíváte to CSS, vypadá to takto:

div.content {
    border: #48f solid 3px;
    clear: left;
    padding: 1em;
}

div.content.inactive {
    display: none;
}

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

ol#toc a {
    background: #bdf url(tabs.gif);
    color: #008;
    display: block;
    float: left;
    height: 2em;
    padding-left: 10px;
    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 li {
    float: left;
    margin: 0 1px 0 0;
}

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

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

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

Čili elastické obrázky, ale jak mám sakra nastavit šířku?

Sorry, přátelé a díky za pomoc.
Bubák
Profil
Nechápu, proč chceš šířku nastavovat, ta se mění podle obsahu, tedy podle délky textu v položce. Rozměry můžeš ovlivnit takto::
ol#toc a {
    background: #bdf url(tabs0000.gif);
    color: #008;
    display: block;
    float: left;
    height: 3em; /* vyska */
    line-height: 4em;  /*vyska */
    padding-left: 30px; /* leve odsazeni */
    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 li {
    float: left;
    margin: 0 1px 0 0;
}

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

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

ol#toc span {
    background: url(tabs0000.gif) 100% 0;
    display: block;
    /* line-height: 2em; smazat */
    padding-right: 30px; /* prave odsazeni */
}
miomilas
Profil
Díky Mr. Bubák za promptní odpověď, funguje to.

Já jsem nad tím taky ale zapřemejšlel a dosáhl jsem podobného efektu takto:

ol#toc a {
    background: #bdf url(tabs.gif);
    color: #008;
    display: block;
    float: left;
    height: 2em;
    width: 8em;
    padding-left: 30px;
    text-decoration: none;
}

Každopádně díky za ten "padding-left".

Mám teď s dovolením jinou otázku, pokračuji v díle nastavováním pozadí, a tu jsem ve své prostoduchosti přišel na to, že při tomhle způsobu přepínání stránek, mně vždy zústává stejně pozadí, jež je dáno v CSS.
Původní CSS:
div.content {
border: #48f solid 3px;
clear: left;
padding: 1em;
}

div.content.inactive {
display: none;
}

jsem změnil na (a funguje to skvostně v v prohlížečích IE9, Moz, Chrome)
div.content {
    border: #48f solid 3px;
    clear: left;
    padding: 3em;
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    border-radius: 26px;
    background-image: url(gradient6.png);
    background-position: top, bottom;
    background-repeat: repeat-x /* totéž jako repeat-x, repeat-x */;
    background-size: 2000px;
}

No ale já bych samozřejmě chtěl na každej TAB jinej gradient.
Máte nějakej nápad?
Díky.

Moderátor Chamurappi: Vkládej prosím kódy mezi značky [pre] a [/pre] (stačí kliknout na ).
miomilas
Profil
Výše uvedený příklad se vztahuje ke stránce

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My Homepage</title>
    <link href="q.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>My Homepage</h1>
<ol id="toc">
    <li><a href="#page-1"><span>Page 1</span></a></li>
    <li><a href="#page-2"><span>Page 2</span></a></li>
    <li><a href="#page-3"><span>Page 3</span></a></li>
</ol>
<div class="content" id="page-1">
    <h2>Page 1</h2>
    <p>Text...</p>
</div>
<div class="content" id="page-2">
    <h2>Page 2</h2>
    <p>Text...</p>
</div>
<div class="content" id="page-3">
    <h2>Page 3</h2>
    <p>Text...</p>
</div>
<script src="activatables.js" type="text/javascript"></script>
<script type="text/javascript">
activatables('page', ['page-1', 'page-2', 'page-3']);
</script>
</body>
</html>

kde q.css řídí zobrazení a odtud je i kopie části souboru (viz výše).

Moderátor Chamurappi: Vkládej kódy mezi značky [pre] a [/pre] (stačí kliknout na ).

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: