Pozisyonlamayı nasıl yapabilirim ?

11-08-2017, 15:39:17

Merhaba,

HTML5 ve CSS öğrenip bunları da uygulamaya calısıyorum ama bi şeyi arasam da bulamadım.

Bir site düşünün

Header kısmı en üstte

yan yana 3 sütun content var yani content içinde 3 farklı div olarak düşündüm onu eğer yanlış düşünmüşsem lütfen söyleyin

En altta da footer kısmı.

Bu 3 divi yan yana getirmek için ne yapmam gerekiyor ?

Bir de genişliklerini width ile ayarlıyoruz ama sütunların yani divlerin uzunluklarını nasıl ayarlayaiblirim ?

11-08-2017, 16:07:28

#2

FSahin

Css flex yöntemini araştırın. En basit bu şekilde yaparsınız. Mobilde olduğum için detaylı bilgi veremiyorum.

11-08-2017, 16:08:41

#3

Hunper

<div class="genelcontent">
   <div class="div1"></div>
   <div class="div2"></div>
   <div class="div3"></div>
</div>

varsayalım bu şekilde bir dizilimin var ve bu 3 div elemanını yan yana getirmek istiyorsun.

.div1 { float:left }
.div2 { float:left }
.div3 { float:left }
.div3:after { content:""; clear:both }

en temel ve eski yöntem budur denebilir(css için söylüyorum). :after ile divlerin sonuna clear:both ekledim yani temizleme işlemi yaptım. float left kullanırken bunu yapman gerekir yoksa sonra gelen eleman float:left özelliğine göre hareket edecektir.

11-08-2017, 16:10:29

#4

CNMRCN

Hunper adlı üyeden alıntı: mesajı görüntüle

<div class="genelcontent">
   <div class="div1"></div>
   <div class="div2"></div>
   <div class="div3"></div>
</div>

varsayalım bu şekilde bir dizilimin var ve bu 3 div elemanını yan yana getirmek istiyorsun.

.div1 { float:left }
.div2 { float:left }
.div3 { float:left }
.div3:after { content:""; clear:both }

en temel ve eski yöntem budur denebilir(css için söylüyorum). :after ile divlerin sonuna clear:both ekledim yani temizleme işlemi yaptım. float left kullanırken bunu yapman gerekir yoksa sonra gelen eleman float:left özelliğine göre hareket edecektir.

clear:both özelliğini contentten sonra gelecek footer için mi yazdık yani hocam ?

11-08-2017, 16:18:47

#5

Hunper

CNMRCN adlı üyeden alıntı: mesajı görüntüle

clear:both özelliğini contentten sonra gelecek footer için mi yazdık yani hocam ?

şöyle örnekleyeyim

<div class="genelcontent">
   <div class="div1"></div>
   <div class="div2"></div>
   <div class="div3"></div>
       <div class="ayri-icerik">
          Bu kısam yanyana 3 kutu haricinde bir içerik eklenecek, aynı zamanda contentin içinde bulunsun istiyorsun.
       </div>
</div>

bu şekilde float:left kullanırsan 4. div elemanı yani ayri-icerik önceki elemanın float:left özelliğine göre davranır ve kaymalar yaşanabilir. Bunu engellemek için 3. elemandan sonra temizleme işlemi yapıyoruz. Senin çalışmanda footer için yapmış olduk evet. Bunu yapman her zaman sağlıklı olacaktır. yükseklik değerini de "height: 100px" gibi piksel olarak belirleyebilirsin. ancak height kullandığın zaman bazı şeyleri de eşzamanlı düşünmen gerek. örneğin o kısma eklenecek içerik 100px'den büyük ise ne olacak ? bu durumda aşağı doğru genişlesin istiyorsan min-height kullanman daha mantıklı olacaktır height yerine. veya içerik 100px yüksekliğin içinde scrollbar ile kaydırılsın istiyorsan overflow-y: auto eklemelisin. Ya da uzayan içerik tamamen görünmesin dersen overflow:hidden eklemelisin. sağlıklı sonuçlar için bunları eşzamanlı düşünmen gerek.

