[CSS] Pozycjonowanie i rozciąganie tła Opcje

[SirZooro]

Hej,
Mam szablon strony który w przybliżeniu wygląda tak:
(IMG:http://img509.imageshack.us/img509/3277/stronach5.jpg)
Na górze jest pasek (niebieska część) który ma się w założeniu rozciągać na całą szerokość przeglądarki. Gdyby był on jednolity i dałoby się wyciąć fragment o szerokości 1px, to można by go powielić jako tło i nie byłoby problemu. Niestety pasek ten składa się z ukośnych linii, więc najmniejszy powtarzalny fragment jest szerszy (konkretnie 5px). Dlatego trzeba go dokładnie dopasować do środkowej części bo inaczej będzie to nieładnie wyglądać. Z ustawieniem tła w odpowiedniej pozycji umiem sobie poradzić - wystarczy użyć stylu background-position: right dla lewej części (prawa się sama ustawia dobrze) Niestety nie mam pomysłu jak zrobić aby środkowa część miała stałą szerokość, a tło powtórzyło się po bokach. Można użyć tabelki do tego, ale wolałbym tego uniknąć i zrobić całość na divach (lub w inny sposób).

Pytanie zatem brzmi: jak ustawić obok siebie w wierszu trzy divy, tak aby środkowy miał stałą szerokość, a dwa boczne rozciągnęły się tak aby dopasowały się do szerokości obszarów po bokach strony?

[vokiel]

A po co Ci tu 3 div'y?
Zrób te niebieskie tlo jako tlo body + div z zielonym tlem. I masz to ladnie bez problemu;)

[SirZooro]

No właśnie nie mogę - nie mam jednolitego tła, tylko takie w ukośne paski i tak się nie da.

[vokiel]

No to niebieski div jako jeden, a na nim zielony.

[HTML] pobierz, plaintext 
<style type="text/css" >
#wrapper {
	width: 100%;
	background: transparent url(top_bg.jpg) repeat-x top left;
	height: 50px;
}
#main {
	width: 750px;
	margin: 0 auto;
	background: blue;
}
</style>
 
<div id="wrapper">
	<div id="main">
		tutaj cała treść
	</div>
</div>
[HTML] pobierz, plaintext 

Można tak, albo ustawić div'a z niebiskim tłem z tyłu, a tego zielonego na wierzchu (z-index).

[SirZooro]

Dzięki. Pokombinuję z tym jeszcze, bo mam tam jeszcze zrobione płynne przejścia kolorów. Teraz właśnie przypomniałem sobie jednak że format PNG obsługuje kanał alpha, więc powinno mi się to udać. W razie czego będę jeszcze pytał (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

[roobik]

Witam!
Mimo, że mój problem jest podobny, to pozwolę sobie odświeżyć go (rozciąganie tła).
mam grafikę (tzw "belkę" tytułową), lecz jest ona za krótka. Załóżmy, że wygląda to tak:

[HTML] pobierz, plaintext 
<table width=100% align=center>
<tr>
<td width=65% class="1">TYTUŁ</td>
<td width=35% class="2">tekst</td>
</tr>
</table>
[HTML] pobierz, plaintext 

chodzi o podpięcie tła do komórki o szer 65%.
Grafika na tę "belkę" jest szerokości 220px. Czy da radę ją w jakikolwiek sposób rozciągnąć (repeat-x oraz repeat-y nie wchodzi w grę, gdyż nie jest to grafa jednolita)?
Bardzo proszę o pomoc...

[krzysztof_kf]

oto ci chodzi ?

Kod

<style type="text/css">

#body {
      width: 100%;
      height: 100px;
      background: #0000ff;
}

#column {
      width: 1000px;
      margin: 0 auto 0 auto;
}

#column-left {
      width: 650px;
      float: left;
      font-size: 1.3em;
      font-weight: bold;
      color: #ffffff;
}

#column-right {
      width: 350px;
      float: left;
      font-size: 1.3em;
      font-weight: bold;
      color: #ffffff;
}
      
</style>
<div id="body">
<div id="column">
<div id="column-left">
Tytuł</a>
</div>
<div id="column-right">
tekst</a>
</div>

Ten post edytował krzysztof_kf 25.12.2009, 21:40:15

[roobik]

nie bardzo
może inaczej: vokiel w swojej stopce (kilka postów wyżej) ma grafikę - i teraz załóżmy, że kolumna z avatarem ma 35%, a kolumna z postem ma szer 65%.
grafika u vokiela ma szer 515px i jak widać nie jest rozciągnięta na całą szerokość kolumny z postem.
biorąc teraz moje klasy, to:

[HTML] pobierz, plaintext 
.1
{
   font-weight: bold;
   background-image: url(/gfx/bg1.gif);
   background-repeat: no-repeat;
   color: #000000;
}
[HTML] pobierz, plaintext 

grafika nie może być "repeat", gdyż jest to wzór (podobnie jak u vokiel'a)

[krzysztof_kf]

jeśli jeszcze nie to to najlepiej jak wyżej kolega przedstawił to na rysunku pozdrawiam (IMG:style_emoticons/default/smile.gif) dodałem obrazek w klasach i możesz tam sobie ustawić szerokość i wysokość obrazka w danej tabeli pozdrawiam (IMG:style_emoticons/default/smile.gif)

Kod

<style type="text/css">
    
    #main {
          width: 1000px;
          margin: 0 auto 0 auto;
    }
    
    #main-left {
          width: 350px;
          float: left;
    }
    
    #main-right {
          width: 650px;
          float: left;
          color: #3399ff;
          font-size: 1.3em;
          font-weigh: bold;
    }
    
    .img {
         float: left;
          background: url(./ironmen.jpg) repeat-x;
          width: 300px;
    }
    
    </style>
    <div id="main">
    <div id="main-left">
    Miejsce na avatar
    </div>
   <div class="img">
    <div id="main-right">
    Treść
    </div>

Ten post edytował krzysztof_kf 26.12.2009, 13:37:44