问题标签 [960.gs]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 具有 HTML、CSS 和 960.gs 的灵活全宽背景
我正在开发一组 HTML 模板的前端构建,其中设计中有一个棘手的元素。
正如您从屏幕截图中看到的那样,主导航是一个垂直列表,其中包含嵌套的链接列表,其中存在子页面和部分,因此需要菜单的高度灵活。
该设计在背景中有一组全宽条纹 - 标题、中心和从主导航下方向下。事实证明,这很难集成,因为浏览器全宽的深蓝色背景需要灵活并随着主导航高度的变化而变化。
我已经尝试从 CSS 技巧中实现以下解决方案,但它在各种版本的 IE 中引起了各种问题。
我正在考虑创建一个空白的绝对定位容器,通过 JavaScript 确定主导航的高度来设置它的高度,但我担心页面加载时布局中的跳跃以及跨浏览器兼容性。
关于如何解决这个问题的任何其他建议?
css - 我的博客上关于 960gs 和 Internet Explorer 的问题
我建立了一个新博客,它使用 Toto 和 Rails 3,它在 Chrome、Safari 和 Firefox 中运行良好。问题是 Internet Explorer 7 和 8 无法正确呈现页面。我正在使用 960gs 网格系统和一个非常简单的 CSS 标记。
如果有人能帮助我理解为什么 960gs 不能正常工作,以及网站的标题在 IE 中没有使用正确的 CSS 而其他浏览器正常工作,我将不胜感激
编辑 1:如果我使用 IE Developer Tool 并查看 HTML,我发现它没有被很好地解析,例如:
design-patterns - 960 网格,两侧有重复图案
我快疯了。我正在使用 960 网格系统创建一个网站,到目前为止一切正常 - 我确实理解它。我唯一的问题是以下,由于框架本身限制为 960 像素,我不明白如何使网站自动适应各种屏幕分辨率。这就是我的意思:我创建了一个两侧都有重复图案的网站,所以我不想让它以 960 像素结束,我希望左侧和右侧的图案能够重复。我在网站的三个不同部分有三种不同的模式。示例网站是:
http://www.assistly.com/
http://secondandpark.com/
这是一个非常基本的问题,我试图用 div 解决它,但找不到解决方案。
请注意,我对标题和分隔符使用不同的模式。
谢谢你的帮助。
约翰
css - 在 960.gs div 中垂直对齐图像?
我正在使用 960.gs,并且想要垂直对齐 IMG。我的感觉是 grid_3 的第一个 DIV 中的 IMG 不知道该行其余部分的高度(grid_6 suffix_3 的 div)。图像拥抱顶部...
一些限制:我可能不知道图像的高度。我可能不知道右侧 DIV 中内容的高度。
不求助于 javascript,什么是不会破坏 960.gs 的好方法?这是我去嵌套容器的地方,只是为了让我可以垂直居中 IMG?我试过css规则:
显然还有更多……
css - 跨浏览器的 CSS 流体网格
我正在为我们自己的一系列应用程序/门户创建一个网格系统。我们有基本的网格宽度和装订线等;但我们正在考虑让网格有点响应。考虑到这一点,我们想制作一个弹性网格系统。虽然,Ethan Marcotte 确实在他的书中巧妙地记录了响应式设计的基础知识,但他并没有考虑谈论这种方法在浏览器中的效果......叹息......
据我探索,百分比宽度(对于流畅/弹性布局至关重要)一直是 Opera + Safari 的主要痛点。这是 Opera 中普遍存在的 bug,即使是流畅的 960gs 在 Opera + safari 上也有问题。
我唯一能找到百分比宽度工作的地方是在 YUI2 中。任何 YUI 开发人员都对详细说明他们如何使百分比宽度在 Opera / Safari 上工作感兴趣?
这是一个 SOS,适用于经验丰富的开发人员和网格创建者,他们可以就变通方法/解决方案提供建议/指导,以使此类事情跨浏览器工作。
万分感谢!桑杰
html - 帮助与 960 gs 对齐
这是一些代码:
然而,“即将到来”的 id 下降了一点。文本应与该图像的顶部对齐。
将 alpha 添加到 grid_8 并将 omega 添加到 grid_4 不起作用。我怎样才能解决这个问题?
css - 使用 960 网格系统的全宽扩展 div?
在使用 960 网格系统时,如何让 div 扩展到浏览器的完整大小(无论您如何调整大小)?我只能想到这样的东西 - 但我不喜欢它,因为如果你有 container_24 的背景,那么你必须设置两次。关键是,我希望其他一切都在 container_24 下工作,甚至是完整扩展 div 中的文本。
css - 使用 960gs 的基本问题
我做了下面的工作,
结果:出现了两个左右边距为10px的盒子。
问题一:
下面不起作用,一个盒子被推到另一个盒子下面为什么?我应该怎么做才能解决它?
问题2:
使用 MarkUp 1,我在问题开始时声明我用 Google 可视化图表替换了文本,它们的行为类似于 Question1。一张图表被推到另一张图表下方。
问题 3
我是否总是必须在网格广告达到容器宽度后指定清除。例如,
问题 4
我听说clearfix的作用相同clearing
,我在哪里使用它在父容器或其中的 div 上?
960.gs - 960 CSS 框架,如何获得完整的 960 宽度?
我使用 960 css 框架。我有这个代码:
960 在网格的左侧和右侧添加了 10 像素的装订线。我想使用完整的 960 宽度。所以我读到使用 alpha 和 omega 从左侧和右侧移除 10px 排水沟。然而,这是使用 960 框架的正确方法吗?
只是似乎不应该以这种方式使用。但我不想要左右两侧的间距。