11-08-2017, 16:32:23

#6

CNMRCN

FSahin adlı üyeden alıntı: mesajı görüntüle

Css flex yöntemini araştırın. En basit bu şekilde yaparsınız. Mobilde olduğum için detaylı bilgi veremiyorum.

Hocam cok yeniyim daha kafamı iyice karıştıracak bi şey değil de mi bu ?

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 16:32:23 -->-> Daha önceki mesaj 16:22:12 --

Hunper adlı üyeden alıntı: mesajı görüntüle

şöyle örnekleyeyim

<div class="genelcontent">
   <div class="div1"></div>
   <div class="div2"></div>
   <div class="div3"></div>
       <div class="ayri-icerik">
          Bu kısam yanyana 3 kutu haricinde bir içerik eklenecek, aynı zamanda contentin içinde bulunsun istiyorsun.
       </div>
</div>

bu şekilde float:left kullanırsan 4. div elemanı yani ayri-icerik önceki elemanın float:left özelliğine göre davranır ve kaymalar yaşanabilir. Bunu engellemek için 3. elemandan sonra temizleme işlemi yapıyoruz. Senin çalışmanda footer için yapmış olduk evet. Bunu yapman her zaman sağlıklı olacaktır. yükseklik değerini de "height: 100px" gibi piksel olarak belirleyebilirsin. ancak height kullandığın zaman bazı şeyleri de eşzamanlı düşünmen gerek. örneğin o kısma eklenecek içerik 100px'den büyük ise ne olacak ? bu durumda aşağı doğru genişlesin istiyorsan min-height kullanman daha mantıklı olacaktır height yerine. veya içerik 100px yüksekliğin içinde scrollbar ile kaydırılsın istiyorsan overflow-y: auto eklemelisin. Ya da uzayan içerik tamamen görünmesin dersen overflow:hidden eklemelisin. sağlıklı sonuçlar için bunları eşzamanlı düşünmen gerek.

Hocam çok teşekkür ederim zaman harcayıp cevap veriyosunuz dediklerinizi yaptım ama sonuc şöyle oldu: http://prntscr.com/g78jnb

Kodları da yazayım

<!DOCTYPE html>
<html>
	<head>
		<title> index sitesi denemesi</title>
		<link href="main.css" rel="stylesheet" type="text/css" />
	</head>

	<body>

  <header>
		<div>
			<ol>
				<p style align="center" ;  > Menü </p>
				<li><a href="/elma.html"> Elma </a></li>
				<li> Armut </li>
				<li> Kavun </li>
				<li> Karpuz</li>
			</ol>
		</div>
    </header>
		
    	<hr>
      <content>
		<div id="div1">
			<p>

			 Hr Altındaki paragraf <br>
			 Bu da br etiketiyle alt satırda yazdığım cümle <br>

			 	<p style="color:red"> bu da kırmızı yazılı bir paragraf </p>

			 </p>

			 <details> Deneme detayları </details>
			 <input type="textbox" name="denemetext">
    </div>


<div id="div2">   


<p> div2 </p>

</div>


<div id="div3">
  
<p> div3  </p>

</div>


    </content>





    <footer>
      


      
    </footer>


	</body>
</html>

  

p { color:red ; }

header {
	
	background-color: #DCDCDC ; 
	padding:5px ;
	border: 1px solid ; 
	width:150px ; 

}

 #div1	{
 	background-color: red;
	width: 100px;
	border: 1px solid
	float:left;

}

 #div2 {
 	background-color: green;
	width: 100px;
	border: 1px solid
	float:left;
}


 #div3 {
 	background-color: blue;
	width: 100px;
	border: 1px solid
	float:left;

}

#div3:after { clear:both }

11-08-2017, 16:35:38

#7

FSahin

CNMRCN adlı üyeden alıntı: mesajı görüntüle

Hocam cok yeniyim daha kafamı iyice karıştıracak bi şey değil de mi bu ?

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 16:32:23 -->-> Daha önceki mesaj 16:22:12 --

