Подгон под разрешение

htmlbr · June 28, 2011

Здравствуйте!

Помогите сделать макет, пожалуйста.

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

Я пыталась, но что-то ничего не выходит!

Спасибо!

http://narod.ru/disk/17438443001/mayakfhd.png.html

http://narod.ru/disk/17438494001/mayakhd.png.html

psywalker · June 28, 2011

Здравствуйте!
Помогите сделать макет, пожалуйста.
Лого и меню должны быть всё время в этой точке, а бэкграунд обрезаться примерно в таких пропорциях, в зависимости от разрешения экрана.
Я пыталась, но что-то ничего не выходит!
Спасибо!
http://narod.ru/disk/17438443001/mayakfhd.png.html
http://narod.ru/disk/17438494001/mayakhd.png.html

Т.е. ты предлагаешь нам сначала скачать файл по ссылке, а потом ещё сделать за тебя работу? Хм...заманчивое предложение, надо подумать. :unsure:

htmlbr · June 28, 2011

я просто думала это форум, на котором выкладываешь проблему, если не знаешь как её решить, и люди если знают - помогают).

Вот они же просто)

Edited June 28, 2011 by htmlbr

psywalker · June 28, 2011

htmlbr,

я просто думала это форум, на котором выкладываешь проблему, если не знаешь как её решить, и люди если знают - помогают).

Форум не существует для того, чтобы делать за тебя твою работу. Точнее этот раздел точно не для этого.

По поводу проблемы: Покажи тестовую страницу с примером, как ты пыталась делать.

ctpz · June 28, 2011

Насколько я понял, надо тобы в зависимости от разрешения экрана менялась ширина сайта. Да?

Вот скрипт, определяющий ширину экрана. Затем можно поместить это значение в php переменную и ею уже оперировать.

htmlbr · June 28, 2011

а, код) простите. не подумала, что от него толк будет. Вот (я не такой мастер как вы, так что не ругайте особо) посоветуйте, пожалуйста)

Спасибо.

<body>


<div id="content">
	<div id="logo">
 		<img src="img/logo.jpg"  />
    </div>
 <ul>
   <li><a href="#">01. About</a></li>
   <li><a href="#">02. Production</a></li>
   <li><a href="#">03. Service</a></li>
   <li><a href="#">04. News</a></li>
   <li><a href="#">05. Contactss</a></li>
 </ul>
</div>
<div id="footer">
	<div id="menu">


	 <ul>
   		 <li><a href="#">01. About</a></li>
  		 <li><a href="#">02. Production</a></li>
  		 <li><a href="#">03. Service</a></li>
  		 <li><a href="#">04. News</a></li>
   		<li><a href="#">05. Contactss</a></li>
	</ul>
	</div>
</div>

</body>


* { 
	margin:0; 
	padding:0
}

html { 
	height:100%;
}

body {
	background:#369ae0 ;
	height:100%;

}

a {
	color:#FFFFFF;
	text-decoration:none;
}

#content {
	background:#369ae0 url(../img/bgnd.jpg)no-repeat bottom;
	height:100%;
	min-height:790px;
	width:1100px;
	color:#FFF;
	margin: 0 auto;
	border:1px;
}

#logo {
	position:absolute;
	margin-left:190px;
	top:17%;

}


#content ul {
	position:absolute;
	font-size:16px;	
	list-style-type: none;
	top:49%;
	margin-left:740px;

}

#content ul li {
	line-height:30px;
	border-bottom:0px #FFF dotted;
	font-weight:400;

}


#footer {
	background:url(../img/bl.png) repeat;
		position: fixed;
		bottom: 0; 
		left: 0;
		height:20%; 
		width: 100%;
}

#menu {
	width:1100px;
	color:#FFF;
	margin: 0 auto;
	padding-top:30px;



}
#footer ul{
	font:12px Arial, Helvetica, sans-serif;
	list-style-type:none;
	margin-left:190px;


}

#footer ul li {
	display:inline;
	padding-right:25px;
	text-transform:uppercase;
	border-right:1px solid #FFFFFF;
	padding-left:25px;

}
.company {
	border-left:1px solid #FFF;
}

Насколько я понял, надо тобы в зависимости от разрешения экрана менялась ширина сайта. Да?
Вот скрипт, определяющий ширину экрана. Затем можно поместить это значение в php переменную и ею уже оперировать.

Я с этим не справлюсь) Но спасибо

psywalker · June 28, 2011

Сделай контейнер, ему релатив повесь, в него засунь меню и свой блок, сделай их абсолютом и разбросай координатами куда нужно. Далее уже поставь на главный контейнер overflow: hidden; min-width: 1024px; и будь счастлива)

htmlbr · June 28, 2011

Сделай контейнер, ему релатив повесь, в него засунь меню и свой блок, сделай их абсолютом и разбросай координатами куда нужно. Далее уже поставь на главный контейнер overflow: hidden; min-width: 1024px; и будь счастлива)

Спасибо

Хочу немного уточнить)

Главный контейнер - тот который нужно создать

Сделай контейнер,

- он же

свой блок - #content

да?

Edited June 28, 2011 by htmlbr

