Jump to content

Css De Sağa Yaslama Işlemi ??? Yardım Lütfen.


Recommended Posts

Merhaba üstadlarım,

Aşağıda görmüş olduğunuz resimde yeşil kutucukdakileri aynı şekilde sıralaması değişmeden sağa yaslı olmasını yapmaya çalışıyorum bir türlü yapamadım. Rica etsem resmin altındaki kod grubunu resimde tarif ettiğim alana sağa yaslı olacak şekilde düzenleyebilecek üstad varmıdır.

Şimdiden teşekkür ederim.

spacer.png

 

.ilan .ust {padding-bottom:2px;margin-bottom:2px;border-bottom:1px solid #eaeaea;}
.ilan .ust .buton:not(.sosyal) {float:left;font-size:12px;margin-right:16px;}
.ilan .ust .buton:not(.sosyal) a {color:#777;}
.ilan .ust .buton:not(.sosyal) a:hover {color:#3e5a9e;}
.ilan .ust .buton:not(.sosyal) i {margin-right:3px;}
.ilan .ust .buton.sosyal a {margin-top:-4px;color:#fff;display:block;width:22px;height:22px;line-height:22px;margin-left:2px;float:left;text-align:center;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.ilan .ust .buton.sosyal a i {margin-right:0px;font-size:14px;}
.ilan .ust .buton.sosyal a.facebook {background:#4867aa;}
.ilan .ust .buton.sosyal a.twitter {background:#00aced;}
.ilan .ust .buton.sosyal a.whatsapp {background:#0dc143;}
.ilan .ust .buton.sosyal a.google {background:#d13617;}
.ilan .ust .buton.sosyal a.pinterest {background:#e00027;}

 

Link to comment
Share on other sites

Konuya hakim değilim.

.ilan .ust .buton.sosyal {
  float: right; /* Move the social buttons to the right side */
}

.ilan .ust .buton:not(.sosyal) {
  float: left; /* Keep other buttons on the left */
}


veya 2. yol

 

.ilan .ust {
  display: flex; /* Enable flexbox for the container */
  justify-content: space-between; /* Distribute buttons evenly with space between */
}

.ilan .ust .buton {
  float: none; /* Remove any existing float for better control */
}

.ilan .ust .buton.sosyal {
  /* No additional styles needed for right alignment */
}
 

Link to comment
Share on other sites

shaolin, 25 dakika önce yazdı:

Konuya hakim değilim.

.ilan .ust .buton.sosyal {
  float: right; /* Move the social buttons to the right side */
}

.ilan .ust .buton:not(.sosyal) {
  float: left; /* Keep other buttons on the left */
}


veya 2. yol

 

.ilan .ust {
  display: flex; /* Enable flexbox for the container */
  justify-content: space-between; /* Distribute buttons evenly with space between */
}

.ilan .ust .buton {
  float: none; /* Remove any existing float for better control */
}

.ilan .ust .buton.sosyal {
  /* No additional styles needed for right alignment */
}
 

Öncelikle yardımınız için teşekkür ederim, Vermiş olduğunuz kodları deneyeceğim neticeyi bildiririm.

Link to comment
Share on other sites

Beyfenditr, 1 saat önce yazdı:

Merhaba üstadlarım,

Aşağıda görmüş olduğunuz resimde yeşil kutucukdakileri aynı şekilde sıralaması değişmeden sağa yaslı olmasını yapmaya çalışıyorum bir türlü yapamadım. Rica etsem resmin altındaki kod grubunu resimde tarif ettiğim alana sağa yaslı olacak şekilde düzenleyebilecek üstad varmıdır.

Şimdiden teşekkür ederim.

Please register to see this content.

 

.ilan .ust {padding-bottom:2px;margin-bottom:2px;border-bottom:1px solid #eaeaea;}
.ilan .ust .buton:not(.sosyal) {float:left;font-size:12px;margin-right:16px;}
.ilan .ust .buton:not(.sosyal) a {color:#777;}
.ilan .ust .buton:not(.sosyal) a:hover {color:#3e5a9e;}
.ilan .ust .buton:not(.sosyal) i {margin-right:3px;}
.ilan .ust .buton.sosyal a {margin-top:-4px;color:#fff;display:block;width:22px;height:22px;line-height:22px;margin-left:2px;float:left;text-align:center;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.ilan .ust .buton.sosyal a i {margin-right:0px;font-size:14px;}
.ilan .ust .buton.sosyal a.facebook {background:#4867aa;}
.ilan .ust .buton.sosyal a.twitter {background:#00aced;}
.ilan .ust .buton.sosyal a.whatsapp {background:#0dc143;}
.ilan .ust .buton.sosyal a.google {background:#d13617;}
.ilan .ust .buton.sosyal a.pinterest {background:#e00027;}

 

Eğer kodlar buradaki gibiyse, buradaki kodlarda yer alan tüm left; leri right; yazın öyle deneyin. Noktalama işaretlerine dikkat edin. Önemli olan tüm leftleri right yazmak.

Link to comment
Share on other sites

shaolin, 34 dakika önce yazdı:

Konuya hakim değilim.

.ilan .ust .buton.sosyal {
  float: right; /* Move the social buttons to the right side */
}

.ilan .ust .buton:not(.sosyal) {
  float: left; /* Keep other buttons on the left */
}


veya 2. yol

 

.ilan .ust {
  display: flex; /* Enable flexbox for the container */
  justify-content: space-between; /* Distribute buttons evenly with space between */
}

.ilan .ust .buton {
  float: none; /* Remove any existing float for better control */
}

.ilan .ust .buton.sosyal {
  /* No additional styles needed for right alignment */
}
 

Malesef üstad olmadı yada ben uyarlayamadım.

Link to comment
Share on other sites

Beyfenditr, 8 saat önce yazdı:

Merhaba üstadlarım,

Aşağıda görmüş olduğunuz resimde yeşil kutucukdakileri aynı şekilde sıralaması değişmeden sağa yaslı olmasını yapmaya çalışıyorum bir türlü yapamadım. Rica etsem resmin altındaki kod grubunu resimde tarif ettiğim alana sağa yaslı olacak şekilde düzenleyebilecek üstad varmıdır.

Şimdiden teşekkür ederim.

Please register to see this content.

 

.ilan .ust {padding-bottom:2px;margin-bottom:2px;border-bottom:1px solid #eaeaea;}
.ilan .ust .buton:not(.sosyal) {float:left;font-size:12px;margin-right:16px;}
.ilan .ust .buton:not(.sosyal) a {color:#777;}
.ilan .ust .buton:not(.sosyal) a:hover {color:#3e5a9e;}
.ilan .ust .buton:not(.sosyal) i {margin-right:3px;}
.ilan .ust .buton.sosyal a {margin-top:-4px;color:#fff;display:block;width:22px;height:22px;line-height:22px;margin-left:2px;float:left;text-align:center;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.ilan .ust .buton.sosyal a i {margin-right:0px;font-size:14px;}
.ilan .ust .buton.sosyal a.facebook {background:#4867aa;}
.ilan .ust .buton.sosyal a.twitter {background:#00aced;}
.ilan .ust .buton.sosyal a.whatsapp {background:#0dc143;}
.ilan .ust .buton.sosyal a.google {background:#d13617;}
.ilan .ust .buton.sosyal a.pinterest {background:#e00027;}

 

Şunu dener misin ?

.ilan .ust {
    padding-bottom:2px;
    margin-bottom:2px;
    border-bottom:1px solid #eaeaea;
    text-align: right;
}
.ilan .ust .buton:not(.sosyal) {
    float:right;
    font-size:12px;
    margin-left:16px;
}
.ilan .ust .buton:not(.sosyal) a {
    color:#777;
}
.ilan .ust .buton:not(.sosyal) a:hover {
    color:#3e5a9e;
}
.ilan .ust .buton:not(.sosyal) i {
    margin-left:3px;
}
.ilan .ust .buton.sosyal a {
    margin-top:-4px;
    color:#fff;
    display:block;
    width:22px;
    height:22px;
    line-height:22px;
    margin-right:2px;
    float:right;
    text-align:center;
    border-radius:2px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
}
.ilan .ust .buton.sosyal a i {
    margin-left:0px;
    font-size:14px;
}
.ilan .ust .buton.sosyal a.facebook {
    background:#4867aa;
}
.ilan .ust .buton.sosyal a.twitter {
    background:#00aced;
}
.ilan .ust .buton.sosyal a.whatsapp {
    background:#0dc143;
}
.ilan .ust .buton.sosyal a.google {
    background:#d13617;
}
.ilan .ust .buton.sosyal a.pinterest {
    background:#e00027;
}
 

Link to comment
Share on other sites

.ilan .ust {
  padding-bottom: 2px;
  margin-bottom: 2px;
  border-bottom: 1px solid #eaeaea;
  text-align: right; /* Metni sağa yaslar */
}

.ilan .ust .buton {
  float: none; /* butonları akışa dahil eder */
  display: inline-block; /* butonları satır içi blok olarak gösterir */
  margin: 0 5px; /* butonlar arasında boşluk bırakır */
}

.ilan .ust .buton:not(.sosyal) a {
  color: #777;
}

.ilan .ust .buton:not(.sosyal) a:hover {
  color: #3e5a9e;
}

.ilan .ust .buton i {
  margin-right: 0; /* ikonların sağında boşluk bırakmaz */
}

.ilan .ust .buton.sosyal a {
  margin-top: -4px;
  color: #fff;
  display: block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  margin-left: 2px;
  text-align: center;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

.ilan .ust .buton.sosyal a i {
  margin-right: 0px;
  font-size: 14px;
}

.ilan .ust .buton.sosyal a.facebook {
  background: #4867aa;
}

.ilan .ust .buton.sosyal a.twitter {
  background: #00aced;
}

.ilan .ust .buton.sosyal a.whatsapp {
  background: #0dc143;
}

.ilan .ust .buton.sosyal a.google {
  background: #d13617;
}

.ilan .ust .buton.sosyal a.pinterest {
  background: #e00027;
}
 

Link to comment
Share on other sites

shadesofdeath, 16 saat önce yazdı:

Şunu dener misin ?

.ilan .ust {
    padding-bottom:2px;
    margin-bottom:2px;
    border-bottom:1px solid #eaeaea;
    text-align: right;
}
.ilan .ust .buton:not(.sosyal) {
    float:right;
    font-size:12px;
    margin-left:16px;
}
.ilan .ust .buton:not(.sosyal) a {
    color:#777;
}
.ilan .ust .buton:not(.sosyal) a:hover {
    color:#3e5a9e;
}
.ilan .ust .buton:not(.sosyal) i {
    margin-left:3px;
}
.ilan .ust .buton.sosyal a {
    margin-top:-4px;
    color:#fff;
    display:block;
    width:22px;
    height:22px;
    line-height:22px;
    margin-right:2px;
    float:right;
    text-align:center;
    border-radius:2px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
}
.ilan .ust .buton.sosyal a i {
    margin-left:0px;
    font-size:14px;
}
.ilan .ust .buton.sosyal a.facebook {
    background:#4867aa;
}
.ilan .ust .buton.sosyal a.twitter {
    background:#00aced;
}
.ilan .ust .buton.sosyal a.whatsapp {
    background:#0dc143;
}
.ilan .ust .buton.sosyal a.google {
    background:#d13617;
}
.ilan .ust .buton.sosyal a.pinterest {
    background:#e00027;
}
 

 

bensuslu11, 14 saat önce yazdı:

.ilan .ust {
  padding-bottom: 2px;
  margin-bottom: 2px;
  border-bottom: 1px solid #eaeaea;
  text-align: right; /* Metni sağa yaslar */
}

.ilan .ust .buton {
  float: none; /* butonları akışa dahil eder */
  display: inline-block; /* butonları satır içi blok olarak gösterir */
  margin: 0 5px; /* butonlar arasında boşluk bırakır */
}

.ilan .ust .buton:not(.sosyal) a {
  color: #777;
}

.ilan .ust .buton:not(.sosyal) a:hover {
  color: #3e5a9e;
}

.ilan .ust .buton i {
  margin-right: 0; /* ikonların sağında boşluk bırakmaz */
}

.ilan .ust .buton.sosyal a {
  margin-top: -4px;
  color: #fff;
  display: block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  margin-left: 2px;
  text-align: center;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

.ilan .ust .buton.sosyal a i {
  margin-right: 0px;
  font-size: 14px;
}

.ilan .ust .buton.sosyal a.facebook {
  background: #4867aa;
}

.ilan .ust .buton.sosyal a.twitter {
  background: #00aced;
}

.ilan .ust .buton.sosyal a.whatsapp {
  background: #0dc143;
}

.ilan .ust .buton.sosyal a.google {
  background: #d13617;
}

.ilan .ust .buton.sosyal a.pinterest {
  background: #e00027;
}
 

Üstadlarım yardımlarınızdan dolayı çok çok teşekkür ederim, vermiş olduğunuz CSS kodlarının hepsini uyguladım ama olmadı malesef.

Birde aşağıda PHP kodlarını verdim oradan bir şey yapılabilirmi ?

 

<div class="ust">
		<div class="row">			
			<div class="clearfix mb10 visible-xs"></div>
			  <div class="col-md-11 col-sm-16">
				<div class="buton" >
				<?php if (favori_mi($id,$oturum_id)) {$favori=1;} else {$favori=0;} ?>
				<a id="favorilerden_kaldir" class="c_pointer" <?php if ($favori!=1) {echo "style='display:none;'";} ?>><i class="ion-android-star-outline"></i>Favorilerden kaldır</a>
				<a id="favorilere_ekle" class="c_pointer" <?php if ($favori==1) {echo "style='display:none;'";} ?>><i class="ion-android-star"></i>Favorilere ekle</a>
				</div>
				<div class="buton" >
					<a onclick="frames['frame'].print()" class="c_pointer"><i class="ion-printer"></i>Yazdır</a>
				</div>
				<div class="buton sosyal pull-right" >
					<?php $icerik_link=link_getir($id); ?>
					<a href="http://www.facebook.com/sharer.php?u=<?php echo $icerik_link; ?>" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" target="blank" class="facebook"><i class="ion-social-facebook"></i></a>
					<a href="http://twitter.com/share?url=<?php echo $icerik_link; ?>&text=<?php echo $baslik; ?>" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" target="blank" class="twitter"><i class="ion-social-twitter"></i></a>
					<a href="http://pinterest.com/pin/create/button/?url=<?php echo $icerik_link; ?>&media={URI-encoded URL of the image to pin}&description=<?php echo $baslik; ?>" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" target="blank" class="pinterest"><i class="ion-social-pinterest"></i></a>
					<a href="whatsapp://send?text=<?php echo $icerik_link; ?>&t=<?php echo $baslik; ?>" data-action="share/whatsapp/share" target="blank" class="whatsapp visible-xs"><i class="ion-social-whatsapp"></i></a>
			 </div>	            
		  </div>
	  </div>
  </div>

 

Link to comment
Share on other sites

Beyfenditr, 9 saat önce yazdı:

 

Üstadlarım yardımlarınızdan dolayı çok çok teşekkür ederim, vermiş olduğunuz CSS kodlarının hepsini uyguladım ama olmadı malesef.

Birde aşağıda PHP kodlarını verdim oradan bir şey yapılabilirmi ?

 

<div class="ust">
		<div class="row">			
			<div class="clearfix mb10 visible-xs"></div>
			  <div class="col-md-11 col-sm-16">
				<div class="buton" >
				<?php if (favori_mi($id,$oturum_id)) {$favori=1;} else {$favori=0;} ?>
				<a id="favorilerden_kaldir" class="c_pointer" <?php if ($favori!=1) {echo "style='display:none;'";} ?>><i class="ion-android-star-outline"></i>Favorilerden kaldır</a>
				<a id="favorilere_ekle" class="c_pointer" <?php if ($favori==1) {echo "style='display:none;'";} ?>><i class="ion-android-star"></i>Favorilere ekle</a>
				</div>
				<div class="buton" >
					<a onclick="frames['frame'].print()" class="c_pointer"><i class="ion-printer"></i>Yazdır</a>
				</div>
				<div class="buton sosyal pull-right" >
					<?php $icerik_link=link_getir($id); ?>
					<a href="http://www.facebook.com/sharer.php?u=<?php echo $icerik_link; ?>" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" target="blank" class="facebook"><i class="ion-social-facebook"></i></a>
					<a href="http://twitter.com/share?url=<?php echo $icerik_link; ?>&text=<?php echo $baslik; ?>" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" target="blank" class="twitter"><i class="ion-social-twitter"></i></a>
					<a href="http://pinterest.com/pin/create/button/?url=<?php echo $icerik_link; ?>&media={URI-encoded URL of the image to pin}&description=<?php echo $baslik; ?>" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" target="blank" class="pinterest"><i class="ion-social-pinterest"></i></a>
					<a href="whatsapp://send?text=<?php echo $icerik_link; ?>&t=<?php echo $baslik; ?>" data-action="share/whatsapp/share" target="blank" class="whatsapp visible-xs"><i class="ion-social-whatsapp"></i></a>
			 </div>	            
		  </div>
	  </div>
  </div>

 

zip şeklinde kaynak dosyaları atarsan yardımcı olurum parça parça kod atmakla olmaz bu iş

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...