hlmod.hu

Magyar Half-Life Mód közösség!
Pontos idő: 2024.03.28. 18:35



Jelenlévő felhasználók

Jelenleg 283 felhasználó van jelen :: 1 regisztrált, 0 rejtett és 282 vendég

A legtöbb felhasználó (1565 fő) 2020.11.21. 11:26-kor tartózkodott itt.

Regisztrált felhasználók: Google [Bot] az elmúlt 5 percben aktív felhasználók alapján

Utoljára aktív
Ahhoz hogy lásd ki volt utoljára aktív, be kell jelentkezned.



Az oldal teljeskörű
használatához regisztrálj.

Regisztráció

Kereső


Új téma nyitása  Hozzászólás a témához  [ 12 hozzászólás ]  Oldal 1 2 Következő
Szerző Üzenet
HozzászólásElküldve: 2017.04.15. 10:23 
Offline
Félisten
Avatar

Csatlakozott: 2016.03.06. 14:20
Hozzászólások: 964
Megköszönt másnak: 102 alkalommal
Megköszönték neki: 134 alkalommal
Üdv!

Valaki segítene HTML-ben, az lenne hogy azt akarom ha rákattintok az egyik képre akkor azt hozza be új oldalon.

  1. <center>
  2. <div id="Content"><h1>'The Project zenekar' képek </h1>
  3. <p></p>
  4. <br>
  5.  
  6. <h2><i> Próbáról képek </i></h2>
  7. <div class="thumbnails">
  8.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/01.jpg" alt="" />
  9.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/02.jpg" alt="" />
  10.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/03.jpg" alt="" />
  11.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/04.jpg" alt="" />
  12.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/05.jpg" alt="" />
  13.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/06.jpg" alt="" />
  14.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/07.jpg" alt="" />
  15.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/08.jpg" alt="" />
  16.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/09.jpg" alt="" />
  17.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/10.jpg" alt="" />
  18.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/11.jpg" alt="" />
  19.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/12.jpg" alt="" />
  20.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/13.jpg" alt="" />
  21.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/14.jpg" alt="" />
  22.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/15.jpg" alt="" />
  23.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/16.jpg" alt="" />
  24.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/17.jpg" alt="" />
  25.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/18.jpg" alt="" />
  26.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/19.jpg" alt="" />
  27.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/20.jpg" alt="" />
  28.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/21.jpg" alt="" />
  29.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/22.jpg" alt="" />
  30.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/23.jpg" alt="" />
  31.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/24.jpg" alt="" />
  32.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/25.jpg" alt="" />
  33.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/26.jpg" alt="" />
  34.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/27.jpg" alt="" />
  35.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/28.jpg" alt="" />
  36.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/29.jpg" alt="" />
  37.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/30.jpg" alt="" />
  38.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/31.jpg" alt="" />
  39.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/32.jpg" alt="" />
  40.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/33.jpg" alt="" />
  41.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/34.jpg" alt="" />
  42.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/35.jpg" alt="" />
  43.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/36.jpg" alt="" />
  44.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/37.jpg" alt="" />
  45.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/39.jpg" alt="" />
  46.     <img onmouseover="preview.src=img1.src" name="img1" src="Proba/40.jpg" alt="" />
  47.    
  48. </div><br>

_________________
 ! Moderátori megjegyzés (kiki):
Kérlek csekkold az aláírásra vonatkozó szabályokat!


Hozzászólás jelentése
Vissza a tetejére
   
HozzászólásElküldve: 2017.04.15. 10:50 
Offline
Signore Senior
Avatar

Csatlakozott: 2011.09.09. 17:39
Hozzászólások: 4020
Megköszönt másnak: 12 alkalommal
Megköszönték neki: 139 alkalommal
Így. Ja és felesleges az onmouseover eventben megadni, hogy img1.src, mivel a this kulcsszú az aktuális elemre mutat, így a this az img1 lesz és így tovább.

