div katmanında div taşması veya çakışması yardım eder misiniz?

09-03-2016, 21:01:58

<div id="altkapsayici">
<img  style="padding-left:20px;"src="../images/1379907114.jpg"></img>
<div style="height:40px; width:auto; text-align:left; padding-left:20px; background-color:white; font-family:arial; font-size:32px; padding-top:5px;">DUYURULAR</div>
<div id="altsoltaraf">sol</div><div id="altsagtaraf">
<div id="altsagtarafic">test</div>

</div>

</div>

div#altkapsayici
{
height:autopx;
width:998px;
background-color:black;
margin:auto;
border-style:dashed;
border-color:gray;
border-width:1px;
}
div#altsoltaraf
{
height:480px;
width:640px;
background-color:black;
position:relative;
float:left;
margin-left:80px;
border-style:dashed;
border-color:gray;
border-width:1px;
margin-top:10px;
}
div#altsagtaraf
{
height:100%;
width:250px;
position:relative;
float:right;
}
div#altsagtarafic
{
height:125px;
width:125px;
background-color:white;
position: relative;
margin:10px 10px 20px 60px;
border-style:dashed;
border-color:gray;
border-width:1px;
}

09-03-2016, 21:14:46

#2

Tonks

Hocam hep # id'i kullanmışsınız ve çok komplike çalışmışsınız. Resim olarak bir şablon varsa elinizde paylaşın buradan, ana göre bir iskelet çıkartalım. O iskeleti açıklayalım.

09-03-2016, 22:21:58

#3

TeknowanTelekom

Resim konunun ilk başlangıcında mevcuttu.

Teşekkürler.

10-03-2016, 14:02:10

#4

Tonks

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

Resim konunun ilk başlangıcında mevcuttu.

Teşekkürler.

Resimden anladığım kadarıyla şöyle bir şey çıkarttım hocam

<!DOCTYPE html>
<html lang="tr">
<head>
	<meta charset="UTF-8">
	<title>Template</title>

	<style>
		body {margin: 0; padding: 0; font: 16px Arial;}
		.container {width: 1024px; height: 600px; background-color: #f4f4f4; margin: 0 auto; color: #fff;}
		.left-area {width: 72%; height: 90%; background-color: #111; float: left; margin-left: 2.5%; margin-top: 2.6%; border: 2px dashed gray;}
		.right-area {width: 18%; height: 90%; background-color: #111; float: right; margin-right: 2.5%; margin-top: 2.6%; border: 2px dashed gray;}
	</style>
</head>
<body>
	<div class="container">
		<div class="left-area">Sol</div>
		<div class="right-area">Sağ</div>
	</div>
</body>
</html>

.container adında bir div var, 1024px ve ortalanmış durumda, sağ ve sol alanlar var. Sol salanı float: left sağ alanı da float: right ile sağa yasladım. Alanların konumlandır masınıda margin kodlarıyla yaptım. Öğrenmeniz açısından incelemenizi tavsiye ederim.