Forum Mjukvara Programmering och digitalt skapande Tråd

Hjälp med enkel (?) html?

1
Skriv svar
Permalänk
Medlem
●

Hjälp med enkel (?) html?

Jag behöver hjälp/råd. I ett NO-arbete i skolan hade jag tänkt presentera med hjälp av en hemsida då jag tycker om att koda (är dock inte särskilt bra på det). Sidan ser ut så här just nu.

Det jag vill göra är att ha texten i den vita rutan, och den får inte hamna utanför den så man måste kunna scrolla i den rutan.

Tänkte också att det kunde vara en frame om det går så att bara den vita rutan laddas om när man trycker på knapparna.

Går det att göra, eller ska jag göra på något annat sätt?

Jättetacksam för svar!

Visa signatur

Stationär : i5 4670k, RX 580 8GB, Node 304, Pop!_OS 20.10
Thinkpad T14s : Ryzen 7 Pro 4750U, 32GB RAM, Void Linux

Redigera
Citera flera Citera
Permalänk
Medlem
●

Du kan alltid använda dig utav css och javascript då frames överhuvudtaget känns utdaterade, annars kan nog en iframe duga gott i ditt fall.
Webboken är annars en bra sida att läsa.

Visa signatur

WS: [i5 2500k@4.5ghz, 16gb ram, HD6870]@Win 7 / Debian
Laptop: [Samsung 700Z5C-S02]@Win 8

Om du har smak för elektronisk musik: soundcloud.com/skepth

Redigera
Citera flera Citera
Permalänk
Medlem
●

Du behöver inte använda frames. Du kan skapa en <div> för varje text du har och sen när du trycker på en knapp så väljer du helt enkelt att visa den <div>en. Krävs dock lite javascript till att göra det här men det är nog ingen fara.

Börja med att ladda ner jQuery som gör Javascriptkodandet mycket enklare.
http://code.jquery.com/jquery-1.4.2.js

Länka till filen i din html genom att i <head> skriva

<script src="jquery-1.4.2.js" type="text/javascript"></script>

Skapa några <div> som har ett id(ett måste) och text i sig.

<div id="text1">
Valfri text som ska synas
</div>

<div id="text2" >
Annan valfri text som ska synas
</div>

För att dölja dessa måste du använda CSS genom att i <div> lägga till style="display: none;"

<div id="text2" style="display: none;">
Den här kommer inte synas
</div>

Du vill dölja alla texter från början så att ingen syns. När du trycker på en länk ska du skriva den så att du använder javascript för att dölja och visa valfri <div>. Tänk på att om nån <div> redan syns så måste du dölja dessa om du inte vill ha flera <div> under varandra.

<a href="javascript:$('#text1').show(); $('#text2').hide();">Länk1</a>
<a href="javascript:$('#text2').show(); $('#text1').hide();">Länk2</a>

Sist för att ha bestämd storlek på dina divar kan du lägga till mer CSS i style som du redan använt.

<div id="text2" style="display: none; width: 100px; height: 140px;">
Den här kommer inte synas men är 100 pixlar bred och 140 pixlar hög
</div>

Jag har inte gått igenom allt nu då du måste styla hela din sida som du bäst gör med CSS. CSS är väldigt kraftfullt.

Vem som helst kan lägga till mer om jag skrivit fel nånstans. När det gäller javscriptet kan man göra på flera olika sätt.

Visa signatur

I've... seen things

Redigera
Citera flera Citera
Permalänk
Medlem
●

Att köra med div och ex jquery är väl den snygga lösningen.. i ditt fall känns det dock som iframe duger gott.

Visa signatur

EPoX 8RDA+, XP2500+, 2x256Mb PC3200 (DualCh), Club3D 9800PRO, Seagate 7200.7 160Gb 8Mb Limited edition

Redigera
Citera flera Citera
Permalänk
Medlem
●

