使用在创建CSS菜单类
我有一个使用表格布局的一个网站的页面,我试图将其转换为CSS(之前从未使用过)使用在创建CSS菜单类
导航是6种形式与除放置不同的图像。我知道我可以给每个这些使用css的id和位置,但必须有一个不太笨拙的方式?
我在想,如果我可以创建一个类指定相对于以前的链接位置链接位置,也许手动设置的第一个?
谢谢:)
尝试div.classname { float: left; width: 200px }
,给容器对象中的相同或不同的宽度 - 实验,直到你满意
虽然jimplode不会同意我的意见,表仍然是一个有效的元素在HTML中。你甚至可以用DIV
使用CSS样式display: table
(see quirksmode for browser compatibility)来模拟它们。所以除非设计是一个维护噩梦,或者有其他一些真正迫切的理由来改变布局,否则保留它。
获得大多数浏览器CSS的权利可以是一个噩梦,特别是如果你需要一些“特殊”。用相同的(自动)高度说出同一行上的几个元素。
如果你是新来的CSS,寻找工作的实例,并开始修改。
如果你这样做是对公共网站,让Firefox 3中,铬,歌剧,IE6,IE7和IE8,并与他们每个人的测试。
这是使用表格的当前布局的图像。这很简单,但我可以在css上找到关于多列的所有信息。我想我只需要一个?也许两个div? – sarconi 2010-10-26 14:37:37
下面是使用表中的当前的布局的图像。这很简单,但我可以在css上找到关于多列的所有信息。我想我只需要一个?也许两个div?
img208.imageshack.us/img208/7038/layoutsz.png
您可以编辑您的问题以添加其他信息。 (您不必为此写回答。) – 2010-10-26 15:00:17
纯粹主义者会说,表应只用于表格数据。你的网站不是表格数据,而是布局,所以在这里使用表格是一种破解。如果它能够正常工作,它就是一个非常好的黑客技术,但它最终可能不是最干净的解决方案。
我的务实的部分(这比我的标准纳粹大很多)说,有可能是使用CSS一个更简洁的方法。这可以消除需要用不必要的表格来消除你的来源。你真的有两个部门,每个部门的段落都包含图片,链接和文字。如果你的HTML不必包含任何内容,那将是理想的。
如果使用CSS好,你可以得到正是结果:
http://www.aharrisbooks.net/demo/sample.html
使用 '查看源文件',查看HTML和CSS代码。
的几个注意事项:
- 我用了“字段集”元素(这是应该的形式使用,但它还有在这里工作)
- 我猜对颜色
- 修改CSS以获得您正在寻找的效果
- 我(显然)只使用一个图标,但相同的效果将适用于整个页面
- 只需要一个div(即使这不是必需的,但它中心内容看起来不错在页
我喜欢这个设计是如何干净的HTML保持。
祝您好运,如果您有任何问题,请放下一行。
PS更多的乐趣,下面的CSS3语法添加到字段集
box-shadow: 5px 5px 5px #333;
border-radius: 10px;
-moz-box-shadow: 5px 5px 5px #333;
-moz-border-radius: 10px;
-webkit-box-shadow: 5px 5px 5px #333;
-webkit-border-radius: 10px;
这些属性添加圆角和阴影了很不错的效果。它在IE中不起作用,但最近的其他浏览器(Safari,Chrome,Firefox和大多数移动浏览器)将会看到非常好的效果。耶为CSS3!
+1简单的解决方案,无需工作表。 – 2010-10-27 12:00:37
你在这里问一个非常普遍的问题 - 如何使用CSS - 这种格式无法被回答。请给出一个更具体的例子,描述该网站的结构和当前标记 – 2010-10-26 13:33:54
恭喜你用合适的分区和表示CSS来替换你的表格。你最好从头开始标记,因为试图从一个事物转换到另一个事物,尤其是从表格开始非常耗时。 – jimplode 2010-10-26 13:35:59