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.
<!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>