Jump to content
  • 0

Фон не размножается до конца, загадка какая то.

serg_life

Asked by serg_life,

 Share

Question

serg_life Explorer

serg_life

Posted
Posted

Здесь header это черная и синяя полоска, это как выглядит при разрешение 1000px и более. Все норм.

 

8aa6da296211.jpg

Проблема в том что при сжатии браузера меньше 1000px фон на header перестает размножаться когда появляется колесо прокрутки. Покажу на screen суть проблемы.

204e729e9a24.jpg

 

По логике он должен размножаться до конца, но почему то на скока я понимаю принимает ширину div id=header который находиться внутри  header. По логике так быть не должно, да и структура не рушиться проблема только в в фоне. Загадка прям какая то. Кто то сталкивался с такой проблемой? Думаю причина какая то простая, просто опыта не хватает догнать.     

Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0
serg_life Explorer

serg_life

Posted
  • Author
Posted (edited)

если у вас там нет media - то это хромовский баг. встречался с таким, на планшетах, покажите код

 

Не использовал media.

<header>

<div id="header">

<div id="top_header">

<div id="logo">

<a href="#"><img src="images/logo.png" alt="Лого"/></a>

</div>

<span>Открой мир кино с нами</span>

<div id="top_menu">

<ul>

<li><img src="images/line_menu.png" alt="линия"><a href="#">Кино</a></li>

<li><img src="images/line_menu.png" alt="линия"><a href="#">Сериалы</a></li>

<li><img src="images/line_menu.png" alt="линия"><a href="#">Афиша</a></li>

<li><img src="images/line_menu.png" alt="линия"><a href="#">Тексты </a></li>

<li><img src="images/line_menu.png" alt="линия"><a href="#">Рейтинги</a></li>

<li><img src="images/line_menu.png" alt="линия"><a href="#">Программы и шоу</a><img src="images/line_menu.png" alt="линия"></li>

</ul>

</div>

</div>

<div class="clear"></div>

<div id="search">

<div id="auth">

<ul>

<li><a class="line_auth" href="#">Создать акаунт</a></li>

<li><a href="#">Войти</a></li>

</ul>

</div>

<div id="right_search">

<form name="my_form" action="#" method="post">

<div>

<img id="submit1" src="images/line_search.png" alt="линия">

<input type="submit" id="submit" name="send" value="Поиск">

<img id="text1" src="images/search.png" alt="фон">

<input type="text" id="text" name="text" value="Что будем искать)">

</div>

</form>

</div>

</div>

</div>

</header>

 

Ну для стилей только кусочек кину а то и так много кода :)) Врят ли остальное влияет

 

/*Стили для header*/

header{

background: url("../images/bg_header.png") left center repeat-x;

}

#header{

height: 88px;

margin: 0 auto;

width: 1000px;

}

Попробуйте для header{min-width: 1000px}

Пробывал, Без результата.

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

Bassline

Posted
Posted
Пробывал, Без результата.
 

 

Наверняка не туда стили применял. Нужно именно на тег header, а не div с id #header. Это не баг, а нормальное поведение и фон повторяется до конца. На тег header повешен background, но ему не задана ширина, поэтому ширина подстраивается под его родителя body, который в свою очередь подстраивается под html. А html подстраивается под что? Html подстраивается под область просмотра, т.е. под окно браузера. Когда окно браузера становится меньше 1000px, то и тег header становится меньше 1000px, а div#header со своими 1000px выпирает за пределы тега header.

Link to comment
Share on other sites
  • 0
serg_life Explorer

serg_life

Posted
  • Author
Posted

 

Пробывал, Без результата.
 

 

Наверняка не туда стили применял. Нужно именно на тег header, а не div с id #header. Это не баг, а нормальное поведение и фон повторяется до конца. На тег header повешен background, но ему не задана ширина, поэтому ширина подстраивается под его родителя body, который в свою очередь подстраивается под html. А html подстраивается под что? Html подстраивается под область просмотра, т.е. под окно браузера. Когда окно браузера становится меньше 1000px, то и тег header становится меньше 1000px, а div#header со своими 1000px выпирает за пределы тега header.

 

Я так и не понял с сообщения как ошибку исправить.

Вот самый простой пример кода.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>тест</title>

<style>

body{

width: 100%;

}

header{

border: 3px solid green;

background-color: #00f;

}

header div{

border: 3px solid red;

margin: 0 auto;

width: 1000px;

}

</style>

</head>

<body>

<header>

<div>

<p>1</p>

<p>2</p>

<p>3</p>

</div>

</header>

</body>

</html>

 

При ширине менее 1000px фон перестает размножаться. На сколько я понимаю header действительно принимает именно ширину браузера, но я так и не понял как такую ошибку избежать. Код очень простой о указал border что б было видно поведение. Может кто то решит проблему.

Link to comment
Share on other sites
  • 0
Николя223 Explorer

Николя223

Posted
Posted

Я как то эксперементировал) и выяснилось, что если задать html display: table, то 

html будет брать размеры не от экрана, а растянется на всю область)) я считаю это костылем 

Link to comment
Share on other sites
  • 0
serg_life Explorer

serg_life

Posted
  • Author
Posted

Так для header и не задана мин. ширина

http://cssdeck.com/labs/full/dku0xqal

Да ты прав, проблема решилась. Хоть я и считаю что header должен был размножаться до конца.

Я как то эксперементировал) и выяснилось, что если задать html display: table, то 

html будет брать размеры не от экрана, а растянется на всю область)) я считаю это костылем 

Не думаю что понял твое решение, но проблему не решило. Когда ставлю html display: table так все смещается влево и принимает ширину 1000px.  Вообще не тот эффект что нужен был. 

Link to comment
Share on other sites
  • 0
Анна Explorer

Анна

Posted
Posted
Хоть я и считаю что header должен был размножаться до конца.

Т.е вы хотели, чтобы он наследовал свойства дочернего элемента(div), а не родителя(body)?

Link to comment
Share on other sites
  • 0
Николя223 Explorer

Николя223

Posted
Posted
Ну вот теперь ясно

Не пользуйтесь этим)) я только лишь до вашего сведенья довел этот трюк ;)

Если честно я до конца так и не просчитывал возможные минусы его применения. Может матерые верстальщики их здесь отпишут 

Link to comment
Share on other sites
  • 0
serg_life Explorer

serg_life

Posted
  • Author
Posted

 

Хоть я и считаю что header должен был размножаться до конца.

Т.е вы хотели, чтобы он наследовал свойства дочернего элемента(div), а не родителя(body)?

 

Нет с точность да наоборот.  Header должен унаследовать ширину body, следовательно фон должен размножаться до конца независимо появляется прокрутка или нет.

Link to comment
Share on other sites
  • 0
Анна Explorer

Анна

Posted
Posted
Header должен унаследовать ширину body

да

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

а у  body родитель - окно браузера

Link to comment
Share on other sites
  • 0
serg_life Explorer

serg_life

Posted
  • Author
Posted

 

Header должен унаследовать ширину body

да

 

 

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

а у  body родитель - окно браузера

Это я уже понял :))

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
×
×
  • 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