Kotisivujen teossa ongelmaa. (oli:Html ja Css hotspottien..)

Morjensta!

Lähin tossa kokeilee miltä näyttäs kuvissa nuo ns."Kuumat pisteet" ihan html ja css kielellä, ettei Flashia tähän sotkettu. Sain ne toimimaan, mutta yks ongelma kerkes kumminki ilmaantua. Elikkä kun määrään tekstille paikan taulukon oikeasta reunasta se on siellä kans. Mutta sitteku lisään seuraavan(tummennettu) koodipätkän teksti ei enää rivity kuvan oikealle puolelle vaan se menee kuvan alapuolelle:

<p>
<div id="pic">
<img src="../kuvat/emolevy1.png" border="3" bordercolor="black" hspace="4" vspace="4" align="left">

<ul>
<li class="prosessorikanta">
<a href="../keskusyksikko/sanastoa.html">
<span class="outer">
<span class="inner">
<span class="note">Prosessorikanta</span>
</span>
</span>
</a>
</li>
</ul>
</div>
</p>

TÄÄLLÄ vielä kuva ongelmasta. CSS koodinkin voin tähä kopsata jos tarttee.

Kiitti palijon jos joku tietää ongelman ratkaisun! (=

 

Kannattaa laittaa reilusti linkki, jos vain on jo siirretty nettiin, tai sitten kaikki mahd. html ja css tänne, vaikeapa täällä on arvailla mitä on pielessä.

Nuo sisäkkäiset span classit, jos eivät ole suoranainen virhe, niin näyttävät hölmöltä, kun yhdelläkin pärjäisi.

 

Ei ole vielä nettiin siirretty. Tässä alla sitte tuota kuvaa vastaava html ja css pätkä. Tämä on tehty erään css kirjan mukaan. Sanoit tossa, että yhelläki span classilla pärjäis niin kuinka?

HTML koodipätkä:
<table background="emolevyt teksti tausta 1.png" border="0" bordercolor="black" cellpadding="4" width="900" height="#" align="center">
<tr>
<td>
<p>
<h1>Emolevyt</h1>
</p>
<p>
<div id="pic">
<img src="../kuvat/emolevy1.png" border="3" bordercolor="black" hspace="4" vspace="4" align="left">
<ul>
<li class="prosessorikanta">
<a href="sanastoa.html">
<span class="outer">
<span class="inner">
<span class="note">Prosessorikanta</span>
</span>
</span>
</a>
</li>
</ul>
</div>
</p>
<p>
Emolevyt ovat kokonaisuutena aivan käsittämättömän laaja aihealue, koska poikkeuksia on aina poikkeusten perään ja vanhat emot eivät
vastaa monessakaan suhteessa uusimpia emolevyjä. Jokaisella valmistajalla on eri tavat tehdä asioita, joten on mahdotonta vetää yhtä linjaa miten asiat emolevyssä toimivat. Siispä tämä emolevyistä kertova sivusto painottuu kaikkein eniten perustehtäviin
ja niiden toimintatapoihin. Myös muuta perustietoa löytyy.
</p>

CSS koodi:
/*HOTSPOTTIEN MÄÄREET*/
#pic
{
width: 350;
height: 263;
position: relative; /*RELATIVE arvo mahdollistaa tämän toteuttamisen*/
}
#pic ul
{
margin: 0;
padding: 0;
list-style: none;
}
#pic a
{
position: absolute;
width: 100px;
height: 120px;
color: #000;
text-decoration: none;
border: 1px solid transparent;
}
#pic .prosessorikanta a
{
top: 45px;
left: 180px;
}
#pic a .outer
{
display: block;
width: 98px;
height: 118px;
border: 1px solid #000;
}
#pic a .inner
{
display: block;
width: 96px;
height: 116px;
border: 1px solid #fff;
}
#pic a:hover
{
border-color: #03e4f2;
}
#pic a .note
{
position: absolute;
bottom: -3em;
width: 9em;
padding: 0.2em 0.5em;
background-color: #03e4f2;
text-align: center;
left: -30000px;
margin-left: -5em;
}
#pic a:hover .note
{
left: 50px;
}
#pic:hover a .outer, #pic a:hover .outer
{
border: 1px solid #000;
}
#pic:hover a .inner, #pic a:hover .inner
{
border: 1px solid #fff;
}

Hehhe. Mahtaakohan tämän saman asian päästä jotenkin helpommin, vai tarviiko todella näin paljon koodia?

 

Tuo span kommenttini oli virhe, ei se toiminutkaan yhdellä, en ole mikään CSS spesialisti (oma Windows-vinkit sivustokin on hirveää koodia). Mutta en saa toistettua tuota sinun virhettäsi, teksti ei siirry kuvan alle. Tosin koodi ei toimi Operalla ollenkaan (että tulisi esiin se Prosessorikanta -teksti, kun hiiren siirtää kehikon sisään), IE:llä teksti tulee vain jos on juuri kehikon päällä. Aika paljon on korjattavaa/uudelleen suunnittelua tiedossa

Toivotaan että joku osaavampi korjaisi koodisi. Tai sitten palaat kirjan/oppaiden ääreen

 

Ehkäpä, mutta sivut ovat olleet mulle ja monelle kaverille tosi hyödylliset!

Joo kyllähän tuo palsta vaikuttaa paremmalta moneltakin kantilta, ratkaisee myös erään aikaisemman "sivupalkki" ongelmanki.

Semmosta vaan mietin että kun mulla on sivuilla muutama sivu jossa kerron tietokoneen komponenteista, ja kuten varmaa huomasit niin tossa tablessa taustaksi oli määritelty kuva. Ja nää taustakuvat on tehty jokaiselle komponentista kertovalle sivulle oikean kokoisiksi. Esim. toisessa korkeutta on 1000px ja toisessa 1500px jne. Ja kuvia siksi, että saan nuo pyöristetyt reunat niihin. Eli onko mitään keinoa pyöristää nuita muuten, ei taida olla? Vai teenkö sitten keskipalstan css jokaiselle omanlaisen, eli: #asemat_keski_palsta.. #emolevyt_keski_palsta.. ja näin.. joissa eroina olisi vain eri taustakuva.

 

Joo huonosti selitin. Kuvina olin tehnytki nuo pyöristetyt reunat ja niitä kuvia käytin tuossa table rakenteessa taustana. Mulla on joka komponentille eri sivu ja niissä täytyy olla erinkokoiset taustakuvat <--(tekstitausta, table rakenne).
Ja nyt onkin siis ongelma siinä palstojen css koodissa että miten määrittelen joka sivulle (esim. asemat, emolevyt jne.) erin taustakuvan. Any help

 

Siis eihän tossa kuvassa näy mitään taustakuvaa? Siinähän on vain taustaväri, tai niin se ainakin pitäisi olla tehtynä. Noi pyöristykset teet sitten pieninä vain sen kulman kokoisina kuvina, joita voit sitten käyttää kaikilla sivuilla riippumatta siitä minkä kokoista suorakulmiota ne pyöristelee.

On sit jotain javascriptillä tehtyjä pyöristelijöitä jos et halua css:n ja kuvien kanssa kikkailla. Niissä on pieni vaikutus sivun latautumiseen, mutta tollasella sivulla sitä ei käytännössä huomaa.

Esim:
http://www.html.it/articoli/niftycube/index.html

 

Joo noinhan se kuuluisikin tehdä.. Kiitos

e1: Taidan jättää tuon hotspottien kanssa värkkäämisen koska ei siitä loppujen lopuksi niin merkittävää hyötyä ole.

 

Jos ei muuta keksi, niin div+floatilla saa tekstin oikealle. Joudut ehkä määrittämään myös leveyden (width).

Html:n sekaan:

Koodi:

<div style="float:right; width:200px;">
Kaikki mitä haluat oikealle puolelle.
</div>

Jos jostain syystä haluat myöhemmin muuta muotoilua em. diville (border, cellpadding, fontti), niin sitten CSS koodi kannattaa laittaa siihen ulkoiseen tiedostoon. Tällöin koodi olisi seuraava:

Html:n sekaan:

Koodi:

<div class="t-oikea">
Kaikki mitä haluat oikealle puolelle.
</div>

Ja tämä CSS-tiedostoon:

Koodi:

.t-oikea {
float:right;
width:200px;
}

Ja totta tosiaan, on hyvä idea laittaa kaikki mahdollinen muotoilu ulkoiseen CSS -tiedostoon jos sitä kerran käyttää. Sekä selkeyden että ulkoasun muuttamisen kannalta, siis. <img> tagien sisään tarvitsee laittaa vain src ja alt. Halutessaan voi laittaa myös border (esim. linkin sisältämät kuvat).

 

@Dwnldz_5

Jotenkin selkeytti tuota palsta elementtiä! Nyt menee reipas kolmekymmentä sivua melko lailla uusiksi

Kattelin myös tuota pyöristettyjen kulmien tekoa, ja sehän menee kutakuinkin näin:
1. Neljä kpl pyöristettyjä kulmia
2. Määritellään paikat niille
Että miten tuo määrittely sitten käytännössä tapahtuu, jos esimerkiksi on oikealla puolella palsta mihin haluan taustaksi semmoisen pyöristetyillä reunoilla varustetun kuvan. Mitä tuohon css/html koodiin siis tulisi lisätä, että saan taustaksi valkoisen alueen, jossa pyöristetyt kulmat:

HTML
<html>
<head>
<title>Tässäpä vähän palsta kokkeilua</title>
<link rel="stylesheet" type="text/css" media="screen" href="palstakokeilua.css"/>
</head>

<body>

<div class="t-oikea">

SISÄLTÖ SITTEN TÄHÄN NÄIN!!

</div>

</body>
</html>


CSS
.t-oikea
{
float:right;
width:700px;
height:1200px;
}

Huhhuh.. toivottavasti joku ymmärtäisi.. pitäis mennä nukkumaan..

 

En tiedä noista pyöristetyistä kulmista, kun en ole ikinä moisia väsännyt. :L Siis divin ideahan on se, että luettavan tekstin sisältö on vaikka divissä A ja tuo div A on vaikka divin B sisällä, ja tämä B-div taas kertoo, että minkälainen sen sivun ulkoasu/sijainti/tms on. Ja ulkoasu taas määritetään CSS-tiedostolla (tai lisätään samaan dokumenttiin <head> tagien sisälle).

Helpoin rakenne on ehkä seuraava:

Koodi:

<div class="ylaosa"></div>
<div class="navigaatio>
Navigaation | linkit | tähän | näin
</div>
<div class="sisalto">
Tänne sivun sisältöä.
</div>
<div class="alaosa">
Pikkuinen alue alas johon voi laittaa vaikka copyrightsit.
</div>

Ja CSS-tiedostoon on laitettu kullekin classille tyylitykset. Tulisi hirveän pitkä postaus jos tähän keksisin esimerkit..

Mutta. Divin classiin kannattaa sitten laittaa vielä overflow:auto; jotta tekstin/muun sisällön omaava div-alue venyy alas päin oikealla tavalla (voit testata miten käy ilman overflowia).

Heightin tilalle laittaisin min-height, mutta ei ole niin justiinsa. Ehkä.

Voit vakoilla omien sivujeni rakennetta jos tuo div homma kiinnostaa. Vieraskirjan kirjoita-sivun kentät on pistetty floatilla kun en muuta keksinyt (paitsi tableja joita kieltäydyn käyttämästä).
Osoite: http://www.ascendantdescending.com
Tyylitiedosto: http://ascendantdescending.com/skin.css

Tuohan hakee sivun sisällön PHP-koodilla, joten ei siitä varmaan ihan heti selvää saa tuollaisenaan. Hakukoneilla voi ehkä löytyä selvempää infoa. Mutta kun tuon tajuaa niin on se sen arvoista, mielestäni.

Edit: tarkemmin ajatellen myös <p> tagien sisälle voisi laittaa tuon floatin (<p style="float:right">Jotain</p>), mutta tätä en ole koittanut.

 

No nyt käsitin divin idean! eikun säätämään ja harjoittelemaan

Kertoisitko vielä miten saisin tämän kuvan mukaisesti sivuni. ELI olipa resoluutio sitten mikä tahansa -melkein mikä tahansa- tuo "Tekstilaatikko A" ja "Tekstilaatikko B" olisivat kuvan mukaisesti. Eli siis tuo "Keskikohta" olisi tekstilaatikko A:n oikeassa laidassa kuvan mukaisesti. Miten CSS määritellään nuiden laatikoiden sijainti järkevästi, että ne näkysivät eri resoluutioisilla näytöillä samalla tavalla?

Juu tuosta lueskelinkin jo jotakin netistä, käytän jatkossa min heittiä.

 

Vaikka näin:
http://www.ascendantdescending.com/filevault/sivulol.html
http://www.ascendantdescending.com/filevault/tyylitys.css

Eli floattia molemmalle erilliselle boksille ja se kaikki yhden divin sisään jolle on laitettu marginit, jotta se pysyy keskellä ruutua.

 

Ja saletisti natsaa, iso kiitos! Palaan juttuun jos jotakin ylipääsemätöntä onkelmaa ilmenee.

 

Nyt tarttes taas viisaampien apua!

Mulla on kotisivuilla navigointipalkkina alasvetovalikko. Muuten se toimii niinkuin pitääkin mutta on kaks ongelmaa, jotka häiritsee melko paljon:

.KUVA KUMMASTAKIN ONGELMASTA.

1 ongelma) Eli tohon "Keskusyksikön" ja "Tietokoneen" väliin jää tyhjä rako ja aina kun kursorin on vetämässä alapainikkeiden päälle tuo alasvetopalkki sulkeutuu juurikin tuon raon takia. Ainoa ratkaisu on ollut vetää nopeampaa hiiri alapainikkeiden päälle, tämä on totaalisen hankalaa läppäreillä. Löytyisikö ratkaisua?

