如果它工作得很好 - 然后设法弄乱它试图通过添加外部容器取出已弃用的中心标签。 我已经尝试使用相对定位,自动边距,50%边距所有内容,我发现建议。 我认为可能真正的问题是我设置了一个错误的东西,所以无论我在其他地方做什么它都行不通。 显然现在它是一个完整的集群。 真的想学习(这是我尝试从头开始构建的第一件事)所以不想只复制一个工作主题的例子 - 想弄清楚这个有什么问题。 任何建议表示赞赏
calliopecompendium.tumblr.com
CSS
<style type="text/css"> /*major elements*/ body { margin: 0; padding: 0; background:{color:Background}url('{image:Background}'); color: {color:Body text}; font-family: {font:Body}; font-size: {text:Font size}; } article { margin: {text:Post margin}; padding: 2%; width: 20%; } a { color: {color:Body links}; text-decoration: none; } iframe, img, embed, object, video { padding: 5%; max-width: 90%; overflow:hidden; } img { height: auto; width: auto; } /*id*/ /*containers*/ #container{ width:1200px; position:fixed; } #header{ width:1000px; position:relative; } #content{ width:1000px; position:relative; } #tags, nav ul, .chat ul { list-style: none; list-style-image: none; margin: 0; padding: 2px; } /*masthead*/ #masthead { background: url('{image:Masthead}'); background-repeat: no-repeat; height:350px; } #masthead img { display: block; position:absolute; top:20px; } #masthead p { position:absolute; top:300px; } /*menu*/ #menu { position:relative top: 0px; background-color:{color:Masthead menu}; width:1000px; height:36px; list-style:none; } #menu li { display: inline; } #menu li a { display: block; padding: 10px; text-decoration: none; font-weight: bold; color: #fcebb6; } #menu li a:hover { background-color: #f7d11f; color: #f08818; }Had it working nicely - then managed to mess it up trying to take out the deprecated center tags by adding an outside container. I've tried to use relative positioning, auto margins, 50% margins all the things for centering that I've found suggested. I think probably the real problem is that I set one thing wrong and so no matter what I do elsewhere it won't work. Obviously now it is a complete cluster. Really looking to learn (this is the first thing I've tried to build from scratch) so didn't want to just copy an example of a working theme - wanted to figure out what is wrong with this one. Any advice appreciated.
calliopecompendium.tumblr.com
CSS
<style type="text/css"> /*major elements*/ body { margin: 0; padding: 0; background:{color:Background}url('{image:Background}'); color: {color:Body text}; font-family: {font:Body}; font-size: {text:Font size}; } article { margin: {text:Post margin}; padding: 2%; width: 20%; } a { color: {color:Body links}; text-decoration: none; } iframe, img, embed, object, video { padding: 5%; max-width: 90%; overflow:hidden; } img { height: auto; width: auto; } /*id*/ /*containers*/ #container{ width:1200px; position:fixed; } #header{ width:1000px; position:relative; } #content{ width:1000px; position:relative; } #tags, nav ul, .chat ul { list-style: none; list-style-image: none; margin: 0; padding: 2px; } /*masthead*/ #masthead { background: url('{image:Masthead}'); background-repeat: no-repeat; height:350px; } #masthead img { display: block; position:absolute; top:20px; } #masthead p { position:absolute; top:300px; } /*menu*/ #menu { position:relative top: 0px; background-color:{color:Masthead menu}; width:1000px; height:36px; list-style:none; } #menu li { display: inline; } #menu li a { display: block; padding: 10px; text-decoration: none; font-weight: bold; color: #fcebb6; } #menu li a:hover { background-color: #f7d11f; color: #f08818; }最满意答案
你在那个页面上遇到了很多问题,这里要调试太多了。 但是,要创建一个位于中心的容器的网站,您将执行以下操作:
.container { width: 960px; margin: 0 auto; }我建议回到CodeAcademy上的CSS基础知识,这将解决你的很多问题。
You've got a lot of problems on that page, far too many to debug here. But, to start a website with a container that's in the center you would do the following:
.container { width: 960px; margin: 0 auto; }I would recommend going back over the basics of CSS on CodeAcademy, that would solve a lot of your problems.
更多推荐
发布评论