Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [XHTML][CSS] nie mogę sobie poradzić z divami
Forum PHP.pl > Forum > Po stronie przeglądarki
xajart
9.01.2009, 11:03:43
Witam, opracowałem całą stronę na divach ale serwis który wykonuje pod względem graficznym jest tak skomplikowany, że od dwuch dni morduje sie z pewnym fragmentem templatki.


A mianowicie: 

jak wykonać coś takiego: 
- pierwszy div (hight: auto - bo będzie zależna od treści wrzuconej), szerokośc stała, bacgroung-image (wrzucona linia która jest powtarzana po x)

- drugi div ma być wewnątrz pierwszego o szerokości jak wyżej a wysokość minimum 30% (w zalezności od treści do 100 % od góry a na dole obrazek (coś w formie znaku wodnego) który ma być wyśrodkowany w poziomie, na maksymalnej wysokości od spodu bottom 10 px. 

- a na tym wszystkim zapewne trzeci div w którym będzie tekst wyswietlany. 

Niestety nie moge tego opracować używając pozycji relative bo się rozjedzie reszta strony przy wyższych lub niższych rozdzielczościach. Dlatego proszę o pomoc jak to zrobić - bo mi już ręce opadają.

Poniżej obrazek jak to ma mniejwięcej wyglądać:
kamil4u
9.01.2009, 14:56:01
Podaj nam kod HTML i swoje próby... - bo tak niczego się nie nauczysz, a to nie o to chodzi, prawda?
sowiq
9.01.2009, 15:05:36
Cytat
- pierwszy div (hight: auto[...]
- drugi div ma być wewnątrz pierwszego o szerokości jak wyżej a wysokość minimum 30% (w zalezności od treści do 100 % od góry a na dole obrazek (coś w formie znaku wodnego) który ma być wyśrodkowany w poziomie, na maksymalnej wysokości od spodu bottom 10 px.
Jeśli chcesz szerokość/wysokość elementu określać w procentach, to rodzic tego elementu musi mieć nadaną szerokość/wysokość. Jeśli masz div o height:auto, to height:30% dla div'a w środku nie zadziała.
TAMLYN
9.01.2009, 20:35:57
Hmm... Nie wiem czy dobrze zrozumiałem... Chcesz coś takiego?

Kod
<div id="contenet">
<div id="znak wodny"></div>
<div id="tekst">Jakiś tekst</div>
</div>


Nie lepiej dodać ten znak wodny jako tło do tekstu? Wypozycjonowane od spodu? Ew. pobaw się z position relative-absolute i z-index'y smile.gif
xajart
9.01.2009, 22:12:06
TAMLYN w taki sposób próbowałem ale nie dokońca mi to zadziałało.

kamil4u - całego kodu nie będę wrzucał bo z racji że robie to na zlecenie - nie wypada kodu publikować biggrin.gif


Co do znaku wodnego by był na dole a teks na górze - tak mam obecnie zrealizowane - bo większość stron w ten sposób jest zrealizowanych (wg zamysłu grafika), ale w przypadku galeri nałożone są zdjęcia na znak wodny (wg zamysłu grafika) i właśnie w tym drugim przypadku jakoś trudno mi to zrealizowąc z z-indeks się jeszcze nie bawiłem - spróbuje może to coś da.

Ewentualnie jak sobie nie dam rady zamieszcze tutaj fragment kodu który za to odpowiada, może wówczas coś pomożecie mi.
TAMLYN
9.01.2009, 22:17:10
Nie musisz przecież dawać całego kodu biggrin.gif Wystarczy przykład zbudowanego div'a nawet z przykładowymi danymi winksmiley.jpg Tak samo ze skryptem winksmiley.jpg Wtedy na pewno ktoś Ci pomoże.

A teraz do rzeczy. Co do końca nie działało? Z czym miałeś problemy?
xajart
10.01.2009, 18:29:29
Problem mam z tym że elementy nie chcą się poustawiać tak jak ja chce:


Oto przykład:
Kod
<style type="text/css">
 #content {
 position: absolute;
 top: 20px;
 left: 20px;
 height: auto;
 width: 200px;
 background-color:#FFFFFF;
 background-image:url(images/line.jpg);
 background-repeat:repeat-x;
 }
 #znak_wodny{
 position: relative;
 top: 200px;
 left: 20px;
 padding: 20px;
 width: 118px;
 height: 87px;
 background-image:url(images/image.jpg);
 }
 #tekst {
 position: relative;
 top: 0px;
 padding:20px;
 width: 160px;
 height: auto;
 }