Hocam çok teşekkür ederim zaman harcayıp cevap veriyosunuz dediklerinizi yaptım ama sonuc şöyle oldu: http://prntscr.com/g78jnb

Kodları da yazayım

<!DOCTYPE html>
<html>
	<head>
		<title> index sitesi denemesi</title>
		<link href="main.css" rel="stylesheet" type="text/css" />
	</head>

	<body>

  <header>
		<div>
			<ol>
				<p style align="center" ;  > Menü </p>
				<li><a href="/elma.html"> Elma </a></li>
				<li> Armut </li>
				<li> Kavun </li>
				<li> Karpuz</li>
			</ol>
		</div>
    </header>
		
    	<hr>
      <content>
		<div id="div1">
			<p>

			 Hr Altındaki paragraf <br>
			 Bu da br etiketiyle alt satırda yazdığım cümle <br>

			 	<p style="color:red"> bu da kırmızı yazılı bir paragraf </p>

			 </p>

			 <details> Deneme detayları </details>
			 <input type="textbox" name="denemetext">
    </div>


<div id="div2">   


<p> div2 </p>

</div>


<div id="div3">
  
<p> div3  </p>

</div>


    </content>





    <footer>
      


      
    </footer>


	</body>
</html>

  

p { color:red ; }

header {
	
	background-color: #DCDCDC ; 
	padding:5px ;
	border: 1px solid ; 
	width:150px ; 

}

 #div1	{
 	background-color: red;
	width: 100px;
	border: 1px solid
	float:left;

}

 #div2 {
 	background-color: green;
	width: 100px;
	border: 1px solid
	float:left;
}


 #div3 {
 	background-color: blue;
	width: 100px;
	border: 1px solid
	float:left;

}

#div3:after { clear:both }

Aksine çok kolaydır.

Örnek:

https://jsfiddle.net/pe340a7t/

11-08-2017, 16:45:34

#8

Hunper

	  p { color:red ; }
 
header {
    
   background-color: #DCDCDC ; 
   padding:5px ;
   border: 1px solid ; 
   width:150px ; 
 
}
 
 #div1   {
   background-color: red;
   width: 100px;
   border: 1px solid #000;
   float:left;
 
}
 
 #div2 {
   background-color: green;
   width: 100px;
   border: 1px solid #000;
   float:left;
}
 
 
 #div3 {
   background-color: blue;
   width: 100px;
   border: 1px solid #000;
   float:left;
 
}
 
#div3:after { clear:both }

border: 1px solid

bu şekilde kalmış hocam eksik olduğu için float:left aktif olmuyor hatalı oluyor. o kısımları düzeltince yan yana geliyor bu cssler ile deneyebilirsin.

11-08-2017, 16:50:40

#9

CNMRCN

FSahin adlı üyeden alıntı: mesajı görüntüle

Aksine çok kolaydır.

Örnek:

https://jsfiddle.net/pe340a7t/

Hemen inceliyorum hocam teşekkür ederim

Hunper adlı üyeden alıntı: mesajı görüntüle

	  p { color:red ; }
 
header {
    
   background-color: #DCDCDC ; 
   padding:5px ;
   border: 1px solid ; 
   width:150px ; 
 
}
 
 #div1   {
   background-color: red;
   width: 100px;
   border: 1px solid #000;
   float:left;
 
}
 
 #div2 {
   background-color: green;
   width: 100px;
   border: 1px solid #000;
   float:left;
}
 
 
 #div3 {
   background-color: blue;
   width: 100px;
   border: 1px solid #000;
   float:left;
 
}
 
#div3:after { clear:both }

border: 1px solid

bu şekilde kalmış hocam eksik olduğu için float:left aktif olmuyor hatalı oluyor. o kısımları düzeltince yan yana geliyor bu cssler ile deneyebilirsin.

çok salakça bi şey olmuş hocam ben de diyorum float niye beyaz yazıyo sublime textte. hiç aklıma bile gelmedi çok sağolun