Растянуть в ширину и высоту на 100%
|
|
lodas | Дата: 22 Июня 2011, 20:22 | Сообщение # 1 | ● ● ● ● ● 9 сообщений Статус: Offline | Здравствуйте. Пишу вам, как истинным профессионалам своего дела, хотел бы обратиться к вам за помощью. Вообщем решил я научиться верстке, я еще новичок в этом деле. Фиксированный дизайн у меня получилось сверстать, а вот резиновый. Подскажите как данный сайт растянуть на 100% в ширину и высоту. Извините что код очень большой HTML Code <html> <head> <title>Сайт</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id="Conteiner"> <div id="Log"> <div id="Logo"></div> </div> <div id="Content"> <div id="Perv_tviter"> <div id="Content1"> <div id="Soobha"> <div id="ric1"></div> <div id="ric3"></div> <div id="zel_kvadrat"><a href="index.html" class="zel"></a></div> <div id="ric5"></div> </div> <div id="Soobha2"> <div id="ric2"> <span id="Joy">JOURNAL TITLE TEXT</span> <span id="Avtor">author: <a href="index.html" class="">admin</a> tag: <a href="index.html" class="">photoshop</a>, <a href="index.html" class="">web</a>, <a href="index.html" class="">sample...</a></span> </div> <div id="ric4"></div> <div id="rank"></div> </div> </div> <div id="Content2"> <div id="Fon"> <div id="Edit1"> <form><input type="text" src="images/Edit.png" class="Edit" name="txtName1" size="40" maxlength="50" value="login"></form> </div> <div id="Edit2"> <form><input type="text" src="images/Edit.png" class="Edit2" name="txtName1" size="30" maxlength="50" value="password"></form> </div> <div id="Button"> <form method="post" action="../admin/add_story.php"> <input type="submit" name="submit" value="Login in" class="Sumb1"> </form> </div> <div id="Meny"> <span id="zagolovok">RESENT POST</span> <div id="href1"><a class="href1" href="index.html">1.samole text</a></div> <div id="href1"><a class="href1" href="index.html">2.samole text</a></div> <div id="href1"><a class="href1" href="index.html">3.samole text</a></div> <div id="href1"><a class="href1" href="index.html">4.samole text</a></div> <div id="href1"><a class="href1" href="index.html">5.samole text</a></div> <div id="href1"><a class="href1" href="index.html">6.samole text</a></div> <div id="href1"><a class="href1" href="index.html">7.samole text</a></div> <div id="href1"><a class="href1" href="index.html">8.samole text</a></div> <div id="href1"><a class="href1" href="index.html">9.samole text</a></div> </div> <div id="Edit3"> <form><input type="text" src="images/Edit.png" class="Edit3" name="txtName1" size="40" maxlength="50" value="Search"></form> </div> <div id="Button2"> <form method="post" action="../admin/add_story.php"> <input type="submit" name="submit" value="Search" class="Sumb2"> </form> </div> </div> </div> </div> <div id="Vtoroi_tviter"> <div id="block1"> <div id="fon1"></div> <div id="fon2"></div> </div> <div id="block2"> <div id="fon3"></div> <div id="fon4"> <span id="Joy1">JOURNAL TITLE TEXT</span> <span id="Avtor1">author: <a href="index.html" class="">admin</a> tag: <a href="index.html">photoshop</a>, <a href="index.html" class="">web</a>, <a href="index.html" class="">sample...</a></span> </div> <div id="fon5"></div> </div> <div id="lef_twitter"> <div id="fon6"></div> <div id="fon7" class="zel2"></div> <div id="fon8"></div> </div> <div id="lef_twitter2"> <div id="bel_fon"></div> <div id="fon9"></div> <div id="fon10"></div> </div> <div id="lef_twitter3"> <div id="fon11"></div> <div id="fon12"></div> <div id="fon13"></div> </div> </div> </div> <div id="Footer"> <div id="dubl1"> <div id="Boot1"> <div id="links"></div> </div> <div id="polosa1"></div> </div> <div id="dubl2"> <div id="Boot2"> <div id="links2"></div> </div> <div id="polosa2"></div> </div> <div id="dubl3"> <div id="Boot3"> <div id="links3"></div> </div> </div> </div> </div> </div> </body> </html> CSS Code div { margin:0px; padding:0px; } #Conteiner { width:800px; height:1100px; margin:0 auto; position: absolute; padding:0px; } #Log { width:800px; height:154px; background-image: url('../images/logo.png');
} #Logo { width:800px; height:154px; float:left; } #Content { width:800px; height:658px; clear:both; } #Perv_tviter { width:800px; height:344px; float:left; } #Vtoroi_tviter { width:800px; height:314px; float:left; } #Content1 { width:533px; height:344px; float:left; } #Content2 { width:267px; height:344px; float:left; } #ric1 { width:110px; height:51px; float:left; background-image: url("../images/content1.png"); } #ric2 { width:423px; height:51px; float:left; background-image: url("../images/ser_polosa_content.png"); } #ric3 { float:left; width:63px; height:52px; background-image: url("../images/content3.png"); } #zel_kvadrat { width:47px; height:52px; float:left; background-image: url("../images/content4.png"); cursor: pointer; } .zel { width:47px; height:52px; float:left; background-image: url("../images/content4.png"); cursor: pointer; } #ric4 { float:left; width:423px; height:257px; background-image: url("../images/bel_fon.png"); } #ric5 { float:left; width:110px; height:241px; background-image: url("../images/content5.png"); } #Soobha { width:110px; height:344px; float:left; } #rank { float:left;/*clear:both;*/ width:423px; height:36px; background-image: url("../images/rank.png"); } * html #rank { height:34px; } #Soobha2 { width:423px; height:344px; float:left; } #Fon { width:267px; height:344px; float:left; background-image: url("../images/poisk.png"); } #Edit1 { width:267px; height:20px; float:left; } .Edit { background-repeat: no-repeat; height: 18px; width: 129px; background-image: url("../images/Edit.png"); border: 0px; margin-top:4px; margin-left:59px; float:left; } #Edit2 { width:267px; height:20px; float:left; } .Edit2 { background-repeat: no-repeat; height: 18px; width: 129px; background-image: url("../images/Edit.png"); border: 0px; margin-top:5px; margin-left:59px; float:left; } #Button { width:267px; height:15px; clear:both; } .Sumb1 { width:57px; height:24px; float:left; margin-left:57px; margin-top:3px; } * html .Sumb1 { margin-top:2px; } #Edit3 { width:267px; height:20px; float:left; } .Edit3 { background-repeat: no-repeat; height: 18px; width: 129px; background-image: url("../images/Edit.png"); border: 0px;
margin-left:58px; float:left; } #Button2 { width:48px; height:15px; float:left; } .Sumb2 { width:57px; height:24px; float:left; margin-left:57px; } * html #Meny { height:227px; } #Meny { width:267px; height:233px; float:left; } #zagolovok { margin-left:57px; color:white; font-size:18px; } a {font-size:16px; color:white; font-weight:bold; text-decoration:none; } a:hover {font-size:16px; color:#ff0000; font-weight:bold; text-decoration:none;} #href1 { margin-left:57px; } #Joy { color:white; font-size:30px; margin-left:12px; float:left; display:block; height:26px; } #Avtor { display:block; color:white; font-size:13px; margin-left:12px; clear:both; } #block1 { width:800px; height:26px; float:left; } #fon1 { width:110px; height:26px; float:left; background-image: url("../images/content6.png"); } #fon2 { width:690px; height:26px; float:left; background-image: url("../images/content7.png"); } #block2 { width:800px; height:51px; float:left; } #fon3 { width:110px; height:51px; float:left; background-image: url("../images/content8.png"); } #fon4 { width:423px; height:51px; float:left; background-image: url("../images/ser_poloska.png"); } #fon5 { width:267px; height:51px; float:left; background-image: url("../images/content9.png"); } #lef_twitter { width:110px; height:237px; float:left; } #fon6 { width:63px; height:52px; float:left; background-image: url("../images/content9-19.png"); } #fon7 { width:47px; height:52px; float:left; background-image: url("../images/Times.png"); cursor: pointer; } .zel2 { width:47px; height:52px; float:left; background-image: url("../images/Times.png"); cursor: pointer; } #fon8 { width:110px; height:185px; float:left; background-image: url("../images/content12.png"); } #bel_fon { width:423px; height:121px; float:left; background-image: url("../images/bel_font.png"); background-repeat: no-repeat; } #lef_twitter2 { width:423px; height:237px; float:left; } #fon9 { width:423px; height:20px; float:left; background-image: url("../images/serh.png"); } #fon10 { width:423px; height:96px; float:left; background-image: url("../images/content13.png"); } #lef_twitter3 { width:267px; height:237px; float:left; } #fon11 { width:267px; height:52px; float:left; background-image: url("../images/content10.png"); } #fon12 { width:267px; height:185px; float:left; background-image: url("../images/content14.png"); } #Footer { width:800px; height:288px; clear:both; background-image: url("../images/Nun.png"); background-repeat: repeat; } #dubl1 { width:270px; height:288px; float:left; } #dubl2 { width:290px; height:288px; float:left; } #dubl3 { width:228px; height:288px; float:left; } #links { margin-top:23px; margin-left:137px; width:101px; height:32px; float:left; background-image: url("../images/i.png"); background-repeat: no-repeat; } #Boot1 { width:250px; height:288px; float:left; } #polosa1 { width:19px; height:288px; float:left; background-image: url("../images/B.png"); background-repeat: no-repeat; } #Boot2 { width:270px; height:288px; float:left; } #links2 { margin-top:23px; width:119px; height:32px; float:left; background-image: url("../images/w.png"); background-repeat: no-repeat; } #polosa2 { width:20px; height:288px; float:left; background-image: url("../images/L.png"); background-repeat: no-repeat; } #links3 { margin-top:23px; width:119px; height:32px; float:left; background-image: url("../images/k.png"); background-repeat: no-repeat; } #Boot3 { width:228px; height:288px; float:left; } #Joy1 { color:white; font-size:27px; margin-left:12px; float:left; display:block; height:20px; } #Avtor1 { display:block; color:white; font-size:13px; margin-left:12px; clear:both; height:20px; } | | |
|
HUNTEROR | Дата: 22 Июня 2011, 20:52 | Сообщение # 2 | ● ● ● ● ● 362 сообщения Статус: Offline | Никто не будет копаться в твоем коде. Ссылку на сайт или страницу в готовом виде | | |
|
lodas | Дата: 22 Июня 2011, 22:50 | Сообщение # 3 | ● ● ● ● ● 9 сообщений Статус: Offline | вот http://file.qip.ru/file/lc9YbK49/сайт2.html | | |
|
HUNTEROR | Отредактировал HUNTEROR - Среда, 22 Июня 2011, 23:25 Дата: 22 Июня 2011, 23:24 | Сообщение # 4 | ● ● ● ● ● 362 сообщения Статус: Offline | Каждому блоку в вашем дизайне дана фиксированная ширина. Указывайте размеры в процентах, если хотите что бы пропорции сайта сохранялись в зависимости от разрешения монитора. Если же вам просто нужен сайт во всю длину позадавайте 100%.
Верстку вы начали неправильно. Сначала задается размер главного дива в который заключены все остальные блоки, выставляются отступы от краев экрана в процентах(если резина). Или же главный див центрируют. А дальше размеры уже вложенных блоков задаются отнасительно него, а вовсе не в пикселях. Желания копаться в коде совершенно нет.
Если блочному элементу не задана ширина, он растягивается на 100% относительно родительного элемента, нет нужды задавать размеры вложеных блоков, если родителю уже задана ширина. | | |
|
lodas | Дата: 22 Июня 2011, 23:51 | Сообщение # 5 | ● ● ● ● ● 9 сообщений Статус: Offline | У меня к вам еще родились еще три вопроса: 1.Как правильно выставить отступы от краев экрана в процентах? 2.Как правильно указать размеры вложенных блоков процентах? 3.Если блочному элементу не задана ширина, он растягивается на 100% относительно родительного элемента, нет нужды задавать размеры вложенных блоков, если родителю уже задана ширина. я так понял если в трех главных блоках(Log,Content,Footer) поставить ширину 100%, а во внутренних везде убрать, то он растянется как надо? | | |
|
HUNTEROR | Отредактировал HUNTEROR - Четверг, 23 Июня 2011, 00:29 Дата: 23 Июня 2011, 00:39 | Сообщение # 6 | ● ● ● ● ● 362 сообщения Статус: Offline | 1.Как правильно выставить отступы от краев экрана в процентах? Есть два типа отступов: margin тыц(от внешних элементов) и padding тыц (от границ). Вообще-то, нормально было бы сначала задать ширину главных блоков в процентах, а затем отцентрировать. Но в вашем случае, я бы задавал отступы. Code body {margin: 0 20%;}
2.Как правильно указать размеры вложенных блоков процентах? Code #div1 {width: 60%} // при этом убирайте ширины из html
3.Если блочному элементу не задана ширина, он растягивается на 100% относительно родительного элемента, нет нужды задавать размеры вложенных блоков, если родителю уже задана ширина. я так понял если в трех главных блоках(Log,Content,Footer) поставить ширину 100%, а во внутренних везде убрать, то он растянется как надо? В теории, да.
Но только заточен ваш дизайн-то как раз под 800px. При растягивании сайта размеры графики остаются прежними(если только их тоже не делать резиновыми, что не рекомендую). С чего вы так ухватились за эту резину? Я бы на вашем месте просто отцентрировал бы сайт, а бекграунд расстянул на всю ширину. http://whiteclan.ucoz.net/ - вот мое решение.
Добавлено (23 Июнь 2011, 00:29) --------------------------------------------- Зажмите ctrl и покрутите колесико мыши вниз - узнаете как выглядит это в большем разрешении. Резиновый, у меня в этом случае, остался только блок с отзывами.Добавлено (23 Июнь 2011, 00:39) --------------------------------------------- оО Боже мой! Я как увидел эти извращения с бекграундом! Вы вообще сил не жалеете? | | |
|
lodas | Дата: 23 Июня 2011, 10:17 | Сообщение # 7 | ● ● ● ● ● 9 сообщений Статус: Offline | Quote Я как увидел эти извращения с бекграундом! Вы вообще сил не жалеете? Что вы имеете в виду? Вобщем я научился верстать фиксированный макет, теперь хочу научиться резиновый. Знаю что макет заточен под 800px но хочется понять как делается именно резиновый. Убрал ширину во вложенных блоках, поставил в главных 100% -все поплыло ... Вот вы мне показали Code #div1 {width: 60%} // при этом убирайте ширины из html а как именно высчитать сколько процентов будет занимать именно тот или иной вложенный блок. Например блок <div id="Logo"> занимает в ширину 800px, в нем есть вложенный блок например 233px, как высчитать сколько это в процентах? Сил не жалко, так как познаю азы | | |
|
HUNTEROR | Дата: 23 Июня 2011, 16:18 | Сообщение # 8 | ● ● ● ● ● 362 сообщения Статус: Offline | Конечно поплыло. Такое впечатление, что вы сайт в майкрософт екселе делали Там нужно все разбирать =/ Ничего не выйдет. Верстайте новый, резиновый дизайн. Как новичку, могу предложить взять уже что-нибудь готовое и подделать. А этот можно разве что отцентрировать. | | |
|
lodas | Отредактировал lodas - Четверг, 23 Июня 2011, 16:42 Дата: 23 Июня 2011, 16:33 | Сообщение # 9 | ● ● ● ● ● 9 сообщений Статус: Offline | Quote Конечно поплыло. Такое впечатление, что вы сайт в майкрософт екселе делали wink я старался. вроде получилось. а можно было как то легче? Честно-Было очень тяжело | | |
|
HUNTEROR | Отредактировал HUNTEROR - Четверг, 23 Июня 2011, 18:30 Дата: 23 Июня 2011, 18:20 | Сообщение # 10 | ● ● ● ● ● 362 сообщения Статус: Offline | Code <div style="background: url('Весь фон одной картинкой') yellow; width: 70%; margin-left: auto; margin-right: auto;"> <div style="background: url('шапка'); text-align: center;">Голова</div> <div style="width: 60%; float: left; background: green;">Левый блок</div><div style="background: red;">Правый блок</div> <div style="clear:both; text-align: center;">Дно</div> </div>
Вот вам весь ваш сайт по-сути. Только резиновый xD | | |
|
lodas | Дата: 23 Июня 2011, 23:40 | Сообщение # 11 | ● ● ● ● ● 9 сообщений Статус: Offline | ну основные блоки у меня сделаны также как у вас. только без резиновой ширины. Просто у меня много внутренних блоков, это вроде как плохо... но легче никак не получалось. Спасибо вам за помощь | | |
|
HUNTEROR | Отредактировал HUNTEROR - Пятница, 24 Июня 2011, 20:27 Дата: 24 Июня 2011, 18:00 | Сообщение # 12 | ● ● ● ● ● 362 сообщения Статус: Offline | lodas, зачем вы бекграунд разбили на туеву хучу пустых дивов? В общем, учиться еще тебе) удачи | | |
|
imapo | Дата: 24 Июня 2011, 20:37 | Сообщение # 13 | ● ● ● ● ● Группа: Редакторы 831 сообщение Статус: Offline | зачем вы бекграунд разбили на туеву хучу пустых дивов? В общем, учиться еще тебе
Ох, какой резкий переход с ВЫ на ТЫ | | |
|
lodas | Дата: 24 Июня 2011, 21:52 | Сообщение # 14 | ● ● ● ● ● 9 сообщений Статус: Offline | ну не совсем пустых... заполненных фоновым изображением. Я разбил на так много дивов чтобы картинки нарезанные мелко грузятся быстрее. Если я вас правильно понял можно было вырезать большими картинками, и делать внутренние дивы только по необходимости. я вас правильно понял? | | |
|
HUNTEROR | Дата: 25 Июня 2011, 15:04 | Сообщение # 15 | ● ● ● ● ● 362 сообщения Статус: Offline | lodas, нормальные люди делают цельный бекграунд к главному диву или бади. А как бы по-вашему выглядел ваш сайт если бы там было больше чем два материала на главной? | | |
|
lodas | Дата: 25 Июня 2011, 17:23 | Сообщение # 16 | ● ● ● ● ● 9 сообщений Статус: Offline | Наверное он был бы растянуть в высоту еще больше... Других решений я к сожалению не вижу Ну тогда скажите как надо делать правильно? Чтобы на будущее я знал как и верстал по правилам | | |
|
HUNTEROR | Дата: 25 Июня 2011, 20:35 | Сообщение # 17 | ● ● ● ● ● 362 сообщения Статус: Offline | Я же привел вам пример макета. Это все. Дополнительных кусков с бекграундами не нужно. Берите стандартные шаблоны юкоз и разбирайте, переделывайте под себя. Так многие начинают. Основы вы уже знаете, у вас только проблемы с конструкцией. Дело за малым. | | |
|