oldu çok sağol tşker ederim baya uğraştım yapamamıstm hep kayıyor bi yerden bozuluyordu css yi anlayamadım gitti.. seni bulmusken birşey daha rica etcektim



bendeki yorumlar bölümünü bunun gibi nasıl yapabiliriz

bendeki şu: http://fobidik.com/yuksek-sadakat-kadinim/

bu comments.php kodları
<?php // Do not delete these lines
	if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');

	if (!empty($post->post_password)) { // if there's a password
		if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {  // and it doesn't match the cookie
			?>

			<p class="nocomments">Konu Şifreli olduğu için yorumlar gözükmemektedir.<p>

			<?php
			return;
		}
	}

	/* This variable is for alternating comment background */
	$oddcomment = 'yorum2';
?>

<!-- You can start editing here. -->

<div id="commentblock">
<?php if ($comments) : ?>

	<ol class="commentlist">

	<?php foreach ($comments as $comment) : ?>

		<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
			<div style="float:left; margin:4px 10px 0px 0px;">
					<?php echo get_avatar( $comment, 40 ); ?>

				</div><?php comment_author_link() ?> |
			<?php if ($comment->comment_approved == '0') : ?>
			<em>Yorumunuz Onaylandıktan Sonra Yayımlanacaktır..Yorum için teşekkürler :)</em>
			<?php endif; ?>
			<?php the_time('j F Y'); ?> <?php comment_time() ?> <?php edit_comment_link('(Yorumu Düzenle)','',''); ?>
			<div class="commenttext">
			<?php comment_text() ?>
			</div>

		</li>

	<?php /* Changes every other comment to a different class */
		if ('yorum2' == $oddcomment) $oddcomment = '';
		else $oddcomment = 'yorum2';
	?>

	<?php endforeach; /* end for each comment */ ?>

	</ol>

 <?php else : // this is displayed if there are no comments so far ?>

	<?php if ('open' == $post->comment_status) : ?>
		<!-- If comments are open, but there are no comments. -->

	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p class="nocomments">Konu Yorumlara Kapalıdır.</p>
		
		
		</div>

	<?php endif; ?>
<?php endif; ?>
</div>

<div class="yorumgiris">
<?php if ('open' == $post->comment_status) : ?>

<p id="respond"><b>Bu şarkı hakkında birşeyler yazmak istermisiniz?</b></p>



<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">logged in</a> to post a comment.</p></div>
<?php else : ?>

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if ( $user_ID ) : ?>

<p>Giriş Yapılan Kullanıcı Adı:<a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Çıkış Yap &raquo;</a></p>

<?php else : ?>

<p><label for="name">Adınız <?php if ($req) echo "(gerekli)"; ?></label><br />
<input type="text" name="author" id="name" value="<?php echo $comment_author; ?>" size="50" tabindex="1" /></p>

<p><label for="email">Mail Adresiniz <?php if ($req) echo "(gerekli)"; ?></label><br />
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="50" tabindex="2" /></p>

<?php endif; ?>

<!--<p><small><strong>XHTML:</strong> You can use these tags: <?php echo allowed_tags(); ?></small></p>-->

<p><label for="words">Düşünceleriniz:</label><br /><textarea name="comment" id="words" cols="40" rows="5" tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="Tamamdır Gönder." />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p>

<?php do_action('comment_form', $post->ID); ?>

</form>



<?php endif; // If registration required and not logged in ?>

<?php endif; // if you delete this the sky will fall on your head ?>
</div>
bunu resimdeki gibi nasıl yapabilriz css yi de verim
body {

	background-color: #FFFFFF;

	padding: 0px;

	margin: 0px;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	text-decoration: none;
    text-align:left;
}

.logo {

	width: 800px;

	margin: 0px auto 0px auto;

	padding: 20px 0px 10px 0px;

	text-align: center;

}

.alt {

	width: 800px;

	margin: 10px auto 0px auto;

	padding: 10px 0px 10px 0px;

	text-align: center;

	border-top-style: solid;

	border-top-width: 1px;

	border-top-color: #EAEAEA;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	color: #999999;

}



.ustmenu {
        height:30px;
	background-color: #000000;
	margin: 0px auto 0px auto;
	padding: 0px;
}
.ustmenu ul {
	padding: 0px;
	margin: 0px auto 0px auto;
}
.ustmenu li {
	color: #999999;
	padding: 10px;
	margin: 0px;
	float: left;
	list-style-type: none;
	list-style-position: inside;
	font-weight: bold;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}
.ustmenu li a{

	color: #999999;
	text-decoration: none;

}

.ustmenu li:hover {
	color: #FFFFFF;
	background-color: #333333;
	cursor: pointer;
}

.temizle

{

	clear:both;

}

.aramakutusu {

	width: 800px;

	margin: 0px auto 0px auto;

	padding: 20px 0px 20px 0px;

	text-align: center;



}

.siralasekerim {
    margin: 0px auto 0px auto;
    width: 100%;
    padding: 0px 5px 0px 5px;
}

.listeleme {
    float: left;
    width: 32%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: 5px;
    margin-left: 0px;

}

.listeleme ul {
    padding: 0px;
    margin: 0px;
}