</style></head><body>
<div id="content">
 <div id="znak_wodny"></div>
 <div id="tekst">Dowolny przykładowy tekst pisany po to by sprawdzić działanie divów i obrazka jako znak wodny. Dowolny przykładowy tekst pisany po to by sprawdzić działanie divów i obrazka jako znak wodny. Dowolny przykładowy tekst pisany po to by sprawdzić działanie divów i obrazka jako znak wodny. Dowolny przykładowy tekst pisany po to by sprawdzić działanie divów i obrazka jako znak wodny. Dowolny przykładowy tekst pisany po to by sprawdzić działanie divów i obrazka jako znak wodny. Dowolny przykładowy tekst pisany po to by sprawdzić działanie divów i obrazka jako znak wodny.</div>
</div></body>


Niby wszystko okej jest ale kwestia w tym że div z tekstem nie zaczyna się od góry na równi z divem content tylko kilkanaście pikseli niżej.

Obrazki przykładowe do skryptu powyżej:


Zauważyłem że to przesunięcie od góry wynika z racji ustawienia wysokości diva z obrazkiem. I nie potrafie jakos tego przeskoczyć.
kamil4u
10.01.2009, 18:35:00
Przeanalizuj sobie jeszcze raz ten kawałek kodu:
Kod
#tekst {
position: relative;
top: 0px;
/*TUTAJ*/padding:20px;
width: 160px;
height: auto;
}
już wiesz o co mi chodzi? Jeśli nie to Google i "CSS padding".

Chyba że nie o to chodziło smile.gif?

A i jeszcze jaka jest różnica między 0px,p% czy 0em? Żadna? To usuń jednostkę sprzed 0 tongue.gif
xajart
10.01.2009, 18:48:41
Wiem niepotrzebny jest ten padding, co do zera to nie wiedziałem że pójdzie bez jednostki smile.gif

Z naniesieniem tych poprawek problem dalej jest taki sam.
kamil4u
10.01.2009, 20:09:01
Daj link do strony z tym kodem to przez FireBuga sprawdzę co poprawić smile.gif
xajart
10.01.2009, 20:26:15
Tylko że tej strony jeszcze nie ma w sieci, jest tylko na moim lokalu smile.gif ale jak być chciał to na maila Ci mogę wysłać ten przykład czyli plik html + images
Lion_87
10.01.2009, 21:09:26
Hmm trudno sie połapać ale moż Ci o to chodzi
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2.  #content {
  3.  position: absolute;
  4.  top: 20px;
  5.  left: 20px;
  6.  height: auto;
  7.  width: 200px;
  8.  background:yellow;
  9.  }
  10.  #znak_wodny{
  11.  position: relative;
  12.  top: 0px;
  13.  left: 20px;
  14.  margin: 20px;
  15.  width: 118px;
  16.  height: 87px;
  17.  background:red;
  18.  }
  19.  #tekst {
  20.  position: relative;
  21.  top: 0px;
  22.  padding:20px;
  23.  width: 160px;
  24.  height: auto;
  25.  }
  26. </style></head><body>
  27. <div id="content">
  28.  <div id="tekst">Dowolny przykładowy tekst pisany po to by sprawdzić działanie divów i obrazka jako znak wodny. Dowolny przykładowy tekst pisany po to by sprawdzić działanie divów i obrazka jako znak wodny. Dowolny przykładowy tekst pisany po to by sprawdzić działanie divów i obrazka jako znak wodny. Dowolny przykładowy tekst pisany po to by sprawdzić działanie divów i obrazka jako znak wodny. Dowolny przykładowy tekst pisany po to by sprawdzić działanie divów i obrazka jako znak wodny. Dowolny przykładowy tekst pisany po to by sprawdzić działanie divów i obrazka jako znak wodny.</div>
  29.  <div id="znak_wodny"></div>
  30. </div></body>
