Divleri yan yana açmak

lahomenia · 15 Nisan 2010

Merhaba WP bir tema editliyorum ancak benm isteğim bir div içerisinde 3 divi yan yana açmak
mesela örnek vermek gerekirse
kategori sütunu yanına program adı sütunu onun yanına tarih sütunu ancak divleri eklediğimde alt alta geliyor örnek CSS dosyamı, index.php yi ve ekran görüntüsünü ekliyorum.

Kod:

CSS Dosyam

/*
Theme Name: indirbbv2
Theme URI: http://www.indirbb.com
Description: indirbb.com icin hazirlanmis ozel bir tema.
Version: 2.0
Author: sRcN
Author URI: http://www.teknotizm.com 
*/
/* CSS Document */
body {
background:#FFFFFF;
font:0.8em 'Trebuchet MS', sans-serif, verdana;
color:#999;
margin:0;
padding:0;
}

h2,h3,h4,h5,h6 {
font-family:'Trebuchet MS', sans-serif, verdana, 'Lucida Sans';
}

#wrap {
background: transparent;
width:940px;
margin:0 auto;
}

.ad {
margin-top:31px;
}

.ad2 {
padding-left:60px;
}

.ad3 {
padding: 4px 0px 0px 12px;
border-left: 1px dashed #999;
}

#header {
height:25px;
color:#fff;
text-align: center;
margin:0 auto;
padding:0;
background: transparent;
}

#headerimg {
height:140px;
background:transparent url(images/header2.jpg) repeat-x top;
color:#fff;
margin:0 auto;
}

.header {
padding-left:38px;
padding-bottom:14px;
letter-spacing:1px;
font-size:3.1em;
font-weight:700;
font-family:'Trebuchet MS', sans-serif, verdana, 'Lucida Sans';
margin-left: 50px;
background: transparent url(images/logo.gif) no-repeat left;
}


.description {
padding-top:50px;
padding-left:105px;
color:#999;
}

#nav {
height:35px;
font-family:Geneva, arial, Helvetica;
font-size:11px;
position:absolute;
margin:0 auto;
}

.left li {
list-style:none;
display:inline;
float:right;
margin:0;
}

#nav a {
color:#999;
text-decoration:none;
height:17px;
padding-left:14px;
padding-right:14px;
padding-top:6px;
}

.left {
padding-top:6px;
position:relative;
top:6px;
right:2px;
}

.left a {
text-transform:uppercase;
}

#nav a:hover {
text-decoration: underline;
}

#gradient {
height:17px;
background:transparent url(images/gradient.gif) repeat-x;
width:924px;
margin:0 auto;
}

#content {
width:480px;
float:left;
text-align:justify;
color:#262523;
margin:0;
padding:14px 13px 14px 13px;
overflow:hidden;
color:#333;
background: #fff;
border: 1px solid #B5B5B5;
}
#content p {
line-height:1.6em;
padding:0;
font-size:12px;
font-family:Verdana, Arial;
}	
.entry {
padding: 4px 1px 8px 1px;
}	
.entry a {
color:#0065CE;
text-decoration:none;
}
.entry li {
list-style: circle;
}	
.bottom {
color:#000;
background:#F3F3F3;
text-align:center;
padding-top:2px;
}

.postmetadata {
color:#666;
background:#FFFFFF;
text-align:justify;
border-top:1px solid #999;
border-bottom:1px solid #999;
font-family:Verdana, sans-serif;
padding: 4px 8px 6px 8px;
font-size:11px;
}
.author {
background:#F9F9F9 url(images/user.gif) no-repeat left;
border-right:2px solid #acacac;
border-bottom:1px solid #acacac;
padding:0 2px 2px 19px;
}

.email {
background:#F9F9F9 url(images/e-mail.jpg) no-repeat left;
border-right:2px solid #acacac;
border-bottom:1px solid #acacac;
padding:0 2px 2px 19px;
height: 18px;
}

.meta {
color:#000;
text-align:center;
width:35px;
position:absolute;
border-right:1px dashed #999;
padding:4px 6px 4px 4px;
}

.comment {
background:#F9F9F9 url(images/comment.gif) no-repeat left;
border-right:2px solid #acacac;
border-bottom:1px solid #acacac;
padding:0 0 2px 16px;
}

.comment a {
color:#666;
padding:0 2px;
}

.date {
color:#666;
font-weight:700;
font-family:Georgia, serif;
font-size:16px;
}

.month {
color:#666;
font-weight:700;
font-family:Halvetica;
font-size:16px;
}

