| 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 |
#2 · Zasláno: 21. 3. 2011, 07:48:17
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
). |
||
|
Časová prodleva: 13 let
|
|||
0