PDA

View Full Version : Site movie and Question


Savarona
09-30-2007, 12:31 PM
Movie1-
http://www.youtube.com/watch?v=7F2zk046c34

hi,
when i click the ceviz button, ceviz.html is opened right of the screen in iframe window. i would like menus (Önsöz ,Çeşitleri ,Faydaları) to be stable when i slide the bar down. Ceviz.html is consist of an background picture( you can see purple line below the menu names, and window frame),layers (menus) and Text. I want text moving but others don't move when i slide the bar down.

-Code Ceviz Button-

<div id="Layer17" style="position: absolute; left: 10px; top: 237px; width: 53px; height: 147px; z-index: 14"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','LAYERCEVİZust2.jpg',0)" onclick="document.getElementById('orhit').src='ceviz.html';"><img src="LAYERCEVİZ.jpg" name="Image24" width="53" height="147" border="0" id="Image24" /></a></div>


Movie 2-
http://www.youtube.com/watch?v=tR3uqNbVPck
i would like pages to open forward and backward when i clicked the men whose position is left corner of the page. When i click firt man than the pages which opens iframe window must be open with line forward( ceviz.html, üretim.html, etkileşim.html, tasarım.html, resimler.html, hakkızda.html) When i clicked other man, pages must be open backward ( hakkımızda, resimler, tasarım, etkileşim, üretim, ceviz)

First man code
<div id="Layer4" style="position: absolute; left: 10px; top: 15px; width: 53px; height: 222px; z-index: 1"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','LAYERCEVIZUSTTARAFustt. png',1)"><img src="LAYERCEVIZUSTTARAF.jpg" name="Image22" width="53" height="222" border="0" id="Image22" /></a></div>

Second man code

<div id="Layer5" style="position: absolute; left: 63px; top: 15px; width: 65px; height: 221px; z-index: 2"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','LAYERALACAUSTTARAFust.j pg',1)"><img src="LAYERALACAUSTTARAF.jpg" name="Image20" width="65" height="221" border="0" id="Image20" /></a></div>

Savarona
10-01-2007, 09:43 PM
Need help!

Cary
10-02-2007, 01:03 AM
hi,
when i click the ceviz button, ceviz.html is opened right of the screen in iframe window. i would like menus (Önsöz ,Çeşitleri ,Faydaları) to be stable when i slide the bar down...I want text moving but others don't move when i slide the bar down.

You'll need to use fixed positioning (http://cita.rehab.uiuc.edu/presentations/2005-01-26-css-2/slide34.html), though this won't work in IE6 without using hacks.

i would like pages to open forward and backward when i clicked the men whose position is left corner of the page. When i click firt man than the pages which opens iframe window must be open with line forward( ceviz.html, üretim.html, etkileşim.html, tasarım.html, resimler.html, hakkızda.html) When i clicked other man, pages must be open backward ( hakkımızda, resimler, tasarım, etkileşim, üretim, ceviz)

