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

**snekaaa** · 27.03.2007, 13:32

Есть флеш ролик посиридине. вот как надо сделать фон слева и справа от меню я сделал новый абсолютный див, но он не хочет ехать из-за выравнивания 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

**Aykroyd** · 27.03.2007, 14:50

Зачем ширина <body> фиксированная? (width: 1024px

И зачем вешать меню абсолютно, если оно и так в прямом потоке идет как положено... Отрицательный margin зачем-то... Зачем?

**snekaaa** · 27.03.2007, 15:29

Originally posted by Aykroyd@Mar 27 2007, 14:50
Зачем ширина <body> фиксированная? (width: 1024px
И зачем вешать меню абсолютно, если оно и так в прямом потоке идет как положено... Отрицательный margin зачем-то... Зачем?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

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

Вот собственно залил сайт 1sky.markovcorp.ru чтоб обьяснить

**Aykroyd** · 27.03.2007, 15:39

Originally posted by snekaaa@Mar 27 2007, 14:29
1. Ширина фиксированная, чтобы сайт был посеридине (margin: 0 auto)
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

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

Originally posted by snekaaa@Mar 27 2007, 14:29
2. Абсолютно, меню внизу флешки, а полоску надо как раз где это меню идет. Если в потоке, то полоска уже после флешки пойдет...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

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

Originally posted by snekaaa@Mar 27 2007, 14:29
3. Потомучто почему-то вправо съезжал этот(от меню) бекграунд
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

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

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

**snekaaa** · 27.03.2007, 16:02

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

**Aykroyd** · 27.03.2007, 17:00

Originally posted by snekaaa@Mar 27 2007, 15:02
Ну сайт я делаю под 1024х768.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

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

Originally posted by snekaaa@Mar 27 2007, 15:02
Не применяя отрицательного маргина это как? Мне по сути он и не нужен, просто надо чтоб он расятнулся во все края...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/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...

**snekaaa** · 27.03.2007, 17:36

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

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

**Aykroyd** · 27.03.2007, 20:34

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

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

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

**snekaaa** · 28.03.2007, 10:13

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

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

**Aykroyd** · 28.03.2007, 16:37

Originally posted by snekaaa@Mar 28 2007, 09:13
А как можно сделать эту полоску без пункта menu? Привязать все к html?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

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

**snekaaa** · 29.03.2007, 11:53

так у топа есть свой бекграунд... =)

**Aykroyd** · 29.03.2007, 11:59

Originally posted by snekaaa@Mar 29 2007, 11:53
так у топа есть свой бекграунд... =)
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

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

**Zigzag** · 29.03.2007, 15:29

[Только зарегистрированные пользователи могут видеть ссылки. ]

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

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

Опции темы

Поиск по теме

Отображение

Ваши права