.poststuff {
position:relative;
width:430px;
left:0px;
}

.postname {
font-size:1.9em;
font-family:'Trebuchet MS', sans-serif, verdana, 'Lucida Sans';
text-align:left;
}

.anapost {
font-size: 10px;
font-family:'Trebuchet MS', sans-serif, verdana, 'Lucida Sans';
text-align:left;
width: 200px
}

.anapostkat {
font-size: 10px;
font-family:'Trebuchet MS', sans-serif, verdana, 'Lucida Sans';
text-align:left;
width: 50px
}

.anaposttr {
font-size: 10px;
font-family:'Trebuchet MS', sans-serif, verdana, 'Lucida Sans';
text-align:left;
width: 75px
}

.postname a {
color:#666666;
text-decoration:none;
}

.social a {
color:#000;
font-size:1em;
text-decoration:none;
}
.writer a:hover {
text-decoration:underline;
}	
.writer a {
color:#333333;
font-size:1em;
text-decoration:none;
font-family:'Trebuchet MS', sans-serif, verdana, 'Lucida Sans';
}
.writer {
font-size: 11px;
padding-left: 2px;
}
.mewtwo {
text-align:center;
width:470px;
}

.mewtwo a {
font-size:1em;
text-decoration:none;
}

.post-divider {
border-bottom:1px dashed #999;
width:470px;
}

.navigation {
display: block
color:#000;
background: transparent;
padding: 2px 4px 2px 4px;
}

.navigation a {
color:#333;
text-decoration:none;
background: transparent;
}

.alignleft {
float:left;
}

.alignright {
float:right;
}
.feed2 {
padding-left: 19px;
background: transparent url(images/feed.png) no-repeat left;
}	
.feed2 a {
font-size: 13px;
}	

.sidebar {
background: #E6E6E6;
}

#rsidebar {
width:190px;
float:left;
background:#F9F9F9;
margin-left:8px;
color:#666;
padding: 6px 8px 6px 8px;
border: 1px solid #B5B5B5;
}

.feed {
text-align:justify;
font-family:Verdana, sans-serif;
font-size:11px;
line-height:1.8em;
}

#rsidebar a,#rsidebar a:hover {
color:#0065CE;
background:transparent;
text-decoration:none;
}
#rsidebar p {
line-height:1.6em;
font-size:11px;
font-family:Verdana, Arial;
text-align: justify;
color: #666666;
}	
#lsidebar {
width:165px;
background:#FCFCFC;
color:#666666;
float:left;
margin-right: 8px;
padding: 6px 8px 6px 8px;
border: 1px solid #B5B5B5;
}

#footer {
color:#999;
clear: both;
text-align: center;
background: transparent;
padding-top:4px;
padding-bottom:4px;
padding-right: 48px;
}
#footer a {
color: #0065CE;
}	
.sidebar h2 {
font-family:'Trebuchet MS', sans-serif, verdana, 'Lucida Sans';
font-weight: normal;
font-size:1.1em;
color:#666;
padding: 2px 2px 2px 4px;
background: #f5f9ff;
border: 1px solid #E1EBFB;
margin-bottom: 3px;
}

.category li {
list-style:none;
border-bottom:1px dashed #999;
background:transparent url(images/tag2.gif) no-repeat left;
padding-left:18px;
line-height:20px;
}
.else li {
list-style:none;
border-bottom:1px dashed #999;
padding-left:4px;
line-height:20px;
}
#searchform {
background:#F9F9F9;
border-top:4px solid #DCDCDC;
border-left:4px solid #DCDCDC;
border-bottom:4px solid #DCDCDC;
border-right:4px solid #DCDCDC;
width:300px;
height:30px;
margin-top: 0px;
}

.search {
padding-top:4px;
border:0;
background:transparent;
background-position:6px 4px;
padding-left:5px;
width:300px;
font: 18px 'Trebuchet MS', sans-serif, verdana;
font-weight: bold;
color: #999999;
}

#respond {
background:transparent url(images/nav4.gif) repeat-x;
color:#fff;
text-align:center;
text-transform:uppercase;
}

#commentstatus {
color:#999;
text-align:center;
}

ol.commentlist {
background: transparent;
margin:0;
padding:8px 8px 8px 20px;
overflow: hidden;
}
ol.commentlist a {
text-decoration: underline;	
overflow: hidden;
color: #000;
}
li.oddcomment {
background:#fff;
border:1px dashed #999;
margin-bottom:6px;
padding:2px 4px;
overflow: hidden;
}

