CSS ile alakalı yardım edebilecek? - Sayfa 2

13-03-2009, 11:07:55

#10

ysf1905

plaketkupa sana pm yolladım.

Çok saol ilgilendiğin için..
13-03-2009, 11:27:20

#11

plaketkupa

Anladım aşağıya doğru açılır menü istiyorsun "ana kategori" sekmesi alt kategoriler şeklinde. Peki alt kategorilerden sonra yana açılır bir alt kategoriye daha gereksinimin varmı.
13-03-2009, 11:28:06

#12

ysf1905

ona gereksinim yok aslında ama eğer kolay bişeyse neden olmasın Ama normalde gerek yok
13-03-2009, 11:35:18

#13

plaketkupa

ok ben sana örnek bir çalışma yapıp buradan göndereyim sen css kodunu ve html kodunu kendine göre düzenlersin.
13-03-2009, 11:44:23

#14

ysf1905

tamamdır.çok saolun. Pm attım bakarsanız sevinirim

13-03-2009, 12:43:49

#15

Arka plan siyah yazılar beyaz. Mause ile linkin üzerine geldiğinde arka plan rengi kırmızı oluyor ve aşağıya doğru açılan bir menü oluşuyor.
Aşağıdaki kod css ve html kodu ile birlikte verilmiş bir örnek sayfadır.
Kodu olduğu gibi kopyalayıp not defterine yapıştır adını menu.html olarak kaydedip bir kontrol et. Bu sayfanın üzerinde alıştırmalar yaparsın ayrıca.
Şimdi birde sana css için ayrı html için ayrı kodları yazıp gönderiyorum.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<style type="text/css">
body{ 
    margin:0; 
    padding:0; 
} 
ul#menu, ul#menu ul{ 
  padding: 0; 
  margin: 0; 
  list-style: none; 
  } 
   
ul#menu li { 
    float: left; 
    position: relative; 
    width: 100px; 
} 

ul#menu li ul { 
    display: none; 
    position: absolute;  
    top: 19px;   
    left: 0; 
} 

ul#menu li > ul { 
top: auto; 
left: auto; 
} 

ul#menu li a {  
font: bold 11px arial, helvetica, sans-serif; 
display: block; 
border-width: 1px; 
border-style: solid; 
border-color: #ccc #888 #555 #bbb; 
margin: 0; 
padding: 2px 3px; 
color: #FFFFFF; 
background: #000000; 
text-decoration: none; 
} 

ul#menu li a:hover { 
color: #FFFFFF; 
background: #FF0000; 
} 

ul#menu li:hover ul, ul#menu li.over ul {  
    display: block; 
}
</style>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>
</head>
<body>
<ul id="menu">
<li><a title="laktoz" href="http://laktoz.net/">Home</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Gündem</a>
<ul>
<li><a title="laktoz" href="http://laktoz.net/">Gündem link 1</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Gündem link 2</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Gündem link 3</a></li>
</ul>
</li> 
<li><a title="laktoz" href="http://laktoz.net/">Hayattan</a> 
<ul>
<li><a title="laktoz" href="http://laktoz.net/">Hayat link 1</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Hayat link 2</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Hayat link 3</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Hayat link 4</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Hayat link 5</a></li> 
</ul>
<li><a title="laktoz" href="http://laktoz.net/">Teknoloji</a> 
<ul>
<li><a title="laktoz" href="http://laktoz.net/">Teknoloji 1</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Teknoloji 2</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Teknoloji 3</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Teknoloji 4</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Teknoloji 5</a></li> 
</ul>
<li><a title="laktoz" href="http://laktoz.net/">Yabancı dil</a> 
<ul>
<li><a title="laktoz" href="http://laktoz.net/">Yabancı dil 1</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Yabancı dil 2</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Yabancı dil 3</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Yabancı dil 4</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Yabancı dil 5</a></li> 
</ul>
<li><a title="laktoz" href="http://laktoz.net/">Kadınca</a> 
<ul>
<li><a title="laktoz" href="http://laktoz.net/">Kadınca 1</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Kadınca 2</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Kadınca 3</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Kadınca 4</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Kadınca 5</a></li> 
</ul>
<li><a title="laktoz" href="http://laktoz.net/">TV SİNEMA</a> 
<ul>
<li><a title="laktoz" href="http://laktoz.net/">TV SİNEMA 1</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">TV SİNEMA 2</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">TV SİNEMA 3</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">TV SİNEMA 4</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">TV SİNEMA 5</a></li> 
</ul>
</li> 
</ul> 
</body></html>

