GoldenLine
Zaloguj się
Konrad Karpieszuk

Konrad Karpieszuk WordPress Plugin
Compatibility
Assurance for WPML

Temat: jak opracowac ten element strony? (marginesy, paddingi i...

witam

graficznie ma to wyglada nastepujaco:


Obrazek


zasady:
- caly element ma stala szerokosc i wysokosc;
- element z nazwą strony (ten polprzesroczysty boks zawierajacy napis, znajdujacy sie nad obrazkiem lasu) ma sie dostosowywac do dlugosci tekstu.

szkopul w tym, ze tekst moze miec rozna dlugosc, a co wazniejsze moze sie zdarzyc, ze zajmie dwie linijki. w takim wypadku chcialbym aby margin (albo padding) gorny i dolny elementu z tekstem zmniejszyl sie tak aby caly polprzezroczysty element nadal byl wysrodkowany w pionie. margin (lub padding) lewy i prawy mogą być stałe.

nie mam jeszcze napisanego ani jednego tagu html do tego i tym bardziej definicji css, wiec mam pelne pole do popisu. zastanawiam sie jednak jak to najlepiej zrobic.

teraz mi przychodzi do glowy by gdzies tutaj dac komorke tabeli, w niej wysrodkowac cos w pionie (vertical-align)... dobrze kombinuje? a moze same divy, h1, itp sobie z tym poradza, z ewentualnym daniem im display: table-cell, ale nie wiem jak sobie IE z tym poradzi (IE6 zaniedbujemy)
Link do wypowiedziLink

konto usunięte

Temat: jak opracowac ten element strony? (marginesy, paddingi i...

Konrad Karpieszuk:
witam

1. Jeśli to by się miało rozszerzać w poziomie od lewej do prawej najlepiej wykorzystać ostylowanie nagłówka h1
2. Jeśli ma być dwie lub więcej linijek można wrzucić h1 do diva i ostylować diva

W pierwszym przypadku użyłbym repeat-x i stałego elementy mnożonego wzdłuż osi x
W drugim przypadku obrazek powinien się mnożyć w obrębie całego div

Tło na spód - wiadomo.
Link do wypowiedziLink
Konrad Karpieszuk

Konrad Karpieszuk WordPress Plugin
Compatibility
Assurance for WPML

Temat: jak opracowac ten element strony? (marginesy, paddingi i...

hmm, chyba sie nie zrozumielismy, albo nie rozumiem odpowiedzi.

przedstawiam hipotetyczny kod calosci:



<div class="las_w_tle">

 <div class="sam_tytul">

  <h1>Nazwa strony...</h1>

 </div>

</div>


i teraz css obowiazkowy do tego:



.las_w_tle{

 width: 700px;

 height: 200px;

 background: /* url do obrazka z lasem */

}

.sam_tytul {

 background: /* url do obrazka png z kanalem alfa */

 margin-left: 30px;

}


zadanie sprowadza sie do:

1. jak sprawic by div.sam_tytul zawsze byl wypozycjonowany do srodka w pionie?
moglbym dac u na sztywno margin-top: 30px; i margin-bottom: 30px; i adekwatny height 140px (140 + 30 + 30 = 200px -> tyle co wysokosc .las_w_tle)
jednak jesli tytul bedzie zajmowal dwie linijki, to wtedy autonatycznie margin-bottom nie bedzie juz 30px (calosc nie bedzie wypozycjonowana do srodka w pionie)
Link do wypowiedziLink
Konrad Karpieszuk

Konrad Karpieszuk WordPress Plugin
Compatibility
Assurance for WPML

Temat: jak opracowac ten element strony? (marginesy, paddingi i...

jeszcze demo do rozwiazania, jakie zastosowalem w podobnym elemencie. jak widac rozwiazanie owoduje problem.

tu jest dobrze:


Obrazek


jak widac wszelkie napisy mieszcza sie na polprzezroczytsym divie. div ma na stale zdefiniowane width, height, margin (top, left i bottom), dzieki czemu jest w pionie zlokalizowany na srodku.

ale gdy tekstu bedzie wiecej:


Obrazek


jak widac tekst zaczyna wychodzic poza zdefiniowany div z polprzezroczystym tle.

a chce aby w takim wypadku div automatycznie zwiekszyl swoj height i rownoczesnie zmniejszyl swoj margin-top, tak aby nadal byl wysrodkowany

czyli chce aby calosc, jesli tekstu bedzie wiecej, wygladala tak:


Obrazek
Konrad Karpieszuk edytował(a) ten post dnia 10.03.11 o godzinie 14:54
Link do wypowiedziLink
Rafał S.

Rafał S. Front-end Developer

Temat: jak opracowac ten element strony? (marginesy, paddingi i...

Jeżeli możesz użyć JS, to dla jQuery:

$('.sam_tytul').css('padding-top', ($('.las_w_tle').height() - $('.sam_tytul h1').height())/2);


html:


<div class="las_w_tle">

    <div class="sam_tytul">

        <h1>Nazwa strony lorem ipsum dolor...</h1>

    </div>

</div>


i css:


.las_w_tle { width: 700px; height: 200px; background: /* zdjecie */; }

.sam_tytul { width: 200px; margin-left:30px; }

.sam_tytul h1 { margin: 0; background: /* png z alpha */ }
Rafał S. edytował(a) ten post dnia 10.03.11 o godzinie 17:24
Link do wypowiedziLink
Łukasz Stępa

Łukasz Stępa Front-End developer

Temat: jak opracowac ten element strony? (marginesy, paddingi i...

nie wiem czy dobrze to zrozumiałem, ale jeśli dobrze, to coś takiego powinno załatwić sprawe: 



<div class="sam_tytul">

    <p>Twoj przykladowy tekst </p>

</div>






.sam_tytul { 

	float: left;

	filter: alpha(opacity=20); 

	opacity: 0.2; 

	-moz-opacity: 0.2; 

	background: url(image.png) repeat; 

	padding: 20px;

	}

	.sam_tytul p { font-weight: bold; color: #fff; }


jeśli zabraknie paddingu pomiędzy dwoma zawijanymi tekstami to line-height do tego. Chyba że źle to zrozumiałem? :)Łukasz Stępa edytował(a) ten post dnia 10.03.11 o godzinie 17:40
Link do wypowiedziLink
Konrad Karpieszuk

Konrad Karpieszuk WordPress Plugin
Compatibility
Assurance for WPML

Temat: jak opracowac ten element strony? (marginesy, paddingi i...

Rafał S.:
Jeżeli możesz użyć JS, to dla jQuery:

tak, moge i uzywam :) dzieki za ten kod. po lekkiej modyfikacji (h1 ma u mnie padding wiec i to musialem uwzglednic przy liczeniu) dziala tak jak chciałem :)
Link do wypowiedziLink

konto usunięte

Temat: jak opracowac ten element strony? (marginesy, paddingi i...

background: rgba(xx,xx,xx,yy);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#YYXXXXXX,endColorstr=#YYXXXXXX);

xx - kolor
yy - opacity
Link do wypowiedziLink
Konrad Karpieszuk

Konrad Karpieszuk WordPress Plugin
Compatibility
Assurance for WPML

Temat: jak opracowac ten element strony? (marginesy, paddingi i...

rafał, kurcze :) czy wy nnie czytacie o czym pisze, czy nie rozumiecie? :) jak sie robi transparent to ja wiem i potrafie na wszystkie wymienione sposoby. juz kolejna osoba mi to pokazuje, a nie o to chodzi w pytaniu :)
Link do wypowiedziLink

konto usunięte

Temat: jak opracowac ten element strony? (marginesy, paddingi i...

Konrad Karpieszuk:
rafał, kurcze :) czy wy nnie czytacie o czym pisze, czy nie rozumiecie? :) jak sie robi transparent to ja wiem i potrafie na wszystkie wymienione sposoby. juz kolejna osoba mi to pokazuje, a nie o to chodzi w pytaniu :)

Hehe, no dobra, przyznaję się :P Przeleciałem sobie przez cały wątek w 2 sekundy i zauważyłem pełno haseł typu "png z alpha" i "opacity" - zadziałał mój mechanizm obronny :D

Co do pozycjonowania diva to przychodzi mi do głowy takie rozwiązanie (ostrzegam - nie jest jakieś super semantyczne)(ostrzegam nr2 - nie testowałem go):

<div>
<span class="header">
<strong>Tytulik</strong>
<span>opisik</span>
</span>
</div>

* <div> musiałby mieć line-height równy swojej wysokości i jakieś paddingi z lewej/prawej
* <span class="header"></span> musiałby mieć display: inline-block (dlatego właśnie span, nie div czy nagłówek), nadaną szerokość, padding, tło i pewnie vertical-align: middle
* elementy wewnątrz <span class="header"> ostylować jak widać: kolory, czcionki, wysokości linii (ze względu na zewnętrznego spana, nie są to elementy blokowe)

Oczekiwany (najprawdopodobniej) efekt:

Kwadracik będzie trzymał szerokość i środkował się w pionie. Bez cudowania js'em.
Link do wypowiedziLink

konto usunięte

Temat: jak opracowac ten element strony? (marginesy, paddingi i...

http://rkrupinski.home.pl/_test/test2/

:>

Z tagami można poeksperymentować, użyć nagłówka jako wrappera etc. Powyżej przedstawiam tylko ogólny zarys pomysłu.rafał krupiński edytował(a) ten post dnia 11.03.11 o godzinie 16:49
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj