Ułozenie treści od lewej do prawej

hicky · Luty 19, 2011

Siemka. Borykam się z problemem jak ułożyć te obrazki z tytułem od lewej do prawej . Czyli tytuł do góry a pod nim obrazek.. Jak to ułożyć ? Bo narazie to jest <br>tytul<br>obrazek<br> .Jak to ułożyć . ? Nie mogę wykombinować nic .

LINK : http://kjk-chrom.joi.pl/index.php?p=produkty

Miłosz · Luty 19, 2011

Taki boxik możesz rozwiązać w formie tabelki

Title

img

w td z tytułem dajesz do stylu text-align: justify, no i ustaw jakąś tam jednakową szerokość dla wszystkich

djpizmak · Luty 19, 2011

Broń boże tabelami! Tabele zostały stworzone do prezentowania danych tabelarycznych a nie kombinowania z layoutem.

Skorzystaj z divów oraz znacznika float:left;. Jeżeli dobrze poustawiasz style, to wszystko będzie ładnie wyglądało i będzie poprawne.

Luty 19, 2011

Ja bym użył tbody, collspan i potem td oraz tr, lub poprzez css, ustawił raz dla wszystkich

Miłosz · Luty 19, 2011

Broń boże tabelami! Tabele zostały stworzone do prezentowania danych tabelarycznych a nie kombinowania z layoutem.

A to są jakieś elementy blokowe żeby pakować je w divy? Cały box to owszem można w diva opakować. Ale środek niekoniecznie.

Luty 20, 2011

kurshtml.boo.pl

Raffuss · Luty 20, 2011

O wiele lepszy niż ten nieszczęsny boo

http://kurs.browsehappy.pl/

I fakt.. ja bym także w tabele nie pakował.. już nie te czasy..

Miłosz · Luty 20, 2011

I fakt.. ja bym także w tabele nie pakował.. już nie te czasy..

W brew pozorom tabelki do niewielkich elementów się przydają

Luty 20, 2011

No tak ale to może być złym nawykiem

Miłosz · Luty 20, 2011

Jeśli ktoś trzaska całą stronę w tabelkach to tak.

Luty 21, 2011

Tabelkom mówimy stanowcze "nie", nawet dla niewielkich elementów.

Tylko i wyłącznie dla danych przedstawianych jak w ekselu, żadne elementy htmlowskie strony...

Niech zdychają tabelki i IE6 : ) hip hip, hurra! : )

Edytowano Luty 21, 2011 przez Sponsi (zobacz historię edycji)

Luty 21, 2011

Coś tu kurna przekombinowałeś trochę Po co to się tak męczyć.

1. Wywal te tabelki, rób wszystko w div

2. Nie rób tego w HTML4, zmień na XHTML

3. Kodowanie! Nie rób stron w windows-1252, najlepiej w UTF-8

regdos · Luty 21, 2011

2. Nie rób tego w HTML4, zmień na XHTML

Uzasadnij dlaczego XHTML jest w czymkolwiek lepszy i daje większe możliwości w stosunku do HTML4.

1. Wywal te tabelki, rób wszystko w div

Nie wiem co tak się wszyscy uparliście na wywalanie tabelek w tym wypadku i wrzucaniem div-a, przecież te dane w jakieś sposób są tabelaryczne tylko w części jest tekst a w części obrazki.

Z div-ami też są kłopoty i żeby osiągnąć jakiś efekt zamiast jednego trzeba ze 3 wstawić.

Pierwszy z brzegu problem z div-ami to pozycjonowanie elementów wewnątrz div-a w poziomie, który można bardzo łatwo załatwić w tabelce.

Edytowano Luty 21, 2011 przez regdos (zobacz historię edycji)

Miłosz · Luty 21, 2011

Pierwszy z brzegu problem z div-ami to pozycjonowanie elementów wewnątrz div-a w poziomie, który można bardzo łatwo załatwić w tabelce.

Dokładnie, a potem i tak display ustawiają na table

piotrekp · Luty 21, 2011

Nie wiem co tak się wszyscy uparliście na wywalanie tabelek w tym wypadku i wrzucaniem div-a, przecież te dane w jakieś sposób są tabelaryczne tylko w części jest tekst a w części obrazki.

Gdyż tabele nie powinny być wykorzystywane do układu elementów, oczywiście pomijając kodowanie mailingów (ale to inna kwestia).

Do autora tematu. Wywal tabelki. Widzę, że zaczynasz, więc nie ucz się złych nawyków już na początku.

Moja propozycja:

