Почему сьезжает разметка?

Question

[MyHardWay]

Используется Foundtation Framework.
Есть вот такой html:

<div id="searchPanel" class="small-8 small-centered columns" style="padding-right: 0px; min-width: 1280px; width:1280px;">
			<div class="row" style="margin-top:20px">
				<div class="large-2 columns">
					<a href="/"><img src="{% static 'img/logo.jpg'%}" ></a>
				</div>
				<div class="large-6 columns" >
		  			<form method='GET' action='/search/' id='searchForm'>
		  				<input type="text" placeholder="Поиск по сайту" style="height:75px" id="searchForm"  onchange="make_search(this)">
		  			</form>

				</div>
				<div class="large-4 columns" style="padding-right: 0px;">
					<div class="large-9 columns">
						{% if username %}
						<a class="groups-drop" href="#" data-dropdown="profile-references">
        					<img style="height:75px" align="top" src="{% static 'img/user-auth.jpg'%}">
							{{username}}
						</a>
    					<ul id="profile-references" class="f-dropdown" data-dropdown-content>
        					<li><a href="/auth/logout/">Выйти</a></li>
    					</ul>

						{% else %}
							<a href="/auth/login/"><img style="height:75px;" align="top" src="{% static 'img/user-auth.jpg'%}">Вход</a>
						{% endif %}
					</div>
					<div class="large-3 columns">
						{% if username %}
							<a href="/basket/"><img style="height:75px" align="top" src="{% static 'img/basket.png'%}"></a>
						{% else %}
							<a><img style="height:75px;" align="top" src="{% static 'img/basket.png'%}"></a>
						{% endif %}
					</div>
				</div>
			</div>
		</div>

Установил минимальную ширину 1280px для div вернхнего уровня, и по идее все внутренние элементы не должны изменяться в размере, при изменении ширины < 1280px. Почему при ширине 1024px и меньше, начинает ехать разметка ?

Answer 1

[Mikhail Repka]

Мой вам совет — разделяйте html и css. HTML в файлах .html, CSS в файлах .css. Буквально: старайтесь не использовать без явной необходимости «style=""».

Съезжает, потому что вы написали

style="padding-right: 0px; min-width: 1280px; width:1280px;"

где зафиксировали минимальную ширину экрана как 1280px.
Исправьте на

style="padding-right: 0px; max-width: 1280px; width:100%;"

по идее должно помочь.

Comments

[MyHardWay]

Я правильно понял, когда нужно опеределить свойства только для одного елемента, я их прописываю через стайл, если одни и теже свойства для нескольких, то выношу в css файл?

max-width не решил проблему =(

[Mikhail Repka]

MyHardWay: Я никогда не работал с foundation, но если я правильно понял, как они пишут «Foundation is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary» — класс large-* у них работает только с учетом «@media (min-width: 64em)», то есть можно попробовать добавить рядом с large-* соответствующее свойство small-* и medium-*, попробуйте. А насчет style="" в верстке, я стараюсь их по возможности исключить, использую только если нужно вставлять скриптом что-то, допустим, через lazyload приходится использовать «style="background-image: url('images/blank.gif');" data-original="images/pict.jpg"» и подобное. CSS для того и придуманы были, чтобы разделить логику: в html — то, что будет на странице, в css — то, как это будет выглядеть. Уже лучше добавить класс в файл css со свойствами для одного элемента, и если когда-нибудь где-нибудь понадобится вставить такие же свойства — у вас уже будет класс с ними. Меня учили писать как можно универсальней — так, чтобы код можно было использовать много раз.

[MyHardWay]

Поставил large, medium и вместе и вместо, не помогает. Просто не понимаю, min-width important! на диве верхнего уровня должно перекрывать все остальные css правила по размерам ... что не так (((
Про style вас понял)