Paralysed
Сообщение
29/07/2008 11:45
Копия темы
. Народ, помогите советом, как лучше сверстать такое (таблично). Текста может быть сколько угодно вниз, а вот этот уголок должен всегда текстом обтекаться и оставаться прижатым к низу. Можно даж height 100% заюзать, если что, не фатально
. Народ, помогите советом, как лучше сверстать такое (таблично). Текста может быть сколько угодно вниз, а вот этот уголок должен всегда текстом обтекаться и оставаться прижатым к низу. Можно даж height 100% заюзать, если что, не фатально
mayakwd
Сообщение
29/07/2008 11:52
Копия темы
.
.textpanel {
background-color: #такойто;
background-image: url(такойто.jpg);
background-position: bottom right;
}
<div class="textpanel">
<h2>Статьи о создании сайтов</h2>
<h3>Адекватная классификация сайтов</h3>
< p>Как только....</ p>
...
</div>
.
.textpanel {
background-color: #такойто;
background-image: url(такойто.jpg);
background-position: bottom right;
}
<div class="textpanel">
<h2>Статьи о создании сайтов</h2>
<h3>Адекватная классификация сайтов</h3>
< p>Как только....</ p>
...
</div>
mayakwd
Сообщение
29/07/2008 11:53
Копия темы
.
ресурс восприимчив к тэгам < p >
поэтому написал так :)
.
ресурс восприимчив к тэгам < p >
поэтому написал так :)
Paralysed
Сообщение
29/07/2008 11:55
Копия темы
.
фон прижать к низу эт замечательно, только вот текст на фоне будет торчать все же( а надо чтобы он обтекал этот уголок, как на картинке
.
фон прижать к низу эт замечательно, только вот текст на фоне будет торчать все же( а надо чтобы он обтекал этот уголок, как на картинке
mayakwd
Сообщение
29/07/2008 11:55
Копия темы
.
а кто сказал что это представленная картинка — весь сайт? может это отдельный блок.
.
а кто сказал что это представленная картинка — весь сайт? может это отдельный блок.
mayakwd
Сообщение
29/07/2008 12:13
Копия темы
ничего умнее не придумал ( .
<style>
div.info {
background-color: #e9e0e3;
background-image: url("corner.jpg");
background-position: bottom right;
background-repeat: no-repeat;
padding-bottom: 0px;
margin-bottom: 0px;
}
div.spacer {
float:right;
width:167px;
height: 100%;
}
</style>
<html>
<body>
<div class="info">
<h2>Статьи о создании сайтов</h2>
<h3>Адекватная классификация сайтов</h3>
< p >Maecenas mi libero, dapibus at, lacinia et, interdum non, enim. Quisque posuere. Phasellus lacus orci, ultrices eu, adipiscing ut, molestie sed, ligula. Pellentesque ultrices dapibus dolor. Aliquam elit ipsum, convallis at, bibendum in, ultricies et, turpis. Nullam lacinia, odio ac accumsan dignissim, massa est eleifend urna, ac commodo arcu felis vel enim. In at purus. Integer mauris sem, aliquet sit amet, auctor eu, dictum quis, justo. Vivamus et arcu. In hac habitasse platea dictumst. Donec mauris nisl, semper rutrum, vehicula feugiat, lacinia at, justo. Proin tempor. Morbi lorem. Nunc feugiat tortor. Donec consectetuer tincidunt urna. Nam scelerisque. Fusce sit amet risus nec arcu elementum consequat.< /p >
<h3>Адекватная классификация сайтов</h3>
< p >Maecenas mi libero, dapibus at, lacinia et, interdum non, enim. Quisque posuere. Phasellus lacus orci, ultrices eu, adipiscing ut, molestie sed, ligula. Pellentesque ultrices dapibus dolor. Aliquam elit ipsum, convallis at, bibendum in, ultricies et, turpis. Nullam lacinia, odio ac accumsan dignissim, massa est eleifend urna, ac commodo arcu felis vel enim. In at purus. Integer mauris sem, aliquet sit amet, auctor eu, dictum quis, justo. Vivamus et arcu. In hac habitasse platea dictumst. Donec mauris nisl, semper rutrum, vehicula feugiat, lacinia at, justo. Proin tempor. Morbi lorem. Nunc feugiat tortor. Donec consectetuer tincidunt urna. Nam scelerisque. Fusce sit amet risus nec arcu elementum consequat.< /p >
<h3>Адекватная классификация сайтов</h3>
<div class="spacer"> </div>
< p >Maecenas mi libero, dapibus at, lacinia et, interdum non, enim. Quisque posuere. Phasellus lacus orci, ultrices eu, adipiscing ut, molestie sed, ligula. Pellentesque ultrices dapibus dolor. Aliquam elit ipsum, convallis at, bibendum in, ultricies et, turpis. Nullam lacinia, odio ac accumsan dignissim, massa est eleifend urna, ac commodo arcu felis vel enim. In at purus. Integer mauris sem, aliquet sit amet, auctor eu, dictum quis, justo. Vivamus et arcu. In hac habitasse platea dictumst. Donec mauris nisl, semper rutrum, vehicula feugiat, lacinia at, justo. Proin tempor. Morbi lorem. Nunc feugiat tortor. Donec consectetuer tincidunt urna. Nam scelerisque. Fusce sit amet risus nec arcu elementum consequat.< /p >
</div>
</body>
</html>
ничего умнее не придумал ( .
<style>
div.info {
background-color: #e9e0e3;
background-image: url("corner.jpg");
background-position: bottom right;
background-repeat: no-repeat;
padding-bottom: 0px;
margin-bottom: 0px;
}
div.spacer {
float:right;
width:167px;
height: 100%;
}
</style>
<html>
<body>
<div class="info">
<h2>Статьи о создании сайтов</h2>
<h3>Адекватная классификация сайтов</h3>
< p >Maecenas mi libero, dapibus at, lacinia et, interdum non, enim. Quisque posuere. Phasellus lacus orci, ultrices eu, adipiscing ut, molestie sed, ligula. Pellentesque ultrices dapibus dolor. Aliquam elit ipsum, convallis at, bibendum in, ultricies et, turpis. Nullam lacinia, odio ac accumsan dignissim, massa est eleifend urna, ac commodo arcu felis vel enim. In at purus. Integer mauris sem, aliquet sit amet, auctor eu, dictum quis, justo. Vivamus et arcu. In hac habitasse platea dictumst. Donec mauris nisl, semper rutrum, vehicula feugiat, lacinia at, justo. Proin tempor. Morbi lorem. Nunc feugiat tortor. Donec consectetuer tincidunt urna. Nam scelerisque. Fusce sit amet risus nec arcu elementum consequat.< /p >
<h3>Адекватная классификация сайтов</h3>
< p >Maecenas mi libero, dapibus at, lacinia et, interdum non, enim. Quisque posuere. Phasellus lacus orci, ultrices eu, adipiscing ut, molestie sed, ligula. Pellentesque ultrices dapibus dolor. Aliquam elit ipsum, convallis at, bibendum in, ultricies et, turpis. Nullam lacinia, odio ac accumsan dignissim, massa est eleifend urna, ac commodo arcu felis vel enim. In at purus. Integer mauris sem, aliquet sit amet, auctor eu, dictum quis, justo. Vivamus et arcu. In hac habitasse platea dictumst. Donec mauris nisl, semper rutrum, vehicula feugiat, lacinia at, justo. Proin tempor. Morbi lorem. Nunc feugiat tortor. Donec consectetuer tincidunt urna. Nam scelerisque. Fusce sit amet risus nec arcu elementum consequat.< /p >
<h3>Адекватная классификация сайтов</h3>
<div class="spacer"> </div>
< p >Maecenas mi libero, dapibus at, lacinia et, interdum non, enim. Quisque posuere. Phasellus lacus orci, ultrices eu, adipiscing ut, molestie sed, ligula. Pellentesque ultrices dapibus dolor. Aliquam elit ipsum, convallis at, bibendum in, ultricies et, turpis. Nullam lacinia, odio ac accumsan dignissim, massa est eleifend urna, ac commodo arcu felis vel enim. In at purus. Integer mauris sem, aliquet sit amet, auctor eu, dictum quis, justo. Vivamus et arcu. In hac habitasse platea dictumst. Donec mauris nisl, semper rutrum, vehicula feugiat, lacinia at, justo. Proin tempor. Morbi lorem. Nunc feugiat tortor. Donec consectetuer tincidunt urna. Nam scelerisque. Fusce sit amet risus nec arcu elementum consequat.< /p >
</div>
</body>
</html>
Paralysed
Сообщение
29/07/2008 13:01
Копия темы
.
да через дня три) блин но я правда не могу эту хрень сверстать(
.
да через дня три) блин но я правда не могу эту хрень сверстать(
lindama
Сообщение
29/07/2008 13:03
Копия темы
.
я предпологала, что это трудно, но думала на крайняк моно тупо ентер в тексте поставить..
.
я предпологала, что это трудно, но думала на крайняк моно тупо ентер в тексте поставить..
bathellfire
Сообщение
29/07/2008 14:50
Копия темы
.
Сверстать такое очень легко, проблема в последнем параграфе... тут через JS нужно делать.
0
.
Сверстать такое очень легко, проблема в последнем параграфе... тут через JS нужно делать.