HTML

	<ul class="list">
		<li>
			<h3>Nazwa</h3>
			<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat malesuada ante id malesuada. Phasellus quis dolor sit amet nisi semper euismod eu ut nunc.</span>
			<img src="http://kjk-chrom.joi.pl/pics/thumbs/19.png" alt="Produkt 1" />
		</li>
		<li>
			<h3>Nazwa</h3>
			<span>hello</span>
			<img src="http://kjk-chrom.joi.pl/pics/thumbs/19.png" alt="Produkt 1" />
		</li>			
		<li>
			<h3>Nazwa</h3>
			<span>hello</span>
			<img src="http://kjk-chrom.joi.pl/pics/thumbs/19.png" alt="Produkt 1" />
		</li>			
		<li>
			<h3>Nazwa</h3>
			<span>hello</span>
			<img src="http://kjk-chrom.joi.pl/pics/thumbs/19.png" alt="Produkt 1" />
		</li>
		<li>
			<h3>Nazwa</h3>
			<span>hello</span>
			<img src="http://kjk-chrom.joi.pl/pics/thumbs/19.png" alt="Produkt 1" />
		</li>			
	</ul>

CSS:

Oczywiście szerokość elementów i inne wymiary odpowiednio ustal samodzielnie

	.list{width:675px;padding:0;}
	.list li{width:200px;display:inline-block;background:red;margin:0;padding:5px;min-height:200px;text-align:center;margin:5px;vertical-align:top;zoom:1;*display:inline;}
	.list li h3{margin:0;}
	.list li span{display:block;}
	.list li img{margin:0 auto;}

Pozdrawiam.

Edytowano Luty 21, 2011 przez piotrekp (zobacz historię edycji)

regdos · Luty 21, 2011

A jak uzyskasz tą metodą poniższy efekt?

Czyli stała, zależna od ilości tekstu wysokość nagłówka z wyśrodkowanym w poziomie tekstem, oraz to samo z obrazkiem.

Przy założeniu, że dane są pobierane z bazy danych i nie wiesz ile linii nagłówka będzie i jak wysoki obrazek.

Luty 21, 2011

Gdyż tabele nie powinny być wykorzystywane do układu elementów, oczywiście pomijając kodowanie mailingów (ale to inna kwestia).

Do autora tematu. Wywal tabelki. Widzę, że zaczynasz, więc nie ucz się złych nawyków już na początku.

Popieram.

A jak uzyskasz tą metodą poniższy efekt?

Czyli stała, zależna od ilości tekstu wysokość nagłówka z wyśrodkowanym w poziomie tekstem, oraz to samo z obrazkiem.

Przy założeniu, że dane są pobierane z bazy danych i nie wiesz ile linii nagłówka będzie i jak wysoki obrazek.

Normalnie, stylami CSS.

Ja jeszcze raz zaapeluję do autora - nie ucz się bzdurnych nawyków jak kolega napisał wyżej. Jak nauczysz się sprawnie posługiwać CSS to da rade wszystko pozycjonować prawidłowo, bez klepania zbędnego kodu. Później można się w takim kodzie zgubić kiedy będziesz chciał np. wprowadzić modyfikację strony.

regdos · Luty 21, 2011

Normalnie, stylami CSS.

To pokaż mi to.

A tak BTW to czy listy (ul, ol) nie powinny służyć do przestawiania danych w formie listy a nie do układania elementów na stronie ?

I nie odpowiedziałeś na pytanie w czym jest lepszy XHTML od HTML

Edytowano Luty 21, 2011 przez regdos (zobacz historię edycji)

Luty 21, 2011

To pokaż mi to.

Jak nie wierzysz że można to zrobić tzn. że nie ogarniasz tak naprawdę HTMLa i nie powinieneś się udzielać w dawaniu rad początkującym tylko sam z nich korzystać od innych. Ale nie będę pokazywał że olałem Twoją prośbę całkowicie a uważasz się za lotnego w tych sprawach to moje tłumaczenie jest nie potrzebne a odpowiedź jest tu http://www.kurshtml.boo.pl/ (uważam że bardzo fajnie są opisane tu wszelakie rzeczy, popularna strona)

I nie odpowiedziałeś na pytanie w czym jest lepszy XHTML od HTML

A gdzie ja napisałem że XHTML jest lepszy od HTML że tak domagasz się tej odpowiedzi?

Raffuss · Luty 21, 2011

A tak BTW to czy listy (ul, ol) nie powinny służyć do przestawiania danych w formie listy a nie do układania elementów na stronie ?

Powinny.. ja bym to na samych divach pociagnął. ul li jest tutaj zupełnie zbędne..

Edytowano Luty 21, 2011 przez Raffuss (zobacz historię edycji)

regdos · Luty 21, 2011

Jak nie wierzysz że można to zrobić tzn. że nie ogarniasz tak naprawdę HTMLa i nie powinieneś się udzielać w dawaniu rad początkującym tylko sam z nich korzystać od innych.

No i właśnie dlatego poprosiłem żebyś mi to pokazał bo za słaby jestem w html-u żeby takie coś zrobić.

