Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Interpertowanie minusowe margin
Forum PHP.pl > Forum > Przedszkole
Ayrox
25.07.2008, 12:43:33
Mam taki problem, gdyż nie jest tak jak bym chciał (czyli tak jak na obrazku smile.gif ), ten róg zamiast nakryć kawałek obramowania diva koment to tego nie robi ;/



[HTML] pobierz, plaintext 
  1. <span style="margin-right: -1px; width: 14px; height: 14px; float: left; background: url(images/rog.gif) no-repeat;" >
  2. </span>
  3.  
  4.  
  5. <div class="koment">
  6. :)
  7. </div>
[HTML] pobierz, plaintext


CSS:

[HTML] pobierz, plaintext 
  1. div.koment {overflow: hidden; border: #e2e2e2 solid 1px; width: 100px; padding: 10px; float: left;
  2. text-align: left; font-size: 12px;}
[HTML] pobierz, plaintext
Shili
25.07.2008, 12:53:01
To jest lewy margines, nie prawy winksmiley.jpg
Spróbuj ustawić dobrze, jak się nie uda, będzie się kombinować dalej winksmiley.jpg

@edit
Użarło mi kawałek posta.
Ayrox
25.07.2008, 13:04:18
jak dam dla diva koment margines lewy, a dla span w ogóle nie dam to i tak niczego to nie zmienia, to samo jest smile.gif

dodam że cała zawartość jest w jednym dużym divie

[HTML] pobierz, plaintext 
  1. <div style="float: right; width: 180px;">
  2.  
  3. </div>
[HTML] pobierz, plaintext
Shili
25.07.2008, 13:07:00
Dobra, to ja jestem ślepa, za co przepraszam. Ze swojej strony mogę zaproponować rozwiązanie takie jak poniżej (wiem, że w grę wchodzi tutaj pozycjonowanie absolutne, ale czasem nie ma sensu go unikać i wydaje mi się - może błędnie - że to właśnie taki przypadek)

[HTML] pobierz, plaintext 
  1. <style>
  2. div.koment {position: absolute; right: 0; top: 0; border: solid 1px red; overflow: hidden;width: 100px; padding: 10px; }
  3. </style>
  4. <div style="position: relative; width: 136px;">
  5. <span style="position: absolute; top: 0; left: 0; border: solid red; width: 14px; height: 14px;border-width: 1px 0 1px 1px;background: white;z-index: 1;" >
  6. </span>
  7.  
  8.  
  9. <div class="koment">
  10. :)
  11. </div>
  12. </div>
[HTML] pobierz, plaintext
Ayrox
25.07.2008, 14:36:27
Chciałbym jedynie iść linią tą co pokazałem, nie chcę stosować absolutnego pozycjonowania ;/

Może jeszcze jakieś pomysły?

Pozdrawiam







dodam, że standart w3c strony to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Inti
25.07.2008, 15:06:57
Niestety nie mam teraz czasu doszukiwać się idealnego rozwiązania, ale być może zadowolisz się taką opcją. Grafikę tego trójkąta wyciąłbym razem z linia lewą obramowania całej ramki, a diva zaopatrzyłbym jedynie w górny prawy i lewy border.

Wtedy zamiast nadawć ujemny margines dla trójkąta, nadaj dodatni 1px lewy dla bloku koment

HTML:

[HTML] pobierz, plaintext 
  1. <span style="width: 14px; height: 14px; float: left; background: url(images/rog.gif) no-repeat;" >
  2. </span>
  3.  
  4.  
  5. <div class="koment">
  6. :)
  7. </div>
[HTML] pobierz, plaintext


CSS:

[HTML] pobierz, plaintext 
  1. div.koment {overflow: hidden; border: #e2e2e2 solid 1px; width: 100px; padding: 10px; float: left;
  2. text-align: left; font-size: 12px; margin-left: 1px}
[HTML] pobierz, plaintext


W razie jeśli nie podziała to pisz

Pozdrawiam Inti
Ayrox
25.07.2008, 16:05:54
to niestety kompletnie nic nie daje, jedynie odsuwa span od diva o 1px, a chodzi przecież o to żeby span również zakrył kawałek lewego obramowania diva

Jeżeli nie ma nikt pomysłu, może ma ktoś link do tutoriala jak zrobić taki dymek smile.gif W języku Polskim i angielskim smile.gif
Inti
25.07.2008, 16:37:00
Dobrze w takim razie spróbuj jeszcze jedną rzecz

Ustawi to kolejność występowania elementów i span powinien znajdować się nad elementem div

[HTML] pobierz, plaintext 
  1. <span style="width: 14px; height: 14px; float: left; background: url(images/rog.gif) no-repeat; z-index=1;" >
  2. </span>
  3.  
  4.  
  5. <div class="koment">
  6. :)
  7. </div>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. div.koment {overflow: hidden; border: #e2e2e2 solid 1px; width: 100px; padding: 10px; float: left;
  2. text-align: left; font-size: 12px; z-index=2;}
[HTML] pobierz, plaintext


Ewentualnie lepszym rozwiązeniem będzie:

position: relative - ustawi element przesunięty o daną wartość od swojego pierwotnego położenia, w tym przypadku od lewej strony o 1px w wyniku czego powinien zasłonić obramowania div'a, ale być może i tak będzie trzeba ustawić kolejność obiektów Pokombinuj i w razie czego połącz metody

[HTML] pobierz, plaintext 
  1. <span style="width: 14px; height: 14px; float: left; background: url(images/rog.gif) no-repeat; position: relative; left: 1px ">
  2.  </span>
  3.  
  4.  
  5.  <div class="koment">
  6.  :)
  7.  </div>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. div.koment {overflow: hidden; border: #e2e2e2 solid 1px; width: 100px; padding: 10px; float: left;
  2. text-align: left; font-size: 12px;}
[HTML] pobierz, plaintext


Pozdrawiam Inti
Ayrox
25.07.2008, 16:41:18
Inti, koleżko co ja bez Ciebie bym zrobił. 2 Zastosowanie użyłem i zadziałało. Pozdrawiam i dziękuje
Inti
25.07.2008, 16:43:16
Nie ma sprawy

Podrzuć mi potem linka do tego co tam stworzysz winksmiley.jpg

Pozdrawiam Inti
Ayrox
25.07.2008, 17:05:13
serwis społecznościowy,  może lekko podobbny do innych, ale nie zerżnięty smile.gif

Jak skończe to będziesz special user, to Ci mogę na dziś powiedzieć tongue.gif

Pozdro, Napiszę jak skończę. Planowany styczeń 2009 ;0
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.