Eli yrittänyt rakentaa tuossa siedettäviä ulkoasuja seuran sivustoille. Ensimmäistä kertaa perehdyin tuohon css ihmeelliseen maailmaan ja useamman tunnin opiskelun jälkeen onnistuin saamaan sivustoista järkevän näköiset. Pahaksi onneksi huomasin, että firefoxilla avatessa sivusto ie:n sijasta mikään ei satu enään kohdalleen. Voisiko joku kokeneempi guru vähän neuvoa mitenkä saan nuo kohdalleen. kyseessä siis sivusto joka löytyy osoitteesta http://www.zippo.arkku.net/bujinkan
En ole koskaan mitään sivuja kokeillut väsätä, joten neuvoja en valitettavasti osaa antaa. Sen sijaan huomasin, että myös Operalla on havaittavissa pientä ongelmaa: Teksti tulee tuosta laatikosta ulos oikealta reunalta, Firefoxia minulla ei enää ole mutta siinä varmaan käy samalla tavalla?
Nopealla silmäyksellä ongelma voi olla "laatikko"-css:n padding komennossa. Tämäntapaisia ongelmia voi kokeilla ratkaista niin että muuttaa jotain tiettyä arvoa vähän tai paljon kerrallaan ja klikkaa nettiselaimesta/selaimista refresh/päivitä nappia, jolloin näkee heti muutoksen sivuilla. Suosittelen pitämään nuo css:n komennot samassa css-tiedostossa, niin ongelmat on helpompi nähdä ja korjata. Suosittelen myös käyttämään html-tiedostopäätteitä, koska se on nykyään tuetumpi, kuin tuo htm.
Nyt sain paddingia muuttamlla laatiko kohdalleen, mutta sivuston keskitys ei onnistu millään. En osaa ilmeisesti wrapata tuota koko sivua css:llä, että saisin sen keskitettyä. Kuinkas heitän tuonne sellaisen koodin pätkään sekaan, että saan keskityksen kohdalleen. Olen nyt kokeillut useita erillaisia versioita, mutta en tiedä mikä komento aiheuttaa häiriötä. http://www.zippo.arkku.net/bujinkan/index.html http://www.zippo.arkku.net/bujinkan/style.css
Pistät koko sivun divien sisään. css voisi olla seuraava: body { text-align: center; } div#wrppr { margin-left: auto; margin-right: auto; text-align: left; width: 800px; } ... <body> <div id="wrppr"> ... </div> </body> ...
Tällä hetkellä olen yrittänyt saada toimimaan näin. Index.html sisältää seuraavanlaista. <body bgcolor="#242424" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="container"> [Tässä on bannerin divit, valikon divit, tekstilaatikon divit ym.] </div> </div> </div> </body> </html> CSS style.css sisältää taas rivit: #container { width:960px; margin:0 auto; text-align:center; } Mutta ei ota toimiakseen. Missä teen virheen? EDIT: Tjahas, nyt taisikin onnistua tuo wrappaus oikein. Jos joku vielä voisi sanoa, että näkyykö sivustolla virheitä?
Tapojahan tähän on monia. Usein sivusto kokonaisuudet rakennetaan yhden divin sisälle, jotta koko rakenteen siirtely ja hallinta onnistuu myös sen kautta. Eli tässä esimerkkitapauksessa pää divin nimi on container. Eli CSS:n tämmönen lisäys: Koodi: #container { width: 600; // mikä ikinä dokumentin rajattu koko on text-align: center; margin: 0 auto; } ja sitten itse html: Koodi: <div id="container"> // heti bodyn jälkeen. // tähän kaikki elementit containerin sisälle, eli käytännössä </div> // ennen bodyn loppua voidaan toki toteuttaa myös css classina, mutta containeria ei käytetä kuin kerran.
Sulla on lopussa yksi ylimääränen </div> ? Kannattaa pitää css ja html erillään toisistaan niin ei tule päällekkäisyyksiä vahingossa.
poista tuosta html koodista bodyn attribuutit pois, eli jätä ainostaan <body>. Ja lisää css, body{ sisälle Koodi: background: #242424;
No niin. Nyt toimii juuri niinkuin haluan. Ongelmia näemmä tuotti tuon body komennon sisällys hieman, kuin myös wrappauksen aloitus väärästä paikasta. Demonisen iso kiitos kellopelille ohjeistuksesta.
Sivun sisältö ei ole keskellä, koska containerin leveys on 800px ja containerin sisällä olevien elementtien leveydeksi olet antanut 600px. Tästä saattaa olla hyötyä: http://getfirebug.com/
