dengesiz div boxlar

chaostician · 30.09.2007

Arkadaşlar aşağıdaki kod ile bir sürü yan yana gelecek içinde bilgi ve başlıkları içeren bir site yapmaya çalışıyorum ancak problemim div ve CSS ile yaptığım kutular, bilginin uzunluğuna göre yer değiştiriyor. Normal olarak sağdan sola doğru yerleşmesi lazım veya ortalaması lazım.

Şimdiden yardımınız için teşekkürler, ayrıca bu kutuları nasıl rounded yaparım onu da söylerseniz çok minnettar kalırım.

HTML 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=utf-8" />
<title>Boxx</title>
</head>

<style>
body,HTML{
text-align:center;
font-family: Arial;
}
#items
{
	float: left;
}
 
.item {
	float: left;
	position: relative;
	width: 300px;
	border: 1px solid #eee;
	border-right: 2px solid #ddd;
	border-bottom: 2px solid #ddd;
	background-color:#ffffff;
	margin:10px;
}

.newsheader {font-size: 14px; font-weight: bold; margin:10px;}
.newssubheader {margin:0px; padding:0px; font-size:10px; text-align:center; color:#993300; text-decoration:underline;} 
.newsdescription {font-family: Arial; font-size: 12px; margin:10px;}
.newsothers { margin:10px; padding:0px; font-size:12px; color:navy; line-height:1; text-align:left; margin-left:25px; list-style-type:none; font-size:10px;} 

</style>
<body>


<div id="items">

  <div class="item">

	<p class="newsheader" style="">Quisque malesuada<br />
      <span class="newssubheader">Lorem ipsum - 12.09.2007</span></p>
	    <p class="newsdescription">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas vitae risus sed nulla hendrerit auctor. Aenean et metus. Aenean accumsan imperdiet urna. Nulla dolor erat, placerat quis, bibendum ut, facilisis in, est. Etiam tristique turpis vitae massa. Quisque malesuada. Aenean quis velit feugiat sem nonummy mattis. Donec ornare feugiat nunc. In condimentum. Suspendisse arcu. Nam felis metus, consectetuer in, sodales vitae, lacinia id, risus. Praesent in ligula.</p>
	    <ul class="newsothers">
	      <li>vitae massa</li>
          <li>vitae massa</li>

          <li>vitae massa</li>
    </ul>
   </div>



  <div class="item">
	<p class="newsheader" style="">Quisque malesuada<br />
      <span class="newssubheader">Lorem ipsum - 12.09.2007</span></p>

	    <p class="newsdescription">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas quis, bibendum ut, facilisis in, est. Etiam tristique turpis vitae massa. Quisque malesuada. Aenean quis velit feugiat sem nonummy mattis. Donec ornare feugiat nunc. In condimentum. Suspendisse arcu. Nam felis metus, consectetuer in, sodales vitae, lacinia id, risus. Praesent in ligula.</p>
	    <ul class="newsothers">
	      <li>vitae massa</li>
          <li>vitae massa</li>
          <li>vitae massa</li>
    </ul>
   </div>



  <div class="item">
	<p class="newsheader" style="">Quisque malesuada<br />
      <span class="newssubheader">Lorem ipsum - 12.09.2007</span></p>
	    <p class="newsdescription">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas vitae risus sed malesuada. Aenean quis velit feugiat sem nonummy mattis. Donec ornare feugiat nunc. In condimentum. Suspendisse arcu. Nam felis metus, consectetuer in, sodales vitae, lacinia id, risus. Praesent in ligula.</p>
	    <ul class="newsothers">
	      <li>vitae massa</li>

          <li>vitae massa</li>
          <li>vitae massa</li>
    </ul>
   </div>



  <div class="item">
	<p class="newsheader" style="">Quisque malesuada<br />

      <span class="newssubheader">Lorem ipsum - 12.09.2007</span></p>
	    <p class="newsdescription">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas vitae risus sed nulla quis velit feugiat sem nonummy mattis. Donec ornare feugiat nunc. In condimentum. Suspendisse arcu. Nam felis metus, consectetuer in, sodales vitae, lacinia id, risus. Praesent in ligula.</p>
	    <ul class="newsothers">
	      <li>vitae massa</li>
          <li>vitae massa</li>
          <li>vitae massa</li>

    </ul>
   </div>
  
</div>

</body>
</HTML>

BYK · 30.09.2007

item sınıfına "overflow: hidden" ya da "overflow: auto" özelliğini verirsen sorunun çözülebilir gibi geldi. Bir de sağdan sola demişsin ama float özelliklerini hep left yapmışsın. Farkındasındır umarım

30.09.2007	#2 (permalink)
BYK Üyelik Tarihi: 08.04.2003 Yer: Ankara Yaş: 19 Mesaj: 530 Görsel: 8	Re: dengesiz div boxlar item sınıfına "overflow: hidden" ya da "overflow: auto" özelliğini verirsen sorunun çözülebilir gibi geldi. Bir de sağdan sola demişsin ama float özelliklerini hep left yapmışsın. Farkındasındır umarım __________________ Hayata gülümse! Fotoğraf Sergim - www.fototonik.com/madbyk@gmail.com/Denemeler