Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > как убрать отступ при блочной вёрстке


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

Автор: WebMast 18.1.2009, 15:59
Давайте код ; ).

Автор: supervladislav 18.1.2009, 18:40
уже давал блин ,а неподскажите заодно как сделать два блока меню плавающими 

Код

<!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;}

Автор: Violator 18.1.2009, 18:54
supervladislav, 
А зачем вы ставите width:100% ? Блок и так будет расстягиваться на всю ширину, если у него не стоит float
И если можно приведите код

Автор: supervladislav 18.1.2009, 19:00
вы прокакую часть кода))) а оступы то как убрать 

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

ps почему вы все прописываете через id у вас что все такое уникальное? И перестаньте увлекаться позиционированием. smile 

Автор: supervladislav 18.1.2009, 19:37
ну это круто позиционирование,понимаите 1000px я убрал теперь при уменьшении окна левый блок налезает на правый ,можно как-то енто исправить ,меню саморастягивающиеся ,я хочу чтобы оно занимало ну хотябы 50 процентов ,но оно налезает на другой див в эксплоррере собственно я и поставил там  1000px чтобы как-то  зафиксировать их ,можно может как-то через отступы это сделать или ещё как ,чтобы скриптов не писать 

Автор: Violator 18.1.2009, 19:56
о каком саморастягивающемся меню вы говорите, если у всех блоков указан width?
ну и как они не будут залезать друг на друга, проследите ширину блоков, ширина задаваемая процентами указывает на то, что ширина будет вычисляться в процентах от ширины блока родителя

Автор: supervladislav 18.1.2009, 20:29
блин а если всё в процентах тогда ,что ,а кстате как отключить механизьм наследования?

Автор: Violator 18.1.2009, 21:14
на сколько я понял, вам нужно что-то похожее
Код

<!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>

Автор: Glook 18.1.2009, 22:10
supervladislav, выучите наконец css|html. или отдайте сайт на вёрстку профессионалам. больно смотреть что вы творите.

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

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

Добавлено через 14 минут и 12 секунд
Это видимо я вчера очень сильно недоспал float 

Автор: Violator 19.1.2009, 14:01
supervladislav, 
так на примере leftside и rightside пропорционально увеличивается и уменьшается, что вас не устраивает?

Автор: supervladislav 19.1.2009, 16:29
там картинки я же объяснял))))скажите если родительский эллемент 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 секунды
но при каждом разрешении оно растягивается по раздному и иногда переносится вниз

Автор: Violator 19.1.2009, 17:27
омг, ну так вставляйте теперь свои картинки, например так
Код

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

Автор: supervladislav 19.1.2009, 18:46
понимаите в чём дело а можно сделать так чтобы  при изменении разрешения небыло сдвигов 

Автор: Violator 19.1.2009, 19:11
supervladislav, конкретнее, каких именно сдвигов?

Автор: supervladislav 19.1.2009, 19:25
при изменении размера окна браузера правый флоат налезает на левый ,и круглый правый и левый углы сезжают ,можно как то закрепить дивы при условии ,что там плавающая аля резиновая вёрстка ,и чтобы меню стояло закреплённым

Автор: Violator 19.1.2009, 20:06
давайте код, что вы там уже наверстали...

Автор: supervladislav 19.1.2009, 22:27
Код

<div id="mainmenu">
<div id="n1"></div>
<div id="n2"></div>
<div id="n3"></div>
<div id="nizmenu5"></div>
<div id="mainmenlev2"></div>
</div>





Код

#mainmenu{float:left;width:400px;padding-left:40px;display:inline-block;padding-right:10px; }
#n1{background-image:url(../img/mainmenupravoverh.png);background-repeat:no-repeat;width:55px;height:50px;float:left;padding-left:10px;}
#n2{background-image:url(../img/mainmenusered.png);background-repeat:repeat-x;width:300px;height:50px;float:left;}
#n3{background-image:url(../img/mainmenulevoverh.png);background-repeat:no-repeat;width:44px;height:50px;float:left;}
#nizmenu5{width:90%;clear:both;display:inline-block;}
#mainmenlev2{background-image:url(../img/levomenumain.png);background-repeat:repeat-y;width:16px;height:400px;float:left;}
#mainmenlev3{width:95%; height:400px;float:left;background-color:#d6e9f0;  }
#mainmenle4{background-image:url(../img/pravomenumain.png);background-repeat:repeat-y;height:400px;width:16px;float:left;}

Автор: supervladislav 20.1.2009, 12:22
как сделать так чтобы блок был резиновым и стоял всёвремя посередине ,я сделал  но во всех кроме 6 эксплорера отображается нормально ,но при изменении окна блок сезжает вниз  как это можно исправить 

Автор: Violator 20.1.2009, 12:47
что это? smile 
может вам действительно стоит подучить немного теорию

Автор: supervladislav 20.1.2009, 13:03
ну может стоит я немпорю ,я хочу блочную вёрстку освоить так ,как освоил в своё время табличную ,моглибы вы подсказать почему эллемент правый становится ниже левого в 6ие ,как это можно с помощью свойств margin отрегулировать 

Автор: supervladislav 20.1.2009, 13:24
есть приблизительно следущая структура ,оба блока идут на 100% процентов ,как сделать так чтобы правый блок при уменьшении окна браузера несползал вниз ,я над этим бьюсь уже очень долго ,отступы в каждом браузере отображаются по разному ,где-то больше ,где-то меньше ,последнии версии браузеров отображают всё более менее корректно ,Но грёбанный эксплорер 6 ,который у много кого ещё стоит ,при уменьшении окна браузера правый эллемент сползает под левый. 

