не расползаеться div

Вид для печати

27.03.2007, 13:32
snekaaa

Есть флеш ролик посиридине. вот как надо сделать фон слева и справа от меню я сделал новый абсолютный див, но он не хочет ехать из-за выравнивания body. А в опере наоброт делает все как надо, но справа небольной отступ... Помогите разобраться.

Код:

html { *height:100%;} * html body { *height:100%; } body {padding:0; margin:0 auto; *width:1024px; background-color:#32556b;} #top { background:url(img/top_left_bgr.jpg) left repeat-y; padding-left:137px; padding-right:137px;} #menu { position:absolute; top:194px; background:url(img/menu_bgr.jpg) repeat-x; width:100%; height:48px; margin-left:-137px;} #content { ****padding-bottom:10px; ****margin-left:137px; margin-right:137px; ****text-align:justify; ****border-left:solid 1px #CCC; border-right:solid 1px #CCC; ****color:#9cc2dd; ****}

а это сам файл:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>1 Спутниковое агенство</title> <link href="1sky.css" rel="stylesheet" type="text/css" /> </head> <body> ****<div id="top"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="749" height="242" id="index1" align="middle"> ****<param name="allowScriptAccess" value="sameDomain" /> ****<param name="movie" value="index1.swf" /> ****<param name="quality" value="high" /> ****<param name="bgcolor" value="#ffffff" /> ****<embed src="index1.swf" quality="high" bgcolor="#ffffff" width="749" height="242" name="index1" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="www.macromedia.com/go/getflashplayer" /> ****</object></div> ****<div id="menu"></div> ****<div id="content" > *<h1>заголовок страницы тутут</h1> *****<ul id="submenu"> * *[*]пункт1 * *[*]пункт1 * *[*]пункт1 * *[*]пункт1 [*]пункт1 * *[*]пункт1 * *[*]пункт1 * *[*]пункт1 [*]пункт1 * *[*]пункт1 * *[*]пункт1 * *[*]пункт1 [*]пункт1 * *[*]пункт1 * *[*]пункт1 * *[*]пункт1 [*]пункт1 * *[*]пункт1 * *[*]пункт1 * *[*]пункт1 [*]пункт1 * *[*]пункт1 * *[*]пункт1 * *[*]пункт1 *****[/list] * простосстос сиповрсвгсгв тескствторарова</p> ****</div>

Первый скрин опера, второй как должно быть и третий как в ie
27.03.2007, 14:50
Aykroyd

Зачем ширина <body> фиксированная? (width: 1024px;)
И зачем вешать меню абсолютно, если оно и так в прямом потоке идет как положено... Отрицательный margin зачем-то... Зачем?
27.03.2007, 15:29
snekaaa

Цитата:

Originally posted by Aykroyd@Mar 27 2007, 14:50
Зачем ширина <body> фиксированная? (width: 1024px;)
И зачем вешать меню абсолютно, если оно и так в прямом потоке идет как положено... Отрицательный margin зачем-то... Зачем?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
1. Ширина фиксированная, чтобы сайт был посеридине (margin: 0 auto)
2. Абсолютно, меню внизу флешки, а полоску надо как раз где это меню идет. Если в потоке, то полоска уже после флешки пойдет...
3. Потомучто почему-то вправо съезжал этот(от меню) бекграунд

Вот собственно залил сайт 1sky.markovcorp.ru чтоб обьяснить
27.03.2007, 15:39
Aykroyd

Цитата:

Originally posted by snekaaa@Mar 27 2007, 14:29
1. Ширина фиксированная, чтобы сайт был посеридине (margin: 0 auto)
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Ну тогда же нельзя задавать 1024. Вы под какое минимальное разрешение монитора сайт адаптируете? 1280х1024? При 1024х768 горизонтальный скролл Вам не мешает?

Цитата:

Originally posted by snekaaa@Mar 27 2007, 14:29
2. Абсолютно, меню внизу флешки, а полоску надо как раз где это меню идет. Если в потоке, то полоска уже после флешки пойдет...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Понятно. А какой смысл накладывать? Не проще ли флэшку по высоте ужать?

Цитата:

Originally posted by snekaaa@Mar 27 2007, 14:29
3. Потомучто почему-то вправо съезжал этот(от меню) бекграунд
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Это не решение. Ничего съезжать не должно. К сожалению, в <div id="menu"></div> у Вас в представленном примере ничего нет. Сложно так понять суть...

Aаа... Так меню на флэше... Теперь понятно... Сейчас разберемся...
27.03.2007, 16:02
snekaaa

Ну сайт я делаю под 1024х768.
Не применяя отрицательного маргина это как? Мне по сути он и не нужен, просто надо чтоб он расятнулся во все края...
27.03.2007, 17:00
Aykroyd

Цитата:

Originally posted by snekaaa@Mar 27 2007, 15:02
Ну сайт я делаю под 1024х768.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Тогда почему body {width:1024px;}?
А как же место под вертикальный скролл в некоторых браузерах?

Цитата:

Originally posted by snekaaa@Mar 27 2007, 15:02
Не применяя отрицательного маргина это как? Мне по сути он и не нужен, просто надо чтоб он расятнулся во все края...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Я так понимаю, блок menu без отрицательного поля уезжает вправо только в IE. Не надо здесь никаких отрицательных полей. Просто пишем left: 0px;.

Код:

#menu {position: absolute; top: 194px; left: 0px; background: url(topleft.gif); width:100%; height:48px;}

Общая же проблема Ваша очевидна.
Вы пытаетесь совместить две несовместимые вещи. С одной стороны Вы задаете фиксированную ширину для body, а с другой стороны хотите, чтобы фон блока меню был "резиновым". Но он таким не будет. Даже при абсолютном позиционировании. Решение же довольно простое:

Код:

* {margin: 0px; padding: 0px;} html {height: 100%;} body {background: #32556B; min-width: 1000px; min-height: 100%; position: relative;} * html body {height: 100%;} #top {background: url(img/top_left_bgr.jpg) left repeat-y; text-align: center;} #menu {background: url(img/menu_bgr.jpg) repeat-x; width: 100%; height: 48px; position: absolute; top: 194px; left: 0px;}

Поскольку Ваша флэшка – инлайн-элемент, она встанет по центру при #top {text-align: center;} без всяких отступов. Причем во всех браузерах... ))

Более того, я вообще не вижу смысла в блоке menu. Это лишний блок, привнесенный в код исключительно в оформительских целях. Фон для меню можно повесить внизу блока top, градиент слева от флэшки навесить на блок html, а градиент справа от флэшки (если таковой понадобится) навесить фоном на блок body...
27.03.2007, 17:36
snekaaa

Друзья мои! Спасибо что вы есть) Собсна вот результат что и хотелось получить: 1sky.markovcorp.ru

Можно покритиковать. Вот шаг за шагом отказываемся от табличной верстки) Вполне вроде успешно)
27.03.2007, 20:34
Aykroyd

