侧边栏位置

时间：2014-11-20 10:25:28

标签： html css sidebar

我试图将我的侧边栏放在我内容的右侧，但我仍然希望将它放在同一个框中＃39;。看到： enter image description here

正如你在图片中看到的那样，它位于右侧，但它不在内容中。盒子，我希望它几乎直接在我的菜单下。请帮忙。 我的代码看起来像这样（只是忽略丹麦评论，这只是注释）：

＆＃13;
＆＃13; 
  body {
    background: #98c8d7;
    width: 1000px;
    margin: auto;
    font-family: "Trebuchet ms", Verdana, sans-serif;
  }
  #header {
    background: #fff url(banner.jpg) no-repeat;
    margin: 10px 0 10px 0;
    padding: 8em 2em 1em 2em;
    text-align: center;
    border-radius: 15px;
    opacity: 0.8;
    border: 1px dotted #000
  }
  /*Dette formaterer menuen */
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  li {
    float: left;
  }
  a:link,
  a:visited {
    display: block;
    width: 312.5px;
    font-weight: bold;
    color: #000;
    background-color: #51a7c2;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid #91cfca;
    opacity: 0.8;
  }
  a:hover,
  a:active {
    background-color: #98c8d7;
  }
  #content {
    background: #b4cdd9;
    color: #000;
    padding: 1em 1em 1em 1em;
    top right bottom left
  }
  #tekst {
    background: #98c8d7;
    color: #000;
    opacity: 0.8;
    margin: 5px 0 5px 0;
    padding: 0.5em 1em 1em 1em;
    text-align: left;
  }
  #sidebar {
    background: #b4cdd9;
    color: #000;
    width: 320px;
    position: relative;
    float: right;
    margin: 5px 0 5px 0;
    padding: 0.5em 1em 1em 1em;
    text-align: left;
    border-style: outset;
    border-width: 3px;
    border-color: black;
  }
  a {
    color: #0060B6;
    text-decoration: none;
  }
  a:hover {
    color: #00A0C6;
    text-decoration: none;
    cursor: pointer;
  }
＆＃13; 
<!doctype html>

<head>
  <!-- Titel -->
  <title>IT-hjælp til ældre</title>
  <meta charset="utf-8">

  <link href="CSS sheet.css" rel="stylesheet" type="text/css" />

</head>

<body>

  <!-- Denne div indeholder dit content, altså din brødtekst -->
  <div id="content">

    <!--Header. Indeholder banner -->
    <div id="header">
    </div>

    <!-- Menu -->
    <ul>
      <li><a href="forside.html">Forside</a>
      </li>
      <li><a href="priser.html">Priser</a>
      </li>
      <li><a href="kontakt.html">Kontakt</a>
      </li>
    </ul>


    <!-- Her kommer din brødtekst så -->
    <div id="tekst">
      <h1>Overskrift 1</h1>

      <p>Her kan du skrive, hvad du tilbuder, hvorfor, hvorledes, til hvem og anden info</p>

      <!-- Overskrift to. Der er flere former for overskrifter. H1 betegner en bestemt slags, H2 en mindre slags osv. Du kan godt bruge H1 flere gange -->
      <h2>Underoverskrift 1</h2>
      <p>Her kan du måske skrive lidt om dig selv og dine kvalifikationer?</p>
      <div id="sidebar">
        <h3>Leon Laksø</h3>
        <p>Så-og-så-mange år i tjeneste, certificeret bla bla, alt muligt andet shit her. Måske et billede hvor du ser venlig ud?</p>
        <p>Mail link kunne være her?</p>
      </div>
    </div>


  </div>


</body>

</html>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

一个快速的解决方案是更改您的html结构并将侧边栏移动为div的第一个孩子#tekst：

