Kaivuri kirjoitti:
Löytyykös tuommonen sieltä CSS tiedoston alusta? Helpottais huomattavasti jos sais näkyville sen lähdekoodin..
Mulla on kohdennetty noi marginaalien ja paddingien nollaus body-tagiin, käsittääkseni senkin pitäisi päteä (parent) myös? Testasin juuri firebugilla ja pistin esimerkin mukaisesti, ei ollut vaikusta. Alla on lähdekoodi, josta olen sensuroinut linkit ja kuvalinkit pois ja korvannut ne risuaidalla, asiakasta ajatellen. Ja on vähän helpompi lukeakin:
Koodi: Valitse kaikki
<body>
<div class="kehys">
<div class="container">
<div class="logo_ja_navi">
<a href="#"><img src="#" width="225" height="100" /></a><br />
<a href="#"><img src="#" width="225" height="52" /></a><br />
<a href="#"><img src="#" width="225" height="29" /></a><br />
<a href="#"><img src="#" width="225" height="29" /></a><br />
<a href="#"><img src="#" width="225" height="29" /></a><br />
<a href="#"><img src="#" width="225" height="29" /></a><br />
<a href="#"><img src="#" width="225" height="29" /></a><br />
<a href="#"><img src="#" width="225" height="29" /></a><br />
<a href="#"><img src=#" width="225" height="29" /></a>
</div>
<div class="sisalto">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="560" height="365" hspace="0" vspace="0" id="FlashID" title="008_movie">
<param name="movie" value="008_index.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<param name="SCALE" value="exactfit" />
<param name="BGCOLOR" value="#FFFFFF" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object data="008_index.swf" type="application/x-shockwave-flash" width="560" height="365" hspace="0" vspace="0">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<param name="SCALE" value="exactfit" />
<param name="BGCOLOR" value="#FFFFFF" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</div>
<div class="alamenu">
<form name="form" id="form">
<select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
<option value="#">Valitse</option>
<option value="#">yksi</option>
<option value="#">kaksi</option>
<option value="#">kolme</option>
<option value="#">neljä</option>
<option value="#">viisi</option>
<option value="#">kuusi</option>
<option value="#">seitsemän</option>
<option value="#">Kahdeksan</option>
<option value="#">yhdeksan</option>
<option value="#">kymmene</option>
<option value="#">yksitoista</option>
<option value="#">kaksitoista</option>
</select>
</form>
</div>
<div class="mainosbanneri">
<img src="#" width="790" height="155" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="52,105,225,139" href="#"" />
<area shape="rect" coords="451,107,631,142" href="#" />
</map>
</div>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
Ei siis mitään ihmeellistä.. On kehys, jonka sisällän allekkain ovat container, alamenu ja mainosbanneri-divit. Container-divin sisällä on rinnakkain kaksi diviä, "logo ja navi" sekä "sisalto". Sisalto-diviin tuon sisallon.
Bodyyn on kohdenettu margin ja padding nollaksi, sivulle erikseen on määrätty "div.sisalto padding: 0;", koska tuossa on flash tuotu divin sisaan, jonka alareunan siis PITÄISI olla samalla tasolla viereisen kera.
css näyttää siis tältä (jätän pois muita sivuja koskevia tyylimuotoiluja):
Koodi: Valitse kaikki
* {
font-size: 12px;
}
body {
background-color: #CCCCCC;
margin: 0;
padding: 0;
}
img {
border: 0px;
margin: 0px;
padding: 0px;
}
/* ********** DIV KEHYS, CONTAINER, LOGO ja SISALTO positiot *********** */
div.kehys {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 790px;
border: 5px solid #ffffff;
background-image: url(kampanja_008_kuvat/vasmenu_bg.gif);
background-position: left;
background-repeat: repeat-y;
background-color: #ffffff;
}
div.container {
border-bottom: 5px solid #ffffff;
}
div.logo_ja_navi {
width: 225px;
float: left;
/*background-color: #9F0;*/
}
div.sisalto {
width: 560px;
float: right;
/*background-color: #F3C;*/
padding-bottom: 10px;
}
/* ********** DIV ALAMENU ********** */
div.alamenu {
border-top: 5px solid #ffffff;
border-bottom: 5px solid #ffffff;
background-color: #dee1e4;
clear: both;
height: 40px;
background-image:url(kampanja_008_kuvat/alamenu_bg.gif);
background-repeat: no-repeat;
padding: 0px;
padding-right: 20px;
}
div.alamenu form {
margin: 0px;
margin-top: 9px;
padding-top: 0px;
padding-bottom: 0px;
margin-left: 200px;
display: inline;
float: left;
}
div.alamenu img {
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
display: inline;
float:right;
border: 0px;
}
Ja sivulle erikseen määritelty seuraavasti:
Ja FF on tosiaan ainut, joka tuota ylimääräistä paddingia tekee.
(Ja ennen kuin joku ehtii huomauttaa kuvien käyttämisestä navigaation linkeissä, huomautan, että kyseessä on kampanjasivusto, joka on netissä noin kaksi viikkoa. Hakukonelöydettävyyttä ei tarvitse sen kummemmin ajatella kun markkinointikanavat ovat valmiina asiakkaalla
).
