|
9. Átrendezett Szerkesztett képek menü2022.11.03. 15:41, Nita
Volt ma egy kis időm, és kedvem kaptam ahhoz, hogy tevékenykedjek kicsit ezen az elhanyagolt, ámde szeretett kis oldalamon. Nem tudom, hogy mikor lesz legközelebb ilyen. Nem ígérek semmit. Képszerkesztésre még mindig nem tudtam magam rávenni. Csak rendezkedtem a Szerkesztett képek menüpontban. Régóta agyaltam már rajta, hogy hogyan lehetne a képeket úgy elhelyezni, hogy ne legyenek nagyon szétszórva, eldugva az almenükben. Elvégre azok miatt hoztam létre ezt a portált. Ne egy Tovább... gomb után láthassuk csak őket, legyenek feltűnőbbek. Azt hiszem, sikerült megoldanom úgy, hogy görgethető szövegdobozokba pakoltam át a képeket. A képek átrakása mellett, a Szerkesztett képek modulban lévő, az almenüpontok neveiből álló felsorolást is megformáztam.
Ha érdekel a szövegdoboz, és a felsorolás kódolása, akkor katt a tovább olvasom gombra.
Így néz ki a görgethető szövegdoboz, amit használtam:
Nagydarab, de úgy éreztem, hogy a képeknek pont jó.
Megjegyzés: A görgetősáv csak akkor jelenik meg, ha a tartalom eléri a doboz magasságát.
Kódja:
<div align="center">
<div class="textbox">
<div>
Tartalom...
</div>
</div>
</div>
<style type="text/css">
.textbox{
font-size: 12px;
line-height: 20px;
color: #000;
text-align: justify;
background: #fff;
border: 1px solid #000;
padding: 5px;
width: 90%;
height: 400px;
overflow: auto;
}
</style>
Így formáztam meg az almenüpontok neveiből álló felsorolást:
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus.
-
Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor.
Igazából a Szerkesztett képek menüben nem teljesen ilyen, mert ott a felsorolás szövege máshogy van testreszabva. Nem ilyen a betűtípus, szín. Nagyobb a betűméret is. Én a kóddal csak a listázás hátterét akartam kicsit kicicomázni. Egyébként próbáltam olyan háttérképet keresni, ami semleges színű. Minden szín illik hozzá, és jól látszik rajta, ha nem túl világos. Szerintem jó, amit találtam. Még valami: a felsorolásjel kinézete nem szerepel ebben a kódban. Valamint, a doboz árnyékának színe sem olyan, amilyen a kódban. Ezt módosítom, ahogy illik az oldal aktuális kinézetének színeihez. Ide az őszihez megfelelőt adtam meg.
Kódja:
<div align="center">
<div class="ul_gallery">
<ul>
<li>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. </li>
<li>
Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor.</li>
</ul>
</div>
</div>
<style type="text/css">
.ul_gallery{
width: 70%;
background: url(kép linkje);
-webkit-box-shadow: 1px 1px 10px 3px #B0542C;
box-shadow: 1px 1px 10px 3px #B0542C;
padding: 10px;
text-align: left;
color: #000;
}
</style>
Itt van a kép, amit a felsorolás hátterének állítottam be. Sajnos nem tudom a kódjának a szövegdobozába betenni a linkjét, mert mobilon széthúzza oldalt. De mire rájöttem, hogy ez okozza. Atyaég.. :D Szóval a kódban csak megjelöltem a kép linkjének a helyét.
Ezeket a kódokat javarészt egyedül tákoltam össze, a LindaDesign Nonstop weboldal példái, leírásai alapján. Ne haragudjatok rám, de most nem linkelem be ide. A szélső sávban, az Oldal infók modulban megtalálható link.
| |
|
|
|
A nevem Nita (Anita). Az oldalon szerkesztett képek, díszítők (sorelválasztók, feliratok, png képek, képeslapok stb.) találhatók a Szerkesztett képek modulban.
Véleményeket, kéréseket, hibabejelentéseket, egyéb közlendőket az Üzenőfal menüpontban, valamint a Hírek menüben, a bejegyzések hozzászólás szekciójában szeretettel fogadok. *-*
A portálon található képek, kódok elvihetők!
Nyugodtan felhasználhatjátok, átszerkeszthetitek őket. Annak csak örülök, ha valakit motiválok. :D Saját munkátokként lehetőleg ne tüntessétek fel, ha nem módosítotok rajtuk szinte semmit. Ha elvisztek tőlem valamit, azért említsétek meg az oldalatokon, hogy innen származik, még ha át is alakítjátok. A kódok esetében a többi forrásként feltüntetett oldalt is linkeljétek. Köszönöm.
További szép napot és kellemes böngészést kívánok minden látogatómnak!
| |
|
Szerkesztő: Nita
Indulás: 2017.07.11.
Téma: Képszerkesztés (amatőr), kicsi kódolás
Design alap sablon: http://serpent.website
Nem linkeltem, mert ezen a címen már nem működik. A hivatkozás egy egészen más témájú oldalra visz. :c
Egyéb kódok, scriptek: Nikkii, Gergő, Linda, W3Schools
Ikonok: Font Awesome Icons
Betűtípusok: Google Fonts
Képek: Képguru, Google
Köszönet az oldalaknak!
Böngésző: Google Chrome
>Belépés az oldalra< (szerkesztőnek)
| |
|
2023.12.02. 15:38
2023.09.04. 21:41
2023.03.04. 22:13
2022.12.03. 19:25
2022.11.03. 15:41
| |
|
|