CSS Problem z pozycjonowaniem tekstu

0

Mam cytat, ktory wisi sobie pod rozległym tekstem.
Wszystko było dobrze do czasu kiedy pewna osoba zażyczyła sobie obowiązkowego i ściśle zdefiniowanego układu.

Jakiś tam tekst na stronie ....

<p style="font-size: 14px; text-align: left;">  
      Ptak ptakowi nie jednaki<br />
      Człek człekowi nie dorówna<br />
      Dusza duszy zajrzy w oczy<br />
      Nie polezie orzeł w gówna<br />
      <span style="font-size: 10px;">St. Wyspiański - "Wesele"</span>
</p>

Jak zrobić żeby niezależnie od czcionki i jej wielkości zdanie o autorze zawsze kończyło się równo z ostatnią literą 'a' wyłącznie z jego ostatnim zdaniu "Nie polezie orzeł w gówna"..

Próbowałem i kombinowałem z osobnymi DIV'ami w jednym test-align left w drugim right i oraz proba zlaczenia tego na rozne sposoby. Ale zawsze bylo cos nie tak. Ma ktoś może pomysł...?

0

w css to chyba nic z tego nie wyjdzie. ale jeżeli możesz umieścić każdy wiersz z tego cytatu w osobnym elemencie blokowym, to możesz wspomóc się javascriptem - mierzysz szerokość ostatniego wiersza z cytatu, mierzysz szerokość podpisu, i wyrównujesz dodając jakiś tam margin-left.

0

Tego się obawiałem...
O JavaScripcie to pomyślałem na samym początku, ale chciałem znaleŹć prostsze wyjście i jak na razie opracowałem coś takiego...

    <div class="paddingTop">
    <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0">
      <tr><td style="text-align: left;">
      Ptak ptakowi nie jednaki<br />
            Człek człekowi nie dorówna<br />
            Dusza duszy zajrzy w oczy
      </td></tr>
      <tr><td>
      <table class="noBorderTable" border="0" cellspacing="0" cellpadding="0">
      <tr><td style="text-align: left;">
      Nie polezie orzeł w gówna
      </td></tr>
      <tr><td style="text-align: right;">
      <div class="infAuthor">St. Wyspiański - "Wesele"</div>
      </td></tr>
      </table>
      </td></tr>
    </table>
    </div>

kod CSS:

.infAuthor {
  font-style: italic; 
  font-size: 8px;
  text-align: right;
  padding: 0px;
  margin: 0px;
}

.noBorderTable {
border: 0px dotted black;
border-spacing: 0px;
padding: 0px;
margin: 0px;
}

.paddingTop {
padding-top: 15px;
padding-left: 150px;
}

Sprawdza się też od IE 6, co prawda po specjalnych modyfikacjach dla IE ;) ... Co za pomylona przeglądarka

0

porąbane jak jasna cholera, no ale niegłupie. wczoraj pewnie nie byłem w stanie nic lepszego.. /ach, ja to rano pisałem/

łapaj to - chyba mniej porąbany kod, a działa (wydaje mi) się tak samo ;)
http://jsbin.com/ifivem/edit#html,live

IE6 to możesz olać - już przez chwilę poniżej 1% ludzi w Polsce go używało, IE7 także - teraz jest 3% (wg ranking.pl) - nie chcą biedaki zaktualizować - to niech mają zabugowane strony

0

Tak na chama to da się to zrobić w raczej prosty i jasny sposób:

http://jsbin.com/imecak/edit#html,live

Zerknijcie na CSS-y. Istotne są tylko trzy deklaracje, te z własnościami font-COŚTAM to tylko dekoracja.

Problem jest z markupem, czyli z HTML-em. To coś powyżej skleciłem w chwilę, ale przez ten czas nie objawiło mi się, jak ostylować poprawny markup. Musiałem uciec się do niepoprawnego i bezsensownego. Wy też to zrobiliście w swoich rozwiązaniach, a moje jest -- zdaje się -- nieco prostsze, więc je zamieszczam.

Poprawny, semantyczny HTML do tego cytatu wyglądałby mniej-więcej tak:

  <figure class="quote">
    <blockquote>
      <p>
      Ptak ptakowi nie jednaki<br />
      Człek człekowi nie dorówna<br />
      Dusza duszy zajrzy w oczy<br />
      Nie polezie orzeł w gówna<br />
      </p>
    </blockquote>
    <figcaption>
      St. Wyspiański - "<cite>Wesele</cite>"
    </figcaption>
  </figure>

Niestety nie udało mi się zmusić powyższego markupu do pożądanego zachowania za pomocą CSS. Jeśli jeszcze nad tym posiedzę i coś wymyślę, to na pewno dam znać.

0

