CSS布局:Div';在div中的s等
所以我的CSS布局很好,直到我想在我的网页的内容区域添加一些内容 我试图添加到内容部分的是一个包装框,它在左侧包含一个图形,在右侧包含一堆小信息框,并且在这两个框下面可能有一个信息区域,内容框的宽度为100% 但一旦我把它加进去,它就会把我的用户信息div推到内容下面所以我想问题是如何在我的内容部分中创建div容器,而不会影响边栏之类的东西 这是我的密码:CSS布局:Div';在div中的s等,css,layout,html,Css,Layout,Html,所以我的CSS布局很好,直到我想在我的网页的内容区域添加一些内容 我试图添加到内容部分的是一个包装框,它在左侧包含一个图形,在右侧包含一堆小信息框,并且在这两个框下面可能有一个信息区域,内容框的宽度为100% 但一旦我把它加进去,它就会把我的用户信息div推到内容下面所以我想问题是如何在我的内容部分中创建div容器,而不会影响边栏之类的东西 这是我的密码: <div id="wrapper"> <div id="header"&g
<div id="wrapper">
<div id="header"> </div><!-- #header-->
<div id="nav"> </div>
<div id="middle">
<div id="container">
<div id="content"><!-- content -->
<div id='containerGraph'>
<div id='sngAnimals'></div>
<div id='graph'><img src='./lib/pChart2.1.1/examples/chartAnimalKillsPerDay.php' width='x' height='y' id='graphImg'/></div>
<div id='bottomCont'></div></div>
</div><!-- #content-->
</div><!-- #container-->
<div class="sidebar" id="sideLeft">
User info
</div><!-- .sidebar#sideLeft -->
</div><!-- #middle-->
</div><!-- #wrapper -->
您没有关闭div,CSS也有错误:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="A short description." />
<meta name="keywords" content="put, keywords, here" />
<title>CraftLink</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="wrapper">
<div id="header">HEADER CONTENT</div><!-- #header-->
<div id="nav">
<a href="#">Nav item 1</a>
<a href="#">Nav item 2</a>
<a href="#">Nav item 3</a>
<a href="#">Nav item 4</a>
</div>
<div id="middle">
<div id="container">
<div class="sidebar" id="sideLeft">USER INFO GOES HERE.</div><!-- .sidebar#sideLeft -->
<div id="content"><!-- content -->
<div id='containerGraph'>
<div id='sngAnimals'></div>
<div id='graph'><img src='./lib/pChart2.1.1/examples/chartAnimalKillsPerDay.php' width='x' height='y' id='graphImg'/></div>
<div id='bottomCont'></div>
</div>
</div><!-- #content-->
</div><!-- #container-->
</div><!-- #middle-->
</div><!-- #wrapper -->
<!-- #footer -->
<div id="footer">
<h1>Footer Stuff</h1>
</div>
</body>
</html>
我一直很讨厌很多预构建的专栏布局,它们失败得很糟糕。嘿,我想预构建的布局会有多糟糕?实际上只有几列有标题的专栏,我猜我错了。关于如何修复它有什么建议吗?如果你没有注意到的话,CSS不是我的强项。它可能很简单,也可能不是。如果您可以将问题隔离为几行HTML/CSS,您的问题肯定会更容易解决。要做到这一点,就把所有不能解决你问题的东西都去掉,直到你有一个最小的例子仍然没有解决。我不确定我是否理解你的意思。我相信问题在于ContainerGraph div的CSS及其内容。我所希望做的就是将它包含在content div中,而不影响侧边栏。我的意思是,您可以执行与我相同的操作--尝试隔离问题。你刚刚在这里发布了你的整个页面,我不是想粗鲁,但这要求太多了。在调试时,我们所有人都会遵循一个非常常见的过程,即将问题简化为最简单的复制,然后在剩下的部分上更改参数,直到它工作为止。您应该使用验证器,谢谢,我要去一个角落为丢失一个花括号而哭泣。我认为未关闭的DIV是一个打字错误,当我把它放进去的时候,所以,至少那是…。别难过,这会让每个人在一开始,并会回来困扰你,即使你成为一名专家。而且,这真的很有趣。每次我在工作中遇到HTML问题时,设计人员总是会问:“你关闭了部门吗?”我会回答,“该死,就是这样!”事实证明,这是问题的一半。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="A short description." />
<meta name="keywords" content="put, keywords, here" />
<title>CraftLink</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="wrapper">
<div id="header">HEADER CONTENT</div><!-- #header-->
<div id="nav">
<a href="#">Nav item 1</a>
<a href="#">Nav item 2</a>
<a href="#">Nav item 3</a>
<a href="#">Nav item 4</a>
</div>
<div id="middle">
<div id="container">
<div class="sidebar" id="sideLeft">USER INFO GOES HERE.</div><!-- .sidebar#sideLeft -->
<div id="content"><!-- content -->
<div id='containerGraph'>
<div id='sngAnimals'></div>
<div id='graph'><img src='./lib/pChart2.1.1/examples/chartAnimalKillsPerDay.php' width='x' height='y' id='graphImg'/></div>
<div id='bottomCont'></div>
</div>
</div><!-- #content-->
</div><!-- #container-->
</div><!-- #middle-->
</div><!-- #wrapper -->
<!-- #footer -->
<div id="footer">
<h1>Footer Stuff</h1>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
background-image:url('/mcimages/bg.png');
}
a {
color: white;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
color: white;
}
/* Header
-----------------------------------------------------------------------------*/
#header {
height: 100px;
background: #999999;
text-align: center;
font-size: 200%;
}
#nav {
height: 25px;
background: #555555;
text-align: center;
}
/* Middle
-----------------------------------------------------------------------------*/
#middle {
width: 100%;
padding: 0 0 100px;
height: 1%;
position: relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#container {
width: 100%;
float: left;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
#content {
padding: 10px 0 10px 195px;
background: #666666;
}
#containerGraph {
border-style:solid;
border-width:5px;
width: 75%;
position:relative;
}
#graph {
width: 249px;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:left;
}
#sngAnimals {
width:50%;
height: 210px;
border-style:solid;
border-width:5px;
position: relative;
float:right;
}
#bottomCont{
position: relative;
clear:both;
}
/* Sidebar Left
-----------------------------------------------------------------------------*/
#sideLeft {
float: left;
width: 175px;
position: relative;
margin-top: 10px;
padding-left: 5px;
padding-top: 10px;
border-right-style: solid;
border-right-color: black;
border-right-width: 1px;
}
#friend {
float: left;
background: #B5AAFF;
border:1px solid;
position: relative;
top:5px;
left:0px;
margin-left:10px;
width:175px;
height:175px;
}
/* Footer
-----------------------------------------------------------------------------*/
#footer {
width: 1000px;
margin: -100px auto 0;
height: 100px;
background: #BFF08E;
}
/* Progress bar
----------------------------------------------------------------------------*/
.meter-wrap{
position: relative;
}
.meter-wrap, .meter-value, .meter-text {
/* The width and height of your image */
width: 155px; height: 30px;
}
.meter-wrap, .meter-value {
background: #3D352A url(/path/to/your-image.png) top left no-repeat;
}
.meter-text {
position: absolute;
top:0; left:0;
padding-top: 5px;
color: #fff;
text-align: center;
width: 100%;
}