Ohjelmisto luo verkkokaupan sivujen HTML-koodin. HTML-koodi koostuu HTML-elementeistä. Tämä on selvä asia. Lähtökohtaisesti verkkosivujen ulkoasu näyttää juuri siltä, missä järjestyksessä HTML-elementit näytetään. HTML-elementtien ulkonäköön ja sijaintiin voidaan tehdä poikkeuksia joko CSS-tyylimäärittelyillä tai JavaScript-käskyillä.
CSS-tyylimäärittelyjen päivittäminen on verkkosivujen suunnittelijalle arkipäivää. CSS-tyylimäärittelyillä voidaan määrittää HTML-elementin suhteellinen ja/tai absoluuttinen sijainti sivulla sekä koko, väri, tasaus, marginaali ja täyttö. Nämä keinot eivät aina riitä. Kerromme tässä ohjeessa, miten HTML-elementtien paikan vaihtaminen HTML-koodissa tapahtuu.
Tässä työssä tarvitaan
Tässä esimerkissä verkkokauppias haluaa siirtää sivun yläosassa näkyvän navigaatiopalkin sivun loppuun. Tätä ei kannata tehdä oikeasti, mutta tehdään se esimerkin vuoksi. Ensin on selvitettävä navigaatiopalkin id-parametrin arvo. Se onnistuu helpoiten klikkaamalla hiiren oikeaa painiketta navigaatiopalkin päällä ja sitten "Inspect element". Tarkka sanamuoto vaihtelee eri selaimissa. Tässä tapauksessa selviää, että id-parametrin arvo on "landscape_bottom".
<div id="oma_mansikkapaikka"></div> <script> if (document.getElementById("oma_mansikkapaikka")) { document.getElementById("oma_mansikkapaikka").innerHTML = document.getElementById("landscape_bottom").innerHTML; document.getElementById("landscape_bottom").innerHTML = ""; } </script>
Lopuksi tämän uuden HTML-elementin ulkoasua voidaan muokata lisäämällä CSS-tyylimäärittely: #oma_mansikkapaikka. Se tehdään myös asetukset / koodit ja ulkoasu -kohdan kautta.
Tässä esimerkissä verkkokauppias haluaa siirtää kategoriasivujen alussa näkyvät esittelytekstit kategoriasivujen loppuun. Ensin on selvitettävä esittelytekstin id-parametrin arvo samalla tavalla kuin esimerkissä 1. Tehtävä osoittautuu kuitenkin mahdottomaksi, koska esittelytekstillä ei ole lainkaan id-parametriä. Siltä löytyy vain class-parametri "tb_category_intro". Tässä tapauksessa on toimittava hieman eri tavalla.
<div id="oma_mansikkapaikka"></div> <script> var $elements = document.getElementsByClassName("tb_category_intro"); for (var $i = 0; $i < $elements.length; $i++) { if (document.getElementById("oma_mansikkapaikka")) { document.getElementById("oma_mansikkapaikka").innerHTML = $elements[$i].innerHTML; $elements[$i].innerHTML = ""; } } </script>
Esittelytekstin marginaaleja voidaan muokata "Ulkoasupohja: Kategoriat" -kortissa olevia CSS-tyylimäärittelyjä muokkaamalla.
Näillä ohjeilla ja koodiesimerkeillä ei ole minkäänlaista toimivuustakuuta. Emme vastaa välittömistä, välillisistä, satunnaisista tai epäsuorista vahingoista, menetyksistä, korvauksista, tai kolmannen osapuolen esittämistä vaatimuksista, jotka johtuvat näiden ohjeiden tai koodiesimerkkien noudattamisesta.
Asiakaskirjeen tilaajana saat sähköpostitse tärkeitä asiakastiedotteita noin 2-5 kertaa vuodessa. Asiakaskirjeen tilaaminen on tärkeää, jos käytät ohjelmistoa.