psywalker · June 28, 2011

Сделай контейнер, ему релатив повесь, в него засунь меню и свой блок, сделай их абсолютом и разбросай координатами куда нужно. Далее уже поставь на главный контейнер overflow: hidden; min-width: 1024px; и будь счастлива)
Спасибо
Хочу немного уточнить)
Главный контейнер - тот который нужно создать
Сделай контейнер,
- он же
свой блок - #content
да?

Ну да, в котором будет сайт весь.

htmlbr · June 28, 2011

вот я переделала, но что то не работает. Неправильно что то делаю?



<body>

<div id="content">
	<div id="logo">
 		<h1>Logotype is here</h1>
    </div>
	<ul>
   		<li><a href="#">About</a></li>
   		<li><a href="#">Production</a></li>
   		<li><a href="#">Services</a></li>
   		<li><a href="#">News</a></li>
   		<li><a href="#">Contacts</a></li>
	</ul>

</div>
	<div id="footer">
    </div>

</div>
</body>



* { 
	margin:0; 
	padding:0
}

html { 
	height:100%;
}

body {
	background:#369ae0 ;
	height:100%;
	color:#FFF;

}

a {
	color:#FFFFFF;
	text-decoration:none;
}

#content {
	position:relative;
	font: 14px Micra;
	background:#369ae0 url(../img/bgnd.jpg)no-repeat bottom;
	height:100%;
	overflow: hidden; 
	min-width: 1024px

}

#logo {
	position:absolute;
	left:600px;
	top:200px;

}

#content ul {
	position:absolute;
	font-size:16px;	
	list-style-type: none;
	left:1000px;
	top:400px;

}

#content ul li {
	line-height:30px;
	border-bottom:0px #FFF dotted;
	font-weight:400;

}


#footer {
	background:url(../img/bl.png) repeat;
	position: fixed;
	bottom: 0; 
	left: 0;
	height:20%; 
	width: 100%;
}

Вот кстати хороший пример. чего я хочу добиться - вместо надписи "Реализация комплексных проектов в области

энергетики" - меню. Лого - там же. По позиционированию я хочу того же добиться. Код смотрела сайта - так и не разоралась.

www.elgascom.ru

Edited June 28, 2011 by htmlbr

SelenIT · June 28, 2011

Как вариант

htmlbr · June 28, 2011

почти то что надо! Спасибо!

а как сделать чтобы при уменьшении высота, при скроллинге была картинка, а не фон?

спасибо!

Edited June 28, 2011 by htmlbr

SelenIT · June 28, 2011

Да, этот момент упустил . Надо было добавить запрет переноса между #content и вертикальной распоркой, да накинуть несколько пикселей запаса для html, как-то так.

htmlbr · June 28, 2011

Что то у меня всё вот так

Edited June 28, 2011 by htmlbr

SelenIT · June 28, 2011

А, речь про высоту... Ну можно перекинуть фон с body на html.

htmlbr · June 28, 2011

не сработало

SelenIT · June 28, 2011

неужели?

htmlbr · June 28, 2011

просто в большом окне прям оч видно(

Edited June 28, 2011 by htmlbr

htmlbr · June 28, 2011

вот в полном окне - http://cs9895.vkontakte.ru/u36659292/136868868/y_d995d58c.jpg появилась полоса прокрутки

а вот внизу скрола - http://cs9895.vkontakte.ru/u36659292/136868868/y_5ae92882.jpg

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

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

спасибо, что возитесь со мной

Edited June 28, 2011 by htmlbr

SelenIT · June 28, 2011

Да, в Опере недосмотрел я (в FF, Хроме и даже IE7-9 было нормально). Путем выборочного убирания разных кусков выяснилось, что этой своенравной наследнице викингов не нравятся две вещи — padding-bottom у body (это я еще кое-как могу понять) и... vertical-align: bottom у .menu (казалось бы, причем тут это?). После убирания первого и замены второго на baseline вроде пофиксилось. Но так эта северная красавица давно меня не удивляла, версии, наверное, с 8-й... :unsure:

htmlbr · June 28, 2011

Да, в Опере я недосмотрел я (в FF, Хроме и даже IE7-9 было нормально). Путем выборочного убирания разных кусков выяснилось, что этой своенравной наследнице викингов не нравятся две вещи — padding-bottom у body (это я еще с трудом, но могу понять) и... vertical-align: bottom у .menu (казалось бы, причем тут это?). После убирания первого и замены второго на baseline вроде пофиксилось. Но так эта северная красавица давно меня не удивляла, версии, наверное, с 8-й...

ААА! Спасибо! То над чем билась весь день - решено!!!

SelenIT · June 28, 2011

А я вот, наоборот, озадачился . Всё-таки больше всего похоже, что это баг Оперы. Сделал минимальный пример и послал им багрепорт, посмотрю, что ответят...

Пожалуй, в реальной практике действительно проще ваять такие штуки старыми добрыми таблицами

htmlbr · June 29, 2011

=) я там написала вам в комментариях.

ЛС пока не могу пользоваться(

Sign In

Подгон под разрешение

Question

Link to comment

Share on other sites

22 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information