li.alt {
background:#F3F3F3;
border:1px dashed #999;
margin-bottom:6px;
padding:2px 4px;
overflow: hidden;
}

img {
border-bottom:4px solid #fff;
border-top:4px solid #fff;
border-left:4px solid #fff;
border-right:4px solid #fff;
padding:4px;
}

p a:hover {
background:#4593DC;
height:16px;
}
blockquote {
background:#FBFBFB;
border-left:4px solid #F0F0F0;
border-top:1px solid #F0F0F0;
text-align:left;
padding:2px 8px;
}
.children {
display:none;
}

.wp-smiley {
border:0;
margin:2px;
padding:0;
}

.download {
background:#FFC;
text-align:center;
color:#000;
font-size:12px;
font-family:Verdana;
border-bottom:1px solid #fc0;
border-top:1px solid #fc0;
overflow:hidden;
text-transform:capitalize;
padding:3px;
}

.download a {
text-transform:none;
}

.left ul,#rsidebar ul,#rsidebar ol {
margin:0;
padding:0;
}

.entry a:hover,.email a:hover {
color:#0065CE;
background:transparent;
}

.entry,#comment {
width:475px;
}

.comment a:hover,.postname a:hover,#lsidebar a {
color:#0065CE;
}
.postmetadata a {
color: #666;
text-decoration: none;
border-bottom: 1px dotted #666;
}	
.author a,.email a {
color:#999;
}
.navigation li,#rsidebar li {
list-style:none;
padding-left: 4px;
}

.category ul {
width:150px;
padding-left:0;
padding-bottom:2px;
margin:0;
}
.else ul {
width:150px;
padding-left:0;
padding-bottom:2px;
margin:0;
}
.else a {
text-decoration: none;
color:#005EBF;
}
.category a {
text-decoration:none;
color:#005EBF;
}
h3.related {
width: 450px;
text-align: left;
color: #000;
font-weight: normal;
font-size: 12px;
font-family: Verdana, Arial;
padding-left: 14px;
}
h3.pagetitle {
width: 450px;
text-align: left;
color: #000;
font-weight: normal;
font-size: 12px;
font-family: Verdana, Arial;
padding-left: 14px;
}
.sidebar img {
margin: 0;
padding: 0;
}
img {
padding: 4px 6px 4px 6px;
}

Kod:

index php

<?php get_header(); ?>
<?php include (TEMPLATEPATH . '/lsidebar.php'); ?>
<div id="content">
<?php
$postnum = 1;
$showadsense1 = 1;
$showadsense2 = 2;
?>
	<?php if (have_posts()) : ?>

		<?php while (have_posts()) : the_post(); ?>
		<div class="poststuff"><div class="anapostkat"><?php the_category(', ') ?> </div> <div class="anapost"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div> <div class="anaposttr"><?php the_time('l, F jS, Y') ?></div></div>
<div class="post-divider">
</div>
<br />
<?php if ($postnum == $showadsense1) {
echo '
<!--Your adsense code goes here-->
';
} ?>

<?php if ($postnum == $showadsense2) {
echo '
';
} ?>
<?php $postnum++; ?>
<?php endwhile; ?>
	<!--next page-->

			<div class="navigation"><div class="alignleft"><?php next_posts_link('« Previous Entries') ?></div><div class="alignright"><?php previous_posts_link('Next Entries »') ?></div></div>

	<?php wp_link_pages(); ?>
	<?php comments_template(); // Get wp-comments.php template ?>

<?php else : ?>
        <p>I'm sorry, but there's no post in this page. </p>
	<?php endif; ?>
	</div>
	<?php include (TEMPLATEPATH . '/rsidebar.php'); ?>
	<br />
<?php get_footer(); ?>

Ekran Görüntüsü

metadige · 15 Nisan 2010

Arkadaşım kodlarına bakmadım ama, yapılacak belli zaten. Divlerin style özelliğine float:left vereceksin, ve bulunduğu kısma göre genişlik vereceksin, oransız durmasın diye. Yani eklenecekleri alan diyelim 600px;

Kod:

.eklenecekdiv{
float:left;
width:190px;
margin:0 3px;
}

gibi.

lahomenia · 15 Nisan 2010

yok olmadı dediğinizde :{nasıl yapabilirim :S

edit büdüt: tamamdır teşekkür ederim :} sorunumu çözdüm sanırım...

rainmaks · 16 Nisan 2010

divlerdeki gerekli boyutlandırmaları yaptıktan sonra
float:left her zaman sorununu çözer

Divleri yan yana açmak

lahomenia

0

metadige

0

lahomenia

0

rainmaks

1