Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [XHTML][CSS] nie mogę sobie poradzić z divami
xajart
post
Post #1





Grupa: Zarejestrowani
Postów: 141
Pomógł: 1
Dołączył: 2.12.2008

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

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ć:


Ten post edytował xajart 9.01.2009, 12:24:25
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 17)
kamil4u
post
Post #2





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

Podaj nam kod HTML i swoje próby... - bo tak niczego się nie nauczysz, a to nie o to chodzi, prawda?


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
sowiq
post
Post #3





Grupa: Zarejestrowani
Postów: 1 890
Pomógł: 339
Dołączył: 14.12.2006
Skąd: Warszawa

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

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.

Ten post edytował sowiq 9.01.2009, 15:06:33
Go to the top of the page
+Quote Post
TAMLYN
post
Post #4





Grupa: Zarejestrowani
Postów: 49
Pomógł: 1
Dołączył: 6.01.2007
Skąd: Wrocław

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

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


--------------------
Wróciłem po długiej przerwie... Bogatszy w wiedzę.
Go to the top of the page
+Quote Post
xajart
post
Post #5





Grupa: Zarejestrowani
Postów: 141
Pomógł: 1
Dołączył: 2.12.2008

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

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.
Go to the top of the page
+Quote Post
TAMLYN
post
Post #6





Grupa: Zarejestrowani
Postów: 49
Pomógł: 1
Dołączył: 6.01.2007
Skąd: Wrocław

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

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?


--------------------
Wróciłem po długiej przerwie... Bogatszy w wiedzę.
Go to the top of the page
+Quote Post
xajart
post
Post #7





Grupa: Zarejestrowani
Postów: 141
Pomógł: 1
Dołączył: 2.12.2008

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

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ć.

Ten post edytował xajart 10.01.2009, 18:40:48
Go to the top of the page
+Quote Post
kamil4u
post
Post #8





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

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

Ten post edytował kamil4u 10.01.2009, 18:38:34


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
xajart
post
Post #9





Grupa: Zarejestrowani
Postów: 141
Pomógł: 1
Dołączył: 2.12.2008

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

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.
Go to the top of the page
+Quote Post
kamil4u
post
Post #10





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

Daj link do strony z tym kodem to przez FireBuga sprawdzę co poprawić smile.gif


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
xajart
post
Post #11





Grupa: Zarejestrowani
Postów: 141
Pomógł: 1
Dołączył: 2.12.2008

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

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
Go to the top of the page
+Quote Post
Lion_87
post
Post #12





Grupa: Zarejestrowani
Postów: 850
Pomógł: 120
Dołączył: 15.02.2007
Skąd: Łódź

Ostrzeżenie: (10%)
X----

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
Go to the top of the page
+Quote Post
xajart
post
Post #13





Grupa: Zarejestrowani
Postów: 141
Pomógł: 1
Dołączył: 2.12.2008

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

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").

Ten post edytował xajart 10.01.2009, 21:44:47
Go to the top of the page
+Quote Post
Lion_87
post
Post #14





Grupa: Zarejestrowani
Postów: 850
Pomógł: 120
Dołączył: 15.02.2007
Skąd: Łódź

Ostrzeżenie: (10%)
X----

Ż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>

Ten post edytował Lion_87 10.01.2009, 21:45:12
Go to the top of the page
+Quote Post
xajart
post
Post #15





Grupa: Zarejestrowani
Postów: 141
Pomógł: 1
Dołączył: 2.12.2008

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

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.

Ten post edytował xajart 10.01.2009, 22:41:48
Go to the top of the page
+Quote Post
Lion_87
post
Post #16





Grupa: Zarejestrowani
Postów: 850
Pomógł: 120
Dołączył: 15.02.2007
Skąd: Łódź

Ostrzeżenie: (10%)
X----

Nie wiem czy CI to pomoże ale może pokombinuj z min-height i max-height.

Ten post edytował Lion_87 10.01.2009, 22:53:41
Go to the top of the page
+Quote Post
xajart
post
Post #17





Grupa: Zarejestrowani
Postów: 141
Pomógł: 1
Dołączył: 2.12.2008

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

o takich poleceniach nie słyszałem ale spróbuję winksmiley.jpg jak tylko wrócę do domu smile.gif
Go to the top of the page
+Quote Post
kamil4u
post
Post #18





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

Tylko z IE będą kłopoty - jak zwykle.... JS przyjdzie Ci z pomocą smile.gif


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 08:12
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn