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

Я добавляю прокладку вокруг некоторого текста в два столбца div (содержимое, боковая панель). Столбец боковой панели перемещается под столбцом «Содержимое».Добавление прокладки вокруг некоторого текста в две колонки 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; 
}

источник

2012-03-10 Justin

Положите его на [jsfiddle. net] (http://jsfiddle.net). – Qtax

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

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

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

Так что я установил это за счет уменьшения боковой панели от 8 колонок до 7 колонок. Предоставление отступы достаточно места для не прыгать вниз под DIV контента.

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

источник

2012-03-10 20:35:37 Justin

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

источник

2012-03-10 02:01:43 Kinz

Только размер «y» понимается под «под». Нет перекрытия. – paislee

z-index не ограничен с -100 до +100 , http://stackoverflow.com/a/491105/870729 –

Ahh. Сожалею. Мой HTML/CSS не * свежий *. Я не использовал HTML, ни CSS, примерно через месяц. Думаю, я попытаюсь придумать ответ. Спасибо за комментарии. Узнал что-то новое^_^ – Kinz

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

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

сделать как sidebar и contentfloat:left
взять sidebar из content DIV и поместите его по своим собственным
удалить дополнительное закрытие </div>
изменение ширины в sidebar и content, вниз 10px для каждого (возможно, придется возиться с этим больше.)
использование clear:both на сноске

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

источник

2012-03-10 05:53:01

У меня нет бокового элемента div внутри содержимого div, или, по крайней мере, я не собирался его видеть. – Justin

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

ответ

Смежные вопросы