Cssde Yanyana resim ve yazı sorunu ?

06-09-2013, 16:40:12

#1

MehmetKS

Arkadaşlar sayfamda bir yazı ve bir resim alanım mevcut bunlar yanyana.

Alt kısımdada footer içeriğe göre ekledikçe footerım alta doğru kayacak.

Ancak resmi yazının sağına almak için position özelliğini kullandığım anda
resmim footerı alta kaydırma özelliğini kaybediyor
yazıyı sildiğimde veya kısa yazdığımda footer resmin üzerine çıkıyor bu sorunu nasıl çözebilirim.

06-09-2013, 18:00:27

<!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>Resim ve yazi</title>
<style type="text/css">
	body {
		font-family:Tahoma, Geneva, sans-serif;
		font-size:10pt;
		width:960px;
		margin-left:auto;
		margin-right:auto;
	}
	
	#header {
		width:960px; height:150px;
		background-color:#CCCCCC;
	}
	
	#content .container {
		position:relative;
		width:100%;
		height:200px;
	}
	
	#content {
		width:960px; min-height:200px;
		height:auto;
		background-color:#999;
		position:relative;
	}
	
	#content .container p {
		width:500px; height:200px;
		position:absolute;
		left:400px; top:15px;
	}
	
	#content .container img {
		position:absolute;
		left:20px; top:15px;
	}
	
	#footer {
		width:960px; height:110px;
		background-color:#CCC;
	}
</style>
</head>
<body>
	<div id="header">
    	header
    </div>
    <div id="content">
    	content
    	<div class="container">
        	<img src="wf.png" width="480" height="178" />
            <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere sapien a turpis consequat aliquet. Donec ultrices urna non enim ullamcorper cursus. Pellentesque eleifend  		 			nisi blandit, laoreet justo eu, aliquam ligula. Aenean convallis arcu vel tincidunt dignissim. Nam odio sapien, consectetur eget luctus ornare, dictum quis enim. Nulla facilisi.  	 			Proin sollicitudin facilisis malesuada. Duis mattis feugiat ligula, vitae adipiscing sapien aliquet at. Aenean porta purus vel neque accumsan, eget placerat sapien gravida. Aliquam	 			lacinia libero et urna adipiscing rutrum. Phasellus orci libero, aliquam sit amet tempor in, euismod vitae turpis.
            </p>
        </div>
        <div class="container">
        	<img src="wf.png" width="480" height="178" />
            <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere sapien a turpis consequat aliquet. Donec ultrices urna non enim ullamcorper cursus. Pellentesque eleifend  		 			nisi blandit, laoreet justo eu, aliquam ligula. Aenean convallis arcu vel tincidunt dignissim. Nam odio sapien, consectetur eget luctus ornare, dictum quis enim. Nulla facilisi.  	 			Proin sollicitudin facilisis malesuada. Duis mattis feugiat ligula, vitae adipiscing sapien aliquet at. Aenean porta purus vel neque accumsan, eget placerat sapien gravida. Aliquam	 			lacinia libero et urna adipiscing rutrum. Phasellus orci libero, aliquam sit amet tempor in, euismod vitae turpis.
            </p>
        </div>
        <div class="container">
        	<img src="wf.png" width="480" height="178" />
            <p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere sapien a turpis consequat aliquet. Donec ultrices urna non enim ullamcorper cursus. Pellentesque eleifend  		 			nisi blandit, laoreet justo eu, aliquam ligula. Aenean convallis arcu vel tincidunt dignissim. Nam odio sapien, consectetur eget luctus ornare, dictum quis enim. Nulla facilisi.  	 			Proin sollicitudin facilisis malesuada. Duis mattis feugiat ligula, vitae adipiscing sapien aliquet at. Aenean porta purus vel neque accumsan, eget placerat sapien gravida. Aliquam	 			lacinia libero et urna adipiscing rutrum. Phasellus orci libero, aliquam sit amet tempor in, euismod vitae turpis.
            </p>
        </div>
    </div>
    <div id="footer">
    footer
    </div>
</body>
</html>

Sanırım istediğin bu, resim ve yazılar yan yana ayrıca içeriği arttırdıkça aşşağıya doğru devam eder footer.
Sonucu buradan görebilirsin.

07-09-2013, 15:33:51

#3

MehmetKS

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

Sanırım istediğin bu, resim ve yazılar yan yana ayrıca içeriği arttırdıkça aşşağıya doğru devam eder footer.
Sonucu buradan görebilirsin.

Hocam verdiğim örnekte evet dediğim gibi ama bak sendede sorun var örneğin adam yönetim panelinden yazıyı çoğalttı diğelim htmlde bir çoğaltsana yazıla nasıl birbirine giriyor.

Halbuki ben yazı çoğalınca alttaki diğer içeriğinde üstteki yazıya oranla alta kaymasını istiyorum
07-09-2013, 16:19:59

#4

emirhanguven

anladım, #content .container'a min-height:200px; height:auto ver sorun düzelir.