Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]dwa divy wewnątrz siebie i zmiana ich pozycji
Forum PHP.pl > Forum > Przedszkole
gagatek
nie wiem dokładnie jak Wam to opisać, ale postaram się to zrobić. Mam taki mały problem który mnie męczy i nie moge sobie z nim dać rady.
Sprawa wgląda następująco:
1. mam diva środek w którym znajduje się baner:
baner jest zrobiony w taki sposób
-najpierw jest div z obramówką (takie 2 torciki z lewej i prawej strony)
- div - button u góry po prawej "learn more"
- div z obrazkiem właściwym.
O ile z "learn more" mi się udało żeby się pojawił tak jak chciałem, to mam problem z tą obramówka (torcikami) chciałbym aby były one minimalnie wyżej o jakieś 2-5px. Ale za chiny nie moge sobie z tym poradzić, albo przesuwa się cały obrazek, albo się rozjeżdża wszystko. Uczę się cssa dla tego zawracam wam tym głowę. Proszę o jakieś wskazówki, pomoc.. Poniżej umieszczam kod oraz link do str gdzei wrzuciłem stronke:
http://takatam.cba.pl


  1. <div class="srodek">
  2.  
  3. <div class="obramowka">
  4. <div class="obrazek">
  5. <img src="images/images/obrazek.png" />
  6. <a href="#"/> <img src="images/images/wiecej.png" class="wiecej"/></a>
  7. </div>
  8. </div>
  9. </div>
  10.  
  11.  
  12.  


  1.  
  2. .srodek {
  3. position: relative;
  4. height: 440px;
  5. width: 1200px;
  6. }
  7.  
  8. .obrazek{
  9.  
  10. height: 407px;
  11. width: 951px;
  12. margin: 230px auto;
  13. border: solid 3px white;
  14.  
  15. }
  16.  
  17.  
  18. .obramowka{
  19.  
  20. margin: auto;
  21. width: 1056px;
  22. height: 443px;
  23. background-image:url(images/images/obramowka.png);
  24.  
  25. }
  26. .wiecej {
  27. height: 160px;
  28. width: 160px;
  29. position: absolute; right: 109px; top: -10px;
  30. }
  31.  
lobopol
Nie zrozumiałem twojego problemu, pokaż co chciałbyś osiągnąć (narysuj) albo lepiej opisz.
memory
  1. .obramowka {
  2. margin: auto;
  3. width: 1056px;
  4. height: 435px;
  5. background-image: url(images/images/obramowka.png);
  6. background-position: 0px -8px;
  7. }

Tak na szybko

Podziel sobie te obramowanie na dwie części dół i góra.
Nastepnię poczytaj o position:aboslute, z-index,top,left i ustaw odpowiednio
lobopol
hmm chyba zrozumiałem twój problem, w obecnym kodzie możesz to zrobić tak:
  1. .obrazek img {
  2. position: relative;
  3. z-index: -1;
  4. }

Ale to jest brzydkie rozwiązanie
Ładniejsze byłoby zrobienie takiego układu:

  1. <div class="obrazek">
  2. <img src=""/>
  3. <div class="left"></div>
  4. <div class="right"></div>
  5. <div class="promo"></div>
  6. </div>

gdzie left, right, promo miałyby jedno tło (sprite) złączonego z 3 obrazków, pozycje absolutną i odpowiednie z-indexy. .obrazek pozycja relatywna
gagatek
Cytat(lobopol @ 3.04.2013, 20:52:18 ) *
Nie zrozumiałem twojego problemu, pokaż co chciałbyś osiągnąć (narysuj) albo lepiej opisz.


chodzi o to żę chciałbym żeby ten div obwodka był troche wyżej, żeby wyszedł jakby za obrazek od góry: tu wrzucam obrazek przed i po:

takatam.cba.pl/przyklad.jpg
takatam.cba.pl/przyklad2.jpg

mam z tym problem bo albo mi się przesuwa całość albo w ogole się rozjeżdża, a że się uczę to nie do końca jeszcze to ogarniam;/ A jeśli już jesteśmy przy umieszczaniu divów w divach to w cssie powinno się zaczynać od opisywania najbardziej wewnętrznego diva czy zewnętrzego?
lobopol
to tak, po pierwsze:
  1. .srodek {
  2. wywal height
  3. clear: both;
  4. }
  5. .obramowka {
  6. padding-top: Xpx;
  7. text-align: center;
  8. background: url(link do foty) top center no-repeat;
  9. //reszta do wywalenia z tego
  10. }
  11. .obrazek {
  12. //wywal cały styl
  13. }
  14. .obramowka img {
  15. border: solid 3px #fff;
  16. }
  17.  


i z html wywal diva o klasie obrazek (zostaw tylko zawartość) popraw również top dla tego więcej
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.