A gdzie ja napisałem że XHTML jest lepszy od HTML że tak domagasz się tej odpowiedzi?

Napisałeś

2. Nie rób tego w HTML4, zmień na XHTML

czyli namawiasz go na stosowanie XHTML-a a jeżeli namawiasz to musi być w czymś lepszy, bo jeżeli HTML jest taki sam jak XHTML to po co robić w XHTML-u ?

Tylko po to żeby zamykać br i img - trochę bez sensu.

piotrekp · Luty 21, 2011

A jak uzyskasz tą metodą poniższy efekt?

Moja propozycja:

Wady: nie działa na IE7, natomiast nie rozjeżdża się (teksty/zdjęcia idą do góry); przy dłuższym tytule nie jest zachowana spójność, natomiast nie rozjeżdża się tragicznie.

HTML

		<ul class="list">
		<li>
			<h3 class="wrapper"><a href="#" title="Któtki tytuł">Któtki tytuł</a></h3>
			<span>21/03/2011</span>
			<a class="wrapper">
				<img src="http://kjk-chrom.joi.pl/pics/thumbs/19.png" alt="Produkt 1" />				
			</a>
		</li>
		<li>
			<h3 class="wrapper"><a href="#" title="Baaaaaaaaaaardzooooo dłuuuuuugi tytuuuuuł">Baaaaaaaaaaardzooooo dłuuuuuugi tytuuuuuł</a></h3>
			<span>21/03/2011</span>
			<a class="wrapper">
				<img src="http://kjk-chrom.joi.pl/pics/thumbs/19.png" alt="Produkt 1" />				
			</a>
		</li>		
		<li>
			<h3 class="wrapper"><a href="#" title="Któtki tytuł">Któtki tytuł</a></h3>
			<span>21/03/2011</span>
			<a class="wrapper">
				<img src="http://kjk-chrom.joi.pl/pics/thumbs/19.png" alt="Produkt 1" />				
			</a>
		</li>
		<li>
			<h3 class="wrapper"><a href="#" title="Któtki tytuł">Baaaaaaaaaaardzooooo Baaaaaaaaaaardzooooo Baaaaaaaaaaardzooooo dłuuuuuugi tytuuuuuł</a></h3>
			<span>21/03/2011</span>
			<a class="wrapper">
				<img src="http://kjk-chrom.joi.pl/pics/thumbs/19.png" alt="Produkt 1" />				
			</a>
		</li>	
		<li>
			<h3 class="wrapper"><a href="#" title="Któtki tytuł">Któtki tytuł</a></h3>
			<span>21/03/2011</span>
			<a class="wrapper">
				<img src="http://kjk-chrom.joi.pl/pics/thumbs/19.png" alt="Produkt 1" />				
			</a>
		</li>
		<li>
			<h3 class="wrapper"><a href="#" title="Któtki tytuł">Baaaaaaaaaaardzooooo dłuuuuuugi tytuuuuuł</a></h3>
			<span>21/03/2011</span>
			<a class="wrapper">
				<img src="http://kjk-chrom.joi.pl/pics/thumbs/19.png" alt="Produkt 1" />				
			</a>
		</li>				

	</ul>

CSS:

	.list{width:675px;padding:0;font-size:10px;}
	.list li{width:200px;display:inline-block;background:red;margin:0;padding:5px;min-height:200px;text-align:center;margin:5px;vertical-align:top;zoom:1;*display:inline;}
	.list li span{display:block;margin:5px 0;}
	.list li img{margin:0 auto;}
	.list .wrapper{height:4em;display:table-cell;vertical-align:middle;width:200px;}
	.list li h3{margin:0;line-height:1.6em;padding:0px;}	
	.list a.wrapper{height:150px;}

Przy założeniu, że dane są pobierane z bazy danych i nie wiesz ile linii nagłówka będzie i jak wysoki obrazek.

Projektując wygląd, czy już nawet model obiektu, wiesz jakich elementów się spodziewać. W tym przykładzie mamy jakieś miniaturki zdjęć oraz tytuły. Zapewne miniaturki miałyby maksymalne rozmiary, a tytuł maksymalną długość i według tego można by dostosować tą listę. Ewentualnie sam tytuł można by skrócić dając wielokropek.

Natomiast chciałbym teraz zobaczyć Twoją wersję tabelkową. ;-)

regdos · Luty 21, 2011

Moja propozycja:

Wady: nie działa na IE7, natomiast nie rozjeżdża się (teksty/zdjęcia idą do góry); przy dłuższym tytule nie jest zachowana spójność, natomiast nie rozjeżdża się tragicznie.

Czyli klient tego nie zaakceptuje bo nie jest tak jak miało być (ja bym nie zaakceptował).