Kód:
<a href="Proba/01.jpg" target="_blank"><img onmouseover="preview.src=this.src" name="img1" src="Proba/01.jpg" alt="" /></a>


Vagy ha esetleg dinamikusan szeretnéd kezelni a dolgokat, akkor valahogy így. Bár ez az összes képnél működni fog a weboldalon, de nyilván a selectort módosíthatod img-ről akármilyen osztályra/id-re vagy bármire.

Kód:

$('img').click(function(){
    window.open($(this).attr('src'), '_blank').focus();
});

Ők köszönték meg Silent nek ezt a hozzászólást: The Peace (2017.04.15. 11:18)
  Népszerűség: 2.27%


Hozzászólás jelentése
Vissza a tetejére
   
HozzászólásElküldve: 2017.04.15. 11:17 
Offline
Félisten
Avatar

Csatlakozott: 2016.03.06. 14:20
Hozzászólások: 964
Megköszönt másnak: 102 alkalommal
Megköszönték neki: 134 alkalommal
OOOO , köszönöm , megy a kéz..

  1. <div id="Content"><h1><i>Tagok:</i></h1>
  2. <p>
  3. <br>
  4. <img border="0" src="Tagok/Peti.jpg" width="200" height="200" align="left">  <br clear="left"><h1 style="text-align: left;" class="drop-shadow">Barra Péter    – ének, zongora</h1>
  5.  
  6. <p>
  7. <img border="0" src="Tagok/Csanad.jpg" width="200" height="200" align="left">  <br clear="left"><h1 style="text-align: left;" class="drop-shadow">Kiss Csanád – gitár</h1>
  8. <p>
  9.  
  10. <p>
  11. <img border="0" src="Tagok/Lanti.jpg" width="200" height="200" align="left">  <br clear="left"><h1 style="text-align: left;" class="drop-shadow">Lantos András – basszusgitár</h1>
  12. <p>
  13.  
  14. <p>
  15. <img border="0" src="Tagok/Roli.jpg" width="200" height="200" align="left">  <br clear="left"><h1 style="text-align: left;" class="drop-shadow">Tajti Roland – dobok</h1>
  16. <p>


Még ebben tudnál nekem segíteni, azt akarom hogy a kép mellé jobbra menjen a szöveg (de hiába írok right-et a szöveghez, össze vissza buggol)

_________________
 ! Moderátori megjegyzés (kiki):
Kérlek csekkold az aláírásra vonatkozó szabályokat!


Hozzászólás jelentése
Vissza a tetejére
   
HozzászólásElküldve: 2017.04.15. 11:31 
Offline
Signore Senior
Avatar

Csatlakozott: 2011.09.09. 17:39
Hozzászólások: 4020
Megköszönt másnak: 12 alkalommal
Megköszönték neki: 139 alkalommal
Egy sorba szeretnéd a képet és a szöveget? Itt egy mód rá a sok közül.

Kód:

<div style="display: inline-block; overflow: hidden">
    <img style="float: left" src="blabla"/><h1 style="float: left">My Text</h1>
</
div>


Hozzászólás jelentése
Vissza a tetejére
   
HozzászólásElküldve: 2017.04.15. 11:44 
Offline
SM Fejlesztő
Avatar

Csatlakozott: 2012.10.18. 15:58
Hozzászólások: 2486
Megköszönt másnak: 28 alkalommal
Megköszönték neki: 132 alkalommal
Nos erre sok megoldás van. Ez így elég undorító ahogy te nézted meg, de segítek. Újra írom.

Tehát egy megoldás a floatolás. (gabalyodhat)
  1. <div id="container" style="width: 500px; margin:auto;"> <!--- Ezt a részt css-ben kéne megoldani, de hogy lásd hogy hogyan is épül fel - ide írom.. --->
  2.     <h1>Tagok:</h1>
  3.     <br>
  4.     <img src="Tagok/Peti.jpg" style="float:left" width="200px" height="200px"/> <h1 style="float:left">Barra Péter</h1>
  5.     <div style="clear:both"></div>
  6.     <img src="Tagok/Masik.jpg" style="float:left" width="200px" height="200px"/> <h1 style="float:left">Masik tag</h1>
  7.     <div style="clear:both"></div>
  8. </div>


