Div sorunum devam ediyor

Kodla Büyü

burak0692

Site Gezgini
Mesajlar
53
Selam arkadaşlar bu soruyu 2 kez sordum ve son kez soruyorum artık halen yapamadım karmaşık sormayacağım artık kısaca

2 Divim var sol ve sağ.
Soldaki divlerde dersler menüsü var derslere tıkladığımda sağdaki div de açıcak sayfayı. Bunun HTML kodu lazım yardımcı olursanız sevinirim.




Şunu yapamadığımdan soğudum resmen uğraşmıyorum 1 haftadır bugün tekrar uğraşmaya başladım. İFRAME ile yapmaya çalışıyorum.
 
iframe pek tavsiye edilmez. farzedelim ki sizin sağdaki iframedeki bilginiz googleda bir arama sonucunda çıktı kişi o sayfaya tıkladığında iframe içindeki html sayfasını görecek ama soldaki menünüzü göremeyecek. oldukça eskilerde kaldı iframe bence boşuna yapmayın. en güzeli divleri css'de fixed position a getirmek.
http://www.cssplay.co.uk/layouts/body2.html adresindeki örnek gibi.
http://www.cssplay.co.uk/layouts/ adresinden başka tasarımlara da bakabilirsiniz.
 
ebece' Alıntı:
hocam aynı sayfada mı olacak html ile zorda sana jquery ile yapayım istersen

evet aynı sayfada html ile olacak jquery nedir nasıl yapılacaktır bilgim hiç yok sadece biraz html biliyorum o kadar.
 
tinyamasisurum0' Alıntı:
iframe pek tavsiye edilmez. farzedelim ki sizin sağdaki iframedeki bilginiz googleda bir arama sonucunda çıktı kişi o sayfaya tıkladığında iframe içindeki html sayfasını görecek ama soldaki menünüzü göremeyecek. oldukça eskilerde kaldı iframe bence boşuna yapmayın. en güzeli divleri css'de fixed position a getirmek.
http://www.cssplay.co.uk/layouts/body2.html adresindeki örnek gibi.
http://www.cssplay.co.uk/layouts/ adresinden başka tasarımlara da bakabilirsiniz.


böyle birşey olduğunu duymuştum yanlız bu benim ilk acemi web tasarımım olacak o yüzden fazla önemli değil.
 
Hocam galiba istediğiniz bu.


Bir de şöyle bişey var. işinize yarayacaktır.
 

Ekli dosyalar

  • Ekran Alıntısı.JPG
    Ekran Alıntısı.JPG
    64.9 KB · Görüntüleme: 1,182
  • iframe nasıl yapılır.zip
    784.8 KB · Görüntüleme: 45
Kod:
<!DOCTYPE >
<html  xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){

	$(".menu_icerik").hide(); // Tum içerikleri sakladık
    $("#icerik .menu_icerik:first").show(); // sadece ilk içeriği gosterdik
	$(".menu").click(function(){  // menulerden herhangi birine tıklanırsa
	
	var deger = $(this).index();   // onun index degerini aldık
	deger = deger-1;    
	$(".menu_icerik").hide();  // tum içerikleri gizledik
$('#icerik .menu_icerik:eq('+deger+')').slideToggle("slow"); // aldığımız index değerinde olan  menu iceriğini gosterdik -istersen slow silebilrisin-
	
	return false;
	
	});
	
	
	
	
	});
	</script>
	<style type="text/css">
	body{margin:0px; padding:0px}
	#sbt{float:left; width:175px; height:100%; background-color:yellow} 
	#icerik{float:left; width:650px; background-color:red; height:100%}
	
	</style>
</head>
<body>
	<!-- Sabit div-->
	<div id="sbt"> <!-- Sabit div başlangıç -->
	
	<div id="menu_menu"></div>
	   <div class="menu"><a href="#">menu 1</a></div> <!--menuler-->
	   <div class="menu"><a href="#">menu 2</a></div><!--menuler-->
	   <div class="menu"><a href="#">menu 3</a></div><!--menuler-->
	   <div class="menu"><a href="#">menu 4</a></div><!--menuler-->
	   <div class="menu"><a href="#">menu 5</a></div><!--menuler-->
	
	</div><!-- Sabit div bitiş -->
	
	
	
	
	<!-- içerikler divi-->
	<div id="icerik">
	
	
	
	
	<!-- 1. içerik  divi-->
	   <div class="menu_icerik">içerik alanıdır 1
	   içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1
	   içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1
	   içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1
	   içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1
	   içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1
	   içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1içerik alanıdır 1
	   
	   </div>
	   <!-- 1. içerik  divi sonu-->
	   
	   
	   
	   
	   <!-- 2. içerik  divi-->
	   <div class="menu_icerik">içerik alanıdır 2
	   içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2
	   içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2
	   içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2
	   içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2
	   içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2
	   içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2içerik alanıdır 2
	   </div>
	   <!-- 2. içerik  divi-->
	   
	   
	   
	   
	   
	   
	   <!-- 3. içerik  divi-->
	   <div class="menu_icerik">içerik alanıdır 3içerik alanıdır 3içerik alanıdır 3içerik alanıdır 3
	   içerik alanıdır 3içerik alanıdır 3içerik alanıdır 3içerik alanıdır 3
	   içerik alanıdır 3içerik alanıdır 3içerik alanıdır 3içerik alanıdır 3içerik alanıdır 3
	   içerik alanıdır 3içerik alanıdır 3içerik alanıdır 3içerik alanıdır 3içerik alanıdır 3
	   içerik alanıdır 3içerik alanıdır 3içerik alanıdır 3içerik alanıdır 3
	   içerik alanıdır 3içerik alanıdır 3içerik alanıdır 3içerik alanıdır 3içerik alanıdır 3
	   içerik alanıdır 3içerik alanıdır 3içerik alanıdır 3içerik alanıdır 3içerik alanıdır 3
	   </div>
	   <!-- 3. içerik  divi-->
	   
	   
	   
	   
	   
	   
	   
	   <!-- 4. içerik  divi-->
	   <div class="menu_icerik">içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4
	   içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4
	   içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4
	   içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4
	   içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4
	   içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4
	   içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4
	   içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4içerik alanıdır 4</div>
	   <!-- 4. içerik  divi-->
	   
	   
	   
	   
	   
	   
	   
	   
	   
	   
	   
	   <!-- 5. içerik  divi-->
	   <div class="menu_icerik">içerik alanıdır 5</div>
	   <!-- 5. içerik  divi-->
	
	</div>
	
	
