Jump to content
  • 0

Проблемы с трехколоночным макетом

compik

Asked by compik,

 Share

Question

compik Explorer

compik

Posted
Posted

Уважаемые гуру! уже несколько дней бьюсь с трехколоночным макетом.. Не могу сделать так, чтоб 3-я колонка поднялась вверх. Её что-то опускает вниз. Напишите в какую сторону копать.. Спасибо!

 

index.html

<html><header><link rel="stylesheet" type="text/css" href="style.css"></header><body><div id="main"> <div id="header">Header<div id="menu">Menu</div> </div><div id="clear"> </div><div id="wrap"><div id="left_col">left</div><div id="slideshow">Slideshow</div> <div id="content">Content</div><div id="right_col">Right</div></div><div id="clear"> </div><div id="news">News</div><div id="search">Search</div><div id="clear"> </div><div id="footer">Footer</div></div></body></html>

style.css

body {	background: lightblue;}#main {	margin: 0 auto;	width: 1000px;}#header{	width: 996px;	height: 130px;	background-color: #FFF;	border: 2px solid black;}#menu {	width: 650px;	height: 40px;	background-color: yellow;	float: right;	margin-top: 10px;	margin-right: 10px;	border: 2px solid black;}#wrap {	background: #FFF;	overflow: hidden;}#left_col {	width: 215px;	float: left;	padding-left: 5px;	background-color: #FFF;	border: 2px solid black;	}#slideshow {	height: 250px;	background-color: #FFF;	margin: 0 207px 3px 227px;	padding-left: 5px;		border: 2px solid black;}#content {	background-color: #FFF;	margin: 0 207px 0 227px;	padding-left: 5px;		border: 2px solid black;}#right_col {	width: 195px;	float: right;	padding-left: 5px;		background-color: #FFF;	border: 2px solid black;}#news {	width: 680px;	min-height: 100px;	float: left;	padding-left: 5px;	background-color: #FFF;	border: 2px solid black;	}#search {	width: 299px;	min-height: 100px;		float: right;	padding-left: 5px;	background-color: #FFF;	border: 2px solid black;	}#footer {	background-color: #FFF;	width: 996px;	height: 70px;	border: 2px solid black;	}#clear {	clear: both;	margin-bottom: 3px;}
Link to comment
Share on other sites

19 answers to this question

Recommended Posts

  • 0
Mugen1 Explorer

Mugen1

Posted
Posted (edited)

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

Для этого сделай единственную вещь

 

*{
box-sizing:border-box;

}

 

Ширину всех колонок не считал если  она больше намного 1000px то заного ширину задавай, чтоб уложиться в 1000Px

Для кроссбраузерности, нужно :

Заключить каждый контент в ещё 1 див, чтоб отступы задавались ему и не влияли на суммарную ширину.


Я подсчитал ширину всех твоих колонок...

 

левая: 215px

контент:680px;

правая :195px;

=

1090

 

у тебя у главной обёртки ширина задана 1000 px

поэтому и выпадает

Измени ширину контейнера, либо если это критично меняй ширину у всех контейнеров чтоб вложиться в 1000пкс


Это ещё не считая паддингов и границ

Edited by Mugen1
Link to comment
Share on other sites
  • 0
compik Explorer

compik

Posted
  • Author
Posted (edited)

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

левая и правая колонки фиксированная ширина, а центральная задумывалась как резиновая..

Edited by compik
Link to comment
Share on other sites
  • 0
compik Explorer

compik

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • 0
Mugen1 Explorer

Mugen1

Posted
Posted

всё я нашёл проблему

Тебе нужно правую колонку поставить перед главным содержимым в штмл коде, потому что обтекаемый объект должен находиться перед его обтекающим =)

то есть должно быть так

и вся проблема ))

<div id="left_col">left</div>
<div id="right_col">Right</div>
<div id="slideshow">Slideshow</div>
 <div id="content">Content</div>
Link to comment
Share on other sites
  • 0
Mugen1 Explorer

Mugen1

Posted
Posted

То есть штмл-код для плавающего элемента, должен появиться ПЕРЕД штмл элементом который обтекает его, иначе обтекать будет другой штмл тег или его вовсе ничего не будет обтекать )

Link to comment
Share on other sites
  • 0
Mugen1 Explorer

Mugen1

Posted
Posted

я такой же 


и дам тебе совет, чисто субъективно, хотя наверно будет правильней так.

 

Не размечай страницу с помощью id 

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

И на дврое 21 ый век.

Нужно юзать Семантические элементы nav header menu i td/ Это же для тебя сделано, будет гораздо удобней!

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
Семантические элементы nav header menu

menu всё-таки очень редко востребован (в интерактивных приложениях), к тому же нативно не поддерживается ни одним браузером (разве что контекстные меню в Фоксе, с грехом пополам). Для сайтов есть смысл в nav, header, footer и main (1 шт. на страницу).

Link to comment
Share on other sites
  • 0
Mugen1 Explorer

Mugen1

Posted
Posted

 

Семантические элементы nav header menu

menu всё-таки очень редко востребован (в интерактивных приложениях), к тому же нативно не поддерживается ни одним браузером (разве что контекстные меню в Фоксе, с грехом пополам). Для сайтов есть смысл в nav, header, footer и main (1 шт. на страницу).

 

Я просто не подумав указал menu.

Спасибо что поправили.

Но в использовании шмтл 5 тегов вы немного не правы.

 

Можно ими структурировать не только каркас страницы, но и каркас содержимого.Также задавая заголовком  и главной информации хеадер, основной инфе  article  и футер авторским правам и прочее.

 

Так же есть section, который секционирует страницу, и в штмл 5 ещё очень много  много штучек которые улучшают SEO.

Можно структурировать содержимое так, что в поисках оно будет в топе= )

Я считаю, что зря недооценивать такие возможности. Не говоря о конвасе-холсте о котором я сам ничего не знаю

Link to comment
Share on other sites
  • 0
Crystal-3 Explorer

Crystal-3

Posted
Posted
Для сайтов есть смысл в nav, header, footer и main (1 шт. на страницу).

Странно.

Как раз сейчас разбираю вёрстку одного сайта, приведённого в качестве примера, так там nav встречается уже 2 раза: в header и в <div id="contаiner">.

Внесите кто-нибудь ясность, пожалуйста.

Link to comment
Share on other sites
  • 0
Mugen1 Explorer

Mugen1

Posted
Posted

 

Для сайтов есть смысл в nav, header, footer и main (1 шт. на страницу).

Странно.

Как раз сейчас разбираю вёрстку одного сайта, приведённого в качестве примера, так там nav встречается уже 2 раза: в header и в <div id="contаiner">.

Внесите кто-нибудь ясность, пожалуйста.

 

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

Вообще я изучаю эту книгу, весьма информативно!

http://nnm-club.me/forum/viewtopic.php?t=785821

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept