Неправильное форматирование CSS

Я хочу, чтобы список плавал в центре контейнера меню. Также текст в коробках под домом (это просто случайное изображение, которое я взял для демонстрации), чтобы плавать в центре коробки.Неправильное форматирование CSS

И затем я хочу, чтобы контейнер содержимого заполнил все пространство, оставшееся в большом контейнере под контейнером меню.

Это то, что я хотел бы получить: what i wanted...

И это то, что я завелся с: what i got...

Очевидно, что я понятия не имею, что я делаю. Это код: http://jsfiddle.net/krhzM/

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
ul { 
list-style:none; 
position:relative; 
} 
li { 
border: 1px solid #CCC; 
margin:5px; 
float:left; 
} 
#menucontainer { 
border: 1px solid #111; 
width: 400px; 
margin-left: auto; 
margin-right: auto; 
} 
#contentcontainer { 
width:100px; 
border: 1px solid #fac; 
} 
#bigcontainer { 
border: 2px solid #cfa; 
width: 700px; 
margin-left: auto; 
margin-right:auto; 
} 
</style> 
</head> 
<body> 
<div id="bigcontainer"> 
<div id="menucontainer"> 
<ul> 
    <li> 
    <img src="http://png-1.findicons.com/files/icons/909/archigraphs_collection/80/house.png"/> 
    <br/> 
    <a href="#">Coffee</a> 
    </li> 
    <li> 
    <img src="http://png-1.findicons.com/files/icons/909/archigraphs_collection/80/house.png"/> 
    <br/> 
    <a href="#">Tea</a> 
    </li> 
    <li> 
    <img src="http://png-1.findicons.com/files/icons/909/archigraphs_collection/80/house.png"/> 
    <br/> 
    <a href="#">Coca Cola</a> 
    </li> 
</ul> 
</div> 
<div id="contentcontainer"> 
<h1>this is my content</h1> 
</div> 
</div> 
</body> 
</html>

источник

2013-05-16 HomeIsWhereThePcIs

Пожалуйста, поместите весь код в пределах [jsFiddle] (http://jsfiddle.net) – Adrift

также, Вы пропускаете закрытия '>' на второй до последнего закрытия Div тега в теле. –

set 'li' style' display: inline-block' – tborychowski

перемещаемого высота элемента не толкать/развернуть или повлиять на высоту родительского элемента, если родительский элемент не содержит ясно в конце.

При использовании поплавков вам необходимо использовать некоторые методы clearfix в родительских контейнерах.

http://css-tricks.com/snippets/css/clear-fix/

Добавьте следующую строку в ваш CSS:

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
.clearfix { display: inline-block; } 
/* start commented backslash hack \*/ 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 
/* close commented backslash hack */

Для всех родительских контейнеров, содержащих плыли дочерние элементы, добавить класс .clearfix, как это:

<div class="clearfix"> 
    <div class="float-left">This is floated left.</div> 
    <div class="float-right">This is floated right.</div> 
</div>

В ваш случай, вы захотите добавить класс .clearfix к своему <ul> содержится в вашем #menucontainer div, так как вы плаваете теги <li>.

Если вы до сих пор путают, проверить эту демонстрацию различных сценариев, связанных с поплавки и очищает, чтобы получить лучшее понимание того, как это работает: http://themergency.com/clearfix/clearfix_demo_4_micro_clearfix.htm

источник

2013-05-16 14:33:15 Axel

Спасибо, что это помогло с частью проблемы. Однако я все еще не могу заставить меню плавать в центре или текст под картинками, чтобы плавать в центре. Это текущая версия с clearfix: http://jsfiddle.net/krhzM/2/ – HomeIsWhereThePcIs

Если вы хотите, чтобы они были центрированы, вам фактически не нужно плавать. Просто установите 'text-align: center;' на '# menucontainer' и удалите' float: left; 'из' li'. Рабочий пример: http://jsfiddle.net/krhzM/4/ – Axel

Спасибо, сэр! Возможно ли сделать всю коробку (а не только текст и изображение, но белое пространство) в ссылку? – HomeIsWhereThePcIs

Попробуйте следующий CSS: Ниже приведены 3 вещи, которые вы, возможно, пропущенный.

ul { 
    list-style:none; 
    position:relative; 
    display: inline-block; 
} 

li { 
    border: 1px solid #CCC; 
    margin:5px; 
    display: inline-block;  
} 

#contentcontainer {  
    border: 1px solid #fac; 
    text-align: center; 
}

источник

2013-05-16 14:48:19 Praveen

Неправильное форматирование CSS

ответ

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