</body>
</html>
dostum takıldığın yer olursa elimden geldiği kadar yardım ederim jquery çok zor değil ben zaten açıkladım tamam
 
"jquery derslerine 0 dan başlayacağım. Şuan pek birşey anlamıyorum proje ödevi için önce bunu bitirmem gerek. Sitenin Tüm Kodları ve resmi Aşşağıda araya jquery kodlarını yerleştirerek bunu yapabilirmiyim ayrıca bu jquery kodlarını html kodları içerisinde nereye ekleyeceğim.
Kod:
<!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=utf-8" />
<title>Azem Halı Yıkama</title>


<style type="text/css">
a:link {text-decoration: none; color: white;}
a:hover {text-decoration: underline; color: white;}


*{
padding:0px;
margin:0px;}
#sayfa{
   top: auto;
   right: auto;
   color:#FFFFFF;
   background-color:#FF0033;
   margin-top: 5px;
   margin-right: 100px;
   margin-bottom: 5px;
   margin-left: 100px;
  
   
}
#banner{
	height:200px;
	background-color:#FF0033;
	width:1137px;
	padding: 5px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#nav{
	float:left;
	background-color:#FF0000
	padding: 0px;
	height: 700px;
	margin: 5px;
	border: 1px solid #000000;
	width: 20%;
	font-style: normal;
	font-weight: bold;
	color:#FFFFFF;
	
}
#main{
   float:left;
   width: 52%;
   background-color:#FFFFFF;
   padding: 0px;
   margin: 5px;
   border: 1px solid #000000;
   height: 700px;
}
#side{
   float:left;
   background-color:#FF0033;
   height: 700px;
   margin: 5px;
   border: 1px solid #000000;
   width:24%
}
#footer{
   color: #000000;
   background-color: #FFFFFF;
   margin: 5px;
   height: 30px;
   border:1px solid #000000;
   clear: left;
   padding: 5px;
   width:%30;
}




