+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Prosta strona z wykorzystaniem styli - problem z umieszczeniem treści (/thread-prosta-strona-z-wykorzystaniem-styli-problem-z-umieszczeniem-tre%C5%9Bci)
Strony:
1
2
Prosta strona z wykorzystaniem styli - problem z umieszczeniem treści - Szakalowski - 05-11-2011
Witam!
Potrzebuję zrobić prostą stronę i stwierdziłem, że najlepszą koncepcją będzie ta, która przedstawię teraz, mianowicie - po prawej ma się znajdować 15 zdjęć i chyba najwydajniej będzie w pozycji 5x3 (i do zrobienia tego użyłem tabeli), po lewej stronie natomiast, chciałbym aby wyświetlała się strona startowa, a potem treść po kliknięciu w któreś ze zdjęć (każde zdjęcie = inna treść), zdjęcia mają być stałą częścią strony. I tutaj pojawia się problem, ponieważ chciałem użyć iframe, ale dowiedziałem się, że ten znacznik jest zdeprecjonowany i że teraz używa się DIV, lecz nie mam zielonego pojęcia jak umieścić w nim treść, która miałby się wyświetlać. Wszystkie treści muszą być w innych plikach html, ale to chyba jasne.
Przejdę teraz do głównego pytania - jak uzyskać taki efekt jak opisałem powyżej czyli stała treść po prawej i zmieniająca się treść po lewej, która jest zależna od kliknięć użytkownika oraz jak w ogóle zrobić tak, aby po kliknięciu w któreś ze zdjęć zmieniała się tylko treść po prawej (czy muszę do każdej pod strony dawać cały kod razem z tabelą ze zdjęciami?).
Mam nadzieję, że dobrze wyjaśniłem mój problem, pragnę nadmienić, że jestem początkującym w tym języku, a szczególnie w stylach. Tworzyłem kilka stron w HTML, ale teraz wiem, że były to śmieci, bo budowałem je głównie na zdeprecjonowanych znacznikach.
Z góry dziękuję za odpowiedź, a poniżej zamieszczam jak wygląda mój kod do tej pory (usunąłem nieudaną zabawę z iframe):
Cytat:<html>
<head>
<style>
#Osoby {
width: 500px;
margin: 0px auto;
border-collapse: collapse;
border: 2px solid #000000;
float: right;
}
#Osoby .rowa {
background: #ffffff;
height: 20px;
}
#Osoby .rowb {
background: #c0c0c0;
height: 20px;
}
#Osoby .cell {
padding: 0px;
border: 2px solid #000000;
vertical-align: middle;
}
#Ramka .iframe {
padding: 0px;
border: 5px solid #000000;
float: center; <---- pozostałość stylów po iframe, które i tak nie działały i nie wiem dlaczego... ---->
width: 500px;
height: 200px;
}
div {
float: left;
}
</style>
</head>
<body>
<----------- tutaj brakuje właśnie tej treść, która ma się znajdować po lewej stronie ----------->
<table class="table" id="Osoby" cellspacing="0" cellpadding="0">
<tr class="rowa">
<td class="col1 cell"><img src="http://www.botany.hawaii.edu/bot606/606Photo/Computer%20Tutorials/ScannerTutorial/200x300.jpg" /> </td>
<td class="col2 cell"><img src="http://www.botany.hawaii.edu/bot606/606Photo/Computer%20Tutorials/ScannerTutorial/200x300.jpg" /> </td>
<td class="col3 cell"><img src="http://www.botany.hawaii.edu/bot606/606Photo/Computer%20Tutorials/ScannerTutorial/200x300.jpg" /> </td>
<td class="col1 cell"><img src="http://www.botany.hawaii.edu/bot606/606Photo/Computer%20Tutorials/ScannerTutorial/200x300.jpg" /> </td>
<td class="col2 cell"><img src="http://www.botany.hawaii.edu/bot606/606Photo/Computer%20Tutorials/ScannerTutorial/200x300.jpg" /> </td>
</tr>
<tr class="rowb">
<td class="col1 cell"><img src="http://www.botany.hawaii.edu/bot606/606Photo/Computer%20Tutorials/ScannerTutorial/200x300.jpg" /> </td>
<td class="col2 cell"><img src="http://www.botany.hawaii.edu/bot606/606Photo/Computer%20Tutorials/ScannerTutorial/200x300.jpg" /> </td>
<td class="col3 cell"><img src="http://www.botany.hawaii.edu/bot606/606Photo/Computer%20Tutorials/ScannerTutorial/200x300.jpg" /> </td>
<td class="col3 cell"><img src="http://www.botany.hawaii.edu/bot606/606Photo/Computer%20Tutorials/ScannerTutorial/200x300.jpg" /> </td>
<td class="col1 cell"><img src="http://www.botany.hawaii.edu/bot606/606Photo/Computer%20Tutorials/ScannerTutorial/200x300.jpg" /> </td>
</tr>
<tr class="rowa">
<td class="col1 cell"><img src="http://www.botany.hawaii.edu/bot606/606Photo/Computer%20Tutorials/ScannerTutorial/200x300.jpg" /> </td>
<td class="col2 cell"><img src="http://www.botany.hawaii.edu/bot606/606Photo/Computer%20Tutorials/ScannerTutorial/200x300.jpg" /> </td>
<td class="col3 cell"><img src="http://www.botany.hawaii.edu/bot606/606Photo/Computer%20Tutorials/ScannerTutorial/200x300.jpg" /> </td>
<td class="col2 cell"><img src="http://www.botany.hawaii.edu/bot606/606Photo/Computer%20Tutorials/ScannerTutorial/200x300.jpg" /> </td>
<td class="col3 cell"><img src="http://www.botany.hawaii.edu/bot606/606Photo/Computer%20Tutorials/ScannerTutorial/200x300.jpg" /> </td>
</tr>
</table>
</body>
</html>
RE: Prosta strona z wykorzystaniem styli - problem z umieszczeniem treści - Marys - 05-11-2011
Tabelką mówimy nie i korzystam z <div></div>
RE: Prosta strona z wykorzystaniem styli - problem z umieszczeniem treści - Szakalowski - 05-11-2011
No dobrze, tylko jeszcze mi powiedzcie jak to zrobić.
RE: Prosta strona z wykorzystaniem styli - problem z umieszczeniem treści - Bucky - 06-11-2011
Poczytaj, bo nie wiem czy komuś będzie się chciało pisać kod za Ciebie. Szybko to ogarniesz, nie jest trudne, a w necie masa kursów.
RE: Prosta strona z wykorzystaniem styli - problem z umieszczeniem treści - Szakalowski - 06-11-2011
Oglądałem sporo kursów, ale nie jest tam wprost przedstawione to co bym chciał. I jestem zawiedziony, bo nauczyłem się html'a po to żeby się dowiedzieć, że praktycznie wszystko w tym języku jest zdeprecjonowane. Po jaką cholerę ktokolwiek go używa. I nie proszę o kod tylko o wskazówki. Gdybyście mogli mnie naprowadzić.
RE: Prosta strona z wykorzystaniem styli - problem z umieszczeniem treści - Pedro84 - 06-11-2011
Weź po prostu daj podgląd co Ty w ogóle chcesz osiągnąć...
RE: Prosta strona z wykorzystaniem styli - problem z umieszczeniem treści - Kartofelek - 06-11-2011
ajax pewnie cię zainteresuje, a dokładniej jquery ajax
http://doman.art.pl/kursjs/kurs/ajax/ajax.html
http://doman.art.pl/kursjs/kurs/jquery/jquery_ajax.html
Ogólnie idea jest taka: robisz normalną stronę która przy przeładowaniu (kliknięcie linka) ładuje odpowiednie dane w dane miejsce (to lewe). Potem za pomocą podpięcia ajaxa (i wyłączenia działania linków) zmieniasz to tak, że po kliknięciu na link wywołuje się javascript który zmienia daną część strony, bez jej przeładowania.
"bo nauczyłem się html'a po to żeby się dowiedzieć, że praktycznie wszystko w tym języku jest zdeprecjonowane."
No ja nie wiem skąd ty się uczyłeś
Co do iframe. Jeżeli chcesz to go używaj. Jakoś Facebook do tej pory spokojnie go wykorzystywał (i na milionach stron wciąż wykorzystuje) i nikt z tego powodu nie płakał. Po prostu nie jest to zalecane, ponieważ jak ktoś wyszuka w google jakiś wynik z twojej strony to trafi na ten wynik, a nie na stronę
Dlatego najlepiej jest zrobić po prostu kolejne podstrony z inną częścią.
RE: Prosta strona z wykorzystaniem styli - problem z umieszczeniem treści - Bucky - 06-11-2011
Ja bym na Twoim miejscu ogarnął "divy" albo zaczął już nawet od HTML 5 (idziemy do przodu), a potem zrobił to co mówi Kartofelek, bo on się zna
RE: Prosta strona z wykorzystaniem styli - problem z umieszczeniem treści - Szakalowski - 06-11-2011
To musi być w html, ewentualnie z wykorzystaniem stylów albo php, ale za to się w ogóle nie zabieram.
Przestudiowałem cały www.kurshtml.edu.pl.
W każdym razie zapytam inaczej, bo nie będę się w nic bawił specjalnie. Jak regulować stylami iframe (bo to co w kodzie pisałem nie działało) i jak ustawić żeby po kliknięciu w jakiś odnośnik (w moim przypadku obrazek) czytała się podstrona tylko do iframe, a reszta pozostawała bez zmian.
Coś takiego chciałbym osiągnąć:
http://i44.tinypic.com/25aqjba.png
RE: Prosta strona z wykorzystaniem styli - problem z umieszczeniem treści - Kartofelek - 06-11-2011
html5 to jest html...
co do pytania: normalnie się ustawia. Jak nie działa to ustaw atrybutami width="" i height=""
Wczytywanie do iframe? Daj linkowi atrybut target="nazwa_ramki"
No i łap linka:
http://doman.art.pl/kursjs/kurs/ramki.html