05-11-2011, 18:34
(Ten post był ostatnio modyfikowany: 05-11-2011, 18:35 przez Szakalowski.)
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):
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>
