Simple CSS Edit

У меня есть простой запрос, который я не могу опустить. У меня есть изображение, помещенное в мой «навигационный» div, и оно содержит красный квадрат &. Я создал div «content» после div «nav», куда будет идти мой контент, но он не соответствует длине изображения в предыдущем div. см. this link для более четкого изображения.Simple CSS Edit

<body> 
<div id="wrap"> 

    <div id="header"> 
     <!-- LOGO GOES HERE --> 
    </div> 

    <div id="nav"> 
     <img src="images/nav.png" width="1076" height="99" /> 
    </div> 

    <div id="content"> 
     HOW DO I ALIGN THIS DIV TO MATCH THE LENGTH OF THE WHITE BOX ABOVE? 
    </div> 

</div><!--End of wrap -->

body { 
    background-color:#d3d1d1; 
    margin:0 auto; 
} 

#wrap { 
    width:1076px; 
    margin:auto; 
} 

#content { 
    background-color:white; 

}

источник

2013-05-30 Jahed Hussain

.. придать ему такой же размер, как '.nav' – Kermit

wrap' # nav' и '# content' в новом' div # main' и присвоить ему все свойства выравнивания. – Sourabh

На #content добавить следующие свойства:

width: 1029px (I find it looks better than 1028px, but you can try both) 
margin-left: 22px

Это сделает #content окно того же размера, как пустое пространство вашего изображения, и это будет выровняйте его так, чтобы оба они начинались в одной и той же точке слева.

источник

2013-05-30 23:29:25

Я думаю, что это не удастся при изменении окна – Sourabh

Согласен, хотя прямо сейчас веб-сайт не кодируется с учетом (т. Е. Изображение имеет фиксированную ширину). Если бы они стремились сделать его изменяемым по размеру, было бы лучше использовать% для ширины вместо px, как на изображении в «nav», так и в «content». –

-1

Изменить ваш #content CSS для:

#content { 
    background-color: white; 
    margin-left: 22px; 
    width: 1028px; 
}

Как это работает: Маржа устанавливается для выравнивания по левой стороне окна содержимого. Ширина затем увеличивается до тех пор, пока она не будет соответствовать белой коробке на изображении.

EDIT Удалены ненужные левое позиционирование, как указано в комментариях

источник

2013-05-30 23:22:40 Fallexe

Почему бы просто не добавить маржу влево * и * прямо тогда ... этот подход слишком сложный с относительным позиционированием. –

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

Помещенный следующее правило на #content:

margin: 0 25px 0 22px;

Это будет по-прежнему выглядеть некрасиво, хотя с тех пор изображение имеет зубчатую мягкий край на право. Вы можете компенсировать это с границей:

#content { 
    margin: 0 25px 0 22px; 
    border-right: 1px solid #eee; 
}

источник

2013-05-30 23:22:59

Лучшая идея - удалите пустое пространство с изображения, а затем сделайте всю вещь белой. Добавьте верхний край, левый, правый и центр содержимого с использованием поля: 0 auto;

источник

2013-05-30 23:30:33 Ani

Вы имеете в виду верхний 'padding'. И идентификатор «nav», поэтому, вероятно, временное пространство белого. – Sourabh

Извините, да! Спасибо Saurabh – Ani

Но добавление пробела с использованием изображения не имеет смысла, когда вы можете легко добавить белым фоном и соответствующим образом отрегулировать. – Ani

Похоже, что ваше изображение на самом деле не центрировано. Смятых битов нет. Итак, это первая проблема, которая может отбросить мой ответ.

#content { 
    margin: 0 auto; /* this centers the div | 0 margin top/bottom auto on sides */ 
    width: 100%; 
    max-width: 1030px; /* this needs to be the exact width of your white thing in photoshop */ 
}

Это простой ответ ... Однако ... это требует, чтобы изображение вашего фотошопа было симметричным.

источник

2013-05-30 23:45:44 nouveau

Simple CSS Edit

ответ

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