Pełna wersja: Problem z tłem w div-ach
Witam mam malutkie pytanko do tego przykładu http://www.tennis.net.pl/css/ czy ktoś może wie jak zrobić aby długość diva po lewej i prawej stronie było uzależnione od diva środkowego z tłem białym. Chodzi mi aby niezależnie od długości tekstu w środkowym(białym divie) tło w sąsiednich divach miało taką sama długość co środkowy div. W zewnętrznych diwach będzie tylko dwie linki tekstu. Dzięki za każdą podpowiedź.
A może trochę kodu pokażesz?
Zapewne chodzi o oklepany temat http://www.alistapart.com/articles/fauxcolumns/
Dzieki za linka juz go studiuje 
A OTO KODZIK:
<style type="text/css">
<!--
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
margin: 0px;
padding: 0px;
background-color: #FFCC00;
}
#index {
width:990px;
position:relative;
background-image: url(index.jpg);
background-repeat: repeat;
margin-top: 0;
margin-right: auto;
margin-bottom: 60px;
margin-left: auto;
border: 1px solid #FFFFFF;
}
.q
{
margin: 0px;
padding: 0px;
float: left;
width: 300px;
background-image: url(q.jpg);
background-repeat: repeat;
}
.w
{
margin: 0px;
padding: 0px;
float: left;
width: 300px;
background-image: url(w.jpg);
background-repeat: repeat;
background-position: 0px 0px;
}
.e
{
margin: 0px;
padding: 0px;
background-image: url(e.jpg);
background-repeat: repeat;
}
.r{
margin: 0px;
padding: 0px;
clear: both;
}
-->
</style>
</head>
<body>
<div id="index"><div class="q">jasdjasdasjdkasjda</div><div class="w"> Please choose a site package you would like to test or base your site on.
Plain site
Plain site (ver. 1.1-2)
Stripped install. Contains no special toolbar or menu choices Nie zaimportowane
Dependencies
Nieznany.
Website Interface
Website Interface (ver. 1.4-2)
Website Interface is a web based CMS solution based on eZ Publish. It contains templates and settings that meets the most common requirements for content management systems. Nie zaimportowane
Dependencies
Nieznany.
eZ Flow
eZ Flow (ver. 1.1-2)
The eZ Flow extension to eZ Publish enables editors to build complex page layouts and pre-plan the publication schedule to ensure a constant flow of rich content. Nie zaimportowane
Dependencies
Nieznany. </div><div class="e">fgfgtmn knmihughvgdcrsfx</div><div class="r"></div></div>
</body>
</html>
A OTO KODZIK:
<style type="text/css">
<!--
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
margin: 0px;
padding: 0px;
background-color: #FFCC00;
}
#index {
width:990px;
position:relative;
background-image: url(index.jpg);
background-repeat: repeat;
margin-top: 0;
margin-right: auto;
margin-bottom: 60px;
margin-left: auto;
border: 1px solid #FFFFFF;
}
.q
{
margin: 0px;
padding: 0px;
float: left;
width: 300px;
background-image: url(q.jpg);
background-repeat: repeat;
}
.w
{
margin: 0px;
padding: 0px;
float: left;
width: 300px;
background-image: url(w.jpg);
background-repeat: repeat;
background-position: 0px 0px;
}
.e
{
margin: 0px;
padding: 0px;
background-image: url(e.jpg);
background-repeat: repeat;
}
.r{
margin: 0px;
padding: 0px;
clear: both;
}
-->
</style>
</head>
<body>
<div id="index"><div class="q">jasdjasdasjdkasjda</div><div class="w"> Please choose a site package you would like to test or base your site on.
Plain site
Plain site (ver. 1.1-2)
Stripped install. Contains no special toolbar or menu choices Nie zaimportowane
Dependencies
Nieznany.
Website Interface
Website Interface (ver. 1.4-2)
Website Interface is a web based CMS solution based on eZ Publish. It contains templates and settings that meets the most common requirements for content management systems. Nie zaimportowane
Dependencies
Nieznany.
eZ Flow
eZ Flow (ver. 1.1-2)
The eZ Flow extension to eZ Publish enables editors to build complex page layouts and pre-plan the publication schedule to ensure a constant flow of rich content. Nie zaimportowane
Dependencies
Nieznany. </div><div class="e">fgfgtmn knmihughvgdcrsfx</div><div class="r"></div></div>
</body>
</html>
Jedno z rozwiązań to ustawić wysokość strony. Tutaj pozmieniałem Twoje css-y.
Nie jest to raczej najlepsze rozwiązanie, ale na razie to mi przychodzi do głowy.
Kod
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
margin: 0px;
padding: 0px;
background-color: #FFCC00;
}
.index {
width:990px;
position:relative;
background-color: rgb(204,102,255);
background-repeat: repeat;
margin-top: 0;
margin-right: auto;
margin-bottom: 60px;
margin-left: auto;
border: 1px solid #FFFFFF;
height: 60%;
}
.q
{
margin: 0px;
padding: 0px;
float: left;
width: 300px;
background-color: rgb(255,51,102);
background-repeat: repeat;
height: 60%;
}
.w
{
margin: 0px;
padding: 0px;
float: left;
width: 300px;
background-color: rgb(51,102,153);
background-repeat: repeat;
background-position: 0px 0px;
height: 60%;
}
.e
{
margin: 0px;
padding: 0px;
background-color: rgb(255,0,102);
background-repeat: repeat;
height: 60%;
}
.r{
margin: 0px;
padding: 0px;
clear: both;
}
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
margin: 0px;
padding: 0px;
background-color: #FFCC00;
}
.index {
width:990px;
position:relative;
background-color: rgb(204,102,255);
background-repeat: repeat;
margin-top: 0;
margin-right: auto;
margin-bottom: 60px;
margin-left: auto;
border: 1px solid #FFFFFF;
height: 60%;
}
.q
{
margin: 0px;
padding: 0px;
float: left;
width: 300px;
background-color: rgb(255,51,102);
background-repeat: repeat;
height: 60%;
}
.w
{
margin: 0px;
padding: 0px;
float: left;
width: 300px;
background-color: rgb(51,102,153);
background-repeat: repeat;
background-position: 0px 0px;
height: 60%;
}
.e
{
margin: 0px;
padding: 0px;
background-color: rgb(255,0,102);
background-repeat: repeat;
height: 60%;
}
.r{
margin: 0px;
padding: 0px;
clear: both;
}
Nie jest to raczej najlepsze rozwiązanie, ale na razie to mi przychodzi do głowy.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.