Skocz do zawartości
Zaloguj się, aby obserwować  
Obserwujący 0
hicky

Ułozenie treści od lewej do prawej

Przez hicky, w Piaskownica

Polecane posty

hicky    10

hicky
Napisano

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

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Miłosz    2311

Miłosz
Napisano

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

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

djpizmak    0

djpizmak
Napisano

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.

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Gość hdmagc   

Gość hdmagc
Napisano

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

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Miłosz    2311

Miłosz
Napisano

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.

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Miłosz    2311

Miłosz
Napisano

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

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

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Miłosz    2311

Miłosz
Napisano

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

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Gość   

Gość
Napisano (edytowany)

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 przez Sponsi (zobacz historię edycji)

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Gość Studio v220   

Gość Studio v220
Napisano

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

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

regdos    1848

regdos
Napisano (edytowany)

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 przez regdos (zobacz historię edycji)

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Miłosz    2311

Miłosz
Napisano

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 :)

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

piotrekp    0

piotrekp
Napisano (edytowany)
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 przez piotrekp (zobacz historię edycji)

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

regdos    1848

regdos
Napisano

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

 

test_prod.png

 

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.

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Gość Studio v220   

Gość Studio v220
Napisano

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?

 

test_prod.png

 

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.

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

regdos    1848

regdos
Napisano (edytowany)

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 przez regdos (zobacz historię edycji)

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Gość Studio v220   

Gość Studio v220
Napisano

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?

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Raffuss    4

Raffuss
Napisano (edytowany)

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 przez Raffuss (zobacz historię edycji)

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

regdos    1848

regdos
Napisano

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.

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

piotrekp    0

piotrekp
Napisano
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ą. ;-)

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

regdos    1848

regdos
Napisano

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

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

hicky    10

hicky
Napisano (edytowany)

@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 przez hicky (zobacz historię edycji)

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

piotrekp    0

piotrekp
Napisano
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 :D

 

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

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

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się
Zaloguj się, aby obserwować  
Obserwujący 0
Przejdź do listy tematów Piaskownica
×