Код



.er{width:30%;float:left;}
.er1{width:70%;float:left;margin-left:20%;}

Автор: Violator 20.1.2009, 13:33
вы говорите о резиновом меню и при этом жестко задаете свойства width и height
посмотрите на свою верстку, например
mainmenu - 400px
n1, n2, n3 - я так понимаю это верх вашего меню, при этом:
n1 - 55px+10px(padding-left)
n2 - 300px
n3 - 44px
учитывайте что padding влияет на ширину(высоту) блока, в данном случае ширина блока n1 будет 65px

Добавлено через 12 минут и 26 секунд
.er{width:30%;float:left;}
.er1{width:70%;float:left;margin-left:20%;}

ну разве трудно почитать свойства?
писАл же уже выше о процентах, если например размер окна у вас 1000px, соответственно ширина блока er будет 300px, а блока er1 - 700px, но при этом вы хотите отодвинуть блок er1 на 20% - на 200px

| er(300px) | margin(200px) | er1(700px) |

как 1200px влезет в размер окна 1000px? потому блок er1 лезет вниз
также вы должны знать о таком баге http://www.positioniseverything.net/explorer/doubled-margin.html

Автор: supervladislav 20.1.2009, 13:47
резиновое меню,так я уже переделала всё вот так теперь всё работатет 


Код

<!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 id="seredinamenu">
<div id="menulevo">
<div id="menlev1"></div>
<div id="seredmenu"></div>
<div id="menuniz"></div>
</div>

<div id="mainmenu">
<div id="n1"></div>
<div id="n2"></div>
<div id="n3"></div>
<div id="nizmenu5"></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;

}
#main,#logo,#polosaverh{margin:0px;padding:0px;}


#main{position:relative;top:0px;left:0%;right:0%;width:100%;min-width:800px;}
#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{width:160px;float:left;padding-left:20px;}
#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;margin-right:2%;}
#menuniz{background-image:url(../img/nizmenu1.png);background-repeat:no-repeat;width:269px;height:42px;margin-left:0px;margin-right:0px;}
#mainmenu{float:left;width:450px; margin-left:15%;margin-bottom:30px;margin-right:0px;}

#seredinamenu{position:relative;top:20px;left:0px; margin-left:0px;margin-right:0px; width:100%;display:inline-block;}
#mainmenlev1,#mainmenlev1,#mainmenlev1,#mainmenlev1{margin:0px;padding:0px;}

#n1{background-image:url(../img/mainmenupravoverh.png);background-repeat:no-repeat;width:55px;height:50px;float:left;padding-left:0px;}
#n2{background-image:url(../img/mainmenusered.png);background-repeat:repeat-x;width:200px;height:50px;float:left;}
#n3{background-image:url(../img/mainmenulevoverh.png);background-repeat:no-repeat;width:44px;height:50px;float:left;}
#n1,#n2,#n3,{margin-left:0px;margin-right:0px;display:inline;}

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


Добавлено через 2 минуты и 9 секунд
 Вот это нормально работает везде кроме ие 6 при уменьшении окна вёрстка сползает ,и ещё подскажите ак закрепить эллементы меню так чтобы они отображались как бы едино ,можно такое сделать?

Автор: Violator 20.1.2009, 14:02
http://cssing.org.ua/2005/09/02/min-width-for-ie/

Автор: supervladislav 20.1.2009, 16:42
ещё можешь подсказать последний вопрос как сделать так чтобы дивы фиксировались и не переносились вниз 

Автор: supervladislav 20.1.2009, 17:09
кстате с флоат позиционирование неработает 

Автор: melcheg 20.1.2009, 20:52
http://tubus.org/page.php?16

Автор: supervladislav 21.1.2009, 14:31
melcheg,продукт для лаймеров мне неинтересен )))
Violator  ты мог раньше сказать ,что проценты убрать нужно 

Автор: supervladislav 21.1.2009, 17:55
вот только в опере они становиться нехотят  даю printscreen почему, 

Автор: supervladislav 22.1.2009, 16:22
а как заставить растягиваться ,блок menupravo2



Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>массаж серагем</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<div id="main">
<div id="risunok"><img src="img/logo.jpg"  border="0" width="100%" /></div>
<div id="polosasered"></div>
<div id="menulevo">
<div id="menuverh"></div>
<div id="menuverhsered"></div>
<div id="menuniz"></div>
</div>
<div id="menupravo">
<div id="menupravo1">
<div id="menupravo2">

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










</div>
</body>
</html>

Код

body{margin:0px;
padding:0px;}

#polosasered{background-image:url(../../ceragem/img/verhpolosa.jpg);background-repeat:repeat-x;width:100%;height:80px;}
#menulevo{float:left;}
#menuverh{background-image:url(../../ceragem/img/verhmenu.png);background-repeat:no-repeat;width:269px;height:49px;}
#menuverhsered{background-image:url(../../ceragem/img/seredmen.png);background-repeat:repeat-y;width:269px;height:400px;}
#menuniz{background-image:url(../../ceragem/img/nizmenu1.png);background-repeat:no-repeat;width:269px;height:49px;}
#menupravo{float:left;}
#menupravo1{background-image:url(../../ceragem/img/pravoverh.png);background-repeat:no-repeat;background-position:0% 0%; width:24px;height:48px;padding-left:24px; }
#menupravo2{background-image:url(../../ceragem/img/seredmenuverh.png);background-repeat:repeat-x;height:50px;padding-right:24px;}

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)