Agata K.

Agata K. Ilustrator / Graphic
Designer

Temat: Jak zrobić rozciagający się z tłem separator pionowy?

Witam wszystkich. :)
Mam problem, chciałabym zrobić rozciągający się wraz z tłem separator pionowy, a właściwie dwa. Na stronie są trzy kolumny rozdzielone wykropkowanymi liniami pionowymi. Chciałabym żeby linie rozciągały się tak jak tło pod tymi kolumnami (tło rozciąga się w dół tyle ile wynosi najdłuższa kolumna). Mam nadzieję, że mi podpowiecie, bo już nie wiem co robić... :(

HTML:

<div id="content">
<div class="wrapper">
<div class="main_content">

<div id="column1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sagittis sollicitudin elit, vitae accumsan turpis venenatis in. Praesent hendrerit vestibulum nisi non rhoncus. </div>

<div class="vertical_dotted_line"></div>

<div id="column2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sagittis sollicitudin elit, vitae accumsan turpis venenatis in. Praesent hendrerit vestibulum nisi non rhoncus. </div>

<div class="vertical_dotted_line"></div>

<div id="column3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sagittis sollicitudin elit, vitae accumsan turpis venenatis in. Praesent hendrerit vestibulum nisi non rhoncus. </div>

</div>
</div>
</div>

CSS:

.horizontal_dotted_line
{
float: left;
border-bottom: 1px dotted #999999;
width: 100%;
margin-top:20px;
margin-bottom: 20px;
}

.vertical_dotted_line
{
float: left;
border-left: 1px dotted #999999;
height: ????????????????????????????????????????????????????;
margin-left:10px;
margin-right: 10px;
}

.wrapper {
margin: 0px auto;
width: 960px;
height: 100%;
}
.main_content {
float:left;
width: 100%;
height: 100%;
background-color:#FFFFFF;
}

#column1 {
float: left;
width: 470px;
height: 100%;
margin-left: 8px;
}

#column2 {
float: left;
width: 245px;
height: 100%;
}

#column3 {
float: left;
width: 185px;
height: 100%;
}

Podsumowując, chodzi o to żeby vertical_dotted_line rozciągało się tak samo jak main_content.

Będę wam wdzięczna za podpowiedź. :)Agata K. edytował(a) ten post dnia 26.04.10 o godzinie 17:07

konto usunięte

Temat: Jak zrobić rozciagający się z tłem separator pionowy?

Jedną z metod jest tzw. faux columns:

http://www.alistapart.com/articles/fauxcolumns/

W dużym skrócie: tworzysz obraz o wysokości 1 piksela i szerokości takiej jak main_content, a w odpowiednim jego miejscu stawiasz kropkę, która po powtórzeniu tła w pionie stanie się linią. Ustawiasz go jako tło dla main_content z repeat-y.Łukasz Wójcik edytował(a) ten post dnia 26.04.10 o godzinie 18:33
Agata K.

Agata K. Ilustrator / Graphic
Designer

Temat: Jak zrobić rozciagający się z tłem separator pionowy?

Dzięki, zaraz przeczytam i spróbuję naprawić kod. :)



Wyślij zaproszenie do