[HTML] pobierz, plaintext
xajart
10.01.2009, 21:37:47
Nie to nie to, bo tak to ja mam obecnie zrobione, niestety w przypadku galeri ten obrazek co jest na spodzie strony ma stanowić coś w rodzaju znaku wodnego. 
A mianowicie tło jest wypełnione gradientowo do pewnej wysokości, jeżeli zostanie ona przekroczona - dolna część tła ma być jednego koloru w tym przypadku białego. A następnie na to ma wchodzić obrazek który stanowić ma coś w rodzaju znaku wodnego, na który nachodzić będzie tekst i obrazki z galeri (w odpowiedni sposób ułożone). 

Wiem że strasznie to zamieszane ale inne rozwiązanie jakoś mi nie przychodzi do głowy, powyższy kod który zamieściłem jest okej poza pewną wadą, której nie wiem jak wyeliminowac a mianowicie:
dla id="znak_wodny" jak ustalona jest wysokość = 87px, to o tyle od góry przesunięty jest div id="teks" od diva "content". A ja chce by obydwa bloki zaczynały na tej samej wysokości (blok "content" i "tekst"). Jak byście wiedzieli w jaki sposób to wyeliminować to by było git.

Chyba że jakiś inny sposób, nie wiem czy na divach można ustawiać kolejność np.:
Kod
<div id="content">
<div id="one"></div>
<div id="two"></div>
</div>

ale by blok "two" był pod spodem bloku "one" mimo że w kodzie jest zadeklarowane odwrotnie. Bo wówczas ten problem by się dało łatwo rozwiązać, najpierw blok "content" w nim "tekst" z parametrem hight: auto; a wówczas dowolnie blok z obrazkiem (który i tak by był wyświetlany pod tekstem bloku "tekst").
Lion_87
10.01.2009, 21:44:46
Żeby #two było pod #one to musiałbys dla #two->absolute a #one->relative wtedy #two bedzie pod napisem.

<div id="content">
<div id="two"></div>
<div id="one"></div>
</div>
xajart
10.01.2009, 22:38:05
W ten sposób da się uzyskać ten efekt o który mi chodziło, tylko w przypadku kiedy w "content" ustawie stałą wysokość. w przypadku ustawienia na auto efektu nie ma bo jest zbyt krutki blok.

W przypadku galeri kiedy wiem ile ma być umieszczonych miniaturek zdjęci i mniejwięcej jaka będzie długość tekstu w nagłowku strony, wówczas mogę przewidziec ile pikseli zajmie powierzchnia i ustalić stałą, dla ewentualnego zwiększania lub zmniejszania ilośc zdjęć na strone (przez panel konfiguracyjny) mogę sobie obliczyć odpowiednio o ile się będzie ta wysokość zmieniać i ustawiać ją w skrypcie. Troszkę na około ale wowczas da się uzyskać efekt o który mi chodziło smile.gif

Dziękuje za wszystkie porady - gdyby ktoś miał jeszcze jakis inny pomysł na rozwiązanie tego, będę wdzięczny.
Lion_87
10.01.2009, 22:53:25
Nie wiem czy CI to pomoże ale może pokombinuj z min-height i max-height.
xajart
11.01.2009, 10:24:29
o takich poleceniach nie słyszałem ale spróbuję winksmiley.jpg jak tylko wrócę do domu smile.gif
kamil4u
11.01.2009, 15:00:14
Tylko z IE będą kłopoty - jak zwykle.... JS przyjdzie Ci z pomocą smile.gif
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.