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



 

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

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

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Слой в слое
st0rk
st0rk
Topic Starter сообщение 2.9.2008, 11:21; Ответить: st0rk
Сообщение #1


Добрый день!
Такая проблема: делаю див в нем еще 2 - нужно 2 колонки типа, чтоб одна больше, а вторая меньше. позиционирование левой absolute а правой relative. Вопрос: как сделать чтобы при relative указании 100% ширины оно растягивалось только на дочерний див, тоесть все место что справа занимало?
вот css:

#index_left {
position: absolute;
width:398px;
left:130px;
top:125px;
background:#d7f0fc;
border:solid 1px black;
text-align:justify;
font-size: 12px;
font-family: Tahoma,Helvetica,Arial,Sans-Serif;
padding:2px;
}

#index_right {
position: relative;
left:410px;
width:100%;
background:#d7f0fc;
border:solid 1px black;
text-align:justify;
font-size: 12px;
font-family: Tahoma,Helvetica,Arial,Sans-Serif;
padding:2px;
}

#all_index {
margin-left: 130px;
background:#d7f0fc;
border:solid 1px black;
margin-top: 3px;
text-align:justify;
font-size: 12px;
font-family: Tahoma,Helvetica,Arial,Sans-Serif;
padding:2px;
    }


all_index - это слой в котором находятся index_left и index_right
при таком раскладе правый див растягивает за границу all_index :zloy:
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 2.9.2008, 12:33; Ответить: Exterior
Сообщение #2


st0rk, плохая идея использовать position для разделения колонок в родительском div`е. На мой взгляд, лучше так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>test columns</title>

<style type="text/css">
<!--
#all_index {
margin-top: 3px;
margin-left: 130px;
padding: 2px;
border: solid 1px black;
background: #d7f0fc;
font-family: Tahoma, Helvetica, Arial, Sans-Serif;
font-size: 12px;
text-align: justify;

/* //////////// добавлено //////////// */
height: 400px;
/* /////////////////////////////////// */
}

#index_left {
width: 398px;
/*position: absolute; left: 130px; top: 125px; <-- НЕ НУЖНО */
padding: 2px;
border: solid 1px black;
background: #d7f0fc;
font-family: Tahoma, Helvetica, Arial, Sans-Serif;
font-size: 12px;
text-align: justify;

/* //////////// добавлено //////////// */
height: 300px;
float: left;
/* /////////////////////////////////// */
}

#index_right {
/*width: 100%; <-- НЕ НУЖНО
/*position: relative; left: 410px; <-- НЕ НУЖНО */
padding: 2px;
border: solid 1px black;
background: #d7f0fc;
font-family: Tahoma, Helvetica, Arial, Sans-Serif;
font-size: 12px;
text-align: justify;

/* //////////// добавлено //////////// */
height: 300px;
margin-left: 398px;
}
/* /////////////////////////////////// */
--
>
</style>

</head>

<body>

<div id="all_index">
<div id="index_left"></div>
<div id="index_right"></div>
</div>

</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
st0rk
st0rk
Topic Starter сообщение 2.9.2008, 13:46; Ответить: st0rk
Сообщение #3


идея в чем: на титуле должно выводиться и блок новостей и блок-приветствие (которое у меня до этого занимало главную страницу)
я делаю 2 слоя - первый для того чтобы в нем размещать слой с новостями - тоесть чтобы каждая новость не шла по горизонтали за предыдущей по float:left; а была ниже другой. второй слой - в нем будет слой с главной страницей.тоесть 2 слоя и в них еще по одному.
вот что у меня получилось:
#index_left {
left:2px;
margin-top: 3px;
background:#d7f0fc;
text-align:justify;
font-size: 12px;
border:solid 1px black;
font-family: Tahoma,Helvetica,Arial,Sans-Serif;
padding:2px;
}

#index_right {
background:#d7f0fc;
border:solid 1px black;
text-align:justify;
font-size: 12px;
font-family: Tahoma,Helvetica,Arial,Sans-Serif;
padding:2px;
}

#all_left {
float:left;
width: 53%;
margin-left: 5px;
padding:5px;
}

#all_right {
float:left;
width: 33%;
margin-left: 840px;
}
с левым слоем все отлично, стоит где нужно, а вот правый почему-то стоит справа но сдвинут началом на конец левого слоя.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 2.9.2008, 14:56; Ответить: Exterior
Сообщение #4


st0rk, к CSS выкладывайте еще и html-код, чтобы сразу было видно что к чему. А еще лучше - рисунок-макет.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
st0rk
st0rk
Topic Starter сообщение 2.9.2008, 16:15; Ответить: st0rk
Сообщение #5


вот как все выглядит http://kisumdu.konotop.org/test/?page=titul
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 2.9.2008, 22:18; Ответить: Exterior
Сообщение #6


st0rk, ссылка не работает
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
st0rk
st0rk
Topic Starter сообщение 8.9.2008, 10:20; Ответить: st0rk
Сообщение #7


были проблемы с сервером, попробуйте сейчас - должно все работать

------------------------------------------------------------------------

подскажите плз, уже голову сломал, неполучается :( или незаходит опять на сайт?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Jesus_hb
Jesus_hb
сообщение 17.10.2008, 10:57; Ответить: Jesus_hb
Сообщение #8


(st0rk @ 2.9.2008, 14:21) *
Добрый день!
Такая проблема: делаю див в нем еще 2 - нужно 2 колонки типа, чтоб одна больше, а вторая меньше.


У меня вопрос, возникший после решения проблемы с двумя колонками. Пока все застопорилось на теоретическом уровне.

Нарисовал макет (см. "миниутюра1").
Div'ы и css можно сказать что не знаю! Разъясните, plz:
Если дивами идет верстка вертикальная с возможностью доставлять блоки горизонтальные, то как быть с тем, что пойдет после 5 и 7 блоков? (после них всё съезжает/наползает)
Как сделать что-то вроде табличного тега colspan для 6?
Этот макет верстается? Если да, то пойду дальше ломать голову), Если нет, то как его можно перекроить?


PS попробовал похимичить на макете "CREAM":goodpost: от Exterior, но всеравно не получилось. У Вас бы это выглядело так: см. "миниутюра2"
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 17.10.2008, 11:12; Ответить: Webmaster_hb
Сообщение #9


(Jesus_hb @ 17.10.2008, 13:57) *
Если дивами идет верстка вертикальная с возможностью доставлять блоки горизонтальные, то как быть с тем, что пойдет после 5 и 7 блоков? (после них всё съезжает/наползает)
Как сделать что-то вроде табличного тега colspan для 6?

в DIV'ах это делается наоборот, т.е. все блоки это строчки
а если вам нужно разделить строчку на несколько ячеек, то ставятся два рядом
рядом ставятся используя float:left
и обрамляются вокруг еще одним блоком на всякий случай с overflow:hidden
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Jesus_hb
Jesus_hb
сообщение 17.10.2008, 11:18; Ответить: Jesus_hb
Сообщение #10


Спасибо! Пойду погуглю))) float:left
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


 



RSS Текстовая версия Сейчас: 28.3.2024, 12:53
Дизайн