Projektując wygląd, czy już nawet model obiektu, wiesz jakich elementów się spodziewać. W tym przykładzie mamy jakieś miniaturki zdjęć oraz tytuły. Zapewne miniaturki miałyby maksymalne rozmiary, a tytuł maksymalną długość i według tego można by dostosować tą listę. Ewentualnie sam tytuł można by skrócić dając wielokropek.

Zdjęcia zapewne są w jakimś zakresie ale mogą być trochę różne bo raz to są portrety raz pejzaże. W swoim rozwiązaniu zastosowałeś to o czym pisał Raffus czyli display:table-cell, czyli nie stosujemy tabelek ale wymuszamy zachowywanie się obiektu jak tabelka.

Natomiast chciałbym teraz zobaczyć Twoją wersję tabelkową. ;-)

Proszę http://boski.regdos.com/test/test.html od góry wersja Twoja, na dole wersja moja, trochę zmodyfikowałem żeby pokazać dokładnie z czym jest problem

- wysokość nagłówków

- pozycjonowanie i wysokość obrazków

- wysokość jednego wiersza

hicky · Luty 21, 2011

@Regdos

To 2 ułożenie mi by pasowało ;D .

Będe dziś kombinował .

Po 2. Nie oferujcie mi swoich ofert na PW ? Ok. NIE INTERESUJĄ MNIE OFERTY TYPU PRZEDSTAW MI SWÓJ BUDŻET A JA CI WYKONAM .

Edytowano Luty 21, 2011 przez hicky (zobacz historię edycji)

piotrekp · Luty 21, 2011

Czyli klient tego nie zaakceptuje bo nie jest tak jak miało być (ja bym nie zaakceptował).

I widzisz, tu wchodzą w grę słowa ,,kompromis" i ,,szukanie rozwiązania" . W takim wypadku możemy przyciąć tytuły (np po stronie aplikacji), chroniąc przy tym szablon przed zbyt długimi tytułami lub zwiększyć wysokość nagłówków lub pozostawić bez zmian, gdyż tak długie nagłówki mogą być rzadko spotykane. To wszystko zależy.

Z drugiej strony, ja jeśli bym dostał taki kod jak Twój, to najpierw bym piszczał, a potem kazał oddawać pieniążki ;-)

Zdjęcia zapewne są w jakimś zakresie ale mogą być trochę różne bo raz to są portrety raz pejzaże.

Ale nadal zdjęcia będą miały ograniczone rozmiary, dzięki którym będziesz mógł dostosować wygląd. Zdaję sobie sprawę, że najłatwiej byłoby powiedzieć, że obrazki mają być jakiekolwiek, po czym stawić obrazek 500x500 i oczekiwać pięknego wyglądu. Nie ma tak, wtedy i Twoje tabelki się rozjadą

W swoim rozwiązaniu zastosowałeś to o czym pisał Raffus czyli display:table-cell, czyli nie stosujemy tabelek ale wymuszamy zachowywanie się obiektu jak tabelka.

Jak sam zauważyłeś wygląd ,,jak tabelka" jest często pożądany. Więc dlaczego nie stosować tej cechy? Z resztą jest różnica, pomiędzy ,,pakowaniem zawartości do tabelki tak, aby wyglądała jak tabelka", a ,,wstawianiem zawartości do odpowiedniego znacznika i ustawianie jego wyglądu, tak aby wyglądał się jak tabelka". Nie patrz tylko na to co widzisz w przeglądarce, zobacz też na kod, bo ...

Proszę http://boski.regdos.com/test/test.html od góry wersja Twoja, na dole wersja moja, trochę zmodyfikowałem żeby pokazać dokładnie z czym jest problem
- wysokość nagłówków

- pozycjonowanie i wysokość obrazków

- wysokość jednego wiersza

... spróbuj teraz zrobić w JS, aby po najechaniu tytułu produktu zmienił tło całej instancja(?) produktu (to co zawiera tytuł, obrazek itp).

Spróbuj np wyeksportować z kodu te produkty do excela, wyobrażasz sobie jak wyglądałby taki parser? Masakra co? .

A w moim kodzie? Zarówno pierwsze zadanie (jedna linijka w CSS) jak i drugie nie będzie zbyt trudne

Oczywiście nie mówię, żebyś to robił, bo szkoda Twojego czasu

Proponuję zakopać ,,topór wojenny".

Zaloguj się

Ułozenie treści od lewej do prawej

Polecane posty

hicky 10

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Miłosz 2311

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

djpizmak 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Gość hdmagc

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Miłosz 2311

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Gość Kamikadze

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Raffuss 4

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Miłosz 2311

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Gość Kamikadze

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Miłosz 2311

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Gość

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Gość Studio v220

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

regdos 1848

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Miłosz 2311

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

piotrekp 0

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

regdos 1848

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Gość Studio v220

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

regdos 1848

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Gość Studio v220

Udostępnij ten post

Link to postu

Udostępnij na innych stronach

Raffuss 4