.listeleme li {
    padding: 2px;
    text-align: left;
    margin: 0px;
    list-style-position: inside;
    list-style-type: none;
    list-style-image: url('resim/png.gif');
}

.listeleme li a{
    color: #333333;
    text-decoration: none;
}

.listeleme li a:hover{
     color: #ff0000;
     text-decoration: underline;
 }

.listeleme li:hover
{
    background-color: #EAEAEA;
}

.listeleme h2 {
    padding: 5px;
    margin: 0px;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: #333333;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #CCCCCC;
    text-align: left;
}

.kutu {
	padding: 5px;
	margin: 5px 5px 0px 5px;
	border: 1px solid #EAEAEA;
	background-color: #FBFBFB;
}

.kutu:hover {

	background-color: #FFFFFF;

}

.mp3can {

	padding: 0px 0px 0px 0px;

	margin: 0px auto 0px auto;

	width: 500px;

}

.mp3can h2

{
	padding: 5px 0px 5px 0px;
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #333333;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
}

.playercan

{

	text-align: center;

	padding: 10px;

}

.etican

{
	padding: 6px;
	color: #666666;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	background-color: #FFFFFF;
}
.etican a

{
	color: #666666;
	text-decoration: underline;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
.paylas a

{
	color: #666666;
	text-decoration: underline;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}

.yorum

{

	border: 1px solid #EAEAEA;

	padding: 0px 10px 0px 10px;

	margin: 0px auto 10px auto;
	background-color: #F9F9F9;

	width: 500px;

}
.yorum a 
{
	color:#333333;
	text-decoration:none;
}

.icineal

{
	border: 1px solid #EAEAEA;
	padding: 0px 0px 0px 0px;
	width: 520px;
	margin: 0px auto 15px auto;
	background-color: #F9F9F9;
}

#commentblock {



	padding: 5px 0px 0px 0px;



	color: #202020;



	float: left;



	margin: 0px 0px 0px 0px;



	width: 500px;



}



#commentblock ol {



	margin: 0px 0px 0px 0px;



	padding: 4px 0px 10px 0px;



	list-style-type: none;



}



	



.commentdate {



	font-weight: bold;



	font-size: 12px;



	}







.commentname {



	color: #202020;



	font-weight: bold;



	margin: 0px;



	padding: 5px 0px 0px 0px;



	}







.commentinfo {



	clear: both;



	}







.commenttext {



	color: #202020;



	font-size: 12px;



	font-family: Arial, Tahoma, Verdana;



	padding: 0px 0px 0px 0px;



	margin: 5px 0px 20px 0px;



	border-bottom: 1px dotted #C0C0C0;



	border-bottom-style: dashed;



}



.commentlist ol:hover {



	background-color: #F7F7F7;



}



#commentform input {



	width: 400px;



	padding: 2px;



	margin: 5px 5px 1px 0;



	}



#commentform textarea {



	width: 400px;



	padding: 2px;



	}







.yorum2 {



	color: #202020;



	font-size: 12px;



	font-family: Arial, Tahoma, Verdana;



	padding: 0px 0px 0px 0px;



	margin: 5px 0px 20px 0px;



	background-color: #FCFCFC;



}



.yorumgiris



{



	padding:0px;



	clear:both;



}
.paylas {
	padding: 5px;
}
.mp3listele {
	margin: 0px auto 0px auto;
	width: 350px;
}
.aramaseysi {
	margin: 0px auto 0px auto;
	width: 350px;
	padding-bottom: 5px;
	padding-top: 0px;
	font-size: 14px;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
}

.mp3listele ul
{
	padding: 0px;
	margin: 0px;
}
.mp3listele li
{
	padding: 5px;
	margin: 0px 0px 3px 0px;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
	border-bottom-color: #EAEAEA;
	list-style-position: inside;
	list-style-type: none;
	list-style-image: url('resim/png.gif');
	border-top-style: dashed;
	border-top-width: 1px;
	border-top-color: #EAEAEA;
}
.mp3listele li a
{
	padding: 3px;
	border: 1px solid #EAEAEA;
	text-decoration: none;
	color: #333333;
	background-color: #F3F3F3;
}
.mp3listele li a:hover
{
	text-decoration: none;
	color: #FFFFFF;
	background-color: #333333;
}



.abc {

	border: 1px dotted #EAEAEA;

	float: left;

	width: 150px;

	padding-right: 0px;

	padding-left: 0px;

	background-color: #FBFBFB;

	margin-right: 5px;

	margin-left: 5px;

}



.abc {

	padding: 5px;

	margin: 0px;

}

.abc li {

	padding: 5px;

	margin: 0px;

	border-bottom-style: dashed;

	border-bottom-width: 1px;

	border-bottom-color: #EAEAEA;

	background-color: #FBFBFB;

	list-style-position: inside;

	list-style-type: none;

	list-style-image: url('resim/png.gif');

}

.abc li a{

	color: #333333;

	text-decoration: none;

}



.abc li:hover

{

	background-color: #EAEAEA;

}

.abc h2 {

	padding: 5px;

	margin: 0px;

	font-size: 12px;

	font-weight: bold;

	font-family: Arial, Helvetica, sans-serif;

	color: #333333;

	border-bottom-style: dashed;

	border-bottom-width: 1px;

	border-bottom-color: #CCCCCC;

	text-align: center;

}


<style type="text/css">