Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> как убрать отступ при блочной вёрстке 
:(
    Опции темы
supervladislav
Дата 18.1.2009, 11:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9



У меня есть сайт в правой части при изменении размера появляется пустота у меня в каждом блоке и в главном стоит width:100% 
почему остальные блоки не вытягиваются дальше ,и вот ещё разве свойство width Никак не влияет на остальные блоки в коде при условии ,что они находятся в одном контейнере???

Присоединённый файл ( Кол-во скачиваний: 32 )
Присоединённый файл  screeensave3.png 80,13 Kb
PM MAIL   Вверх
WebMast
Дата 18.1.2009, 15:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Front-end developer
*


Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: 2
Всего: 2



Давайте код ; ).
--------------------
Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome
PM MAIL WWW Skype   Вверх
supervladislav
Дата 18.1.2009, 18:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9



уже давал блин ,а неподскажите заодно как сделать два блока меню плавающими 

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>Массажный центр ceragem город Гатчина Ленинградская область</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<body>
<div id="gerb"></div>

<div id="main">

<div id="logo"><img src="img/logo.jpg"  border="0" width="100%"/></div>

<div id="polosaverh"></div>
<div style="width:1000px;">
<div id="menulevo">
<div id="menlev1"></div>
<div id="seredmenu"></div>
<div id="menuniz"></div>
</div>
<div id="mainmenu">
<div id="mainmenlev1"></div>
<div id="mainmenlev2"></div>
<div id="mainmenlev3"></div>
<div id="mainmenle4"></div>

</div></div></div>

</body>
</html>

Код

body{

margin:0px;
padding:0px;
color:#417e96;
background-image:url(../img/zad.jpg);background-repeat:repeat-x;width:100%
}
#main,#logo,#polosaverh{margin:0px;padding:0px;}


#main{position:relative;top:0px;left:0%;right:0%;width:100%;min-width:900px;}
#logo{position:relative;top:0px;left:0px;right:0px;width:100%}
#polosaverh{position:relative;top:-1px;right:0px;left:0px; background-image:url(../img/verhpolosa.jpg);background-repeat:repeat-x;width:100%;height:80px;}

#menulevo{position:relative;top:40px;left:10px;width:37%;}
#menlev1{background-image:url(../img/verhmenu.png);background-repeat:no-repeat;width:272px;height:50px;padding:0px;margin:0px;}
#seredmenu{background-image:url(../img/seredmen.png);background-repeat:repeat-y;width:269px;height:500px;padding:0px;margin-top:-1px;}
#menuniz{background-image:url(../img/nizmenu1.png);background-repeat:no-repeat;width:269px;height:42px;margin-left:0px;margin-right:0px;}
#mainmenu{position:relative;top:-550px;left:36%; width:63%;margin-left:0px;margin-right:0px;display:block;  }
#mainmenlev1,#mainmenlev1,#mainmenlev1,#mainmenlev1{margin:0px;padding:0px;}
#mainmenu,#menulevo{margin-left:0px;margin-right:0px}
#mainmenlev1{background-image:url(../img/mainmenupravoverh.png);background-repeat:no-repeat;width:24px;height:48px;float:left;}
#mainmenlev2{background-image:url(../img/mainmenusered.png);background-repeat:repeat-x;width:87%;height:48px;float:left;}
#mainmenlev3{background-image:url(../img/mainmenulevoverh.png);background-repeat:no-repeat;width:44px;height:48px;float:left;}
#mainmenle4{ background-image:url(../img/polosaseredina.png);background-repeat:repeat-y; width:100%;height:300px;clear:both;}






Это сообщение отредактировал(а) supervladislav - 18.1.2009, 18:42
PM MAIL   Вверх
Violator
Дата 18.1.2009, 18:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15



supervladislav
А зачем вы ставите width:100% ? Блок и так будет расстягиваться на всю ширину, если у него не стоит float
И если можно приведите код
PM MAIL   Вверх
supervladislav
Дата 18.1.2009, 19:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9



вы прокакую часть кода))) а оступы то как убрать 
PM MAIL   Вверх
Violator
Дата 18.1.2009, 19:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15



supervladislav
сорри, отлучался от компа, а вы уже успели выложить код...
по поводу отступов, я так понимаю они у вас появляются при уменьшении размеров окна...
ну так вот, 100% берутся от ширины окна, в вашем случае при уменьшении ширины окна < 1000px будут появлятся такие отступы, так как в хтмл-коде у одного из блоков стоит <div style="width:1000px;">

ps почему вы все прописываете через id у вас что все такое уникальное? И перестаньте увлекаться позиционированием. smile 
PM MAIL   Вверх
supervladislav
Дата 18.1.2009, 19:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9



ну это круто позиционирование,понимаите 1000px я убрал теперь при уменьшении окна левый блок налезает на правый ,можно как-то енто исправить ,меню саморастягивающиеся ,я хочу чтобы оно занимало ну хотябы 50 процентов ,но оно налезает на другой див в эксплоррере собственно я и поставил там  1000px чтобы как-то  зафиксировать их ,можно может как-то через отступы это сделать или ещё как ,чтобы скриптов не писать 
PM MAIL   Вверх
Violator
Дата 18.1.2009, 19:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15



