为什么我的包装标签不起作用？
Why does my wrapper tag not work?
我正在尝试使用包装标签创建此网站，但它不起作用，我也不知道为什么。 Dreamweaver 以某种方式说它无效，但我不知道如何。就像您查看此站点一样：http://web.toolwire.com/croganm-1003/UserInterfaceDesign/Templates/WWVS.dwt
您可以看到，当您调整 window 大小时，列不会调整高度。没关系，因为我在包装纸上有一个最小高度。但是，如果我在 maincontent 框中有文本，它就会离开页面。我想避免使用 overflow-y:auto 并使右列始终保持相同的高度，但保持在导航栏和页脚的中间，即使如果文本溢出主要内容并导致框展开（这就是我想要做的）这是我的代码：
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../Module 10/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header" style="background-image:url(../Module%2010/website_design_dpk.png); height:300px; background-size:100% 100%;">
</div>
<nav>
<ul>
<!-- TemplateBeginEditable name="Nav Bar" -->
<li><a href="../Module 10/Index.html">Home Page</a></li>
<li><a href="../Module 10/Intro.html">Introduction</a></li>
<li><a href="../Module 10/Lesson.html">Lesson</a></li>
<li><a href="../Module 10/Final.html">Final</a></li>
<!-- TemplateEndEditable -->
</ul>
</nav>
<!-- TemplateBeginEditable name="Main Content" -->
<div id="wrapper">
<div id="maincontent">
</div>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="Background image" -->
<div id="image" style="background-image: ;">
</div>
</div>
<!-- TemplateEndEditable -->
<div id="footer">
Thank you for visitng WWVS! Please remember to check your pace schedule and remember if work is not submitted every 2 weeks, you will be removed from your course!
</div>
</body>
</html>
这是我的 CSS:
/* CSS Document */
#header { /*Creates a div with a background image (created banner) and has the same
height and width as the image. The margins create a center aligned affect
while making sure there is a 10px gap between the top of the page and
the header as well as a 10px gap below the header*/
background-image: url(WWVS-Index-Header.png);
height: 320px;
width: 850px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
max-width: 100%;
background-size:100% 100%;
}
nav { /*Defines the navigation links. Left/Right auto margins make it center aligned,
text align makes all nav links centered in their box and min width makes it so
that when the page shrinks, the nav bar won't change shape and the nav div covers
the entirity of the nav bar*/
margin: 20px auto 50px auto;
min-width:500px;
text-align: center;
width:600px;;
}
#index {
margin:20px auto 150px auto;
}
#index:hover
{
margin: 20px auto 150px auto;
}
nav ul ul { /*Used to hide submenus*/
display: none;
}
nav ul li:hover > ul { /*Used to show submenus when you hover over a nav link*/
display: block;
}
nav ul { /*Creates the nav bar layout and design. Default background in case CSS3 is not
accepted. Gradient background if it is. Also have a box shadow for depth, padding
to help the list have an equal amount of room in the box, and list-style and inline
table and position help layout the table in a compact, clean fashion, and helps the
nav bar realize we want this to display as a table*/
background: #F6F6F6;
background: linear-gradient(top, #F6F6F6 0%, #A0A0A0 100%);
background: -moz-linear-gradient(top, #F6F6F6 0%, #A0A0A0 100%);
background: -webkit-linear-gradient(top, #F6F6F6 0%,#A0A0A0 100%);
box-shadow: 10px 10px 9px 3px #666;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul li {/*Horizontal table, not vertical*/
float: left;
clear:right;
position:relative;
}
nav ul li:hover {/* Changes color when you hover over list*/
background: #78818C;
background: linear-gradient(top, #78818C 60%, #5f6975 100%);
background: -moz-linear-gradient(top, #78818C 60%, #5f6975 100%);
background: -webkit-linear-gradient(top, #78818C 60%,#5f6975 100%);
}
nav ul li:hover a {/*Changes text color to white to match the dark background when you
hover over the list*/
color: #fff;
}
nav ul li a {/*Formats text. The first 2 help with spacing and layout. The last two
affect color and the removes the underline from the link*/
display: block;
padding: 25px 40px;
color: #000;
text-decoration: none;
}
nav ul ul { /*Formats sublists. Affects color as well as box shape (square). no padding
to make boxes same size as other boxes. Top and position are used to keep
the submenu right below the main menu*/
background: #5f6975;
border-radius: 0px;
padding: 0px;
position: absolute;
top: 100%;
width:100%;
}
nav ul ul li {/*Affects the actual list of words of the submenus. Keeps boxes formated and
and adds a border to submenu boxes to help readers designate those as
a subpage*/
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {/*Affects sublist links. Makes text white and give words some padding */
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {/*Changes backgrond color of sublist when you hover over it */
background: #4b545f;
}
#wrapper {
height:auto;
width:auto;
position:relative;
margin-top:20px;
margin-bottom:30px;
min-height:450px;
min-width:500px;
}
#maincontent { /*Affects the main content div. Gradient background color, box shadow,
affects size of border radius to create rounded corners, padding (fluid),
top margin to give the box room and right and bottom margin to give the box
room. Font is sans-serrif, overflow is to keep the box at a set height and
float left is to help the box stay to the left side of the page. Font
attributes to change font apperance. Width is 44% (Fluid).*/
background: #FFF;
background: linear-gradient(top, #FFF 0%, #DDD 60%);
background: -moz-linear-gradient(top, #FFF 0%, #DDD 60%);
background: -webkit-linear-gradient(top, #FFF 0%,#DDD 60%);
box-shadow: 8px 8px 15px 2px #666;
border-radius: 15px;
padding: 1% 1% 0px 1%;
margin-right: 8%;
margin-left: 3%;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 500;
text-align: center;
position: absolute;
width: 42%;
height:100%;
float:left;
clear:left;
}
#image { /*Affects image. Nearly same as main content, however there is no granite background and the float:left, clear:right makes the image appear in the same row as the
main content. */
width:42%;
height:450px;
position:absolute;
float:left;
clear:right;
margin:auto;
box-shadow: 8px 8px 15px 2px #666;
border-radius: 15px;
margin-left:0%;
padding: 1% 1% 0px 1%;
background-size: 100% 100% !important;
right: 3%;
vertical-align:middle;
}
#footer {/*Affects footer. Gradient bakcground, bold font, black text, center-aligned text,
and aligned towards the bottom. Padding gives text room while the position,
float and clear get box below images and maincontent */
background: #FFF;
background: linear-gradient(top, #EEE 0%, #CCC 100%);
background: -moz-linear-gradient(top, #EEE 0%, #CCC 100%);
background: -webkit-linear-gradient(top, #EEE 0%,#CCC 100%);
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bolder;
color: #000;
text-align: center;
vertical-align: bottom;
height: auto;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
min-height:70px;
float:left;
clear:left;
}
#footer a{ /*makes mailto: link and phone number underlined*/
text-decoration:underline;
}
任何帮助将非常感激！
请将 overflow:auto 添加到 css 中的#maincontent id。也对 css.
中的 #footer id 执行相同操作
我正在尝试使用包装标签创建此网站，但它不起作用，我也不知道为什么。 Dreamweaver 以某种方式说它无效，但我不知道如何。就像您查看此站点一样：http://web.toolwire.com/croganm-1003/UserInterfaceDesign/Templates/WWVS.dwt
您可以看到，当您调整 window 大小时，列不会调整高度。没关系，因为我在包装纸上有一个最小高度。但是，如果我在 maincontent 框中有文本，它就会离开页面。我想避免使用 overflow-y:auto 并使右列始终保持相同的高度，但保持在导航栏和页脚的中间，即使如果文本溢出主要内容并导致框展开（这就是我想要做的）这是我的代码：
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../Module 10/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header" style="background-image:url(../Module%2010/website_design_dpk.png); height:300px; background-size:100% 100%;">
</div>
<nav>
<ul>
<!-- TemplateBeginEditable name="Nav Bar" -->
<li><a href="../Module 10/Index.html">Home Page</a></li>
<li><a href="../Module 10/Intro.html">Introduction</a></li>
<li><a href="../Module 10/Lesson.html">Lesson</a></li>
<li><a href="../Module 10/Final.html">Final</a></li>
<!-- TemplateEndEditable -->
</ul>
</nav>
<!-- TemplateBeginEditable name="Main Content" -->
<div id="wrapper">
<div id="maincontent">
</div>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="Background image" -->
<div id="image" style="background-image: ;">
</div>
</div>
<!-- TemplateEndEditable -->
<div id="footer">
Thank you for visitng WWVS! Please remember to check your pace schedule and remember if work is not submitted every 2 weeks, you will be removed from your course!
</div>
</body>
</html>
这是我的 CSS:
/* CSS Document */
#header { /*Creates a div with a background image (created banner) and has the same
height and width as the image. The margins create a center aligned affect
while making sure there is a 10px gap between the top of the page and
the header as well as a 10px gap below the header*/
background-image: url(WWVS-Index-Header.png);
height: 320px;
width: 850px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
max-width: 100%;
background-size:100% 100%;
}
nav { /*Defines the navigation links. Left/Right auto margins make it center aligned,
text align makes all nav links centered in their box and min width makes it so
that when the page shrinks, the nav bar won't change shape and the nav div covers
the entirity of the nav bar*/
margin: 20px auto 50px auto;
min-width:500px;
text-align: center;
width:600px;;
}
#index {
margin:20px auto 150px auto;
}
#index:hover
{
margin: 20px auto 150px auto;
}
nav ul ul { /*Used to hide submenus*/
display: none;
}
nav ul li:hover > ul { /*Used to show submenus when you hover over a nav link*/
display: block;
}
nav ul { /*Creates the nav bar layout and design. Default background in case CSS3 is not
accepted. Gradient background if it is. Also have a box shadow for depth, padding
to help the list have an equal amount of room in the box, and list-style and inline
table and position help layout the table in a compact, clean fashion, and helps the
nav bar realize we want this to display as a table*/
background: #F6F6F6;
background: linear-gradient(top, #F6F6F6 0%, #A0A0A0 100%);
background: -moz-linear-gradient(top, #F6F6F6 0%, #A0A0A0 100%);
background: -webkit-linear-gradient(top, #F6F6F6 0%,#A0A0A0 100%);
box-shadow: 10px 10px 9px 3px #666;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul li {/*Horizontal table, not vertical*/
float: left;
clear:right;
position:relative;
}
nav ul li:hover {/* Changes color when you hover over list*/
background: #78818C;
background: linear-gradient(top, #78818C 60%, #5f6975 100%);
background: -moz-linear-gradient(top, #78818C 60%, #5f6975 100%);
background: -webkit-linear-gradient(top, #78818C 60%,#5f6975 100%);
}
nav ul li:hover a {/*Changes text color to white to match the dark background when you
hover over the list*/
color: #fff;
}
nav ul li a {/*Formats text. The first 2 help with spacing and layout. The last two
affect color and the removes the underline from the link*/
display: block;
padding: 25px 40px;
color: #000;
text-decoration: none;
}
nav ul ul { /*Formats sublists. Affects color as well as box shape (square). no padding
to make boxes same size as other boxes. Top and position are used to keep
the submenu right below the main menu*/
background: #5f6975;
border-radius: 0px;
padding: 0px;
position: absolute;
top: 100%;
width:100%;
}
nav ul ul li {/*Affects the actual list of words of the submenus. Keeps boxes formated and
and adds a border to submenu boxes to help readers designate those as
a subpage*/
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {/*Affects sublist links. Makes text white and give words some padding */
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {/*Changes backgrond color of sublist when you hover over it */
background: #4b545f;
}
#wrapper {
height:auto;
width:auto;
position:relative;
margin-top:20px;
margin-bottom:30px;
min-height:450px;
min-width:500px;
}
#maincontent { /*Affects the main content div. Gradient background color, box shadow,
affects size of border radius to create rounded corners, padding (fluid),
top margin to give the box room and right and bottom margin to give the box
room. Font is sans-serrif, overflow is to keep the box at a set height and
float left is to help the box stay to the left side of the page. Font
attributes to change font apperance. Width is 44% (Fluid).*/
background: #FFF;
background: linear-gradient(top, #FFF 0%, #DDD 60%);
background: -moz-linear-gradient(top, #FFF 0%, #DDD 60%);
background: -webkit-linear-gradient(top, #FFF 0%,#DDD 60%);
box-shadow: 8px 8px 15px 2px #666;
border-radius: 15px;
padding: 1% 1% 0px 1%;
margin-right: 8%;
margin-left: 3%;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 500;
text-align: center;
position: absolute;
width: 42%;
height:100%;
float:left;
clear:left;
}
#image { /*Affects image. Nearly same as main content, however there is no granite background and the float:left, clear:right makes the image appear in the same row as the
main content. */
width:42%;
height:450px;
position:absolute;
float:left;
clear:right;
margin:auto;
box-shadow: 8px 8px 15px 2px #666;
border-radius: 15px;
margin-left:0%;
padding: 1% 1% 0px 1%;
background-size: 100% 100% !important;
right: 3%;
vertical-align:middle;
}
#footer {/*Affects footer. Gradient bakcground, bold font, black text, center-aligned text,
and aligned towards the bottom. Padding gives text room while the position,
float and clear get box below images and maincontent */
background: #FFF;
background: linear-gradient(top, #EEE 0%, #CCC 100%);
background: -moz-linear-gradient(top, #EEE 0%, #CCC 100%);
background: -webkit-linear-gradient(top, #EEE 0%,#CCC 100%);
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bolder;
color: #000;
text-align: center;
vertical-align: bottom;
height: auto;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
min-height:70px;
float:left;
clear:left;
}
#footer a{ /*makes mailto: link and phone number underlined*/
text-decoration:underline;
}
任何帮助将非常感激！
请将 overflow:auto 添加到 css 中的#maincontent id。也对 css.
中的 #footer id 执行相同操作