.stil18 {
	font-weight: bold;
	color: #FF0000;
}
body,td,th {
	color: #FFFFFF;
}
a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
a:active {
	color: #FFFFFF;
	text-decoration: none;
}
.stil19 {color: #000000}
.stil20 {
	color: #FF0000;
	font-style: italic;
}
.stil21 {
	color: #FF0033;
	font-style: italic;
}
.stil23 {color: #FF0033}
.stil24 {color: #000000; font-style: italic; }
.stil27 {
	font-size: 24px;
	font-style: italic;
}
</style>

</head>

<body>
<div id="sayfa">
  <div id="banner">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><img src="Resimler/logo.png" width="744" height="117" /></p>
    <p align="right" class="stil17"><em><strong>0.312 314 04 42</strong></em></p>
    <p align="right" class="stil6"><em><strong>azemhaliyikama@hotmail.com.tr</strong></em></p>
    <p align="right" class="stil6">&nbsp;</p>
  </div>
  <table width="1146" border="1">
    <tr>
    
      <td height="24" class="stil1"><div align="center"><em><strong><a href="index.htm.html">Anasayfa</a></strong></em></div></td>
      <td class="stil1"><div align="center"><em><strong>Hakkımızda</strong></em></div></td>
      <td class="stil1"><div align="center"><em><strong>Fiyatlarımız</strong></em></div></td>
      <td class="stil1"><div align="center"><a href="fotogaleri.html"><em><strong>Foto Galeri</strong></em></a></div></td>
      <td class="stil1"><div align="center"><em><strong>İletişim</strong></em></div></td>
      <td class="stil1"><div align="center"><em><a href="iletisimformu.html"    ><strong> İletişim Formu</strong></a></em></div></td>
    </tr>
  </table>
  <div id="nav">
    <div align="center" class="stil4">
      <p><em>Hizmetlerimiz</em></p>
      <p>&nbsp;</p>
      <blockquote>
        <p><em>Halı Yıkama</em></p>
        <p>&nbsp;</p>
        <p><em>Yerinde Halı Yıkama</em></p>
        <p>&nbsp;</p>
        <p><em>Overlok</em></p>
        <p>&nbsp;</p>
        <p><em>Ev Temizlik Hizmetleri</em></p>
        <p>&nbsp;</p>
        <p><em>Yatak Yıkama</em></p>
        <p>&nbsp;</p>
        <p><em>Perde Yıkama</em></p>
        <p>&nbsp;</p>
        <p><em>Yorgan Yıkama</em></p>
        <p>&nbsp;</p>
      </blockquote>
      <p>-----------------------------------</p>
     

      <p class="stil27">&nbsp;</p>
      <p class="stil27">Doğru Adrestesiniz&nbsp;
        </p>
        
      </p>
      <p><img src="Anasayfaresimleri/8.png" alt="" align="left"  width="230" height="300">&nbsp;&nbsp;</p>
    </div>
  </div>
  <div class="stil6 stil18 stil19" id="main"> 
<iframe name="iFrame1"  frameborder="1" width="594" scrolling="yes" height="697"></iframe>

  
  
    
 

  </div>
  <div id="side">
    <div align="center">
      <p><em><strong>Bizden Haberler</strong></em></p>
      <p class="stil7">&nbsp;</p>
      <span style="font-style: italic"> <span style="font-size: 18px">
      <marquee align="middle"   scrollamount="1" height="100" width="100%" direction="up" scrolldelay="1" style="color:#FFFFFF;">
      <strong>        Site Yapım Aşamasındadır.<br> 
        <br>
        İletişim <br>burak_ozel@hotmail.com.tr<br />
        
      </strong>
      </marquee>
      <br />
        <br />
        <br />
      -------------------------------------
    </span> </span></div>
    <p>&nbsp;</p>
    <p>burak</p>
  </div>
  <p>&nbsp;</p>
  
  <table width="1145" border="1">
    <tr>
      <td><div align="center"><strong>Anasayfa</strong></div></td>
      <td><div align="center"><em><strong>Hakkımızda</strong></em></div></td>
      <td><div align="center"><em><strong>Fiyatlarımız</strong></em></div></td>
      <td><div align="center"><strong><em>Foto Galeri</em></strong></div></td>
      <td><div align="center"><em><strong>İletişim</strong></em></div></td>
      <td><div align="center"><strong><em>İletişim Formu</em></strong></div></td>
    </tr>
  </table>
  <p>&nbsp;</p>
</div>
</body>
</html>

 
hem üstteki menü hemde sol taraftaki menüler açılacak resimde gözükmüyor ama yukarıdaki menünün aynısı alttada var yeni bir div içinde kodların en son 10 15 satırı
 
ayrıca bildiğiniz türkçe jquery dersleri varmı.Ben baktım da hep yarım yarım anlatılmış yeni başlayanlar için fazla birşey bulamadım.
 
bunu aslında jquery veya javascript ile yapmak lazım ama yeni başlayan birinin bunu yaması zor. Pek tavsiye edilmese de iframe ile yapmanız daha kolay.
İçerik alanınızdaki divin içine bir iframe koyacaksınız. (iframe adı "icerik" olsun)
Vereceğiniz linklerin sonuna #icerik şeklinde yazdığınızda linkleriniz iframe içinde açılacaktır. Ama bu kez de ifamin yüksekliği otomatik olarak değişmediğinden sorun olacaktır , onu da aşağıdaki linkten halledebilirsiniz.
iframe otomatik height
Örnek site için imzamdaki siteye bakabilirsiniz.
 
Örneğin

<iframe name="icerik" frameborder="1" width="594" scrolling="yes" height="697"></iframe>
<td class="stil1"><div align="center"><em><a href="iletisimformu.html"><strong> İletişim Formu</strong></a></em></div></td>

Bu kod da Dediğiniz #icerik hertarafa ekledim ama yine olmadı
 
Yaptım şimdi yardımlarınız için teşekkürler sorun şurdaymış.
<td class="stil1"><div align="center"><em><a href="iletisimformu.html"><strong> İletişim Formu</strong></a></em></div></td>

target="İframe Adı" bunu yazmamışız.
 
Ben dreamveawerda yaptım şu şekilde. Ekle-Spry-Spry Menü Çubuğu-Dikey veya Yatay diye seçiyorsunuz. Çok basit ve güzel.
 
gozzde' Alıntı:
Ben dreamveawerda yaptım şu şekilde. Ekle-Spry-Spry Menü Çubuğu-Dikey veya Yatay diye seçiyorsunuz. Çok basit ve güzel.


evet öyle yapılıyor biliyorum ama pek bir gösterişi yok gibi. En iyisi başka programlarla hazırlamak menüleri daha gösteriş için ama onuda biz bilmiyoruz işte.
 
Geri
Üst