body {
  background: #98c8d7;
  width: 1000px;
  margin: auto;
  font-family: "Trebuchet ms", Verdana, sans-serif;
}
#header {
  background: #fff url(banner.jpg) no-repeat;
  margin: 10px 0 10px 0;
  padding: 8em 2em 1em 2em;
  text-align: center;
  border-radius: 15px;
  opacity: 0.8;
  border: 1px dotted #000
}
/*Dette formaterer menuen */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
a:link,
a:visited {
  display: block;
  width: 312.5px;
  font-weight: bold;
  color: #000;
  background-color: #51a7c2;
  text-align: center;
  padding: 4px;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid #91cfca;
  opacity: 0.8;
}
a:hover,
a:active {
  background-color: #98c8d7;
}
#content {
  background: #b4cdd9;
  color: #000;
  padding: 1em 1em 1em 1em;
  top right bottom left
}
#tekst {
  background: #98c8d7;
  color: #000;
  opacity: 0.8;
  margin: 5px 0 5px 0;
  padding: 0.5em 1em 1em 1em;
  text-align: left;
}
#sidebar {
  background: #b4cdd9;
  color: #000;
  width: 320px;
  position: relative;
  float: right;
  margin: 5px 0 5px 0;
  padding: 0.5em 1em 1em 1em;
  text-align: left;
  border-style: outset;
  border-width: 3px;
  border-color: black;
}
a {
  color: #0060B6;
  text-decoration: none;
}
a:hover {
  color: #00A0C6;
  text-decoration: none;
  cursor: pointer;
}
<body>
  <!-- Denne div indeholder dit content, altså din brødtekst -->
  <div id="content">
    <!--Header. Indeholder banner -->
    <div id="header"></div>
    <!-- Menu -->
    <ul>
      <li><a href="forside.html">Forside</a>
      </li>
      <li><a href="priser.html">Priser</a>
      </li>
      <li><a href="kontakt.html">Kontakt</a>
      </li>
    </ul>
    <!-- Her kommer din brødtekst så -->
    <div id="tekst">
      <div id="sidebar">
        <!-- move it here -->

        <h3>Leon Laksø</h3>

        <p>Så-og-så-mange år i tjeneste, certificeret bla bla, alt muligt andet shit her. Måske et billede hvor du ser venlig ud?</p>
        <p>Mail link kunne være her?</p>
      </div>
      <h1>Overskrift 1</h1>

      <p>Her kan du skrive, hvad du tilbuder, hvorfor, hvorledes, til hvem og anden info</p>
      <!-- Overskrift to. Der er flere former for overskrifter. H1 betegner en bestemt slags, H2 en mindre slags osv. Du kan godt bruge H1 flere gange -->

      <h2>Underoverskrift 1</h2>

      <p>Her kan du måske skrive lidt om dig selv og dine kvalifikationer?</p>

    </div>
  </div>
</body>

答案 1 :(得分：0)

交换#tekskt和#sidebar应该是主要更改。我还为美学增加了一些余地。

以下是Live Demo的实际操作。 ：）

然后看起来像：

body {
  background: #98c8d7;
  width: 1000px;
  margin: auto;
  font-family: "Trebuchet ms", Verdana, sans-serif;
}
#header {
  background: #fff url(banner.jpg) no-repeat;
  margin: 10px 0 10px 0;
  padding: 8em 2em 1em 2em;
  text-align: center;
  border-radius: 15px;
  opacity: 0.8;
  border: 1px dotted #000
}
/*Dette formaterer menuen */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
a:link,
a:visited {
  display: block;
  width: 312.5px;
  font-weight: bold;
  color: #000;
  background-color: #51a7c2;
  text-align: center;
  padding: 4px;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid #91cfca;
  opacity: 0.8;
}
a:hover,
a:active {
  background-color: #98c8d7;
}
#content {
  background: #b4cdd9;
  color: #000;
  padding: 1em 1em 1em 1em;
  position: absolute;
}
#tekst {
  background: #98c8d7;
  color: #000;
  opacity: 0.8;
  margin: 5px 0 5px 0;
  padding: 0.5em 1em 1em 1em;
  text-align: left;
  position: relative;
}
#sidebar {
  background: #b4cdd9;
  color: #000;
  width: 320px;
  position: relative;
  float: right;
  z-index: 5;
  margin: 5px 0 5px 0;
  padding: 0.5em 1em 1em 1em;
  text-align: left;
  border-style: outset;
  border-width: 3px;
  border-color: black;
  margin: 1em;
}
a {
  color: #0060B6;
  text-decoration: none;
}
a:hover {
  color: #00A0C6;
  text-decoration: none;
  cursor: pointer;
}
<!-- Denne div indeholder dit content, altså din brødtekst -->
<div id="content">
  <!--Header. Indeholder banner -->
  <div id="header"></div>
  <!-- Menu -->
  <ul>
    <li><a href="forside.html">Forside</a>

    </li>
    <li><a href="priser.html">Priser</a>

    </li>
    <li><a href="kontakt.html">Kontakt</a>

    </li>
  </ul>
  <!-- Her kommer din brødtekst så -->
  <div id="sidebar">

    <h3>Leon Laksø</h3>

    <p>Så-og-så-mange år i tjeneste, certificeret bla bla, alt muligt andet shit her. Måske et billede hvor du ser venlig ud?</p>
    <p>Mail link kunne være her?</p>
  </div>
  <div id="tekst">

    <h1>Overskrift 1</h1>

    <p>Her kan du skrive, hvad du tilbuder, hvorfor, hvorledes, til hvem og anden info</p>
    <!-- Overskrift to. Der er flere former for overskrifter. H1 betegner en bestemt slags, H2 en mindre slags osv. Du kan godt bruge H1 flere gange -->

    <h2>Underoverskrift 1</h2>

    <p>Her kan du måske skrive lidt om dig selv og dine kvalifikationer?</p>
  </div>
</div>

答案 2 :(得分：0)

您使用的浏览器是什么？在firefox 33和chrome 38上为我工作正常。

JSFiddle

尝试清理你的漂浮物。

#tekst {
    background:#98c8d7;
    color:#000;
    opacity: 0.8;
    margin:5px 0 5px 0;
    padding:0.5em 1em 1em 1em;
    text-align:left;
    overflow: hidden; //*clears float*//
}
相关问题
最新问题