Ezt én és sok más is, táblázattal oldanánk meg.

  1. <div id="container" style="width: 500px; margin:auto">
  2.     <h1>Tagok:</h1>
  3.     <br>
  4.     <table border='0' width='100%'>
  5.         <tr>
  6.             <td><img src="Tagok/Peti.jpg" width="200px" height="200px"/></td>
  7.             <td><h1>Barra Péter</h1></td>
  8.         </tr>
  9.         <tr>
  10.             <td><img src="Tagok/Masik.jpg" width="200px" height="200px"/></td>
  11.             <td><h1>Masik tag</h1></td>
  12.         </tr>
  13.     </table>
  14. </div>



Remélem segített.

_________________
www.akosvagyok.hu

Ők köszönték meg Maxi nek ezt a hozzászólást: The Peace (2017.04.16. 17:58)
  Népszerűség: 2.27%


Hozzászólás jelentése
Vissza a tetejére
   
HozzászólásElküldve: 2017.04.15. 12:01 
Offline
Signore Senior
Avatar

Csatlakozott: 2011.09.09. 17:39
Hozzászólások: 4020
Megköszönt másnak: 12 alkalommal
Megköszönték neki: 139 alkalommal
Hát ha nagyon beleakarunk menni, akkor a táblázat még kevésbé sem állja meg a helyét mint egy inline-block, hiszen akkor a táblázatnak el kell tüntetni a táblázat tulajdonságait, valamint minden készüléken máshogy működik egy táblázat. (Például "xs" médián már lehet, hogy két sorba rakná a képet és a szöveget.)

Szóval a legprofibb megoldás nyilván a BS használata.

Kód:
<div style="display: inline-block" class="col-lg-12 col-md-12 cold-sm-12 col-xs-12"> <!-- Minden méretre foglaljon el egy teljes (12oszlopnyi) sort -->
    <img style="float: left" class="img-responsive" src="yourpic.png"> <!-- Responsive kép -->
    <h1 style="float: left">Your Text</h1>
</
div>


De ehhez kell a BS keretrendszer. Amit már feljebb leírtam az ugyanez, csak reszponzivitás nélkül. Táblázatot csak táblázatra használj, attól hogy sulis versenyeken meg érettségin másra is használtok, nincs létjogosultsága máshol, csak adatok megjelenítésénél.

Szerk:

Ha valamiféle bandádnak szeretnél weboldalt, akkor ajánlom tényleg a bootstrappet, manapság ritka az olyan weboldal ami megállja a helyét enélkül (kivéve ha ráérős vagy és minden DOM elemedet stilizálsz minden képernyőméretre mediaquerykkel).

