Размещение CSS CSS при воссоздании сайта

Question

Размещение CSS CSS при воссоздании сайта

0

Я воссоздавать эту американскую ассоциацию Community Colleges сайта для просмотра здесь, и делал хорошо до сих пор, но столкнулся с проблемой при размещении DIV с помощью изображения (вы можете просматривать мой WIP и полный код здесь). Он специально должен иметь дело с боковой панелью. Как видно из фактической веб-страницы, между заголовком и баннером/боковой панелью есть пробел. Однако на моей веб-странице мне удалось создать границу между изображением и баннером, но боковая панель (независимо от того, что я делаю) не будет копировать фактические веб-сайты.

Я использовал дисплей: встроенный блок в моем css, и я прочитал, что при использовании этого тега любые спецификации полей будут проигнорированы. Мне было интересно, каковы будут какие-то потенциальные альтернативы, поскольку я не хочу испортить позиционирование (страница остается центрированной независимо от размера окна, и я хотел бы сохранить ее таким образом!), Поэтому я не использовал float: правый тег на div "sidebar". Любые предложения по улучшению кода будут оценены! Здесь приведен код css, если вы не хотите перейти на мою страницу и просмотреть исходный код:

#header {width:970px; height:105px; position:absolute; top: 0px; background-color:#C0C0C0;}

#navbar{text-align:right;}
#navbar a{text-decoration:none; color:#787878;}

#logoalign{vertical-align:bottom;}

#banner {float:left; display:inline-block; width:730px; padding-top:105px; margin-top:10px}

#sidebar{display:inline-block; padding-top:110px; margin-top:10 px; width: 240px; height:700px; background-color:#33FF33}

TeamRival 08 нояб. 2013, в 01:03

Источник

0

Следует также отметить, что я делаю это через Notepad ++. Мне не разрешено использовать полноценный инструмент веб-разработки.
TeamRival 07 нояб. 2013, в 23:23
0

1 / Не используйте position: absolute для макета. Никогда 2 / Используйте normalize.css или, что еще лучше, прочитайте комментарии к нему и выберите то, что вам нужно для вашего проекта. Такие вещи, как body {margin:0(...) 3 / Если элемент является плавающим, то он отображается как блок согласно спецификации CSS. Нет необходимости добавлять display: inline-block в #banner , он не будет применяться, пока он плавает. 4 / Поля не будут display: inline-block элементы display: inline-block ? Ты уверен? Вы можете проверить это сами;) На display: inline точные элементы display: inline (и display: table-cell ).
FelipeAls 07 нояб. 2013, в 23:48

Теги:

html

css

website

recreate

1 ответ

Ещё вопросы

Следует также отметить, что я делаю это через Notepad ++. Мне не разрешено использовать полноценный инструмент веб-разработки.
1 / Не используйте position: absolute для макета. Никогда 2 / Используйте normalize.css или, что еще лучше, прочитайте комментарии к нему и выберите то, что вам нужно для вашего проекта. Такие вещи, как body {margin:0(...) 3 / Если элемент является плавающим, то он отображается как блок согласно спецификации CSS. Нет необходимости добавлять display: inline-block в #banner , он не будет применяться, пока он плавает. 4 / Поля не будут display: inline-block элементы display: inline-block ? Ты уверен? Вы можете проверить это сами;) На display: inline точные элементы display: inline (и display: table-cell ).

Jake Romer · Accepted Answer · 2013-11-07T21-56-00.000Z

Я бы разместил боковые панели и баннеры div в пределах содержащего div.

#navbar{
    margin: 0px 10px;
    width: 610px;
    height: 50px; }

#content {
    margin: 10px; }

#banner {
    float: left;
    width: 400px; }

#sidebar {
    margin-left: 410px; 
    width: 200px;
    height: 500px; }

Здесь jsfiddle.

отлично, это отлично работает прямо сейчас! Я отправлю, если у меня будут вопросы. Очевидно, мне пришлось настроить все значения, чтобы они лучше подходили моему проекту, а также создал еще один контейнер, который центрирует весь контент на странице.