13-03-2009, 12:50:15

#16

ysf1905

wow super olmuş eline sağlık.Çok teşekkür ederim

13-03-2009, 12:51:39

#17

plaketkupa

Renklerini kendine göre uygularsın.
css kodu bu :

body{ 
    margin:0; 
    padding:0; 
} 
ul#menu, ul#menu ul{ 
  padding: 0; 
  margin: 0; 
  list-style: none; 
  } 
   
ul#menu li { 
    float: left; 
    position: relative; 
    width: 100px; 
} 

ul#menu li ul { 
    display: none; 
    position: absolute;  
    top: 19px;   
    left: 0; 
} 

ul#menu li > ul { 
top: auto; 
left: auto; 
} 

ul#menu li a {  
font: bold 11px arial, helvetica, sans-serif; 
display: block; 
border-width: 1px; 
border-style: solid; 
border-color: #ccc #888 #555 #bbb; 
margin: 0; 
padding: 2px 3px; 
color: #FFFFFF; 
background: #000000; 
text-decoration: none; 
} 

ul#menu li a:hover { 
color: #FFFFFF; 
background: #FF0000; 
} 

ul#menu li:hover ul, ul#menu li.over ul {  
    display: block; 
}

Html koduda bu. buradaki linkleride kendine göre uygularsın.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<link rel="stylesheet" type="text/css" href="stil.css">
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>
</head>
<body>
<ul id="menu">
<li><a title="laktoz" href="http://laktoz.net/">Home</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Gündem</a>
<ul>
<li><a title="laktoz" href="http://laktoz.net/">Gündem link 1</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Gündem link 2</a></li>
<li><a title="laktoz" href="http://laktoz.net/">Gündem link 3</a></li>
</ul>
</li> 
<li><a title="laktoz" href="http://laktoz.net/">Hayattan</a> 
<ul>
<li><a title="laktoz" href="http://laktoz.net/">Hayat link 1</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Hayat link 2</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Hayat link 3</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Hayat link 4</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Hayat link 5</a></li> 
</ul>
<li><a title="laktoz" href="http://laktoz.net/">Teknoloji</a> 
<ul>
<li><a title="laktoz" href="http://laktoz.net/">Teknoloji 1</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Teknoloji 2</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Teknoloji 3</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Teknoloji 4</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Teknoloji 5</a></li> 
</ul>
<li><a title="laktoz" href="http://laktoz.net/">Yabancı dil</a> 
<ul>
<li><a title="laktoz" href="http://laktoz.net/">Yabancı dil 1</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Yabancı dil 2</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Yabancı dil 3</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Yabancı dil 4</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Yabancı dil 5</a></li> 
</ul>
<li><a title="laktoz" href="http://laktoz.net/">Kadınca</a> 
<ul>
<li><a title="laktoz" href="http://laktoz.net/">Kadınca 1</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Kadınca 2</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Kadınca 3</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Kadınca 4</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">Kadınca 5</a></li> 
</ul>
<li><a title="laktoz" href="http://laktoz.net/">TV SİNEMA</a> 
<ul>
<li><a title="laktoz" href="http://laktoz.net/">TV SİNEMA 1</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">TV SİNEMA 2</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">TV SİNEMA 3</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">TV SİNEMA 4</a></li> 
<li><a title="laktoz" href="http://laktoz.net/">TV SİNEMA 5</a></li> 
</ul>
</li> 
</ul> 
</body></html>

13-03-2009, 12:54:33

#18

plaketkupa

işine yaramasına sevindim bir sorun ile karşılaşırsan yazarsın.