W3-on fent van minden a BS-ről, kezdés, példaoldal stb. (https://www.w3schools.com/bootstrap)
Csináltak is egy példa zenekar weboldalt, ami tényleg nagyon alap, de máris szebb és modernebb mint ha te elkezdesz pixelekkel dolgozgatni (https://www.w3schools.com/bootstrap/try ... d_full.htm)
Ha megnézed a példát és összehúzod a képernyőt mobilméretre (vagy megnyitod mobilon), láthatod, hogy illeszkedik a screenhez és a NAV is felveszi a mobil stílust.

Ők köszönték meg Silent nek ezt a hozzászólást: The Peace (2017.04.16. 17:58)
  Népszerűség: 2.27%


Hozzászólás jelentése
Vissza a tetejére
   
HozzászólásElküldve: 2017.04.15. 16:22 
Offline
SM Fejlesztő
Avatar

Csatlakozott: 2012.10.18. 15:58
Hozzászólások: 2486
Megköszönt másnak: 28 alkalommal
Megköszönték neki: 132 alkalommal
Mediaquery-ről hallottunk, kedves?

_________________
www.akosvagyok.hu


Hozzászólás jelentése
Vissza a tetejére
   
HozzászólásElküldve: 2017.04.15. 17:47 
Offline
Signore Senior
Avatar

Csatlakozott: 2011.09.09. 17:39
Hozzászólások: 4020
Megköszönt másnak: 12 alkalommal
Megköszönték neki: 139 alkalommal
Maxi írta:
Mediaquery-ről hallottunk, kedves?


Olvasd el újra amit írtam :D


Hozzászólás jelentése
Vissza a tetejére
   
HozzászólásElküldve: 2017.04.16. 17:58 
Offline
Félisten
Avatar

Csatlakozott: 2016.03.06. 14:20
Hozzászólások: 964
Megköszönt másnak: 102 alkalommal
Megköszönték neki: 134 alkalommal
Köszönet újra mind2-nek, nincs helye itt vitának!

Megy a "köszönet doktor" :D.

EDIT:
[profil]Maxi[/profil] a tied jó lett! :)



Ez:

  1. <div id="container" style="width: 500px; margin:auto">
  2.     <h1>Tagok:</h1>
  3.     <br>
  4.     <table border='0' width='100%'>
  5.         <tr>
  6.             <td><img src="Tagok/Peti.jpg" width="200px" height="200px"/></td>
  7.             <td><h1>Barra Péter</h1></td>
  8.         </tr>
  9.         <tr>
  10.             <td><img src="Tagok/Masik.jpg" width="200px" height="200px"/></td>
  11.             <td><h1>Masik tag</h1></td>
  12.         </tr>
  13.     </table>
  14. </div>

_________________
 ! Moderátori megjegyzés (kiki):
Kérlek csekkold az aláírásra vonatkozó szabályokat!


Hozzászólás jelentése
Vissza a tetejére
   
HozzászólásElküldve: 2017.04.29. 07:24 
Offline
Félisten
Avatar

Csatlakozott: 2016.03.06. 14:20
Hozzászólások: 964
Megköszönt másnak: 102 alkalommal
Megköszönték neki: 134 alkalommal
Silent írta:
Így. Ja és felesleges az onmouseover eventben megadni, hogy img1.src, mivel a this kulcsszú az aktuális elemre mutat, így a this az img1 lesz és így tovább.

Kód:
<a href="Proba/01.jpg" target="_blank"><img onmouseover="preview.src=this.src" name="img1" src="Proba/01.jpg" alt="" /></a>


Vagy ha esetleg dinamikusan szeretnéd kezelni a dolgokat, akkor valahogy így. Bár ez az összes képnél működni fog a weboldalon, de nyilván a selectort módosíthatod img-ről akármilyen osztályra/id-re vagy bármire.

Kód:

$('img').click(function(){
    window.open($(this).attr('src'), '_blank').focus();
});
 


Ez nekem valamiért nem okés:(:c



U.i: Figyelmetlenség hibám volt, de igen sikerült, köszönöm! :)

És most nézem duplaposztoltam, valaki törölné ezt a hozzászólásom?

_________________
 ! Moderátori megjegyzés (kiki):
Kérlek csekkold az aláírásra vonatkozó szabályokat!


Hozzászólás jelentése
Vissza a tetejére
   
Hozzászólások megjelenítése:  Rendezés  
Új téma nyitása  Hozzászólás a témához  [ 12 hozzászólás ]  Oldal 1 2 Következő


Ki van itt

Jelenlévő fórumozók: nincs regisztrált felhasználó valamint 0 vendég


Nyithatsz új témákat ebben a fórumban.
Válaszolhatsz egy témára ebben a fórumban.
Nem szerkesztheted a hozzászólásaidat ebben a fórumban.
Nem törölheted a hozzászólásaidat ebben a fórumban.
Nem küldhetsz csatolmányokat ebben a fórumban.

Keresés:
Ugrás:  
Powered by phpBB® Forum Software © phpBB Limited
Magyar fordítás © Magyar phpBB Közösség
Portal: Kiss Portal Extension © Michael O'Toole