о каком саморастягивающемся меню вы говорите, если у всех блоков указан width?
ну и как они не будут залезать друг на друга, проследите ширину блоков, ширина задаваемая процентами указывает на то, что ширина будет вычисляться в процентах от ширины блока родителя
PM MAIL   Вверх
supervladislav
Дата 18.1.2009, 20:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9



блин а если всё в процентах тогда ,что ,а кстате как отключить механизьм наследования?
PM MAIL   Вверх
Violator
Дата 18.1.2009, 21:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15



на сколько я понял, вам нужно что-то похожее
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Title</title>
  <style>
    body {margin:0;padding:0;}
    .rrow {display:inline-block;}
    /* Hides from IE-mac \*/
    * html .rrow {height: 1%;}
    .rrow {display: block;}
    /* End hide from IE-mac */
    .header {background:gray;height:100px;}
    .footer {background:darkgray;height:100px;}
    .leftside {background:green;float:left;width:30%;}
    .rightside {background:blue;float:right;width:69.5%;}
    .rrow:after {content:".";display:block;height:0;clear: both;visibility: hidden;}
  </style>
</head>

<body>
  <div class="container">
    <div class="header"></div>
    <div class="content rrow">
      <div class="leftside">Left Side<br />Left Side<br />Left Side</div>
      <div class="rightside">Right Side<br/>Right Side</div>
    </div>
    <div class="footer"></div>
  </div>
</body>
</html>

PM MAIL   Вверх
Glook
Дата 18.1.2009, 22:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 33
Регистрация: 12.9.2007

Репутация: 1
Всего: 1



supervladislav, выучите наконец css|html. или отдайте сайт на вёрстку профессионалам. больно смотреть что вы творите.
PM WWW   Вверх
supervladislav
Дата 19.1.2009, 13:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9



Незнаю насколько вы профессионал ,и html заню не хуже тебя ,я лишь спросил допустимо ли использование саморастягивающихся меню ,на картинках для тех кто не понимает.

Добавлено через 5 минут и 24 секунды
Violator ,нет у меня меню  я его порезал но мне очень хочется чтобы оно пропорционально увеличивалось в зависисмости от разрешения сайта ,

Добавлено через 14 минут и 12 секунд
Это видимо я вчера очень сильно недоспал float 
PM MAIL   Вверх
Violator
Дата 19.1.2009, 14:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15



supervladislav
так на примере leftside и rightside пропорционально увеличивается и уменьшается, что вас не устраивает?
PM MAIL   Вверх
supervladislav
Дата 19.1.2009, 16:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


///\\\///\\\///\\\
***


Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

Репутация: нет
Всего: -9



там картинки я же объяснял))))скажите если родительский эллемент 100% то внутри него ,если эллемент будет растягиваться то он будет не меньше и не больше родительского эллемента

Добавлено через 1 минуту и 57 секунд
Код

<div id="mainmenu">
<div id="mainmenlev1"><div id="mainmenu2"></div><div id="mainmenu3"></div><div id="mainmenu3"></div>    </div>
<div id="nizmenu5">
<div id="mainmenlev2"></div>
<div id="mainmenlev3"></div>
<div id="mainmenle4"></div></div>



Код

#mainmenu{float:left;margin-right:0px;width:60%;padding-left:10px; }
#mainmenlev1{width:100%;}
#mainmenu2{ background-image:url(../img/mainmenupravoverh.png);background-repeat:no-repeat;width:55px;height:49px;float:left;}
#mainmenu3{background-image:url(../img/mainmenusered.png);background-repeat:repeat-x ;width:45%;height:55px;float:left;}
#mainmenu4{background-image:url(../img/mainmenulevoverh.png);background-repeat:no-repeat;width:55px;height:49px;float:left;}

#nizmenu5{width:90%;clear:both;}
#mainmenlev2{background-image:url(../img/levomenumain.png);background-repeat:repeat-y;width:16px;height:400px;float:left;}
#mainmenlev3{width:87%; height:400px;float:left;background-color:#d6e9f0;  }
#mainmenle4{background-image:url(../img/pravomenumain.png);background-repeat:repeat-y;height:400px;width:17px;float:left;}


Добавлено через 3 минуты и 2 секунды
но при каждом разрешении оно растягивается по раздному и иногда переносится вниз
PM MAIL   Вверх
Violator
Дата 19.1.2009, 17:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15



омг, ну так вставляйте теперь свои картинки, например так
Код

.tl {
    background:red url(/path/to/image.gif) no-repeat 0 0; /*Левый угол, рисунок свой подставите*/
    padding-left:10px; /*ширина вашего рисунка*/
}
.tr {
    background:green url(/path/to/image.gif) no-repeat right 0; /*Правый угол, рисунок свой подставите*/
    padding-right:10px; /*ширина вашего рисунка*/
}
.tc {
    height:30px; /*Высота вашего блока*/
    background:orange url(/path/to/image.gif) repeat-x 0 0; /*Центр, рисунок свой подставите*/
}

Код

...
<div class="leftside">
  <div class="tl">
    <div class="tr">
      <div class="tc"></div>
    </div>
  </div>
</div>
...

PM MAIL   Вверх
Страницы: (3) Все [1] 2 3 
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.1301 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.