w3schools.com är sidan du skall besöka om du vill lära dig att göra hemsidor på riktigt. de sätter standarderna för hur internet skall se ut.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Som tidigare ha skrivit, ta en titt på css och div-element om du inte redan använder det. Texterna du vill "koppla" till varje menyklick lägger du i egna div'ar, som har en fast "height", "width". Hur texten ska "spilla över", så du eventuellt får en scrollbar om texten är för lång, styr du med attributet "overflow". Med "overflow:auto" så får du endast en scrollbar där det behövs.

Koppla sedan varje div till ett knapptryck, så du gömmer alla utom den du vill visa. Se tidigare inlägg hur detta görs. Om jQuery känns besvärligt att lära sig (Det tycker jag), så kan du använda dig av vanligt javascript.

Redigera
Citera flera Citera
Permalänk
Medlem
●

som några redan skrivit, kör en iFrame. Är nog lättaste sättet just nu att få det att funka.

Kolla länkarna som några postat ovanför, dom kan vara lämpliga att läsa för att få mer förståelse för det hela.

Och kör hårt, utveckla och lär dig nya saker HTML är SKOJ!

Visa signatur

System:
Intel E4400, 4096Mb DDR2 RAM, 4x HDD tot: ~1100GB, Geforce 8800 GTS 640MB, NEC DVD Writer
Bärbar: Dell Inspiron 2200
System idag: Core i7 6700k, 2xGTX1080 SLI, 16GB RAM, SSD, HDD, m.m.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Ollebro:

w3schools.com är sidan du skall besöka om du vill lära dig att göra hemsidor på riktigt. de sätter standarderna för hur internet skall se ut.

Gå till inlägget

Nej, w3.org har hand om standard för bland annat html och css.
w3schools.com har så vitt jag vet inget med w3.org att göra.

Visa signatur

Cat funeral! Cat funeral!
>>> 112383 <<<

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av pscs3:

Nej, w3.org har hand om standard för bland annat html och css.
w3schools.com har så vitt jag vet inget med w3.org att göra.

Gå till inlägget

Korrekt, W3Schools har absolut ingenting med W3C att göra.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack för alla bra svar. Glömde kanske också säga att sidan är gjord i ps, så hela sidan ligger i en table. Jag kan inget om css, men tack iaf.

Jag löste problemet genom att använda iframes (nytt för mig =P), och använde W3s validator som cleanade upp hemsidan. Nu har jag ett annat problem.

Sidan funkar bara som den ska i Google Chrome. I Internet Explorer och Firefox så öppnas inte länken i iframe, utan öppnas i en ny flik/fönster. I Google Chrome funkar den hur bra som helst?

Här är delen av koden med iframen och knappen/bilden.

<tr>
<!-- Cell med iframe -->
<td rowspan="13" width="766" height="482" background="bilder/no_web_07.jpg">
<iframe src="text.html" height="98%" width="99%" frameborder="0" scrolling="auto" id="iframe_text">
<p>
Din webblasare stodjer inte iframes.
</p>
</iframe>
</td>
<!-- End iframe cell -->
</tr>

<tr>
<td>
<a href="celler_test.html" target="iframe_text" onclick="document.getElementById('iframe_text').frameBorder=0">
<img src="bilder/cellerknapp.jpg" width="178" height="60" alt="Celler" border="0" />
</a>
</td>
</tr>
Senast redigerat Mindre fel i koden.
Visa signatur

Stationär : i5 4670k, RX 580 8GB, Node 304, Pop!_OS 20.10
Thinkpad T14s : Ryzen 7 Pro 4750U, 32GB RAM, Void Linux

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Ge din frame ett name-attribut: name="iframe_text"

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Teknocide:

Ge din frame ett name-attribut: name="iframe_text"

Gå till inlägget

Tack! Nu funkar det

Visa signatur

Stationär : i5 4670k, RX 580 8GB, Node 304, Pop!_OS 20.10
Thinkpad T14s : Ryzen 7 Pro 4750U, 32GB RAM, Void Linux

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara