CSS翻转，指定宽度？ [英] CSS Rollovers, Specified Width?

问题描述

好的，我放弃了！


我正在尝试将JavaScript翻转按钮脚本转换为CSS。它的背景颜色和字体颜色由当前页面组成

显示结束字样。州。我理解基础知识并且已经完成了一个看起来很好并且功能正常的导航栏。


然而，我的客户对布局非常挑剔并要求

导航栏是一个特定的宽度，按钮均匀分布在

宽度上，但每个按钮的宽度不等。


例如：


|主页|联系|常见问题|联系我们|注册|


使用表格和JS，我可以指定每个按钮的宽度来填充

宽度。但是，我无法在CSS中看到这样做的方法。填充将

扩展每个按钮的宽度但不完全是我需要的宽度和

IE和Firefox中显示的宽度不同（Firefox是

更宽）。我可以将样式添加到表格中，然后单元格会亮起来，但

只能在文本上点击（当然！）。


任何帮助都会非常感谢！

解决方案

2005年2月4日星期五16:26:21 -0800 Tyrone Slothrop写道：

好的，我放弃了！
我正在尝试将JavaScript翻转按钮脚本转换为CSS。它由背景颜色和字体颜色组成，当前页面显示结束。州。我了解基础知识，并且已经完成了一个看起来很好且功能齐全的导航栏。
但是，我的客户对布局非常挑剔，要求
导航栏是特定宽度，按钮均匀分布在宽度上，但每个按钮的宽度不相等。
例如：


||主页|联系|常见问题|联系我们|注册|

使用表格和JS，我可以指定每个按钮的宽度来填充
宽度。但是，我无法在CSS中看到这样做的方法。填充将扩展每个按钮的宽度，但不完全是我需要的宽度，并且IE和Firefox中的显示宽度不同（Firefox更宽）。我可以将样式添加到表格中，然后单元格会亮起，但
只能在文本上点击（当然！）。
非常感谢任何帮助！

你试过< div onclick =" dothis"> ??

如果你正在使用< a href ="＃"的onclick = QUOT; dothis">文字< / A>然后是的，只有

文本是可点击的。

2005年2月4日星期五16:26:21 -0800，Tyrone Slothrop< [e-mail]>写道：

好的，我放弃了！


不幸的是，尽管你描述了你想要完成的效果，但你做了

没有解释你是如何尝试这个的。也许一个URL会有所帮助。

|主页|联系|常见问题|联系我们|注册|

[联系方式]和[联系我们]之间有什么区别我可以问一下吗？


无论如何，加价：


< div id =" nav">

< ul>

< li>< ; a href =" home.html">主页< / a>< / li>

< li>< a href =" contact.html">联系< / a>< / li>

< li>< a href =" faqs.html"> Faq'< / a>< / li>

< li>< a href =" Contact-us.html">联系我们< / a>< / li>

< li>< a href = " sign-up.html">注册< / a>< / li>

< / ul>

< / div>


样式：


div，ul，li {

填充：0;边距：0;边框：0; }


div {

宽度：35em; / *菜单项为他们设置的宽度* /

保证金：0自动; / *如果想要居中* /}

ul {

text-align：center; }


li {

float：left;

宽度：7em; / *什么你需要它们* /}


a，a：链接，a：访问{

显示：块;

宽度：100％;

/ *其他款式，如颜色，边框和背景* /

颜色：黄色;

背景：黑色;

border：outset .2em grey; }


a：悬停，a：焦点，a：活跃{

显示：阻止;

宽度：100％;

/ *其他特定于具有焦点等的菜单项的样式，

喜欢颜色，边框和背景* /

颜色：黑色;

背景：黄色;

border：outset .2em orange; }


未经测试，但可能有效。


-

， - - < - - @ - PretLetters：''woest wyf''，遇见了vele interesses：----------。

|博客| http://home.wanadoo.nl/b。 de.zoete / _private / weblog.html |

| webontwerp | http://home.wanadoo.nl/b。 de.zoete / html / webontwerp.html |

| zweefvliegen | http://home.wanadoo.nl/b。 de.zoete / html / vliegen.html |

