Добавление отступов вокруг некоторого текста в два столбца div (контент, боковая панель). Столбец боковой панели перемещается под столбцом содержимого - PullRequest
Новая
       20

Добавление отступов вокруг некоторого текста в два столбца div (контент, боковая панель). Столбец боковой панели перемещается под столбцом содержимого

2 голосов
/ 10 марта 2012

Я добавляю отступ вокруг текста в два столбца div (контент, боковая панель). Столбец боковой панели перемещается под столбцом содержимого.

Я все еще учусь (хотя я думаю, что хотел бы думать о себе где-то между начинающим и средним).

Прямо сейчас я использую концептуальный каркас для макета. У меня есть столбец контента в 15 и столбец боковой панели в 8. Каждый раз, когда я пытаюсь добавить отступы на правой стороне каждого DIV, это заставляет боковую панель перемещаться под контентом.

Единственное исправление, которое я смог найти, - установить ширину столбца боковой панели и заставить его плавать вправо.

Я думал, что цель Blueprint в том, чтобы мне не нужно было ничего устанавливать для столбцов, просто добавьте класс столбца в каждый div, который в этом нуждается?

Вот скрипка: jsfiddle

Вот мой 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" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>CogRobot Studios</title>
    <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/screen.css" />
    <!--[if IE]>
     <link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection">
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="stylesheets/cogrobot.css" />
  </head> 

  <body>
    <div id="wrap" class="rounded-corners container">
    <div id="header" class="rounded-corners column span-24 last">
      <img src="images/header.gif" alt="Starbuzz Coffee header image" />
    </div>

    <div id="content" class="column span-15 colborder last">
      <h1>Lorem ipsum dolor sit amet</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros. 
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros. 
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros. 
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros. 
      </p>

    </div>

    <div id="sidebar" class="column span-8 last">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. 
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. 
      </p>

    </div>

    <div class="rounded-cornersbottom" id="footer">
      &copy; 2005, Lorem ipsum dolor sit amet.
      <br />
      All trademarks and registered trademarks appearing on 
      this site are the property of their respective owners.
    </div>
    </div>

  </body>
</html>

Вот мой CSS: 

#wrap{
    position: relative;
    top: 100px;

    }

    body { 
  /* background-color: #b5a789;*/
  font-family:      Georgia, "Times New Roman", Times, serif;
  font-size:        small;
  margin:           0px;
}

    p, ul, li, h1, h2, h3, h4 {
    margin: 0;
}

    h3 {
    margin: 0 0 20px 0;
    padding: 0 0 5px 0;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}

    #header {
  background-color: #838383;
  width:            950px;
  height:           150px;
}

    #content{
 background:       #c8c8c8;
 font-size:        105%;
 padding: 20px 20px 20px 20px;
 margin: 0;
 width: 590px;

}

    #sidebar {
  float: right;
  background:       #c8c8c8;
  font-size:        105%;
  padding: 20px 20px 20px 20px;
  margin: 0;
  width: 260px;
}

    #footer {
  background-color: #838383;
  color:            #c8c8c8;
  text-align:       center;

  font-size:        90%;
  clear:            left;
}

    h1 {
  font-size:        120%;
  color:            #954b4b;
}

    h2 { 
    font-size: 110%; 
}

    .slogan { 
    color: #954b4b; 
}

    .beanheading {
  text-align:       center;
  line-height:      1.8em;
}

    a:link {
  color:            #b76666;
  text-decoration:  none;
  border-bottom:    thin dotted #b76666;
}
    a:visited {
  color:            #675c47;
  text-decoration:  none;
  border-bottom:    thin dotted #675c47;
}

    .rounded-corners {
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;

    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;

    -khtml-border-radius: 20px;
}

    .rounded-cornersbottom {
    -moz-border-radius-bottomleft: 20px;
    -moz-border-radius-bottomright: 20px;

    -webkit-border-bottom-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;

    -khtml-border-radius: 20px;
}

Ответы [ 3 ]

0 голосов
/ 10 марта 2012

Я понятия не имею о Blueprint .

Тем не менее, я сделал следующее, и, похоже, это работает так, как я думаю, вы хотите

  1. makeи sidebar, и content float:left
  2. извлекают sidebar из content div и помещают его в свой собственный
  3. , удаляют дополнительное закрытие </div>
  4. изменить ширину sidebar и content, уменьшив на 10px для каждого (вам может понадобиться возиться с этим больше.)
  5. использовать clear:both в нижнем колонтитуле

Пример: http://jsfiddle.net/5q8Xm/3/embedded/result/

0 голосов
/ 11 марта 2012

Думаю, я понял, как решить проблему, или, вернее, я понял, почему все так плохо.

Поскольку я немного заржавел в HTML и CSS, я забыл, что отступы увеличивают размер элемента. Итак, так как у меня был настроенный план, чтобы дать всему макету 24 столбца, я подумал, что было бы неплохо дать контенту div 15 столбцов и боковую панель div 8. Таким образом, давая 1 пространство между столбцами содержимого и боковая панель дел.

Поэтому, когда я добавил отступы вокруг текста, он увеличил div (по крайней мере, насколько я понимаю.

)

Итак, я исправил это, уменьшив боковую панель с 8 до 7 столбцов. Предоставление отступу достаточно места, чтобы не спрыгнуть под div содержимого.

Надеюсь, это хорошее решение, если есть более эффективный / правильный способ сделать это, я бы хотел услышать.

0 голосов
/ 10 марта 2012

Вы можете попробовать , установив z-index элемента, на котором вы хотите быть Топ. z-index изменяется от -100 до +100, поэтому у вас есть много места для подходят элементы.

...