Eli olen tekemässä JJP:n sivustolle yläreunaan valikkoa aivan hirveällä tavalla. Nyt olen tekemässä siihen pyöreitä reunoja, ja ongelmana on oikea reuna. Tarvitsisin siihen siis tuon laskutoimituksen, eli 99% - 7px.
Tässä siis se hirveä koodi:
<p>
<img src="http://jjp.110mb.com/logo.gif" style="position:relative;left:10;top:5" alt="JJP">
</p>
<div style="height: 40px; width: 99%; position: relative; left: 0px;">
<img align="left" src="http://jjp.110mb.com/menul.gif">
<img align="right" src="http://jjp.110mb.com/menur.gif">
<div style="background: url('http://jjp.110mb.com/menubg.gif'); background-repeat: repeat-x; height: 40px; position: relative; left: 7px; width: (99% - 7px)?">
<div style="position: relative; top: 10px; left: 15px;">
<a href="http://jjp.110mb.com/index.php" class="menu">Etusivu</a>
<a href="http://jjp.110mb.com/keskustelu/" class="menu">Keskustelu</a>
<a href="http://jjp.110mb.com/lataukset.php" class="menu">Lataukset</a>
<a href="http://jjp.110mb.com/kommentit.php" class="menu">Kommentit</a>
</div>
</div>
</div>
<div id="sisalto">
(itse sivu alkaa tästä)menubg.gif on 1x40 px ja menul.gif ja menur.gif 7x40 px.
EDIT: Noniinnytkaikkeaeiolekirjoitettuputkeen.:D
Äläkirjoitakaikkeaputkeen,niinvoisinjotainymmärtääkkin.:D
No siis...
Javascriptilla saat haluamasi leveyden esim. näin
Math.round(0.99*document.documentElement.clientWidth)-7
Tätäkö hait?
PS. En väitä, että olisi järkevin tapa käyttää tällaista purkkaa tuohon ;-)
Joo, mutta en saa tungettua tuota CSS:n sekaan. Tässä epätoivoinen yritykseni:
<p><img src="http://jjp.110mb.com/logo.gif" style="position:relative;left:10;top:5" alt="JJP"></p>
<div style="height: 40px; width: 99%; position: relative; left: 0px;"><img align="left" src="http://jjp.110mb.com/menul.gif"><img align="right" src="http://jjp.110mb.com/menur.gif">
<?php echo "<div style='background: url('http://jjp.110mb.com/menubg.gif'); background-repeat: repeat-x; height: 40px; position: relative; left: 7px; right: " ?>
<script type="text/javascript">
document.write(Math.round(0.99*document.documentElement.clientWidth)-7);
</script>
<?php echo "'>"; ?>
<div style="position: relative; top: 10px; left: 15px;">
<a href="http://jjp.110mb.com/index.php" class="menu">Etusivu</a>
<a href="http://jjp.110mb.com/keskustelu/" class="menu">Keskustelu</a>
<a href="http://jjp.110mb.com/lataukset.php" class="menu">Lataukset</a>
<a href="http://jjp.110mb.com/kommentit.php" class="menu">Kommentit</a>
</div>
</div>
</div>
<div id="sisalto">ps. PHP:llähän tämä ei ole mahdollista, vai mitä? Paitsi tietenkin jos lähetetään ennen valikon näyttämistä näytön mitat palvelimelle ja kirjoitetaan se siellä CSS-koodiin ja, ja, ja...
Sovella vaikka tätä
<html>
<head>
<style type="text/css">
#foo
{
background-color: red;
height: 50px;
}
</style>
<script type="text/javascript">
window.onresize = set_width;
function set_width()
{
tmp = document.getElementById("foo");
tmp.style.width = (Math.round(0.99*document.documentElement.clientWidth)-7) + "px";
}
</script>
</head>
<body onload="set_width()">
<div id="foo"></div>
</body>
</html>Ei JavaScriptiä tämmöiseen käyttöön poijjaat. Kunhan pääsen töihin niin käytän arvokasta palkka-aikaani hyödyllisesti ja päivitän tähän viestiin jonkinlaisen CSS-pohjaisen rävellyksen.
Työajan hyötykäytön tulokset
<!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>CSS-valikko</title>
<style type="text/css">/*<![CDATA[*/
#menu {
background: url(http://jjp.110mb.com/menubg.gif) repeat-x;
line-height: 40px;
position: relative;
width: 99%;
}
#menu div {
background: url(http://jjp.110mb.com/menul.gif) no-repeat;
}
#menu ul {
background: url(http://jjp.110mb.com/menur.gif) no-repeat 100% 0%;
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
display: inline;
margin: 0 15px;
padding: 0;
}
/*]]>*/</style>
</head>
<body>
<div id="menu"><div>
<ul>
<li><a href="http://jjp.110mb.com/index.php">Etusivu</a></li>
<li><a href="http://jjp.110mb.com/keskustelu/">Keskustelu</a></li>
<li><a href="http://jjp.110mb.com/lataukset.php">Lataukset</a></li>
<li><a href="http://jjp.110mb.com/kommentit.php">Kommentit</a></li>
</ul>
</div></div>
</body>
</html>Mikäli pyöristetyissä kuvissasi on läpinäkyvyyttä, niin sitten #menu div:lle voi tehdä seemmoisen tempun, että laittaa marginaaliasetukseksi 0 -7px, jolloin tapahtuu vähintäänkin mielenkiintoisia efektejä.
Kiitos! Homma toimii. Viitsittekö vielä tarkistaa, näkyykö oikein? Itse testasin Safarilla ja Firefoxilla.
Voit katsoa itsekkin, esimerkiksi BrowserShots -sivustolta.
IE6, IE7 ja IE8 ei näytä niitä, mutta en jaksanut katsoa syitä. Ulkoasun tummuudesta ja värivalinnoista johtuen eroa tuskin peruskävijä edes huomaa.
Aihe on jo aika vanha, joten et voi enää vastata siihen.