X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Прижат блок к верхним блокам.
pal2
pal2
Topic Starter сообщение 2.3.2012, 21:01; Ответить: pal2
Сообщение #1


В двухколоночном макете в блоке контекст есть блок (обозначен красным цветом) не получается прижать его к расположенным выше двум блокам. Он должен располагаться по ширине 2-блоков. Внутри будут превьюшки изображений.[attachment=38676:template.jpg]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Электроник
Электроник
сообщение 2.3.2012, 21:06; Ответить: Электроник
Сообщение #2


покажите свой код
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pal2
pal2
Topic Starter сообщение 2.3.2012, 21:09; Ответить: pal2
Сообщение #3


html+css или только часть?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pal2
pal2
Topic Starter сообщение 2.3.2012, 21:13; Ответить: pal2
Сообщение #4


Думал получится так:
#image_list {
    clear:both;
    margin: 10px;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Электроник
Электроник
сообщение 2.3.2012, 21:15; Ответить: Электроник
Сообщение #5


желательно и то и другое, но можем попробовать только "проблемную часть", если будет мало я напишу об это
(для кода есть оранжевые кнопки)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Электроник
Электроник
сообщение 2.3.2012, 21:21; Ответить: Электроник
Сообщение #6


(pal2 @ 3.3.2012, 00:13) *
Думал получится так:

это только один стиль непонятно чего

(pal2 @ 3.3.2012, 00:01) *
в блоке контекст

покажите "блок контекст" его слили , все блоки которые в нём со стилями
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pal2
pal2
Topic Starter сообщение 2.3.2012, 21:36; Ответить: 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


(pal2 @ 3.3.2012, 00:36) *
Благодарю за ответ.

рано :)

(pal2 @ 3.3.2012, 00:36) *
Проблемная часть 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
pal2
Topic Starter сообщение 2.3.2012, 22:45; Ответить: pal2
Сообщение #9


Благодарю за ответ. Попробую применить на практике.
Извините за кашу в коде....

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как скрыть блок в приложении на 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-


 



RSS Текстовая версия Сейчас: 19.3.2024, 9:25
Дизайн