При изменении размеров окна элементы страницы начинаю менять положение. Причем безобразно. смоотрю на др сайтах, когда уменьшаешь окно, просто появляются полосы прокрутки. как они это делают? верстаю дивами, код пока выложить немогу, нет при себе. Помогите.
При изменении размеров окна элементы страницы начинаю менять положение
- Автор темы zion
- Дата начала
- Статус
Для body или для какого-нибудь дива, если есть, общий контейнер, короче.
первый который прошит на некую ширину, а второй - тянется вместе с окном браузера.
Я пробывал и в стиль задавать и в сам файл, и в div и в body. Чёто никак. Различные единицы измерения тоже пробывал. Может я чето непонимаю?
Друзья непонимаю зачем вам мой код? задача в другом. Вообщем у меня получилось, задал ширину 1024, только теперь непойму, а если у пользователя экран намного шире, че тогда? я пробывал задать размеры крайних столбиков в пикселях, а центральную часть в процентах, тогда нет смысла прописывать общий width. А элементы начинают скакать от изменений размера окна браузера. Как тогда сделать чтоб страница подогналось под размер экрана?
sadist
Active Member
- Регистрация
- 31.07.2009
- Сообщения
- 26
Код нам нужен, да бы понять в чем твоя ошибка…
а на словах не понятно.
Я пасс, ты выедаешь мою телепатическую силу, вместо того чтоб код или ссылку дать и чтоб за 5 минут сделали.
Удачи тебе, падаван.
SerP
Well-Known Member
- Регистрация
- 06.08.2009
- Сообщения
- 79
во-первых, выравняй сайт по середине:
...............
во-вторых, ВСЕГДА прописывай <!DOCTYPE> большинство проблем у новичков возникает, из за <!DOCTYPE>
Код:
#container {margin: 0 auto;}
<!--CSS-->
Код:
<!--HTML-->
<div id="container"></div>SerP
Well-Known Member
- Регистрация
- 06.08.2009
- Сообщения
- 79
не ври, он есть в спецификациях и дословно означает "определение типа документа" и сообщает браузеру какую именно версию (X)HTML вы используете в своей странице. Этот тег должен всегда находиться в первой строке каждой страницы. Тег DOCTYPE - ключевой компонент web-страниц, претендующих на соответствие стандартам: без него твой код и CSS не пройдут проверку валидатором. Если этот тэг не указан, то страницы в браузере ведут себя неадекватно)) для тебя будет этот код:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Слушай вообще шоколад, doctype стал жжощще придираться к синтаксису, и я нашёл куча мелких ошибок которые ранее были неважны, страница стала более похожа в разных браузерах, только появилась одна проблема (правда эта др страница, ту которую ты смотрел я уже не трогаю, я всё проделываю над этой), никак не получается исправить, вроде везде прописано правильно... Короче сьезжают элементы в опрере 9, и норм стоят в ie8.
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Шаблон</title>
</head>
<body>
<div id="container">
<!--Шапка сайта-->
<div id="top10">
<div id="top1">
<?$head="Главная"?>
<div id="top8"><?echo $head?></div>
<div id="top9"><?echo $head?></div>
</div>
<div id="top2">
<img src="top1.gif">
</div>
<div id="top3">
<div id="top6">
<div id="top4">Для Вас!</div>
<div id="top5"><img src="logo.gif"></div>
</div>
</div>
</div>
<!--Мюню навигации-->
<br>
<div id="menu">
<ul>
<li><a href="test.html">Главная</a>
<li><a href="test.html">О компании</a>
<li><a href="test.html">Форум</a>
<li><a href="test.html">Справочная</a>
<li><a href="test.html">Авторы</a>
</ul>
</div>
<div id="main">
Привет
</div>
</div>
</body>
</html>
Код:
body
{
background-color:#9ECDF9;
margin:0;
}
/*Шапка сайта*/
#container
{
margin:0 auto;
width:1010px
}
#top1
{
width:40%;
height:149px;
background-color:#4F88BF;
float:left;
font-family:"Arial";
font-size:37pt;
text-align:center;
}
#top8
{
color:#000000;
font-size:37pt;
font-weight:900;
text-align:center;
margin-top:11px;
position:relative;
top:30px;
z-index:1;
}
#top9
{
color:#7EA8D0;
font-size:55pt;
position:relative;
top:-60px;
z-index:0;
left:-15px
}
#top2,#top5
{
float:left
}
#top3
{
width:45%;
height:149px;
background-color:#084075
}
#top4
{
font-size:17pt;
color:#ffffff;
width:300px;
float:left;
text-align:center;
margin-top:40px
}
#top6
{
float:right
}
#top10
{
float:none
}
/*Меню навигации*/
ul
{list-style:none;
margin:0;
padding:0}
#menu
{
text-align:center;
float:left;
margin:0 20px 0 20px
}
#menu a
{
font-family:"arial";
font-size:14pt;
text-decoration:none;
display:block;
color:#000000;
width:150px;
height:20px;
border-width:1px;
border-top-style: solid;
border-top-color:#000000;
margin-top:5px
}
#menu a:link, #menu a:visited
{
background-color:#B5D9FB
}
#menu a:hover
{
background-color:#ffffff
}
#menu a:active
{
background-color:#ffffff
}
/*Контент*/
#main
{
width:78%;
min-height:400px;
float:left;
background-color:#B5D9FB;
margin:5px 0 0 15px;
text-indent:5pt
}Вложения
SerP
Well-Known Member
- Регистрация
- 06.08.2009
- Сообщения
- 79
мда уж...белеберда полная..не могу разобраться в твоем коде замысловатом, но увидел мнооого ошибок..)
1. В CSS всегда закрывай значения ";"
2. Перед созданием CSS обнуляй все значения, даже можно создать отдельный CSS файл с этими значениями, т.к. у всех браузеров значения по умолчанию свои. Вот обнуление, ставь его либо в отдельный CSS либо в самое начало основного:
Это значительно упростит тебе задачу с кроссбраузерностью=)
3. что это?:
если хочешь чтобы тебе помогли, то выкладывай человеческий код, а не какой то мутант)) это синтаксис php, но зачем он тебе тут? вывести пару раз слово "Главная"? или что? объясни пожалуйста.
4. И еще раз про нормальный код: прописывай классы и id по смыслу, например: Шапка сайта- для нее целесообразным будет написать id="header" , ведь так понятней да?! а не то что у тебя top1, top2..., называй разделы по смыслу, это и тебе будет полезней, т.к. ты со временем захочешь поменять что нибудь на сайте, а всё ведь не вспомнишь))
P.S. Исправь сначала как я сказал, помуди немного что не получается, если уж совсем не получится пиши сюда=) А вообще плати бабки переверстаю полностью :biggrin:
1. В CSS всегда закрывай значения ";"
2. Перед созданием CSS обнуляй все значения, даже можно создать отдельный CSS файл с этими значениями, т.к. у всех браузеров значения по умолчанию свои. Вот обнуление, ставь его либо в отдельный CSS либо в самое начало основного:
Код:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
:focus
{
outline: 0;
}
body
{
background: white;
color: black;
line-height: 1;
}
ol, ul
{
list-style: none;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td
{
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after
{
content: "";
}
blockquote, q
{
quotes: "" "";
}3. что это?:
Код:
<div id="top1">
<?$head="Главная"?>
<div id="top8"><?echo $head?></div>
<div id="top9"><?echo $head?></div>4. И еще раз про нормальный код: прописывай классы и id по смыслу, например: Шапка сайта- для нее целесообразным будет написать id="header" , ведь так понятней да?! а не то что у тебя top1, top2..., называй разделы по смыслу, это и тебе будет полезней, т.к. ты со временем захочешь поменять что нибудь на сайте, а всё ведь не вспомнишь))
P.S. Исправь сначала как я сказал, помуди немного что не получается, если уж совсем не получится пиши сюда=) А вообще плати бабки переверстаю полностью :biggrin:
SerP
Well-Known Member
- Регистрация
- 06.08.2009
- Сообщения
- 79
какие центральные столбики? не понимаю...выложи скрин и покажи на нем что ты хочешь выровнять по высоте и в каком браузере. А то в опере все более менее норм) а вот в ИЕ жеесть) в 7 особенно))
насчет футера: задай блоку с футером атрибут
, этот атрибут отменяет обтекание float и футер прижимается к низу)
насчет футера: задай блоку с футером атрибут
Код:
clear: both;
Код:
#future {
width:1010px;
height:30px;
background-color:#c5c5c5;
clear: both;
}- Статус
