Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Backgroudn z kilku obrazków?
Forum PHP.pl > Forum > Przedszkole
swpgnk
Witam.

Strona, którą tworzę dzieli się na kilka głównych elementów. Jest więc header, stopka, left-side menu i content. Każdy element ma swoje tło.

Problem pojawił się przy contencie. Górna część contentu to gradient - dolna kolor jednolity. Ponadto content posiada ramkę. Sęk w tym, że ramka musi być wykonana na grafikach (przez złożoność tej ramki).

Mam głównego diva content. W nim poszczególne elementy. Tam też wrzuciłem poszczególne elementy tła (a więc 4 rogi, i 4 gradienty ramki bocznej górnej, dolnej, lewej i prawej). Odbiorca strony (od biedy nazwijmy klient winksmiley.jpg ) zażyczył sobie jednak, żebym te grafiki przerzucił do arkuszu stylów. Czy muszę więc w obrębie diva content stworzyć osobne divy dla poszczególnych elementów ramki? Css'a poznałem w locie w jakiś tydzień. Tak więc pewne braki są.

Proszę o pomoc.
kantek
Witam. Najlepiej jakbyś podał obraz tego tła bo tak ciężko się domyśleć jak to pociąć i poskładać.

problem jest z tłem bo nie wiem jak ma wyglądać
co do narożników robisz strukturę:

dam w php aby uwidocznić wcięcia
  1. <?php
  2. <div class=&#092;"content\">
  3.        <div class=&#092;"left_top\"></div>
  4.        <div class=&#092;"left_bottom\"></div>
  5.        <div class=&#092;"right_top\"></div>
  6.        <div class=&#092;"right_bottom\"></div>
  7.    </div>
  8. ?>


gdzie w css dajesz
tu daje przykład z paseczkiem 1px na 210px (105 gradient 105 to jednolite tło)
(zawierającym gradient rozłożony z góry do dołu)
  1. .content
  2. {
  3. position:relative;
  4. margin:0px;
  5. padding:0px;
  6. width:600px;
  7. height:210px;
  8. background:url(\\'pas.jpg\\') repeat-x left top;
  9. border:1px solid red;
  10. }
  11. .left_top
  12. {
  13. position:absolute;
  14. left:0px;
  15. top:0px;
  16. width:20px;
  17. height:20px;
  18. background-color:#cdcdcd;
  19. }

itd. robisz narożniki tylko zmieniasz
left na right i top na bottom

m.w. tak to wygląda na moim przykładzie
http://www.ifotos.pl/ifotos/uploaded/98622.JPG
(problem z obrazkiem zamieszczam link)

dorzuć ten obrazeczek to się pokombinuje exclamation.gif!

domyślam się że gradient jeżeli nie jest pokręcony da się zrobić jednym paseczkiem
tylko trzeba będzie zrobić divy odpowiedzialne za górną ramkę

Pozdrawiam
swpgnk
Już zrobiłem sam, dzięki za podpowiedź, dałem rady smile.gif Dodatkowo poczarowałem, pokombinowałem i narożniki zrobiłem na jednym obrazku, bawiąc się pozycją.

Teraz walczę co nieco z menu. (Temat też wrzuciłem ciut wcześniej) i coś ciężko to widzę.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.