(sorki za dubel, nie mogę się zalogować z tego terminala)

Przehackowałem się tak, żeby uzyskać właściwy markup. To już jednak jest hack:

http://jsbin.com/aworip/4/edit

No ale markup przeważnie jest ważniejszy niż kod arkuszy stylów.

W porównaniu do szkicu w poprzednim poście, do HTML-a musiałem dorzucić jedynie kilka spanów -- po jednym na każdą linię. Z punktu widzenia semantyki są "nadmiarowe", ale zupełnie dla niej przezroczyste, tj. niczego nie psują. Usunąłem też ostatnie
-- ale nie dlatego, że musiałem, tylko dlatego, że uznałem je za zbędne (wstawienie go ponownie nic nie zmieni). Całość otoczyłem też kontenerem div.quote-container i użyłem go jako prostego clearfixu -- na to są też inne, bardziej skomplikowane metody, które jednak nie wymagają dodatkowego elementu.

W stylach użyłem pseudoklasy :last-child by wybrać ostatniego spana. Przez samo to, style nie zadziałają w IE starszym niż IE8. Można jednak to bardzo łatwo obejść, dając ostatniemu spanowi klasę span i używając jej zamiast pseudoklasy.

Problem ze stylowaniem polegał na tym, że chcieliśmy wizualnie spiąć ostatni wiersz i podpis z informacją o źródle. Wystarczyło wrzucić obie rzeczy do jednego elementu-kontenera, co zrobiłem w działającym przykładzie w pierwszym poście (kontener .last-line-and-source). Ten kontener jednak sprawiał, że w markupie ostatnia linia cytatu i informacje o źródle były ściśle powiązane. Byłem zmuszony, by były zawsze razem. Nie mogłem więc użyć blockquote, bo on powinien zawierać tylko cytat, bez informacji o autorze. Nie mogłem też użyć figcaption (które musi być bezpośrednio w figure), bo ono może zawierać tylko informacje dodatkowe, a nie ostatnią linię.

Teraz, udało mi się to rozdzielić. Każdą linijkę umieściłem w spanie i starałem się sprawić, by tylko ostatni span wpływał na szerokość całego elementu figure. Użyłem ujemnego text-indent by wywalić tekst ze wszystkich spanów (oprócz ostatniego) w kosmos w lewo, a następnie dodatniego position: relative żeby wizualnie wróciły na swoje miejsce, jednak już bez zajmowania poziomej przestrzeni. Ostatni span nie ma tych sztuczek, tj. ma zresetowaną pozycję i text-indent do zerowych wartości. Dlatego on wpływa na szerokość figure (które opina ściśle swoją zawartość i nie rozchodzi się na całą szerokość, bo ma float: left).

Potem wystarczyło tylko dać text-align: right na podpisie -- i już był przyczepiony do prawego brzegu figure, który to prawy brzeg kończy się równo z ostatnią linią, bo wszystkie inne linie wywaliliśmy z równania.

0

Słuchajcie REWELACYJNA ROBOTA !

Ja i pewnie cała masa użytkowników też jest wam lub będzie wdzięczna :)
Pierwszy przykład jest czytelny i działa nawet na IE6. NIE DZIAŁA W IE 6 !, moje rozwiązanie jednak jest bardziej kompatybilne;
Choć strasznie nie eleganckie.

Drugi prawdziwie "hakerski", super wyjaśniony...
Fajnie wiedzieć że w razie czego można użyć innego rozwiązania !

załączam rozwiązanie które zastosowałem na swojej stronie przepisując je od Dzek69.
załączam rozwiązanie od Dzek69, bo jeśli komuś nie zależy tak jak mi na kompatybilności z IE 6 to te dwa będą na pewno odpowiednie.
Co prawda drugiego nie testowałem.
Aby inni użytkownicy tego forum mogli w razie czego mieć pełny podgląd na sprawę...

p.s.
fajny serwis ten jsbin oraz

Ulubione motto:     
      <div class="someSpeak">
      <p>
      Ptak ptakowi nie jednaki<br />
      Człek człekowi nie dorówna<br />
      Dusza duszy zajrzy w oczy
      </p>
        <div class="alignToLast">
         <span class="last">Nie polezie orzeł w gówna</span>
         <span class="alignAuthor">St. Wyspiański - "Wesele"</span>
        </div>
      </div>

a kod CSS to:

.someSpeak {
padding-top: 15px;
padding-left: 150px;
line-height: 16px;
}

.someSpeak .alignToLast {
display: inline-block;
}

.someSpeak .alignToLast span {
display: block;
}

.someSpeak .alignToLast span.alignAuthor {
text-align: right;
font-size: 8px;
font-style: italic;
}

