Question

我有兴趣将调查（使用调查猴子）放入网站。我希望它作为左侧的侧栏处于固定位置并缩小调查框的大小。我根本不太了解CSS。

    <!DOCTYPE html>
<html dir='ltr' lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
    <div>
 <head>
    <title>
      Home
       | qfo4produce
    </title>
    <meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
    <link href='css/inuit.css' media='all' rel='stylesheet'>
    <link href='css/grid.inuit.css' media='all' rel='stylesheet'>
    <link href='css/style.css' media='all' rel='stylesheet'>
  </head>
  <body class='wrapper'>
    <div id='header'>
      <a href='index.html' rel='home'>
        <img src='images/banner.png' alt="" title='Home'>
      </a>
</div>

       <div>
    <style type="text/css">
 body{
  margin:0;
  padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
 }
 div#left-sidebar{
  position:fixed;
  top:0;
  left:-30;
  iframe { width: 250px !important; }
  height:100%;
 }
 </style>
     <div id="surveyInfo"> <div><script src="http://www.surveymonkey.com/jsEmbed.aspx?sm=wtvL1HViBjWad5DOwtqu7A_3d_3d"> </script> 
</div>
    <ul class='nav'>
      <li class='first'>
        <a href='what-is-qfo.html' title='What Is QFO?'>What Is QFO?</a>
      </li>
      <li>
        <a href='team.html' title='Team'>Team</a>
      </li>
      <li>
        <a href='examples.html' title='Examples'>Examples</a>
      </li>
      <li>
        <a href='technology.html' title='Technology'>Technology</a>
      </li>
      <li class='last'>
        <a href='mailto:info@franwell.com' title='Contact'>Contact</a>
      </li>
    </ul>
    <a class='login' href='qfo.aspx.html' title='Login'>Login</a>
    <div id='main'>
      <p>
        <img src='images/summary.png' alt="Summary of QfO Process" />
      </p>
    </div>
     Copyright &copy; 2011
    </div>
  </body>
</html>

Answer 1

我认为你必须像这样创建一个表格布局

<table width ="100%">
<tr><td></td> </tr>
<tr ><td rowspan="3"></td></tr>
your monkey servey here
<tr><td>nav content</td></tr>
<tr><td> main content</td></tr>
</table>

Answer 2

您所询问的内容以及您提供的代码非常不清楚。如果你是html / css的新手，那么绘制图片而不是试图用文字解释它通常会有所帮助。

以下是侧边栏位于左侧固定位置的示例。固定意味着它将始终存在，无论页面滚动到何处。

http://jsfiddle.net/Bceat/

不要在其他CSS声明中进行CSS声明。他们应该各自独立。

/* BAD */
div#left-sidebar{
    position:fixed;
    iframe { width: 250px !important; } 
 }

/* GOOD */
div#left-sidebar {
    position:fixed;
}
iframe { width: 250px !important; }

您还在html的正文中声明了自己的样式。不要那样做。在<head></head>标记之间声明样式。

/* BAD */
<head>
</head>
<style type="text/css">
 body{
  margin:0;
  padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
 }
 div#left-sidebar{
  position:fixed;
 }
 </style>

/* GOOD */
<head>
  <style type="text/css">
   body{
    margin:0;
    padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
   }
   div#left-sidebar{
    position:fixed;
   }
   </style>
</head>

您还有一些无效的声明，例如：

/* right-sidebar-<length> means nothing */
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;

我知道你是新手，但你将不得不阅读html和css的基础知识。这将允许你做两件事。一个是使用其他开发人员将理解的语言提出问题。第二个是至少提供格式正确的代码。这样即使您的术语不正确，您的代码也可以为您说话。现在你没有得到任何答案，因为一切都很乱。

CSS调整大小/定位

2 个答案: