• 01-02-2015, 15:16:45
    #1

    beyler solda menü var seçtiğim menüye göre sadece sağdaki değişicek nasıl yapabilirim?

    HTML
    <!doctype html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>MCLive</title>
    	<link rel="stylesheet" href="assets/style.css">
        <link rel="stylesheet" href="assets/font-awesome-4.3.0/css/font-awesome.min.css" />
        <link rel="stylesheet" href="assets/font-awesome-4.3.0/css/font-awesome.css" />
        <meta http-equiv="X-UA-Compatible" content="IE=9" >
    </head>
    <body>
    	
    	<div class="left">
            
            <div class="logo"><i class="fa fa-twitch fa-2x"></i><div class="cutter"></div></div>
            <ul class="menu">
                <li><a href=""><i class="fa fa-align-justify"></i></a></li>
                <li><a href=""><i class="fa fa-bell-o"></i></a></li>
                <li><a href=""><i class="fa fa-life-ring"></i></a></li>
                <li><a href=""><i class="fa fa-video-camera"></i></a></li>
                <li><a href=""><i class="fa fa-wrench"></i></a></li>
            </ul>  
            
            <div class="userarea">
                <div class="cutter"></div>
                <i class="fa fa-xing fa-2x" style="color:#fff;"></i>
            </div>
        </div>
    
        <div class="right">
            
            <iframe src="http://www.twitch.tv/iijeriichoii/embed" frameborder="1" scrolling="yes" height="250px" width="100%"></iframe>
            
            
        </div>
    	
    </body>
    </html>
  • 02-02-2015, 23:42:25
    #2
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    
    <div id="tabs">
        <ul>
            <li>
                <a href="#a">Burası 1. Tab</a>
            </li>
            <li>
                <a href="#b">Burası 2. Tab</a>
            </li>
            <li>
                <a href="#c">Burası 3. Tab</a>
            </li>
            <li>
                <a href="#d">Burası 4. Tab</a>
            </li>
        </ul>
        <div id="a">
            1. Tabdayız
        </div>
        <div id="b">
             2. Tabdayız
        </div>
        <div id="c">
            3. Tabdayız
        </div>
        <div id="d">
             4. Tabdayız
        </div>
    </div>
    <script>
    $('#tabs')
        .tabs()
        .addClass('ui-tabs-vertical ui-helper-clearfix');
    </script>
    .ui-tabs.ui-tabs-vertical {
        padding: 0;
        width: 42em;
    }
    .ui-tabs.ui-tabs-vertical .ui-widget-header {
        border: none;
    }
    .ui-tabs.ui-tabs-vertical .ui-tabs-nav {
        float: left;
        width: 10em;
        background: #CCC;
        border-radius: 4px 0 0 4px;
        border-right: 1px solid gray;
    }
    .ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
        clear: left;
        width: 100%;
        margin: 0.2em 0;
        border: 1px solid gray;
        border-width: 1px 0 1px 1px;
        border-radius: 4px 0 0 4px;
        overflow: hidden;
        position: relative;
        right: -2px;
        z-index: 2;
    }
    .ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
        display: block;
        width: 100%;
        padding: 0.6em 1em;
    }
    .ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
        cursor: pointer;
    }
    .ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
        margin-bottom: 0.2em;
        padding-bottom: 0;
        border-right: 1px solid white;
    }
    .ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
        margin-bottom: 10px;
    }
    .ui-tabs.ui-tabs-vertical .ui-tabs-panel {
        float: left;
        width: 28em;
        border-left: 1px solid gray;
        border-radius: 0;
        position: relative;
        left: -1px;
    }

    Css'i kendi tasarımına göre ayarlarsın.