arkadaşlar css bir menü yapmaya çalışıyorum. <ul></ul> taglarını kullanarak. bunları position la konumlandırarak. ancak dreamweaverda tasarlıyorum gayet iyi görünüyo ancak çalıştırdığım zaman browserda çok kötü karışık bir görüntü çıkıyo. dreamweaver desing bölümünde gayet iyi ancak browserda çok kötü görünüyo bunun sebebi nedir?
kodların görünümünü buraya verirsen eğer inceleyip yorum yapabilirim.
[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">
ul {
list-style:none;
margin:0;
padding:0;
}
ul li {
float:left;
position:relative;
width:150;
}
li ul {
display:none;
}
ul li a {
text-decoration:none;
font:Arial, Helvetica, sans-serif;
font-size:15;
border:2px;
border-color:#aaa #bbb #222 #555;
font-weight:bold;
padding:2px;
color:#000000;
padding:2px 3px;
background:#999999;
display:block;
}
</style>
</head>
<body>
<ul>
<li><a href="http:\\\">muhammet</a></li>
<li><a href="http:\\\">muhammet</a>
<ul>
<li><a href="http:\\\">karadeniz</a></li>
<li><a href="http:\\\">karadeniz</a></li>
</ul>
</li>
<li><a href="http:\\\">muhammet</a>
<ul>
<li><a href="http:\\\">karadeniz</a></li>
<li><a href="http:\\\">karadeniz</a></li>
</ul>
</li>
</ul>
</body>
</html>
[/code]
kodlar bunlar burada yaptığım karışık görünüyo normalde dwde düzgün ama.
üzerine geldiğinde muhammet yazısının karadeniz'e mi dönmesini istiyorsun sen ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht...sitional.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">
ul {
list-style:none;
margin:0;
padding:0;
}
ul li {
float:left;
position:relative;
display:inline;
width:150;
}
li ul {
display:none;
}
ul li a {
text-decoration:none;
font:Arial, Helvetica, sans-serif;
font-size:5;
border:1px;
border-color:#aaa #bbb #222 #555;
border-style:solid;
font-weight:bold;
padding:2px;
color:#000000;
padding:10px 30px;
background:#CCCCCC;
display:block;
}
ul li a:hover{
color:#a00;
background:#FFFFFF;
}
ul li:hover ul, ul li.over ul{
display:block;
}
</style>
</head>
<body>
<ul>
<li><a href="http:\\\">muhammet</a></li>
<li><a href="http:\\\">muhammet</a>
<ul>
<li><a href="http:\\\">karadeniz</a></li>
<li><a href="http:\\\">karadeniz</a></li>
</ul>
</li>
<li><a href="http:\\\">muhammet</a>
<ul>
<li><a href="http:\\\">karadeniz</a></li>
<li><a href="http:\\\">karadeniz</a></li>
</ul>
</li>
</ul>
</body>
</html>
kodlarımın son hali budur. burada yapmak istediğim muhammet üstüne gelince aşağıya doğru açılır menü oluşturma anck istediğimi yapamadım bir bakarmısın?
Bu konuda malesef tek başına CSS değil, Java yardımına da ihtiyacın olacak. Aşağıya örnek bir kod koydum. Bir göz at neye benzediğine dair.
Renkleri değiştirdim belli olsun diye. Birde, yaptığın bir hata kodlarına bakarsan, bir öğeye birden fazla aynı değeri verme, bazı tarayıcılarda hatalar oluşur. Menu Li a değerinde 2 tane padding var. Birisi 2px birisi 2 ve 3 px olarak belirtmişsin.
Mesela FireFox bu konuda her hatayı düzelttiği için, hatalı tasarımlar ve tasarımcılar yetişmesine sebep oluyor. Mutlaka eski bir Explorer üzerinde ve Güncel bir Explorer üzerinde dene yaptıklarını.
Frozen Kod Örneği<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht...sitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<style>
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: 150px;
}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: #000;
background: #efefef;
text-decoration: none;
}ul#menu li a:hover {
color: #a00;
background: #fff;
}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;
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 href="http://www.google.com.tr">Muhammet</a></li>
<li><a href="http://www.google.com.tr">Google</a>
<ul>
<li><a href="#">Google alt 1</a></li>
<li><a href="#">Google alt 2</a></li>
<li><a href="#">Google alt 3</a></li>
</ul>
</li>
<li><a href="#">Frozen</a>
<ul>
<li><a href="#">Frozen alt 1</a></li>
<li><a href="#">Frozen alt 2</a></li>
<li><a href="#">Frozen alt 3</a></li>
<li><a href="#">Frozen alt 4</a></li>
</ul>
</li>
</ul>
</body>
</html>
ul#menu li > ul {
top: auto;
left: auto;
bu kodu sildim değişen hiç birşey olmadı???
birde şu position="absolute" ve position="relative" mantığını bana anlatırmısın? kısaca
ve birde display="block" ve display="inline".
Top ve Left i sildin birşey olmaz doğal ama menü üzerinde birşey varsa eğer, logo ya da başka birşey gibi. O zaman kaymalar yaşayabilir.
Absolute yazıların bulunduğu katmanı sol üste hizalar. Relative ise Orjinal pozisyonlarına hizalar.
Block = yazıyı bir block halinde tüm genişliğe elverişli bir şekilde formatlar.
inline = yazıyı gereken kadar alan içinde (alan için gereken, yazı için değil) sığacak kadar hazırlar. Yeni bir satır oluşumuna izin vermez. YAni yazdığın yazı menü alanından büyükse, ÖR: menü 10px yazı 12px yatay alan tutuyor. Bu özellik yazıyı aşağıya kaydırmaz. 10px alanda görünecek kısmı görünür. Gerisi görünmez gibi düşün..
peki bu java kodunu sadece açılır menu kullanırken mi kullanacağız ben java öğrenmeye daha başladmda.