CSS: Ei toimi IE ilman javaskriptiä!
/*ALAVETOVALIKON CSS KOODI*/

#nav, #nav ul
{
padding: 2px;
margin: 4;
list-style: none;
text-align: center;
}

#nav a
{
display: block;
width: 10em;
}

#nav li
{
float: left;
width: 175px;
height: 45px;
border: 0px;
display: block;
}

#nav li ul
{
position: absolute;
width: 10em;
left: -999em;
width: 133px;
height: 0px;
padding: 0px;
}

#nav li:hover ul
{
left: auto;
}

2 ongelma)Olen väsännyt valmiista galleria pohjastasta (CSS, HTML)pelkän html ja css avulla omanlaiseni gallerian. Tuossa on kuitenkin tuo ongelma, että kuvanmukainen palkki menee navigointipalkin päälle, vaikka alapainikkeiden pitäisi olla galleriapalkin päällä! Apuja?

Sekavaa, jos tarkennusta tarvii pistän tulemaan, toivottavasti joku osaisi auttaa

 

Tämä on sitten puhdas arvaus, mutta veikkaan tuon aiheutuvan jostain paddingista/marginista joka tekee tyhjää tilaa myös noihin nappien väliin. Koita ottaa padding ja margin pois kokonaan ja testaa uudelleen.

Ainut keksimäni selitys on, että HTML-koodin puolella painikkeiden koodilitania on väärin päin, mutta en tästäkään ole ihan 100% varma. Itse asiassa saatan olla 100% väärässä.

Edited to remove a typo.

 

Arvaus meni nappiin niinkuin suomipelit konsanaan. Olin joskus koittanut ottaa paddingit ja marginit pois, mutta jostakin syystä sillä ei ollut vaikutusta. Joka tapauksessa nyt toimii!

2 ongelma) Ööh, mitenkäs väärinpäin? Täällä tuon kuvagallerian html koodi kokonaisuudessaa. En tähän viitsinyt laittaa koska olisi ihan liian pitkä ja sekava. Ja ihan turhien latailujen takia salansana on: salasana1

 

Kunnon yöunien jälkeen sanon: ei kertomassani jutussa tainnut olla mitään järkeä. \o/ Mutta hyvä jos eka ongelma korjaantui.

Edit, moka quoten kanssa.