Grid Sistemi Aynı Anda Div Uzaması Sorunu

Abdullah 37 · November 16, 2015

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.

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>

Edited November 16, 2015 by Abdullah 37

istek61 · November 16, 2015

sistem %100 default değerlerinde..

en için bir pixel değeri girersen pencereler de bu komuta göre şekillenir.

Abdullah 37 · November 17, 2015

sistem %100 default değerlerinde..

en için bir pixel değeri girersen pencereler de bu komuta göre şekillenir.

Hocam biraz açar mısın. Tam olarak ne demek istediğini anlayamadım. Scripte tam olarak nerede ve nasıl düzenleme yapmalıyım

Edited November 17, 2015 by Abdullah 37

Abdullah 37 · November 19, 2015

Arkadaşlar konu ile alakalı yardımlarınızı bekliyorum.

Abdullah 37 · December 2, 2015

Sorunum devam etmekte.

weyso · December 2, 2015

Bu şekilde verdiğiniz kodlar dan pek bir şey anlaşmıyor maalesef, sitenin şu anki halini ya bir yere upload edin yada paylaşın.

Abdullah 37 · December 2, 2015

Bu şekilde verdiğiniz kodlar dan pek bir şey anlaşmıyor maalesef, sitenin şu anki halini ya bir yere upload edin yada paylaşın.

Dosyayı buradan indirebilirsiniz hocam

http://www.mediafire.com/download/tk3316xu7p2kb2s/dosya.zip

Edited December 2, 2015 by Abdullah 37

Abdullah 37 · December 22, 2015

Konu güncel.

abdullahTR · December 23, 2015

Konu güncel.

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

column aside-left

eight wide column content

column aside-right

bu kırmızı ile işaretlediğim yerlerle alakalı büyük ihtimal boostrap ile aynı mantık buda md2 md6 md4 gibi ayarlanıyor bundada gird sistemi 12 kolonluk ızgara sisteminden olusuyor buda aynıdır büyük ihtimal tam yapısını bilmiyorum ama

bundada 16 grid ızgara yapısı kullanıyor yani bölücen 4 girid bi yere 10 grid bi yere 2 grid bi yere şeklinde ozaman tasarım olarak birbirinden bagımsız olur

baktım sitesine 4 eşit parcaya bölmüş 16 yı burdan yürütürsün mantıgını artık

Edited December 23, 2015 by abdullahTR

Abdullah 37 · December 23, 2015

abdullahTR hocam siteyi kolonlara bölmede sıkıntım yok. Sıkıntım şu hocam.

Sol bloğa içerik giriyorum ya (örneğin giriş formu), haliyle divin height değeri içine girilen ögenin yüksekliğine göre otomatik olarak yükseliyor. Ama orta ve sağ blokta hiçbir içerik girilmemesine rağmen onlarda aynı anda sol blokla birlikte height değeri büyüyor. Ben bu olayı çözemedim.

Edited December 23, 2015 by Abdullah 37

abdullahTR · December 23, 2015

abdullahTR hocam siteyi kolonlara bölmede sıkıntım yok. Sıkıntım şu hocam.

Sol bloğa içerik giriyorum ya (örneğin giriş formu), haliyle divin height değeri içine girilen ögenin yüksekliğine göre otomatik olarak yükseliyor. Ama orta ve sağ blokta hiçbir içerik girilmemesine rağmen onlarda aynı anda sol blokla birlikte height değeri büyüyor. Ben bu olayı çözemedim.

benim sana bunu söyleyebilmem için yapısını cok iyi bilmem lazım malesef benimde bilgim sınırlı bakarım ama anlayabilirsem yardımcı olmaya calısırım

boostrapı kurcaladım böyleymiş seninkide benziyordur herhalde

http://s8.dosya.tc/server/o56cax/bootstrap.zip.html

Edited December 23, 2015 by abdullahTR

Abdullah 37 · January 6, 2016

benim sana bunu söyleyebilmem için yapısını cok iyi bilmem lazım malesef benimde bilgim sınırlı bakarım ama anlayabilirsem yardımcı olmaya calısırım

boostrapı kurcaladım böyleymiş seninkide benziyordur herhalde

Evet hocam bootstrap'da böyle oluyor ama semantic farklı sanırım.

Sign In

Grid Sistemi Aynı Anda Div Uzaması Sorunu

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Similar Content

Recently Browsing 0 members