Jump to content

Abdullah 37

Üye
 View Profile  See their activity

  • Posts

    353

  • Joined

  • Last visited

 Content Type 

Posts posted by Abdullah 37

    Css İlk Ve Son Öge Margin Sıfırlamak

    in Webmaster Sorunları & Çözüm Yolları

    Posted

    Arkadaşlar. Aşağıdaki gibi bir yapım var.

    Öncelikle css dosyasını kendim kodladım.
    Arkadaşlar row classı içinde bulunan ögelerden ilk öğesinin margin-left ve son öğesinin margin-right değerini sıfırlamak istiyorum ve bir standart olsun istiyorum. Yani row classı' nın içindeki öğelerin her zaman ilk ve son öğenin margin değerlerini sıfırlasın. Nasıl yapabilirim?

     

     style.css

    body { margin: 0px; padding: 0px; }
.container { width: 1200px; margin: 0 auto; padding-top: 18px; padding-bottom: 18px; background-color: #34495E; }
.grids { width: 1164px; margin: 0px 18px; background-color: #BBB; }
.clean { clear: both; }

.row { height: auto; }
.column { float: left; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px;}

.col-1  { background-color: yellow; color: #34495E; width: 54px;   }
.col-2  { background-color: yellow; color: #34495E; width: 128px;  }
.col-3  { background-color: yellow; color: #34495E; width: 202px;  }
.col-4  { background-color: yellow; color: #34495E; width: 276px;  }
.col-5  { background-color: yellow; color: #34495E; width: 350px;  }
.col-6  { background-color: yellow; color: #34495E; width: 424px;  }
.col-7  { background-color: yellow; color: #34495E; width: 498px;  }
.col-8  { background-color: yellow; color: #34495E; width: 572px;  }
.col-9  { background-color: yellow; color: #34495E; width: 646px;  }
.col-10 { background-color: yellow; color: #34495E; width: 720px;  }
.col-11 { background-color: yellow; color: #34495E; width: 794px;  }
.col-12 { background-color: yellow; color: #34495E; width: 868px;  }
.col-13 { background-color: yellow; color: #34495E; width: 942px;  }
.col-14 { background-color: yellow; color: #34495E; width: 1016px; }
.col-15 { background-color: yellow; color: #34495E; width: 1090px; }
.col-16 { background-color: yellow; color: #34495E; width: 1164px; }

    index.html

    <!DOCTYPE html>
 <html lang="en">
    <head>
	  <link type="text/css" rel="stylesheet" href="css/style.css">
    </head>

<body>
<div class="container">
	<div class="grids">
	
		<div class="row">
			<div class="col-4 column">Sol</div>
			<div class="col-8 column">İçerik</div>
			<div class="col-4 column">Sağ</div>
		</div>

		<div class="clean"></div>
	</div>
</div>
</body>
</html>

    Float Temizleme Mantığı

    in Webmaster Sorunları & Çözüm Yolları

    Posted

    responsive tasarım yapmayı bende bilmiyorum ama grid(ızgara) denilen bir yapı var bu yapıya göre tasarım yapılıyor responsive olayı yokken clear:both atıyoduk bundada büyük ihtimal belli baslı ana classların içine gömülmüş olabilir buda sana yanlıs bilgide vermek istemiyorum

    http://www.adobewordpress.com/ders-2-bootstrap-grid-izgara-yapisi

    bu yapıya göre ve pixellere göre yapıldıgı için clear kullanmıyorlar herhalde 

    https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css

    arama yaptım clear:both; diye 1 tane cıktı

     

    belki forumda bu işin tam mantıgını bilen biri vardır ve bende ögrenirim neden clear kullanmıyorlar

     

    Bilen arkadaşlar varsa yazar umarım hocam. Teşekkür ederim ilgin için.

    Float Temizleme Mantığı

    in Webmaster Sorunları & Çözüm Yolları

    Posted · Edited by Abdullah 37

     

    temizlemekten kasıt responsive oldugu için çözünürlüğe göre kayıyor o divler float:left; varsa alttaki dive clear:both; yapılır genelde 
     
    örnek adam anlatmıs mesela responsive olayını 

    http://www.bulutuzer.com/responsive-css-yazmak-ve-mantigini-kavramak/

    burdada adam eğimini veriyor

    http://www.wmdoc.org/egitim/responsive-web-sayfasi-yapiyoruz-1--bootstrap

     

     

    Hocam diyelim ki 12'lik grid yapıda 9 kolonluk bir içerik solda 3 kolonluk menü sağda olsun. Bunlar haliyle float kullanılmış oluyor. İşte hocam burada sormak istediğim şey şu. Bootstrap tasarımlarına bakınca kolonlardan sonra herhangi bir temizleme div'i göremiyorum. Bu işlemi hangi seçici class'ına yazıyorlar? Önceden nasıl belirliyorlar?

    Grid Sistemi Aynı Anda Div Uzaması Sorunu

    in Webmaster Sorunları & Çözüm Yolları

    Posted · Edited by Abdullah 37

    Merhaba arkadaşlar.

    Semantic UI Grid sisteminde orta bloğa herhangi bir içerik girdiğim zaman sol ve sağ blok da içerik bloğu ile birlikte aynı büyüklükte oluyor. Ben uzamasın normal divler ile yapılan iskelet gibi birbirinden bağımsız olsun istiyorum. Uğraştım ama sorunu gideremedim. Nasıl düzeltebilirim.?

     

    Resimde orta bloğa giriş formu yazılmıştır ama sağ ve sol blok gördüğünüz gibi orta blokla aynı boyutta olmuştur.

    AgV1o0.png

     

    custemize.css

    /* Genel Yapı */
.kapsayici { border: 1px solid red!important; margin-top: 10px!important; }
.kapsayici2 { margin-top: 20px!important; }

/* Menü Sistemi */
.logo { padding-left: 0!important; }
.arama { padding-right: 0!important; }
.ui.inverted.menu .dropdown .menu { background: #353535!important; }
.ui.inverted.menu .dropdown .menu .item { color: white!important; }
.ui.inverted.menu .dropdown .menu a:hover.item { background: #494949!important; color: white!important; }

/* Grid Sistemi */
.grid-sistem { margin: 10px 0 !important; padding:0 !important; }
.aside-left { margin: 0 !important; padding:0 !important; border: 1px solid #ddd; }
.content { margin: 0 20px!important; padding:5 !important; border: 1px solid #ddd; }
.aside-right { margin: 0 !important; padding:0 !important; border: 1px solid #ddd; }

    index.php

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="css/custemize.css">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/script.js"></script>
    <script src="semantic/dist/semantic.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>Tasarım</title>
</head>
<body>
     
<!-- Header -->
<header id="Header">
   <!-- Navbar -->
    <nav id="Navbar">
        <div class="ui inverted attached stackable menu">
            <div class="ui container">
		<div class="header item logo"><img src="semantic/examples/assets/images/logo.png"></div>
                <a class="item"><i class="home icon"></i> Home </a>
                <a class="active item"><i class="grid layout icon"></i> Browse </a>
                <a class="item"><i class="mail icon"></i> Messages </a>
		<div class="ui simple dropdown item"> More <i class="dropdown icon"></i>
		   <div class="menu">
		      <a class="item"><i class="edit icon"></i> Edit Profile</a>
		      <a class="item"><i class="globe icon"></i> Choose Language</a>
		      <a class="item"><i class="settings icon"></i> Account Settings</a>
		  </div>
		</div>
                <div class="right menu">
                    <div class="item arama">
                       <div class="ui icon input">
                        <input type="text" placeholder="Search...">
                        <i class="search link icon"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
	<!--# Navbar #-->
</header>
<!--# Header #-->

<!-- Grid -->
<div class="ui container kapsayici2">
    <div class="ui equal width stackable grid grid-sistem">
        <div class="column aside-left"><!-- Sol Blok --> <?php include "aside-left.php"; ?> </div>
        <div class="eight wide column content"><!-- Orta Blok --> <?php include "content.php"; ?> </div>
        <div class="column aside-right"><!-- Sağ Blok --> <?php include "aside-right.php"; ?> </div>
    </div>
</div>
<!--# Grid #-->
</body>
</html>

    Php İle Bbcode Yapımı

    in Webmaster Sorunları & Çözüm Yolları

    Posted

    Merhaba arkadaşlar. PHP ile BBCODE yapımının nasıl yapıldığını merak ediyorum. Bir video izledim ve yapılanları uyguladım. Ancak merak ettiğim bir şey var Alıntı etiketi yani quote forumlarda gördüğümü kadarıyla bir blok şeklinde gözüküyor div içinde. Ben quote etiketini yaptım ama çıktı halinde öyle bir görsellik göremedim. Bunun için nerede düzenleme yapmam lazım yardımcı olur musunuz? Kodlarımı paylaşıyorum.

    <?php

Function BBcode($yazi){
	// Kullanmak istediğimiz bbcode leri listeleyelim.
	
	$bbcode = array(
				'[b]','[/b]',
				'[i]','[/i]',
				'[u]','[/u]',
				'[code]','[/code]',
				'[quote]','[/quote]',
				'[img]','[/img]'
	);
	
	$html = array(
				'<b>','</b>',
				'<i>','</i>',
				'<u>','</u>',
				'<code>','</code>',
				'<quote>','</quote>',
				'<img src="','">'
	);

	$sonYazi = str_replace($bbcode, $html, $yazi);
	return $sonYazi;
}

echo BBcode("[b]Deneme[/b] - [i]Abdullah[/i]")."<br><br>";
echo BBcode("[code]Denemer[/b] - [u][i]Abdullah[/i][/code]")."<br><br>";
echo BBcode("[quote]Bu bir denemedir[/quote]")."<br><br>";
?>
×
×
  • Create New...