Eli mun pitisi saada järkevä CSS taitto yhden divin sisälle käyttäen hyväksi jotain muuta positionia kuin absolutea, koska itse pää-elementti on asetettu sillä ja sen koordinaatteja muutetaan java scriptillä, joten en voi enää antaa toisten elementtien karata sen pääelementin sisästä.
Eli tämä koodin rajat on pää-elementin rajat:
|-------------------------------------|
| tekstiä ja taustatakuva |
Otsikko | tekstiä ja taustatakuva |
| tekstiä ja taustatakuva |
kuva************** | tekstiä ja taustatakuva |
****************** | tekstiä ja taustatakuva |
|-------------------------------------|Eli tuollainen pitiäisi saada taitettua ja olen yrittnyt vaika mitä, mutta noi display:inline ja inline-block toimii jotenkin hassusti.
Eli esim, pistin Otsikon ja kuvan yhden elementin sisään ja tuon tekstin ja taustakuvan toiseen ja yritin sitten laittaa ne vierekkäin, mutta inline:ssä ei toimi oikein marginaalit ja inline-block pistää jotenkin hassusti lomittain.
Osaisko joku jeesiä?
Absolute määräytyy suhteessa ulompaan elementtiin, joten ulomman liikuttelu ei aiheuta ongelmia.
Mikäli ne vierekkäiset elementit ovat erikorkuisia, niin molempia isännöivän elementin vertical-align vaikuttaa elementtien sijoitteluun pystysuuntaisesti. inline-blockin käyttö vierekkäisten isompien lohkojen taittoon on ollut suht harvinaista, IE oli pitkään ainut selain joka jokseenkin tuki sitä ylipäätään.
Lisäksi tarkennuksena Metabolixin vastaukseen, että absolute määräytyy seuraavaksi ulomman absolute tai relative -elementin mukaan, kumpi vain sattuukaan tulemaan ensin vastaan. Jos niitä ei ole niin eletään body-elementin mukaan. Static-elementit siis jätetään huomiotta (oletusasetus kaikilla elementeillä).
Kiitokset sivistyksestä!
Mutta en silti meinaan saada toimimaan, absolute näyttää määräytyvän täysin riippumatta muista elementeistä, vaikka mulla on jotain muitenkin absolute elementtejä. Mutta siis mun täytyisi saada pidettyä kaikki kama sen emäelementin sisässä, mutta ei vaan pysy vaan karkaa sieltä position absolutella. Pitäisköhän mun laittaa jotain näkymättömiä elemettejä, jotka ohjaisivat näiden emä elementin sisällä olevia elementteja...
Mutta onko ehdotuksia, että mitä kyseessä olevassa tilanteessa kannattaisi tehdä?
Käyttää vaan härskisti position absolutea ja määritellä javascritillä niitten liikkuvat sijainnit esim. window rezisen varalle?
Kun tuossa emä elementissä se on jo tehty, niin pääsis vaan vähemmälle, jos ei tarttis laittaa scriptiin kaikkia elementtejä.
Pystytkö laittamaan koodia näkyville ettei tarvitse arvailla missä menee vikaan? Lähinnä HTML ja CSS -yhdistelmä kiinnostaa, JS:n kanssa ei niin väliä taida olla.
ok, pistn tänne, mutta tulos on jotain ihan sekasotkuista, johtuen noista display inlineistä:¨
body
{
background-image: url('pics/background.png');
background-repeat:repeat-x;
margin: 0;
}
#leftSide
{
background-image:url("pics/leftSide.png");
position:absolute;
left: 60px;
top:0px;
height:800px; /*Here you have to make javascript funtion which looks at the bottom of the page*/
width: 74px;
}
#rightSide
{
background-image:url("pics/rightSide.png");
position:absolute;
left: 900px;
height:800px;
width: 74px;
}
#content
{
margin-top: 10px;
margin-left:0px;
width: 776px;
height:400px;
border: 2px solid green;
}
#lastPart
{
margin-top:10px;
}
#lastPartText
{
font-family: arial;
font-size:11px;
color:#6f6f6f;
margin-left: 180px;
margin-top: 10px;
text-align:center;
}
#infoContent
{
display:inline;
margin-top:40px;
height:330px;
width: 150px;
border: 3px solid blue;
}
#pageInfo
{
display:inline;
margin-top: 40px;
margin-left: 85px;
font-family: Arial;
font-size:16px;
font-weight: bolder;
color: #7e7e7e;
border: 2px solid red;
}
#points
{
margin-top: 0px;
display:inline;
}
#mainText
{
display:inline;
top: 10px;
left: 530px;
height: 330px;
width:485px;
background-image:url('pics/textBackground.png');
background-repeat: no-repeat;
padding: 20px;
border: 2px solid red;
/*border: 2px solid green;*/
}
#mainPhoto
{
margin-left: 10px;
margin-top: 20px;
}
#mainDiv
{
position: absolute;
left:100px;
background-color: #ffffff;
height: 800px;
width: 786px;
/*border: 2px solid green;*/
}
#navi
{
width: 600px;
height: 64px;
margin-top: 38px;
margin-left: 100px;
border:2px solid blue;
}
#navi1, #navi2, #navi3, #navi4
{
border-left:2px solid #969696;
background-image:url('pics/emptyback.png');
text-align: center;
color: #969696;
display: inline;
height: 56px;
width: 78px;
font-family: arial;
font-size: 16px;
font-weight: bolder;
cursor: pointer;
cursor: hand;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fi">
<head>
<link rel = "stylesheet" type = "text/css" href = "maincss.css">
<title>otsikko</title>
</head>
<body onLoad="domready();" onResize="windowResized();">
<script type="text/javascript" src="cheapSite.js"></script>
<?php
$site="Index";
include("background.php");
?>
</body>
</html>
....
background.php:
<?php
echo '<div id="leftSide"></div>';
echo '<div id="mainDiv">';
include("firstpart.php");
include("content".$site.".php"); //including the content of the site.
include("lastpart.php");
echo '</div>';
echo '<div id="rightSide"></div>';
?>
....
contentIndex.php:
<?php
echo '<div id="mainPhoto">';
echo '<img src="pics/indexPic.png"></img></div>';
echo '<div id="content"><div id="infoContent">';
echo '<div id="pageInfo">ETUSIVU</div>';
echo '<div id="points"><br><br><img src="pics/points.png"></img></div>';
echo '</div>';
echo '<div id="mainText">plaa plaa</div>';
echo '</div>';
?>
firstpart.php:
<?php
echo '<div id="navi">';
echo '<div id="navi1" onMouseOver="naviover(1)" onMouseOut="naviout(1)" onClick="link(1)">ETUSIVU</div>';
echo '<div id="navi2" onMouseOver="naviover(2)" onMouseOut="naviout(2)" onClick="link(2)">PALVELUT</div>';
echo '<div id="navi3" onMouseOver="naviover(3)" onMouseOut="naviout(3)" onClick="link(3)">YRITYS</div>';
echo '<div id="navi4" onMouseOver="naviover(4)" onMouseOut="naviout(4)" onClick="link(4)">YHTEYS</div>';
echo '</div';
?>
....
(last.part.php)...
<?php
echo '<div id="lastPart"><img src="pics/bottomlines.png"></img></div>';
echo '<div id="lastPartText">';
echo 'plaaplaaplaplaaplaa 6 D 37, 02770 Espoo';
echo '</div>';
?>Voin tietty pistää kuvat myös palvelimelle, niin näkee myös lopputuloksen...
Mutta lähinnä kiinnostaisi tietää, että millä tekniikalla homma kannattaisi tehdä. Aluksi noi kaikki elementit pysyi nätisti emäelementin(maindiv):in sisällä, mutta sitte ku piti alkaa käyttää display inlineä, niin homma hajos käsiin.
EDIT: no joo, tuossa on nyt näemmä jäljellä vielä noita position:absoluten tavaraa, ettei ihme ku sekoittaa entisestään.
Mutta taidan tehdä niin, että kiltisti heitän kaikki absoluteksi, niin on ainakin loogista ja scriptin kautta ohjaan sijainnit. Harmittaa vaan ku ei vaan joko ymmärrä tarpeeksi hyvin noista muista positioneista taikka sitten ne ei vaan toimi niinkuin olisi loogista.
Sinulla on aika massiivinen väärinymmärrys taittamisesta ylipäätään. Lähdet siitä ajatuksesta, että laatikot saa sijoitella pikseliarvoilla sinne minne huvittaa ja tavallaan luovut CSS-taitosta kokonaan pukkaamalla elementtien sijoittelun JavaScriptin harteille. Tämä tekee taittamisesta työlästä ja monimutkaisempaa kuin sen tarvitsisi olla.
CSS-taittoon pääset sillä, että luovut pakkosijoitteluista ja alat ajatella sivua virtauksena (englanniksi termi on flow). Kun teet lohkotason elementin (div, otsikot, kappaletagi jne.), niin se valtaa itselleen kaiken saatavilla olevan tilan leveyssuunnassa. Siten seuraava lohkoelementti tulee edellisen alapuolelle. Kun annat useimpien elementtien toimia vapaasti näin, niin pääset helpommalla. Poikkeuksen muodostavat sitten ne elementit, jotka haluatkin rinnakkain. Lisäksi on tekstisisältöä (inline), joka juoksee jatkuvalla syötöllä vasemmalta oikealle ja riviltä toiselle. Absoluuttinen sijoittelu on useimmiten enemmän poikkeus kuin sääntö.
Tällä sivullasi ei kuitenkaan tällä tutkinnalla ole tarvetta kovinkaan monella elementillä olla rinnakkain, ainakaan lohkoelementeillä. Siispä taitoin sivusi kokonaan uusiksi, luovuin koko absolute-ajattelusta ja yritin selventää itselleni, että mitä oikeastaan olet ajamassa takaa. Päätelmäni on:
1) haluat keskitetyn sivun
2) haluat että taustakuva jatkuu koko sivun mitalta
Tämä onnistuu ihan vain yksinkertaisesti laittamalla keskitetyn taustakuvan body-elementtiin ja siirtämällä vanhan toistuvan taustakuvan html-elementtiin. Sitten vain keskitetään erikseen jokin muu kaiken sisältävä elementti ja ollaankin jo aika pitkällä, täysin ilman JavaScriptiä vieläpä.
Toki arvaukseni saattaa mennä vikaan, mutta näillä auttamiskokemuksilla täytyy aina välillä heittää jänniä veikkauksia.
Vanha: http://merri.net/xhtml/Paulus_M_taitto.html
Uusi: http://merri.net/xhtml/Paulus_M_taitto_uusittu.
Esimerkkini on ruma, koska se olettaa että kuvat löytyvät, mutta kun minulla niitä ei ole. Heitin arvalla joitakin sopivia lukuja ja yritin päätellä, millaisia kuvia sinulla on. leftSiden ja rightSiden saat kyllä yhdistää yhdeksi kuvaksi, tuleekohan siitä sitten jotain 800 + 74 + 74 pikseliä leveä.
Pääset helpommalla suunnitteluvaiheessa sillä, että ensin teet HTML:n ja CSS:n, katsot siihen mitä tarvitset ja vasta sitten alat leikata sitä PHP-skriptiksi. Lisäksi JavaScriptin käyttösi vaikuttaa turhemmanpuoleiselta sellaiselta, JavaScript on hyödyllistä sitten vasta kun lisätään toiminnallisuutta. Ulkoasu ja taitto kannattaa jättää CSS:n harteille.
Kiitoksia hullusti vaivannäöstä, itse vaan olen tottunut hoitamaan kaikki manuaalisesti joittekkin yksinkertaiseten ja selkeiden sääntöjen alaisuudessa, esim pistää kuvia perustuen koordinaattilohkoon, jossa yläkulma on piste 0,0.
Ja kun en meinaa ymmärtää CSS:ää riittävästi ja selaimetkaan ei ikinä ole yhteisymmärryksessä, niin olen ajatellu hoitaa sitten selkeästi koko homman itse.
Mutta toi itse saitti ei ole mikään maailman helpoin taitettava. Osa arvailuista osui oikeaan, mutta Javascriptiä käytän lähinnä sen takia, että keskitys riippuu siitä, että miten suuri on selaimen leveys. Eli keskitystä ei tehdä, ellei selaimen leveys ole yli 986 pikseliä.
Mutta koska oot nähny nyt jo hyvän vaivan tuon takia, niin pistän tässä leiskan siitä, miltä sivut tulisi näyttää:
http://paulus.net16.net/etusivu2.jpg
Ja itse olen siis ratkaissut tuon taustakuvassa olevan tummennusten ongelman siten, että olen tehnyt eka valkoisen mainDivin ja sen molemmille puolille kuvat, joissa on toi tummennus. Taustakuvaksi olen tehnyt kuvan(3*1600), jota repeattaan toiseen laitaan.
PHP:tä on paljon joukossa sen takia, että kaikki muut samanlaiset sivut tulisi pienellä vaivannäöllä ja päivittäminen olisi helppoa.
Mutta en uskaltaisi luopua tuosta javascript scriptistäni, vaan jos vaan saisin idean siitä, että miten taitantuon kohdan, jossa on ETUSIVU, ne pisteen sen alapuolella ja pääteksti, niin homma skulaisi. Eli kun vaan nätisti heittää kaiken kaman tuon pääelementin sisälle, eli valkoisen mainDivin, niin eikö homma pitäisi olla sillä selvä? Eli mitään muuta ei tarttis sitten taittaa absolutella, kun tuon pääelementin ja sivulla olevat tummennukset.
Vaivaudun sitten tällä erää vielä, vaikka ilmeisesti palkallinen projekti onkin kyseessä:
http://merri.net/xhtml/Paulus_M_taitto_uusittu2.html
Ei yhtä ainutta kuvaa eikä riviäkään JavaScriptiä ja silti tekee sen mitä pitää: CSS:stä löytyy min-width ja max-width (IE7+). Varjostus on toteutettu box-shadowilla, ei toimi IE8:lla joten korvaa se sitten sillä taustakuvakikkailulla. Vaaleampi tausta on 102 pikseliä korkea, varaa sille leveyttä ainakin 2048px. Oma näyttöni on 1920 x 1080, joten kannattaa varata ylimääräistä, 1600 pikseliä ei välttämättä riitä. CSS:n pyöristykset ei myöskään toimi IE8:lla ja aiemmilla, mutta se efekti on niin mitättömän pieni tuollakin sivulla että voin lyödä vaikka vetoa, ettei puutetta IE:ssä huomaisi ainutkaan Pekka Peruskäyttäjä.
Leiska noin muuten toiminee perusrungoltaan IE6+, mutta olen testannut vain IE8:n IE7-moodilla. Koodi noin muuten on esimerkiksi aika pitkä, mutta tein siitä aika "täydellisen". Se toistaa kaikki ulkoasussa olevat vaatimukset käyttäen niin vähän elementtejä ja kuvia kuin vain voi.
Tuossa riittää varmasti useammallekin lukijalle tutkittavaa, lopputulos on taas jonkinmoinen sekoitus IE-yhteensopivuutta että uusimpia lisäyksiä CSS:ään.
Sitten vielä koodi tähänkin:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Otsikko</title>
<style type="text/css">/*<![CDATA[*/
html,body {
margin: 0;
padding: 0;
}
html {
background: #EDF1F4 url(pics/background.png) repeat-y 50% 0;
}
body {
background: url(pics/background_light.png) repeat-x 50% 13px;
font-family: 'Arial', sans-serif;
overflow-x: hidden;
}
#document {
background: #FFF;
border-top: 13px solid #FAFAFA;
box-shadow: 0 0 50px #888;
-khtml-box-shadow: 0 0 50px #888;
-moz-box-shadow: 0 0 50px #888;
-o-box-shadow: 0 0 50px #888;
-webkit-box-shadow: 0 0 50px #888;
margin: 0 auto;
padding-top: 32px;
position: relative;
min-width: 786px;
max-width: 986px;
}
#header {
float: left;
line-height: 70px;
margin: 0 13px;
padding: 0;
}
#navi {
font-size: 11pt;
font-weight: bold;
height: 70px;
line-height: 70px;
list-style: none;
margin: 0 auto;
padding: 0;
}
#navi:after {
clear: both;
content: '';
display: block;
}
#navi li {
display: inline;
float: left;
margin: 0;
}
#navi a {
border-left: 2px solid #969696;
display: block;
padding: 0 15px;
}
#navi a:link,#navi a:visited,#navi a:active,#navi a:hover {
color: #969696;
text-decoration: none;
}
#navi a:hover {
background: #F9F9F9;
}
#navi li.active a {
border-color: #0AABF1;
color: #0AABF1;
}
#photo {
background: #05628D url(valokuva_ilman_pyoristyksia.jpg) no-repeat 50% 50%;
border-radius: 7px;
-khtml-border-radius: 7px;
-moz-border-radius: 7px;
-o-border-radius: 7px;
-webkit-border-radius: 7px;
height: 225px;
margin: 26px 13px;
padding: 0;
text-indent: -20000px;
}
#content {
width: 100%;
}
#content:after {
clear: both;
content: '';
display: block;
}
#content h2 {
border-bottom: 1px dashed #DCDCDC;
color: #7E7E7E;
float: left;
font-size: 12pt;
line-height: 25px;
margin: 0;
padding: 26px 26px 13px 13px;
text-align: right;
width: 200px;
}
#content h3 {
color: #1EABE0;
font-weight: normal;
font-size: 140%;
font-style: italic;
}
#mainText {
background: #F2F6F7;
border-radius: 7px;
-khtml-border-radius: 7px;
-moz-border-radius: 7px;
-o-border-radius: 7px;
-webkit-border-radius: 7px;
font-size: 11pt;
margin: 0 13px 0 240px;
min-height: 300px;
padding: 13px 26px;
}
#footer {
border-top: 5px solid #9C9C9C;
color: #6F6F6F;
font-size: 9pt;
margin: 13px 0;
padding: 0;
position: relative;
text-align: center;
}
#footer p:before {
background: #FFF;
content: '';
display: block;
height: 5px;
left: 230px;
position: absolute;
top: -5px;
width: 10px;
}
#footer p {
border-top: 5px solid #1EABE0;
margin: -5px 0 0 240px;
padding: 15px;
}
/*]]>*/</style>
</head>
<body>
<div id="document">
<h1 id="header"><img alt="Yritys" src="pics/yritys.png" /></h1>
<ul id="navi">
<li class="active"><a href="">ETUSIVU</a></li>
<li><a href="">PALVELUT</a></li>
<li><a href="">YRITYS</a></li>
<li><a href="">YHTEYS</a></li>
</ul>
<p id="photo">Tähän voi laittaa vaikka lyhyen sloganin tms. :P</p>
<div id="content">
<h2>ETUSIVU</h2>
<div id="mainText">
<h3>Sivun pääotsikko</h3>
<p>plaa plaa</p>
<p>plaa plaa plaa</p>
</div>
</div>
<div id="footer">
<p>plaaplaaplaplaaplaa 6 D 37, 02770 Espoo</p>
</div>
</div>
</body>
</html>No hei kiitti tuosta! Voinko kysyä paljonko sulla esim. menee aikaa tuollaisen tekemiseen?
Tosiaan Firefoxilla toimii aika näyttävästi ja IE kasilla vain jotainkin ongelmia, mutta enköhän tästä saa näppärästi kaikki tarvittavan tuohon saitilleni.
Noin valmiilla mallilla kai vähän reilu puolisen tuntia, jos ei lasketa jälkikäteen tehtäviä minikorjailuja.
Merri ja muutkin: Avastin mukaan Paulus_M_taitto_uusittu2.html esimerkin Nature_Mountains.jpg sisältää troijalaisen (Win32:Zapchast-GG).
Opiskelija kirjoitti:
Merri ja muutkin: Avastin mukaan Paulus_M_taitto_uusittu2.html esimerkin Nature_Mountains.jpg sisältää troijalaisen (Win32:Zapchast-GG).
No, poistan sen kuvan silti, ei niin väliksi olla siinä. Itselläni on Panda Cloud Antivirus testikäytössä.
No huh huh Merri, miten voit muka puolessa tunnissa vääntää tuollaisen koodin - käsittämätöntä!
Mulle oli suunnatonapu tuosta koodista, hullut kiitokset!
Täällä ohjelmointiputkassa on monta jätkää, jotka tekisi mieli palkata firmalle töihin - jos ei muuta, niin ainakin osa-aikaiseksi vastaamaan jostain vaikeista ongelmakohdista. Vaikka tämä on harrastelija painoitteinen foorumi, niin todellista ammattitaitoa löytyy kyllä paljon.
Voinko kysyä sulta Merri samaa kuin Metabolixilta, että ootko kiinnostunut antamaan apuja joihinkin haastaviin web-projekteihin, kunnon korvauksella esim. 20e/h tai 25e/h? Kokoaikaiseksi mulla ei ole varaa palkata tuollahinnalla, mutta aina välillä olis enemmänkin kysyttävää.
EDIT: Vielä yksi nopea kysymys, pystynkö laittaa pikkasen lähemmäksi tuota pääkuvaa suhteessa noihin navi linkkeihin, niiden väliin jää turha iso y-suuntainen väli ja toi content:''; clear:both vie tilaa, jota ei voi supistaa margin-topilla?
Useimmilla on valmis pohja, jota muokkaamalla saadaan karsittua suurin osa ajasta pois. Pohjahan on kuitenkin aina ihan sama. Tarkoitan siis noita html tageja.
Tarpeeksi toistoa: minun ei tarvitse miettiä mitä teen, kunhan teen, olen ehtinyt rutinoida usein toistuvan rakenteen. Tämä harrastelupohjasta huolimatta, tai ehkä juuri siitä johtuen :)
Projekteja ja rahaa vastaan minulla ei ole mitään, tosin olen tällä hetkellä työtön, joten valtio tykkää vähennellä tukiaan aika rajulla kädellä heti kun jostain rahaa tulee (Työtulot vaikuttavat: "Perussääntö on, että jokainen palkkaeuro vähentää peruspäivärahaa 50 senttiä. Työtuloa ovat rahapalkka, palkkiot, verolliset kulukorvaukset, luontoisedut jne.") – ja sitten vähennyksiä tulee vielä asumistukeenkin, joten päädyn helposti plusmiinusnollaan pienillä työkeikoilla.
Teuro: oma pohjani on oikein huikea,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css">/*<![CDATA[*/ /*]]>*/</style> </head> <body> <div id="document"> </div> </body> </html>
Voisi siinä varmaan olla enemmänkin valmiiksi, mutta yleensä demoan vain yksittäisiä juttuja foorumeille.
Pahus, no meikä pistääkin kuitenkin sut muistiin siltä varalta, että jos alkaa tulla pahasti kiireitä, niin voisin sitten tarjota enemmänkin hommia.
Pistän sähköpostia, jos jossain vaiheessa tilanne näyttää siltä, että avun tarve on suuri.
Mutta jos ei muuta, niin suuret kiitokset!
Aihe on jo aika vanha, joten et voi enää vastata siihen.