.someSpeak .alignToLast span.last, .someSpeak p{
text-align: left;
font-size: 12px;
margin: 0px;
}
0

Znalazłem rozwiązanie naszego problemu w internecie... jednak mogę zastosować rozwiązanie od "dzak69"

ale należy zmodyfikować ten skrypt w następujący sposób, dodając 1 linijkę kodu i modyfikując drugą...

     <div class="someSpeak">
      <p>
      Ptak ptakowi nie jednaki<br />
            Człek człekowi nie dorówna<br />
            Dusza duszy zajrzy w oczy
      </p>
       <div style="display: inline;"> <!-- konieczny poprzedzający element blokowy z display: inline; --> 
        <span class="alignToLast"> <!-- musi być element span -->
         <span class="last">Nie polezie orzeł w gówna</span>
         <span class="alignAuthor">St. Wyspiański - "Wesele"</span>
        </span>
       </div> 
      </div>

http://kurs.browsehappy.pl/Bugi/InlineBlock

0

@dzek69:
Tak, tam powinno być "IE starszym niż IE8" -- dobrze, że zauważyłeś. W ogóle w kolejnym zdaniu też się "popisałem", pisząc zupełnie bez sensu, żeby spanowi dać klasę span ;-). Chodziło mi o klasę last. Się zdziebko spieszyłem -- tak naprawdę i tak dłużej pisałem posta niż to rozwiązanie.

"Ale generalnie - jakby tak myślał nad super haxiorskim cssem do każdych 5 elementów to w życiu by żadna strona nie powstała :P"
Chyba że byłyby fundusze, a jakość markupu miałaby pierwszorzędne znaczenie.

Ja, widząc coś takiego, pewnie bym się szarpnął na jakieś kombinowanie. Ale ja nie jestem przeciętnym frontendowcem i nie pracuję w przeciętnym frontendowym teamie. Akurat niedawno mieliśmy w zespole mini-dyskusję na temat cytatów. Taki suchar markupowy jak pozostałe rozwiązania (zarówno to Twoje, jak i to moje są analogiczne) na pewno nie przeszedłby u nas bez echa (i odpowiedniego flejmu ;) ) na code review.

Super haxorowanie nie zdarza się jednak często. W każdych 5 elementach byłoby... niepraktyczne. Bardziej niż o fundusze przy tworzeniu bałbym się nawet o masakrę przy utrzymaniu różnych takich hacków. Bo właśnie gdy nie tylko tworzysz strony, ale również je utrzymujesz, jakość kodu ma znaczenie. Tutaj jakość HTML-a jest niestety odwrotnie proporcjonalna do stopnia skomplikowania CSS-a.

Ostatni projekt, jaki (współ)tworzę, ma parę ładnych tysięcy CSS-a. Nie pisałem całości, choć większość, ale nie przypominam sobie ani jednego przypadku użycia hacków tego kalibru. Gdyby więc zdarzyło mi się jedno takie miejsce, mógłbym sobie zaszaleć i pozwolić na bardziej skomplikowane style. I nie byłoby to "każde 5 elementów", tylko "5 elementów na witrynie, która liczy ich setki".

Co do samego CSS-a, to nazwałem go "hackiem", ale tak naprawdę korzystamy ze standardowego, udokumentowanego rozwiązania, do którego dotarłem po paru minutach logicznego rozumowania, a nie kodując przypadkowo. Nie jest więc aż tak źle, tyle że nie jest to też całkiem prosty kod. A nieoczywistego kodu powinniśmy unikać.

@nixon:
BTW: sugeruję nie używać nazwy "skrypt" gdy mówimy o czystym HTML-u (kod znaczników) i CSS-ie (kod arkuszy stylów). Gdy mówimy w kontekście front-endowym, "skrypt" raczej jest zarezerwowany dla JavaScriptu ;)

0

@bswierczynski - chyba dalej Ci się śpieszy, bo napisałeś, że tam powinno być "IE starszym niż IE8" - a przecież właśnie tak jest :P ... starszym niż IE9 ;)

Chyba że byłyby fundusze, a jakość markupu miałaby pierwszorzędne znaczenie.

Ale po co?
Strona w Googlach nie skoczy na pierwsze miejsce dlatego, że zamiast DIV użyjesz BLOCKQUOTE, bo mimo, że pewne rzeczy są ważne, to jednak największe znaczenie ma tekst. Nawet kumpel-grafik - zrobił na freelancerce stronę z usługami minikoparką - choć było dużo lepszych stron, na ładnym w miarę kodzie - to "pocięta" przez niego statyczna strona na tabelkach, w tabelkach, w tabelkach od 2 lat wisi na pierwszym miejscu po wpisaniu hasła "usługi minikoparką [miasto jakieś, którego nie pamiętam]" :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0