Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS]Dwie kolumny z jednym tłem w CSS.
groobyy88
post
Post #1





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 23.01.2011

Ostrzeżenie: (0%)
-----


Witam Was,
właśnie zacząłem moją przygodę z CSS i mam następujący kłopot, a raczej brak wiedzy, a kombinowanie już nic nie daje.

Tworzę witrynę w której mam z lewej strony menu, a obok z prawej wyświetlać mają mi się wartości.

I tu się rodzi mój problem, ponieważ chciałbym uzyskać taki efekt, że nie zależnie na długość menu lub drugiej kolumny tło jest dostosowywane do dłuższej z nich, czyli menu dłuższe tło jest długości menu, prawa kolumna dłuższa tło długości prawej kolumny.

Z góry dziękuje za zainteresowanie i pomoc.

Pozdrawiam Łukasz. smile.gif
Go to the top of the page
+Quote Post
CuteOne
post
Post #2





Grupa: Zarejestrowani
Postów: 2 958
Pomógł: 574
Dołączył: 23.09.2008
Skąd: wiesz, że tu jestem?

Ostrzeżenie: (0%)
-----


  1. <style>#main {
  2. width:100%;
  3. background: black;
  4. }
  5. #menu { //menu większe
  6. width: 200px;
  7. height: 600px;
  8. }
  9. #content{ //a content będzie mniejszy
  10. width: 200px;
  11. height: 400px;
  12. }</style>
  13. <div id="main">
  14. <div id="menu"></div>
  15. <div id="content"></div>
  16. </div>

tło dopasuje się do największego elementu - w tym wypadku menu
Go to the top of the page
+Quote Post
PeeSDeOeN
post
Post #3





Grupa: Zarejestrowani
Postów: 16
Pomógł: 1
Dołączył: 24.05.2011

Ostrzeżenie: (0%)
-----


Kolega z gory napisal w miare dobrze lecz nie opisal przydatnych funkcji w CSS.
Ja na ten przyklad mam 1 duzy div a w nim 3 mniejsze i teraz opisze ci co i jak smile.gif
CODE

#index { background: url('images/index.png'); width: 1200px; height: auto; padding: 0px; margin-left: auto; margin-right: auto; }

#lewa { float: left; text-align: center; margin: 0px; padding: 0px; width: 200px; height: 200px; margin-left: auto; margin-right: auto; }

#srodkowa { float: left; text-align: center; margin: 0px; padding: 0px; width: 730px; height: 200px; margin-left: auto; margin-right: auto; }

#prawa { float: right; text-align: center; margin: 10px; padding: 0px; width: 270px; height: 200px; margin-left: auto; margin-right: 50px; }



#nazwa jest tym samym co wpisujesz w id=" "
float: do ktorej stron ma przylegac dany div

I teraz Jesli chcesz aby tlo rozchodzilo sie na oba divy ustawiasz w stylu do glownego diva background: url('images/tlo.png');
polecam wtedy takze stosowac width: szerokoscpx; height: wysokoscpx; [Szczegolnie dla wiekszych obrazow tla]
Jesli natomiast tlo masz w postaci 5x5px lub podobne i chcesz je powielac to proponuje wstawiac background: url('images/tlo.png'); w divie lewym i prawym smile.gif
Wtedy bedziesz mogl takze uzyc margin: ilepx; co oddali od siebie ramki i bedzie ladniej wygladac przy zastosowaniu layoutu smile.gif
padding: ilepx; nie wiem czy moge to tak ujac lecz jest to "opadanie ramki" czasami wyglada fajnie lecz zazwyczaj nie tongue.gif [mozesz sprobowac] i najwyzej pozniej usunac jak nie bedzie ci sie podobalo smile.gif


Mam nadzieje ze tyle ci pomoze w pracy nad stronka smile.gif
Go to the top of the page
+Quote Post
Daiquiri
post
Post #4





Grupa: Administratorzy
Postów: 1 552
Pomógł: 211
Dołączył: 7.07.2009
Skąd: NJ




@PeeSDeOeN
Nie przesadzajmy. Jest jeszcze tona innych "przydatnych funkcji", to jest forum, a nie kurs CSSa. Chętnie pomożemy przy konkretnym problemie, ale bez przesady.
Go to the top of the page
+Quote Post
nekomata
post
Post #5





Grupa: Zarejestrowani
Postów: 314
Pomógł: 44
Dołączył: 12.11.2010
Skąd: UK

Ostrzeżenie: (0%)
-----


@PeeSDeOeN
Cytat
Jesli natomiast tlo masz w postaci 5x5px lub podobne i chcesz je powielac to proponuje wstawiac background: url('images/tlo.png'); w divie lewym i prawym
Bez sensu . Jak jako tło ma np. wzorek w kratke 5x5px a szerokość lewego div'a nie będzie podzielna przez 5 (np. 66px) to mu się wzorek zepsuje . I nie pogrubianie służy do zaznaczania ważnych słów a nie całego posta .

Ten post edytował nekomata 25.05.2011, 08:41:09
Go to the top of the page
+Quote Post
groobyy88
post
Post #6





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 23.01.2011

Ostrzeżenie: (0%)
-----


Dziękuje wszystkim za pomoc, ale nadal nie uzyskałem efektu jaki sobie założyłem.

Może za pobieżnie opisałem, więc dorzucę jeszcze:
- strona ma mieć szerokość 1000px oraz być wyśrodkowana,
- wysokość nie ma być narzucona, ponieważ będzie się zmieniać zależnie od wyświetlanych elementów.

A tu zamieszczam takie pobieżne rysunki jak to widzę. smile.gif
opcja 1
opcja2

Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 21.08.2025 - 22:58