Флэшка с каким-то непонятным пунктиром над кнопками...
И с никому не нужным блоком menu Вы так и не распрощались...

Как там писал Иван Григорьевич?

Цитата:

Очень часто верстальщики игнорируют элемент <html> напрочь, и вместо этого <body> работает как фоновый элемент, а внутрь него вставляется лишний <div>. Не нужно так делать, кроме ухудшения читаемости это не дает ничего.
28.03.2007, 10:13
snekaaa

А как можно сделать эту полоску без пункта menu? Привязать все к html? Или все из боди убрать в html и поставить в body код меню? =) Загнул...

А по-поводу флешки, так это дизайнер пусть уж сам првит)
28.03.2007, 16:37
Aykroyd

Цитата:

Originally posted by snekaaa@Mar 28 2007, 09:13
А как можно сделать эту полоску без пункта menu? Привязать все к html?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Нет, привязать фоновую полоску меню к блоку #top.
29.03.2007, 11:53
snekaaa

так у топа есть свой бекграунд... =)
29.03.2007, 11:59
Aykroyd

Цитата:

Originally posted by snekaaa@Mar 29 2007, 11:53
так у топа есть свой бекграунд... =)
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Вот и плохо, что он у него есть.
Топовский фон можно спокойно повесить на body...
Или на html...
29.03.2007, 15:29
Zigzag

[Only registered and activated users can see links. Click Here To Register...]

теперь самое время избавиться от этих 11ти ошибок, раз уж выбрали режим поддержки стандартов в браузере, и тем более, что за основу взят XHTML