` --------------------------- ----------------------- - < - @ ------------''

2005年2月5日星期六10:55:20 +0100，Barbara de Zoete< b _ ******** @ hotmail.com>

写道：

2005年2月4日星期五16:26:21 -0800，Tyrone Slothrop< [e-mail]>写道：

|主页|联系|常见问题|联系我们|注册|

同时我已经在

< http：// home中提供了一个实例。 wanadoo.nl/b.de.zoete/_test/voorbeeld_horizo​​ntaal-menu.html> ;.可以

对你有用。

-

， - - < - @ - PretLetters：''woest wyf''，遇见了vele interesses：----------。

|博客| http://home.wanadoo.nl/b。 de.zoete / _private / weblog.html |

| webontwerp | http://home.wanadoo.nl/b。 de.zoete / html / webontwerp.html |

| zweefvliegen | http://home.wanadoo.nl/b。 de.zoete / html / vliegen.html |

` --------------------------- ----------------------- - < - @ ------------''

OK, I give up!

I am trying to convert a JavaScript rollover button script to CSS. It
is composed of background colors and font colors with the current page
displaying the "over" state. I understand the basics and have
accomplished a navigation bar that looks good and is functional.

However, my client is very fussy about layout and requires that the
nav bar be a specific width, with the buttons spreading across that
width evenly, but each button not of an equal width.

For example:

| Home | Contact | Faq''s | Contact Us | Sign Up |

With tables and JS, I can specify a width for each button to fill that
width. However, I cannot see a way to do this in CSS. Padding will
expand the width of each button but not exactly the width I need and
the width is different between displays in IE and Firefox (Firefox is
wider). I can add the styles to the table and the cell lights up, but
is clickable only over the text (of course!).

Any assistance would be most appreciated!

解决方案

On Fri, 04 Feb 2005 16:26:21 -0800 Tyrone Slothrop wrote:

OK, I give up! I am trying to convert a JavaScript rollover button script to CSS. It
is composed of background colors and font colors with the current page
displaying the "over" state. I understand the basics and have
accomplished a navigation bar that looks good and is functional. However, my client is very fussy about layout and requires that the
nav bar be a specific width, with the buttons spreading across that
width evenly, but each button not of an equal width. For example:
|| Home | Contact | Faq''s | Contact Us | Sign Up |
With tables and JS, I can specify a width for each button to fill that
width. However, I cannot see a way to do this in CSS. Padding will
expand the width of each button but not exactly the width I need and
the width is different between displays in IE and Firefox (Firefox is
wider). I can add the styles to the table and the cell lights up, but
is clickable only over the text (of course!). Any assistance would be most appreciated!

have you tried <div onclick="dothis">??
If you''re using <a href="#" onclick="dothis">text</a> then yeah, only the
text is clickable.

On Fri, 04 Feb 2005 16:26:21 -0800, Tyrone Slothrop <[e-mail]> wrote:

OK, I give up!

Unfortunately, though you describe _the effect_ you wish to accomplish, you do
not explain how you tried this. Maybe a URL would be helpful.
| Home | Contact | Faq''s | Contact Us | Sign Up |

What is the difference between [Contact] and [Contact Us] may I ask?

Anyway, Markup:

<div id="nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="faqs.html">Faq''s</a></li>
<li><a href="Contact-us.html">Contact Us</a></li>
<li><a href="sign-up.html">Sign Up</a></li>
</ul>
</div>

Styles:

div, ul, li {
padding:0;margin:0;border:0; }

div {
width:35em; /*menu items times width set for them*/
margin:0 auto; /*if wanted centerd*/ }

ul {
text-align:center; }

li {
float:left;
width:7em; /*what ever you need them to be*/ }

a, a:link, a:visited {
display:block;
width:100%;
/*other styles, like colors, borders and backgrounds*/
color:yellow;
background:black;
border:outset .2em grey; }

a:hover, a:focus, a:active {
display:block;
width:100%;
/*other styles specific for menu item that has focus et cetera,
like colors, borders and backgrounds*/
color:black;
background:yellow;
border:outset .2em orange; }

Not tested, but might work.

--
,-- --<--@ -- PretLetters: ''woest wyf'', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------''

On Sat, 05 Feb 2005 10:55:20 +0100, Barbara de Zoete <b_********@hotmail.com>
wrote:

On Fri, 04 Feb 2005 16:26:21 -0800, Tyrone Slothrop <[e-mail]> wrote:

| Home | Contact | Faq''s | Contact Us | Sign Up |

Meanwhile I''ve put up a live example at
<http://home.wanadoo.nl/b.de.zoete/_test/voorbeeld_horizontaal-menu.html>. Could
be of use to you.
--
,-- --<--@ -- PretLetters: ''woest wyf'', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------''

这篇关于CSS翻转，指定宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！