Semantic UI Grid Div Uzama Sorunu

Blue Life · 17 Kasım 2015

Merhaba arkadaşlar. İçerik bloğu kısmına herhangi bir içerik girdiğim zaman giriş formu gibi sol ve sağ blok da içerik bloğu ile birlikte height eşit şekilde değeri uzamış oluyor. Ben uzamasını istemiyorum. Bloklar normal div gibi bağımsız uzasın istiyorum. Bu sorunu nasıl düzeltebilirim?

custemize.css

Kod:

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

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>

Semantic UI Grid Div Uzama Sorunu

Blue Life

Megapat