Помощник
|
Прижат блок к верхним блокам. |
pal2
|
Сообщение
#1
|
||
|
|
||
|
|||
Электроник |
2.3.2012, 21:06;
Ответить: Электроник
Сообщение
#2
|
|
покажите свой код
|
|
|
pal2
|
Сообщение
#3
|
|
html+css или только часть?
|
|
|
pal2
|
Сообщение
#4
|
|
Думал получится так:
#image_list {
clear:both; margin: 10px; } |
|
|
Электроник |
2.3.2012, 21:15;
Ответить: Электроник
Сообщение
#5
|
|
желательно и то и другое, но можем попробовать только "проблемную часть", если будет мало я напишу об это
(для кода есть оранжевые кнопки) |
|
|
Электроник |
2.3.2012, 21:21;
Ответить: Электроник
Сообщение
#6
|
|
|
|
|
pal2
|
Сообщение
#7
|
|
Благодарю за ответ.
Проблемная часть html: {% extends "2k.html" %} {% load thumbnail %} {% block room_detail %} <div id="room"> <!-- было 656 --> <h1>Комната №{{room.id}} "{{room.name_room}}"</h1> <p></p> <div id="room_image"> <ul class="product-list"> <li> <span class="title">{{room.name_room}} на {{room.level}} </span> <div class="visual"> {% for image in room.image_room_set.all|slice:":1" %} <!--<a href="{{MEDIA_URL}}{{image.image}}"><img src="{{ im.url }}" border="0" height="{{ im.height }}" width="{{ im.width }}"></a></div>--> <a href="{{MEDIA_URL}}{{image_default}}"><img src="{{MEDIA_URL}}{{image_default}}" border="0" height="160" width="200"></a></div> <span class="cost">Описание: {{room.description}}</span> </li> {% endfor %} </ul> </div> <div id="room_detail"> {% for mix in lamps %} <p><b>{{ forloop.counter }}</b> Тип: {{mix.lamp.type}} {{mix.lamp.base}} </br> {{mix.lamp.power}} </br> {{mix.count}} шт.</p> {% endfor %} </br>{{power}} ватт. </div> <div id="image_list"> <li> <span class="title">{{room_image}}</span> <div class="visual"> {% for image in room.image_room_set.all %} {% thumbnail image.image "120x100" crop="center" as im %} <!-- <img src="{{ im.url }}" width="150" height="150" alt="Покупка" /> --> <!--<a href="{{MEDIA_URL}}{{image.image}}"><img src="{{ im.url }}" border="0" height="{{ im.height }}" width="{{ im.width }}"></a></div>--> <a href="{{image.id}}"><img src="{{ im.url }}" border="0" height="{{ im.height }}" width="{{ im.width }}"></a></div> {% endthumbnail %} {% endfor %} <span class="cost"></span> </li> </div> </div> </div> {% endblock %} css файл body{
margin:0; color:#333; font:12px arial,sans-serif; background: #fff url(../media/bg-body.gif) repeat-x; } img{border-style:none;} a{ color:#36c; outline:none; } a:hover{text-decoration:none;} a:active { color : red; background-color : black; } input, textarea, select{ font:100% arial,sans-serif;ухколоночном макете в блоке контекст есть блок (обозначен красным цветом) не получается прижать его к расположенным выше двум блокам vertical-align:middle; } form, fieldset{ margin:0; padding:0; border-style:none; } #wrapper { width: 925px; margin:0 auto; } #header { overflow: hidden; height: 180px; background:url(../images/bg-header.jpg) no-repeat 457px 36px; padding: 29px 0 0; margin: 0 0 33px; } #header .align-left { float: left; width: 385px; color: #000; } #header h1 { font-size: 36px; font-weight: normal; margin: 0 0 17px; color: #000; } #header .main { font-size: 36px; font-weight: normal; margin: 0 0 17px; color: #000; display:block; } #header .main a { text-decoration: none; color: #000; } #header .align-left .location { display:block; font-weight: normal; color: #660; font-style: italic; font-size: 18px; padding: 0 0 27px; } #header p { margin: 0; } #header .contacts { float: right; width: 155px; padding: 5px 0 0; } #header .title { display:block; color: #666; padding: 0 0 13px; } #header .phone { display:block; font-weight: normal; font-size: 18px; color: #000; padding: 0 0 18px; } #header .mail { color: #36c; margin: 0 0 0 3px; } #main { overflow: hidden; height: 1%; } #sidebar { float: left; width: 200px; padding: 0 0 150px; } #sidebar h3 { margin: 0 0 15px; font-size: 18px; font-weight: normal; color: #333; } #sidebar .menu { margin:0; padding:0 0 22px 1px; list-style:none; overflow: hidden; height: 1%; font-size: 14px; } #sidebar .menu li { padding: 0 0 8px; } #sidebar .menu li a { color: #630; } #sidebar .menu li.active a { background:url(../images/menu-active.gif) no-repeat 100% 9px; padding: 0 13px 0 0; color: #000; text-decoration: none; } #sidebar .phone { font-weight: normal; color: #333; font-size: 18px; line-height: 24px; display:block; padding: 0 0 22px; } #sidebar .phone span { display:block; } #sidebar .mail { display:block; font-size: 14px; color: #666; padding: 0 0 0 2px; } #room { float: right; width: 700px; line-height: 18px; } #room h1, #room h2 { margin: 0 0 15px; font-size: 18px; font-weight: normal; color: #333; line-height: normal; } #room { margin: 0; } #room_image{ float: left; width: 200px; line-height: 18px; } #room_detail { float: right; width: 350px; line-height: 18px; } #image_list { clear:both; margin: 10px; } #content { float: right; width: 656px; line-height: 18px; } #content h1, #content h2 { margin: 0 0 15px; font-size: 18px; font-weight: normal; color: #333; line-height: normal; } #content p { margin: 0; } #content .list { margin:0; padding:0; list-style:none; overflow: hidden; height: 1%; } #content .list li { background:url(../images/arrow01.gif) no-repeat 0 8px; padding: 0 0 0 7px; } #content .box { overflow: hidden; height: 1%; padding: 0 0 29px; } #content .columns-list { margin:0; padding:0; list-style:none; overflow: hidden; height: 1%; } #content .columns-list li { float: left; background:url(../images/arrow01.gif) no-repeat 0 8px; padding: 0 0 0 7px; width: 28.2%; } #content .product-list { margin:0 -25px 0 0; padding: 20px 0 4px; list-style:none; overflow: hidden; width: 681px; color: #000; } #content .product-list li { float: left; width: 200px; padding: 0 27px 23px 0; } #content .product-list .title { display:block; color: #930; font-size: 14px; padding: 0 0 10px; } #content .product-list .visual { overflow: hidden; height: 1%; padding: 0 0 5px; } #content .product-list .visual img { vertical-align: top; } #content .product-list .cost { display:block; } #footer { overflow: hidden; width: 245px; color: #999; line-height: 18px; margin: -103px 0 0; } #footer p { margin: 0; } #footer a { color: #999; } |
|
|
Электроник |
2.3.2012, 22:00;
Ответить: Электроник
Сообщение
#8
|
|
Благодарю за ответ. рано :) Проблемная часть html: я ожидал чего-то более разборчивого если я правильно понял, то это то, что вы спрашивали [CSS].myclass1 { width:340px; height:280px; background-color:#efefef;} .myclass2 { width:150px; height:150px; float:left; margin:10px; background-color:#000000;} .myclass3 { width:320px; height:100px; clear:left; margin:10px; background-color:#ff0000;}[/CSS] <div class="myclass1"> попробуйте сами разобраться что/где поменять<div class="myclass2"></div> <div class="myclass2"></div> <div class="myclass3"></div> </div> если не получиться пишите |
|
|
pal2
|
Сообщение
#9
|
|
|
Благодарю за ответ. Попробую применить на практике.
Извините за кашу в коде....
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Как скрыть блок в приложении на Android | 0 | Вито_052 | 1088 | 15.12.2019, 12:37 автор: Вито_052 |
|
Появляющийся блок | 0 | sergei_burg | 2180 | 1.6.2019, 13:39 автор: -sergei1980- |
|
Перенести блок FAQ с сайта Верстка |
3 | Gera | 2510 | 13.12.2018, 15:40 автор: mmkulikov |
|
Куплю места на мордочках, под сквозные ссылочки под блок сквозных ссылок. тематика: СМИ,Туризм,Медицина |
4 | SeoGanik | 9605 | 18.2.2017, 12:33 автор: SeoGanik |
|
Выровнить абсолютный блок по центру НЕИЗВЕСТНОГО размера без js | 2 | lensoy | 5585 | 27.9.2015, 19:08 автор: -lensoy- |
Текстовая версия | Сейчас: 19.3.2024, 9:25 |