This sounds like you might want to look at forward and reverse links (http://www.w3.org/TR/html401/struct/links.html#h-12.3.1), but you still need to specify what the forward and reverse links are by coding them into the individual pages just like any other links, so I'm not sure what you're asking for.

Savarona
10-02-2007, 02:18 PM
You'll need to use fixed positioning (http://cita.rehab.uiuc.edu/presentations/2005-01-26-css-2/slide34.html), though this won't work in IE6 without using hacks.



This sounds like you might want to look at forward and reverse links (http://www.w3.org/TR/html401/struct/links.html#h-12.3.1), but you still need to specify what the forward and reverse links are by coding them into the individual pages just like any other links, so I'm not sure what you're asking for.

i'm exactly asking for i.e. back and forward button working. When you click back button, back pages opens, and click forward button forward pages open.. But this pages also reaching clicking buttons (below the men) as seen in movie. I want to extra button. Just imagining.. Like İ.E.

Savarona
10-02-2007, 02:28 PM
Thanque for you help Cary.
I think your help as seen enough for me.

Also i want to ask you, i click the menu buttons in main page but after the clicking them they don't stay down position.

Lets suppose i clicked one of the buttons. That button after clicking don't stay down position. I want that button to be down position and when i clicked other button first cliked button turn to up position, and second button stay down position until i click another button.

How did you find the site? :) This site will be my first amateur web page.

Savarona
10-02-2007, 02:53 PM
http://www.cssplay.co.uk/layouts/basics.html

This is for my first question's answer. I've found this site today.
maybe you can understand me easly now.

Savarona
10-02-2007, 03:01 PM
http://www.cssplay.co.uk/layouts/basics.html

This is for my first question's answer. I've found this site today.
maybe you can understand me easly now.

http://www.cssplay.co.uk/layouts/basics.html

This is for my first question's answer. I've found this site today.
maybe you can understand me easly now.

This document is complex for me. i couldn't understand what it means this codes.

Savarona
10-02-2007, 03:02 PM
http://www.cssplay.co.uk/layouts/basics.html

This is for my first question's answer. I've found this site today.
maybe you can understand me easly now.


This document is complex for me. i couldn't understand what it means this codes.

Savarona
10-02-2007, 03:04 PM
Ceviz.HTML CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #000000;
background-image: url(ceviz.gif);
background-repeat: no-repeat;
}
body,td,th {
color: #009933;
}
#Layer1 {
position:absolute;
visibility:visible;
left:270px;
top:25px;
width:90px;
height:23px;
z-index:1;
}
#Layer2 {
position:absolute;
visibility:visible;
left:31px;
top:88px;
width:400px;
height:1761px;
z-index:2;
}
.style16 {font-size: 21px; color: #8A674D; font-family: "Monotype Corsiva"; }
#Layer3 {
position:absolute;
visibility:visible;
left:45px;
top:21px;
width:68px;
height:25px;
z-index:3;
}
#Layer4 {
position:absolute;
visibility:visible;
left:154px;
top:23px;
width:86px;
height:20px;
z-index:4;
}
.style31 {color: #5E9C30; font-style: italic; }
.style35 {
color: #5E9C30;
font-style: italic;
font-weight: bold;
}
.style40 {color: #5E9C30}
.style48 {color: #8A674D}
.style49 {color: #A67D60}
.style50 {font-size: 21px; color: #A67D60; font-family: "Monotype Corsiva"; }
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('faydaları2.gif','faydaları1.png' ,'&ouml;ns&ouml;z2.gif','&ccedil;eşitleri2.gif')">
<div id="Layer1"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','faydaları2.gif',1)"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','faydaları2.gif',1)"><img src="faydaları1.gif" name="Image1" width="83" height="24" border="0" id="Image1" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','faydaları1.png',1)"></a></div>
<div id="Layer2">
<table cellspacing="0" cellpadding="0" width="395" border="0">
<tbody>
<tr>
<td width="395"><div align="center"></div></td>
</tr>
<tr>
<td><p align="center" class="style16"><span class="style48">&quot;<span class="style49">El değmeden paketlenmiş gıda maddesi&quot; olarak bilinen cevizin en &ouml;nemli t&uuml;r&uuml; Anadolu'da yetişmektedir. D&uuml;nyada bir&ccedil;ok değişik isimle anılan bu t&uuml;r&uuml;n diğer bir adı da Anadolu cevizidir. Halk arasında</span> </span><span class="style40">Koz,</span> <span class="style40">Goz</span> <span class="style49">ve </span><span class="style40">Covuz</span> <span class="style49">olarak da anılır. Eski T&uuml;rk&ccedil;e'de</span> <span class="style31">&quot;Yağak&quot; </span><span class="style49">olarak adlandırılan cevize, &Ouml;zbek T&uuml;rk&ccedil;esi'nde ise</span> <em><span class="style40">&quot;Yangak&quot; </span></em><span class="style49">denilir.</span></p>
<p align="center" class="style16"><span class="style48"><span class="style49">Anadolu'nun her yerinde kolaylıkla yetişebilen ender ağa&ccedil;larımızdan biri olan cevizin yetiştirilmesi i&ccedil;in insanlar tarafından &ouml;zel bir emek sarf edilmez. Daha &ccedil;ok sincap ve kargalar tarafından ileride yenmek &uuml;zere saklanan ceviz meyvesi, fidan olarak karşımıza &ccedil;ıkar. B&ouml;ylece &quot;kendi biten, kendi yetişen&quot; ceviz,</span> <span class="style49">insanların pek fazla emeği olmadan g&uuml;n&uuml;m&uuml;ze kadar gelmiştir.</span></span> <span class="style31">Fakat gerekli &ouml;nemin verilme zamanı gelmiş ve ge&ccedil;mektedir</span><span class="style35">.</span> <span class="style49">&Ccedil;&uuml;nk&uuml; ceviz, ağacı ve meyvesi ile;</span></p>
<p align="center" class="style50">- Heyelanları, erezyonu ve sel baskınlarını &ouml;nleyerek barajların dolmasını &ouml;nler.</p>
<p align="center" class="style50">- Hızla artan n&uuml;fusun iyi beslenmesini sağlar.</p>
<p align="center" class="style50">- Kırsal kesime iş imkanı sağlayarak, kentlere yapılan g&ouml;&ccedil;&uuml; &ouml;nler.</p>
<p align="center" class="style50">- Kalkınmayı sağlayarak, ormanların daralmasını &ouml;nler.</p>
<p align="center" class="style50">- Standart &uuml;retim artışıyla beraber ihracat imkanları artar.</p>
<p align="center" class="style50">&quot;Kendi biten, kendi yetişen&quot; cevize emek verip, aşılı olarak yetiştirildiğinde ayrıca aşağıda ki faydaları da sağlamak m&uuml;mk&uuml;nd&uuml;r:</p>
<p align="center" class="style50">- Cevizin yok olmakta olan nesli devam eder. ( Tohumla yetiştirilen ağa&ccedil;, aynı meyveyi vermez. Aşı ile yetiştirilen ağa&ccedil;, ceviz ağacının t&uuml;m &ouml;zelliklerini taşıdığı i&ccedil;in aynı meyveyi verir.</p>
<p align="center" class="style50">- Aşı ile bir arada yetiştirilen tek bi&ccedil;im (standart) cevizler elde edilebilir. ( Pazarda tek &ccedil;eşit dolu &ccedil;uval bulma olanağı yoktur. ) </p>
<p align="center" class="style50">- Aşı ile soğuğa ve hastalıklara dayanıklı ceviz ağa&ccedil;ları yetişir.</p>
<p align="center" class="style50">-Aşı ile yetiştirilen fidanlarda gen&ccedil;lik kısırlığı g&ouml;r&uuml;lmez. ( &Ccedil;ok erken yaşlarda, hatta aşılandığı yılda meyve veren fidanlar g&ouml;rmek m&uuml;mk&uuml;nd&uuml;r. )</p></td>
</tr>
</tbody>
</table>
</div>
<div id="Layer3"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','&ouml;ns&ouml;z2.gif',1)"><img src="&ouml;ns&ouml;z1.gif" name="Image2" width="84" height="26" border="0" id="Image2" /></a></div>
<div id="Layer4"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','&ccedil;eşitleri2.gif',1)"><img src="&ccedil;eşitleri1.gif" name="Image3" width="84" height="26" border="0" id="Image3" /></a></div>
</body>
</html>

Cary
10-03-2007, 12:45 AM
Try this code, but keep a backup of the original. Also, this doesn't have any hacks, so the fixed positioning effect won't work in IE6.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #000000;
background-image: url(ceviz.gif);
background-repeat: no-repeat;
padding:0;
margin:0;
color: #009933;
}
#content {
position:relative;
visibility:visible;
width:395px;
margin-left: 31px;
text-align: center;
padding: 120px 0 0;
}
#menu {
padding: 40px 0;
list-style: none;
text-align: center;
width: 395px;
margin: 0;
position: fixed;
background: #000000;
top: 0px;
}
#menu li {
margin: 15px;
display: inline;
background: #000000;
}
.style16 {font-size: 21px; color: #8A674D; font-family: "Monotype Corsiva"; }
.style31 {color: #5E9C30; font-style: italic; }
.style35 {
color: #5E9C30;
font-style: italic;
font-weight: bold;
}
.style40 {color: #5E9C30}
.style48 {color: #8A674D}
.style49 {color: #A67D60}
.style50 {font-size: 21px; color: #A67D60; font-family: "Monotype Corsiva"; }
</style>

<!--[if lte IE 6]>
<style type="text/css">
#menu {
position: absolute;
left: 0;
}
</style>
<![endif]-->

<script type="text/JavaScript">
<!--//--><![CDATA[//><!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//--><!]]>
</script>
</head>
<body onload="MM_preloadImages('faydalari2.gif','&ouml;ns&ouml;z2.gif','&ccedil;e sitleri2.gif')">
<div id="content">
<ul id="menu">
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','&ouml;ns&ouml;z2.gif',1)"><img src="&ouml;ns&ouml;z1.gif" name="Image2" width="84" height="26" border="0" id="Image2" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','&ccedil;esitleri2.gif',1)"><img src="&ccedil;esitleri1.gif" name="Image3" width="84" height="26" border="0" id="Image3" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','faydalari2.gif',1)"><img src="faydalari2.gif" name="Image1" width="83" height="24" border="0" id="Image1" /></a></li>
</ul>

<p class="style16"><span class="style48">&quot;<span class="style49">El degmeden paketlenmis gida maddesi&quot; olarak bilinen cevizin en &ouml;nemli t&uuml;r&uuml; Anadolu'da yetismektedir. D&uuml;nyada bir&ccedil;ok degisik isimle anilan bu t&uuml;r&uuml;n diger bir adi da Anadolu cevizidir. Halk arasinda</span> </span><span class="style40">Koz,</span> <span class="style40">Goz</span> <span class="style49">ve </span><span class="style40">Covuz</span> <span class="style49">olarak da anilir. Eski T&uuml;rk&ccedil;e'de</span> <span class="style31">&quot;Yagak&quot; </span><span class="style49">olarak adlandirilan cevize, &Ouml;zbek T&uuml;rk&ccedil;esi'nde ise</span> <em><span class="style40">&quot;Yangak&quot; </span></em><span class="style49">denilir.</span></p>
<p class="style16"><span class="style48"><span class="style49">Anadolu'nun her yerinde kolaylikla yetisebilen ender aga&ccedil;larimizdan biri olan cevizin yetistirilmesi i&ccedil;in insanlar tarafindan &ouml;zel bir emek sarf edilmez. Daha &ccedil;ok sincap ve kargalar tarafindan ileride yenmek &uuml;zere saklanan ceviz meyvesi, fidan olarak karsimiza &ccedil;ikar. B&ouml;ylece &quot;kendi biten, kendi yetisen&quot; ceviz,</span> <span class="style49">insanlarin pek fazla emegi olmadan g&uuml;n&uuml;m&uuml;ze kadar gelmistir.</span></span> <span class="style31">Fakat gerekli &ouml;nemin verilme zamani gelmis ve ge&ccedil;mektedir</span><span class="style35">.</span> <span class="style49">&Ccedil;&uuml;nk&uuml; ceviz, agaci ve meyvesi ile;</span></p>
<p class="style50">- Heyelanlari, erezyonu ve sel baskinlarini &ouml;nleyerek barajlarin dolmasini &ouml;nler.</p>
<p class="style50">- Hizla artan n&uuml;fusun iyi beslenmesini saglar.</p>
<p class="style50">- Kirsal kesime is imkani saglayarak, kentlere yapilan g&ouml;&ccedil;&uuml; &ouml;nler.</p>
<p class="style50">- Kalkinmayi saglayarak, ormanlarin daralmasini &ouml;nler.</p>
<p class="style50">- Standart &uuml;retim artisiyla beraber ihracat imkanlari artar.</p>
<p class="style50">&quot;Kendi biten, kendi yetisen&quot; cevize emek verip, asili olarak yetistirildiginde ayrica asagida ki faydalari da saglamak m&uuml;mk&uuml;nd&uuml;r:</p>
<p class="style50">- Cevizin yok olmakta olan nesli devam eder. ( Tohumla yetistirilen aga&ccedil;, ayni meyveyi vermez. Asi ile yetistirilen aga&ccedil;, ceviz agacinin t&uuml;m &ouml;zelliklerini tasidigi i&ccedil;in ayni meyveyi verir.</p>
<p class="style50">- Asi ile bir arada yetistirilen tek bi&ccedil;im (standart) cevizler elde edilebilir. ( Pazarda tek &ccedil;esit dolu &ccedil;uval bulma olanagi yoktur. ) </p>
<p class="style50">- Asi ile soguga ve hastaliklara dayanikli ceviz aga&ccedil;lari yetisir.</p>
<p class="style50">-Asi ile yetistirilen fidanlarda gen&ccedil;lik kisirligi g&ouml;r&uuml;lmez. ( &Ccedil;ok erken yaslarda, hatta asilandigi yilda meyve veren fidanlar g&ouml;rmek m&uuml;mk&uuml;nd&uuml;r. )</p>
</div>
</body>
</html>

Cary
10-03-2007, 01:02 AM
Also i want to ask you, i click the menu buttons in main page but after the clicking them they don't stay down position.

Lets suppose i clicked one of the buttons. That button after clicking don't stay down position. I want that button to be down position and when i clicked other button first cliked button turn to up position, and second button stay down position until i click another button.

This may require a javascript solution which I know nothing about.

How did you find the site? :) This site will be my first amateur web page.

I only watched the first video. It was hard to make out what I was seeing on my slow computer. It's much better to post the URL for the site so we can look at it live. As it was I had to guess what you were asking about and so I'm also not in a good position to comment on the site because I couldn't make out what I was looking at.

Savarona
10-03-2007, 07:40 AM
This may require a javascript solution which I know nothing about.



I only watched the first video. It was hard to make out what I was seeing on my slow computer. It's much better to post the URL for the site so we can look at it live. As it was I had to guess what you were asking about and so I'm also not in a good position to comment on the site because I couldn't make out what I was looking at.


I haven't URL yet. Site is under construction. I want to remove all problems about site than i will start to publish site in internet and i'll post URL here. Thanque for your comments.

New Ceviz.html -- I.E. quircks mode-- But it doesn't work.


<!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> stu nicholls | CSS PLaY | cross browser fixed layout bare essentials </title>
<style type="text/css" media="screen">

html {height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:80%;
font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
body ,td,th {
color: #009933; background-color: #000000;
background-image: url(ceviz.gif);
background-repeat: no-repeat; height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#head {display:none;}
#content {overflow:auto; position:absolute; z-index:3; top:100px; bottom:50px; left:200px; right:0; background:#eee;}

* html #content {height:100%; width:100%; top:0; left:0; border-top:100px solid #fff; border-bottom:50px solid #fff; border-left:200px solid #fff;}

#content p {padding:10px;}
.bold {font-size:1.2em; font-weight:bold;}
pre {color:#c00; margin-left:10px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;}
h2 {margin-left:10px;}
h3 {margin-left:10px;}

body,td,th {
color: #009933;
}
#Layer1 {
position:absolute;
visibility:visible;
left:270px;
top:25px;
width:90px;
height:23px;
z-index:1;
}
#Layer2 {
position:absolute;
visibility:visible;
left:31px;
top:88px;
width:400px;
height:1761px;
z-index:2;
}
.style16 {font-size: 21px; color: #8A674D; font-family: "Monotype Corsiva"; }
#Layer3 {
position:absolute;
visibility:visible;
left:45px;
top:21px;
width:68px;
height:25px;
z-index:3;
}
#Layer4 {
position:absolute;
visibility:visible;
left:154px;
top:23px;
width:86px;
height:20px;
z-index:4;
}
.style31 {color: #5E9C30; font-style: italic; }
.style35 {
color: #5E9C30;
font-style: italic;
font-weight: bold;
}
.style40 {color: #5E9C30}
.style48 {color: #8A674D}
.style49 {color: #A67D60}
.style50 {font-size: 21px; color: #A67D60; font-family: "Monotype Corsiva"; }

</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('faydaları2.gif','faydaları1.png' ,'&ouml;ns&ouml;z2.gif','&ccedil;eşitleri2.gif')">
<div id="Layer1"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','faydaları2.gif',1)"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','faydaları2.gif',1)"><img src="faydaları1.gif" name="Image1" width="83" height="24" border="0" id="Image1" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','faydaları1.png',1)"></a></div>
<div id="Layer2">
<table cellspacing="0" cellpadding="0" width="395" border="0">
<tbody>
<tr>
<td width="395"><div align="center"></div></td>
</tr>
<tr>
<td><p align="center" class="style16"><span class="style48">&quot;<span class="style49">El değmeden paketlenmiş gıda maddesi&quot; olarak bilinen cevizin en &ouml;nemli t&uuml;r&uuml; Anadolu'da yetişmektedir. D&uuml;nyada bir&ccedil;ok değişik isimle anılan bu t&uuml;r&uuml;n diğer bir adı da Anadolu cevizidir. Halk arasında</span> </span><span class="style40">Koz,</span> <span class="style40">Goz</span> <span class="style49">ve </span><span class="style40">Covuz</span> <span class="style49">olarak da anılır. Eski T&uuml;rk&ccedil;e'de</span> <span class="style31">&quot;Yağak&quot; </span><span class="style49">olarak adlandırılan cevize, &Ouml;zbek T&uuml;rk&ccedil;esi'nde ise</span> <em><span class="style40">&quot;Yangak&quot; </span></em><span class="style49">denilir.</span></p>
<p align="center" class="style16"><span class="style48"><span class="style49">Anadolu'nun her yerinde kolaylıkla yetişebilen ender ağa&ccedil;larımızdan biri olan cevizin yetiştirilmesi i&ccedil;in insanlar tarafından &ouml;zel bir emek sarf edilmez. Daha &ccedil;ok sincap ve kargalar tarafından ileride yenmek &uuml;zere saklanan ceviz meyvesi, fidan olarak karşımıza &ccedil;ıkar. B&ouml;ylece &quot;kendi biten, kendi yetişen&quot; ceviz,</span> <span class="style49">insanların pek fazla emeği olmadan g&uuml;n&uuml;m&uuml;ze kadar gelmiştir.</span></span> <span class="style31">Fakat gerekli &ouml;nemin verilme zamanı gelmiş ve ge&ccedil;mektedir</span><span class="style35">.</span> <span class="style49">&Ccedil;&uuml;nk&uuml; ceviz, ağacı ve meyvesi ile;</span></p>
<p align="center" class="style50">- Heyelanları, erezyonu ve sel baskınlarını &ouml;nleyerek barajların dolmasını &ouml;nler.</p>
<p align="center" class="style50">- Hızla artan n&uuml;fusun iyi beslenmesini sağlar.</p>
<p align="center" class="style50">- Kırsal kesime iş imkanı sağlayarak, kentlere yapılan g&ouml;&ccedil;&uuml; &ouml;nler.</p>
<p align="center" class="style50">- Kalkınmayı sağlayarak, ormanların daralmasını &ouml;nler.</p>
<p align="center" class="style50">- Standart &uuml;retim artışıyla beraber ihracat imkanları artar.</p>
<p align="center" class="style50">&quot;Kendi biten, kendi yetişen&quot; cevize emek verip, aşılı olarak yetiştirildiğinde ayrıca aşağıda ki faydaları da sağlamak m&uuml;mk&uuml;nd&uuml;r:</p>
<p align="center" class="style50">- Cevizin yok olmakta olan nesli devam eder. ( Tohumla yetiştirilen ağa&ccedil;, aynı meyveyi vermez. Aşı ile yetiştirilen ağa&ccedil;, ceviz ağacının t&uuml;m &ouml;zelliklerini taşıdığı i&ccedil;in aynı meyveyi verir.</p>
<p align="center" class="style50">- Aşı ile bir arada yetiştirilen tek bi&ccedil;im (standart) cevizler elde edilebilir. ( Pazarda tek &ccedil;eşit dolu &ccedil;uval bulma olanağı yoktur. ) </p>
<p align="center" class="style50">- Aşı ile soğuğa ve hastalıklara dayanıklı ceviz ağa&ccedil;ları yetişir.</p>
<p align="center" class="style50">-Aşı ile yetiştirilen fidanlarda gen&ccedil;lik kısırlığı g&ouml;r&uuml;lmez. ( &Ccedil;ok erken yaşlarda, hatta aşılandığı yılda meyve veren fidanlar g&ouml;rmek m&uuml;mk&uuml;nd&uuml;r. )</p></td>
</tr>
</tbody>
</table>
</div>
<div id="Layer3"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','&ouml;ns&ouml;z2.gif',1)"><img src="&ouml;ns&ouml;z1.gif" name="Image2" width="84" height="26" border="0" id="Image2" /></a></div>
<div id="Layer4"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','&ccedil;eşitleri2.gif',1)"><img src="&ccedil;eşitleri1.gif" name="Image3" width="84" height="26" border="0" id="Image3" /></a></div>
</body>
</html>

Cary
10-04-2007, 12:57 AM
Did you try the code I gave you?

Savarona
10-05-2007, 09:29 AM
Not yet. i'll try.
I've been working on this site for one year. I start doing this site by chance dealing with a historical jug picture in windows paint. I knew nothing before. Also i particularly paid attention staff of the web page. Staff is deep. Sometimes i set maginification to 3200% to make light and shadow settings of menus. If you have yahoo mail adress i can send you pictures of site taken pc screen. 2mpix camera i have so picture quality not good but it's all right.

i mean briefly i'm bored working this site. Works run slow these days. If i have experienced maybe works run easly.

Savarona
10-07-2007, 06:52 PM
Did you try the code I gave you?


Yes. Everything is all right Cary. Thanque. I didin't realize your code at once.

Savarona
10-07-2007, 08:54 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #000000;
background-image: url(ceviz.gif);
?????????????????????????????????????????????????? ???????position: fixed;------------HOW CAN I BACKGROUND FIX?????????????????????????????????
background-repeat: no-repeat;
padding:0;
margin:0;
color: #009933;
background-repeat: no-repeat;
}
#content {
position:relative;
visibility:visible;
width:395px;
margin-left: 31px;
text-align: center;
padding: 120px 0 0;
}
#menu {
padding: inherit;
list-style: none;
text-align: left;
width: 395px;
margin: 3;
position: fixed;
left: 0;
background: #000000;
top: 19px;
}
#menu li {
margin: 12px;
display: inline;
background: #000000;
}
.style16 {font-size: 21px; color: #8A674D; font-family: "Monotype Corsiva"; }
.style31 {color: #5E9C30; font-style: italic; }
.style35 {
color: #5E9C30;
font-style: italic;
font-weight: bold;
}
.style40 {color: #5E9C30}
.style48 {color: #8A674D}
.style49 {color: #A67D60}
.style50 {font-size: 21px; color: #A67D60; font-family: "Monotype Corsiva"; }
</style>

<!--[if lte IE 6]>
<style type="text/css">
#menu {
position: absolute;
left: 0;
}
</style>
<![endif]-->

<script type="text/JavaScript">
<!--//--><![CDATA[//><!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//--><!]]>
</script>
</head>
<body onload="MM_preloadImages('faydalari2.gif','&ouml;ns&ouml;z2.gif','&ccedil;e sitleri2.gif','&ccedil;eşitleri2.gif','faydaları2.gif')">
<div id="content">
<ul id="menu">
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','&ouml;ns&ouml;z2.gif',1)"><img src="&ouml;ns&ouml;z1.gif" name="Image2" width="84" height="26" border="0" id="Image2" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','&ccedil;esitleri2.gif',1)"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','&ccedil;eşitleri2.gif',1)"><img src="&ccedil;eşitleri1.gif" name="Image4" width="84" height="26" border="0" id="Image4" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','faydalari2.gif',1)"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','faydaları2.gif',1)"><img src="faydaları1.gif" name="Image5" width="83" height="24" border="0" id="Image5" /></a></li>
</ul>

<p class="style16"><span class="style48">&quot;<span class="style49">El degmeden paketlenmis gida maddesi&quot; olarak bilinen cevizin en &ouml;nemli t&uuml;r&uuml; Anadolu'da yetismektedir. D&uuml;nyada bir&ccedil;ok degisik isimle anilan bu t&uuml;r&uuml;n diger bir adi da Anadolu cevizidir. Halk arasinda</span> </span><span class="style40">Koz,</span> <span class="style40">Goz</span> <span class="style49">ve </span><span class="style40">Covuz</span> <span class="style49">olarak da anilir. Eski T&uuml;rk&ccedil;e'de</span> <span class="style31">&quot;Yagak&quot; </span><span class="style49">olarak adlandirilan cevize, &Ouml;zbek T&uuml;rk&ccedil;esi'nde ise</span> <em><span class="style40">&quot;Yangak&quot; </span></em><span class="style49">denilir.</span></p>
<p class="style16"><span class="style48"><span class="style49">Anadolu'nun her yerinde kolaylikla yetisebilen ender aga&ccedil;larimizdan biri olan cevizin yetistirilmesi i&ccedil;in insanlar tarafindan &ouml;zel bir emek sarf edilmez. Daha &ccedil;ok sincap ve kargalar tarafindan ileride yenmek &uuml;zere saklanan ceviz meyvesi, fidan olarak karsimiza &ccedil;ikar. B&ouml;ylece &quot;kendi biten, kendi yetisen&quot; ceviz,</span> <span class="style49">insanlarin pek fazla emegi olmadan g&uuml;n&uuml;m&uuml;ze kadar gelmistir.</span></span> <span class="style31">Fakat gerekli &ouml;nemin verilme zamani gelmis ve ge&ccedil;mektedir</span><span class="style35">.</span> <span class="style49">&Ccedil;&uuml;nk&uuml; ceviz, agaci ve meyvesi ile;</span></p>
<p class="style50">- Heyelanlari, erezyonu ve sel baskinlarini &ouml;nleyerek barajlarin dolmasini &ouml;nler.</p>
<p class="style50">- Hizla artan n&uuml;fusun iyi beslenmesini saglar.</p>
<p class="style50">- Kirsal kesime is imkani saglayarak, kentlere yapilan g&ouml;&ccedil;&uuml; &ouml;nler.</p>
<p class="style50">- Kalkinmayi saglayarak, ormanlarin daralmasini &ouml;nler.</p>
<p class="style50">- Standart &uuml;retim artisiyla beraber ihracat imkanlari artar.</p>
<p class="style50">&quot;Kendi biten, kendi yetisen&quot; cevize emek verip, asili olarak yetistirildiginde ayrica asagida ki faydalari da saglamak m&uuml;mk&uuml;nd&uuml;r:</p>
<p class="style50">- Cevizin yok olmakta olan nesli devam eder. ( Tohumla yetistirilen aga&ccedil;, ayni meyveyi vermez. Asi ile yetistirilen aga&ccedil;, ceviz agacinin t&uuml;m &ouml;zelliklerini tasidigi i&ccedil;in ayni meyveyi verir.</p>
<p class="style50">- Asi ile bir arada yetistirilen tek bi&ccedil;im (standart) cevizler elde edilebilir. ( Pazarda tek &ccedil;esit dolu &ccedil;uval bulma olanagi yoktur. ) </p>
<p class="style50">- Asi ile soguga ve hastaliklara dayanikli ceviz aga&ccedil;lari yetisir.</p>
<p class="style50">-Asi ile yetistirilen fidanlarda gen&ccedil;lik kisirligi g&ouml;r&uuml;lmez. ( &Ccedil;ok erken yaslarda, hatta asilandigi yilda meyve veren fidanlar g&ouml;rmek m&uuml;mk&uuml;nd&uuml;r. )</p>
</div>
</body>
</html>
--------------------------------------------------------------------------------


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
</body>


</html>

Cary
10-07-2007, 11:30 PM
You can use "background-attachment:fixed". Somehow you added a second "background-repeat: no-repeat". The correct code is shown below.

body {
background-color: #000000;
background-image: url(ceviz.gif);
background-repeat: no-repeat;
padding: 0;
margin: 0;
color: #009933;
background-attachment: fixed;
}I've noticed you have added two more links at the top. Each link should be wrapped in its own <li> tags like this:

<ul id="menu">
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','&ouml;ns&ouml;z2.gif',1)"><img src="&ouml;ns&ouml;z1.gif" name="Image2" width="84" height="26" border="0" id="Image2" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','&ccedil;esitleri2.gif',1)"></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','&ccedil;es,itleri2.gif',1)"><img src="&ccedil;es,itleri1.gif" name="Image4" width="84" height="26" border="0" id="Image4" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','faydalari2.gif',1)"></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','faydalar?2.gif',1)"><img src="faydalar?1.gif" name="Image5" width="83" height="24" border="0" id="Image5" /></a></li>
</ul>Also, two of the links are empty anyways, so they are not doing anything. They don't show up since they hold neither text nor images.

Additional links will make the menu wider, so you will need to reduce the space between the links by reducing the number of pixels used for the margin in the below styling.

#menu li {
margin: 12px;
display: inline;
background: #000000;
}
It also looks like you have been experimenting with the #menu styling...

#menu {
padding: inherit;
list-style: none;
text-align: left;
width: 395px;
margin: 3;
position: fixed;
left: 0;
background: #000000;
top: 19px;
}
Here's the original code which I supplied:

#menu {
padding: 40px 0;
list-style: none;
text-align: center;
width: 395px;
margin: 0;
position: fixed;
background: #000000;
top: 0px;
}
"padding: 40px 0" adds top and bottom padding of 40px, but adds no padding to the sides since the width of the menu is already 395px which is enough to cover the width of the text scrolling beneath it.

By using 40px padding instead of 40px margins, the black background color of the menu can be extended to the top of the page and down below a bit.

This hides the text as it scrolls upward beneath the menu, an effect you will not see in IE6, but is visible in modern browsers.

By changing padding to "inherit", the effect is lost. I don't know why you would want to see the text scrolling through the menu, rather than disappearing under it.

You need "text-align: center" if you want the menu to have a nice, centered look. If you want it left-aligned let me know and I'll explain how the CSS can be changed to do that correctly.

Since the content width is 395px, the max width of the menu plus margins plus borders plus padding cannot exceed 395px without breaking the layout. This is why I gave the menu a margin of "0". It is already at the max with a width of 395px, so it has no room remaining for left or right margins. Your "margin:3" setting was ignored because you didn't give it units. This means default margins will be used. In this case it is better to be explicit and leave it as "margin:0" which also doesn't have units, but it's zero. It doesn't need it.

0px = 0em = 0%

If you look at the page in Firefox you will see the menu isn't positioned correctly after you added the "left:0px" and changed the top value to "top:19px".

So here's some of the CSS with modifications:

body {
background-color: #000000;
background-image: url(ceviz.gif);
background-repeat: no-repeat;
padding: 0;
margin: 0;
color: #009933;
background-attachment: fixed;
}
#content {
position: relative;
visibility: visible;
width: 395px;
margin-left: 31px;
text-align: center;
padding: 120px 0 0;
}
#menu {
padding-top: 40px;
padding-bottom: 40px;
padding-left: 0;
padding-right: 0;
list-style: none;
text-align: center;
width: 395px;
margin: 0;
position: fixed;
background: #000000;
top: 0;
}
#menu li {
margin: 12px;
display: inline;
background: #000000;
}
Now you can adjust the space above or below the menu by changing the values of padding-top and padding-bottom respectively.

With any changes you make, make sure things look okay by checking in multiple browsers: IE6, Firefox, Opera, Safari, etc. At least something other than just IE6.

If the content needs to be wider then just increase the width of both #content and #menu. Right now they are both 395px. If you change one then they must both be changed so they are the same.

To increase or decrease the space between menu links, just change the margin size of "#menu li".

Right now the content starts 120px from the top of the page. To adjust how far down the text starts just change the 120px value to another, but leave the two zeros following it.

Adjusting #content's 120px padding value will require an adjustment of #menu's padding-top and/or padding-bottom values.

Cary
10-08-2007, 12:02 AM
It might also be helpful to temporarily change #menu's background color to yellow or some other color to easily see the area the menu covers and how your changes are affecting it.

Savarona
11-07-2007, 03:24 PM
When i decide to run it in iframe window, this code doesn't work in I.E.6.0 but in Opera no problem. Running for html page no problem with I.E or Opera.

How can i run it in iframe window for I.E. 6.0?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

/* setup the background image of the British Isles */
.uk {padding:0; margin:0; list-style-type:none; background:#fff url(../graphics/britain.gif); width:300px; height:350px; margin:50px 225px 100px 225px; position:relative; z-index:100;}
/* move the text off screen */
.uk li a {text-indent:-999px; display:block; width:8px; height:8px; background:#000; position:absolute; line-height:8px;}
/* make the images and description invisible and an absolute position so that it does not take up any space */
.uk li a em {visibility:hidden; position:absolute;}
/* position the square markers */
.uk li a. {top:288px; left:190px;}
.uk li a.ln {top:280px; left:240px;}
.uk li a.sw {top:282px; left:162px;}
.uk li a.nt {top:235px; left:210px;}
.uk li a.gl {top:130px; left:148px;}
.uk li a.bf {top:172px; left:112px;}
.uk li a.du {top:220px; left:105px;}
/* move the text back into view on hover */
.uk li a:hover {background:#600; text-indent:0; height:1.2em; font-size:1em; color:#fff; line-height:1em; padding:2px 10px; width:90px;}
/* hack for IE5.x */
* html .uk li a:hover {width:110px; height:1.5em; w\idth:90px; he\ight:1.2em;}
/* make the descriptive text visible, give it a size and position */
.uk li a:hover em {visibility:visible; margin-left:5px; background:#fff; border:1px solid #600; width:150px; color:#600; padding:25px;font-style:normal; top:-135px; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande", arial, sans-serif; letter-spacing:1px; line-height:1.5em;}
/* hack for IE5.x */
* html .uk li a:hover em {width:200px; w\idth:150px;}
/* give the image a border and margin */
.uk li a:hover em img {border:1px solid #000; display:block; margin-bottom:10px;}
/* style the empty span (I know it's not semantically correct) into an arrow point */
.uk li a:hover em span {display:block; width:0; height:0; overflow:hidden; border:15px solid #fff; border-width:15px 0 15px 15px; border-left-color:#600; position:absolute; left:0; top:128px;}
/* hack for IE5.x */
* html .uk li a:hover em span {width:30px; height:30px; w\idth:0; he\ight:0;}


</style>
</head>

<body>
<ul class="uk">
<li><a class="ln" href="#nogo">London<em><img src="graphics/london.jpg" alt="View of London" title="View of London" />London has the greatest concentration of major attractions in Britain and boasts four World Heritage Sites.<span></span></em></a></li>
<li><a class="bs" href="#nogo">Bristol<em><img src="graphics/bristol.jpg" alt="View of Bristol" title="View of Bristol" />Bristol is an exciting city, overflowing with intriguing, traditional and occasionally off the wall things to do and see.<span></span></em></a></li>
<li><a class="sw" href="#nogo">Swansea<em><img src="graphics/swansea.jpg" alt="View of Swansea" title="View of Swansea" />Swansea, Wales' City by the Sea and birthplace of Dylan Thomas and Catherine Zeta Jones, is a lively and vibrant maritime city and regional shopping centre.<span></span></em></a></li>
<li><a class="nt" href="#nogo">Nottingham<em><img src="graphics/nottingham.jpg" alt="View of Nottingham" title="View of Nottingham" />Some of the most popular places of interest with visitors are Nottingham Castle Museum and Art Gallery, the historic Lace Market area and the Caves.<span></span></em></a></li>
<li><a class="gl" href="#nogo">Glasgow<em><img src="graphics/glasgow.jpg" alt="View of Glasgow" title="View of Glasgow" />One of Europe's leading cultural capitals, Glasgow has an enviable portfolio of internationally renowned museums and galleries.<span></span></em></a></li>
<li><a class="bf" href="#nogo">Belfast<em><img src="graphics/belfast.jpg" alt="View of Belfast" title="View of Belfast" />The capital of Northern Ireland combines fine Victorian architecture, a fascinating industrial heritage and beautiful scenic surroundings.<span></span></em></a></li>
<li><a class="du" href="#nogo">Dublin<em><img src="graphics/dublin.jpg" alt="View of Dublin" title="View of Dublin" />Dublin has become a fashionable and cosmopolitan destination, yet remains one of Europe's more intimate capital cities.<span></span></em></a></li>
</ul>
</body>
</html>