-1

私は Web サイトを開発していますが、コンテナー クラスにスライダーを追加した場所に行き詰まりました。

サイドバーに margin-top を追加すると、すべてのタグが margin-top になります。

この問題を解決するにはどうすればよいですか?

ここに私のHTMLコードがあります:

<body>

<nav class="cf">
    <ul>
        <li><a href="#" class="current">Home</a> </li>
        <li><a href="#">About</a> </li>
        <li><a href="#">Services</a> </li>
        <li><a href="#">Porfolio</a> </li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
<div id="container">


        <div class="info1">
                <img src="images/infoicon1.png" alt="icon1">
                <h1>Best services</h1><br>
                <p>We offer you best web solutions for business.</p>
        </div>
<div class="info2">
                <img src="images/infoicon2.png" alt="icon1">
                <h1>Cloud System</h1><br>
                <p>Be unique !! Get cloud system for your business.</p>
        </div>
        <div class="info3">
                <img src="images/infoicon3.png" alt="icon1">
                <h1>Contact us</h1><br>
                <p>Start improving your online business.</p>
        </div>


<div id="s3slider">
<ul id="s3sliderContent">
    <li class="s3sliderImage">
        <img src="wide/6.jpg">
        <span>Your text comes here</span>
    </li>
    <li class="s3sliderImage">
        <img src="wide/2.jpg">
        <span>Your text comes here</span>
    </li>
    <div class="clear s3sliderImage"></div>
</ul>

そして、ここに私のcssコードがあります

body {
  background: #ffffff;
  font-family: 'Open Sans', sans-serif;
  font-size: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0;

nav {
   background: #333333;
  height: 60px;
  margin-top: 8%;
    }
nav ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;   
  position: absolute;
  left: 30%;}

nav ul li {
  float:left;
  display: inline;
  font-size: 120%;
  padding:16px;
}
nav ul li a {
  color: #ffffff;
  text-decoration: none;
  display: inline-block;}

nav a:link, nav a:visited { 
  color: #ffffff;
  height:60px;}

#container {
  position: relative;
  width: 80%;
  left: 10%;}


#mainHeader {
  margin-top: 1%;
  display: block;}

.info1 {
  position: absolute;
  background: #0088cc;
  width: 30%;
  border-radius: 9px;}

.info1 img {
  width: 30%;
  height: 0 auto;
  float:left;
  margin-top: 1%;}`.info1 h1 {
  float:left;
  margin-top: 1%;
  color: #ffffff;
  margin-left: 8%;`

.info1 p {
  float:left;
  width: 60%;
  margin: 0;
  margin-bottom: 1%;
  padding-left: 3%;}

#s3slider {
  width:98%; /* important to be same as image width */
  height: 300px; /* important to be same as image height */
  position: relative; /* important */
  overflow: hidden;} /* important */



#s3sliderContent {
  width: 98%; /* important to be same as image width or wider */
  position: absolute; /* important */
  top: 0; /* important */
 margin-left: 0; /* important */`

  .clear {
     clear: both;}

例： リンク！

4

1 に答える 1

0

.info1はよりもand をposition: absolute;使用display:inline-block;したほうがよいためです。それでも絶対に配置したい場合。/を与える.info1 h1.info1 pfloat:left;nav.info1margin-bottom: height-of-info1;

より良い解決策のためにフィドルを作成してください。

于 2013-04-25T00:53:03.943 に答える