1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Dividir página verticalmente com css

Discussão em 'Web Development' iniciada por ricardoaux, 3 de Março de 2009. (Respostas: 10; Visualizações: 8212)

  1. ricardoaux

    ricardoaux Power Member

    Boas
    Como posso dividir (50% / 50%) a página com css tendo por exemplo, isto no html;

    '-----------------'
    'a......................'
    'b......................'
    '........................'
    '........................'
    '........................'
    '-----------------'

    e quero que fique mais ou menos assim:

    '-----------------'
    'a..........b...........'
    '........................'
    '........................'
    '........................'
    '........................'
    '-----------------'

    No b vou precisar de inserir uma scrollbar (barra de deslocamento vertical), por causa de ter imensos dados.

    Se me conseguirem dar uma ajuda agradecia.
     
    Última edição: 3 de Março de 2009
  2. ricardoaux

    ricardoaux Power Member

  3. unsilent

    unsilent Power Member

    Boas.
    Posta ai o código daquilo em que estas a trabalhar.
    Mas em principio basta criares duas div's com width 50%, uma com float: left e outra right.
    Na "b" pões overflow:scroll.(tens é que ter uma altura definida)
    cumps
     
    Última edição: 3 de Março de 2009
  4. ricardoaux

    ricardoaux Power Member

    Código:
    <html>
    <head>
    <title> Gestor de ficheiros </title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <link href="../style/style.css" rel="stylesheet" type="text/css">
        
    </head>
    
     
    <body>
    
    <center> 
    <div id="header">
    
        <div id="header-left"> 
        </div>
     
        
        <div id="header-right">  
        </div>
     
    </div>
     
    <div id="content">
    
        <center><h1> Gest&atilde;o DansGuardian </h1></center>
    
        <?php
    
        $op = $_GET['op'];
     
            echo "<h2> Insira uma nova linha </h2><br><br>"; 
            echo "<form action=inserir.php method=post>"; 
            echo "<b>Inserir:</b> <br><input type=text size=50 name=linha> <br>";
            echo "<input type='hidden' name='op' size='1' value=$op>"; 
            echo "<br>"; 
            echo "<input type=submit value=Inserir></form>";
            echo "</div>";
    
    
    [B]//Aqui desejo dividir[/B]
    
            echo "<h2> Clique sobre o bot&atilde;o da linha que deseja apagar </h2><br><br>";
    
    
            if ($op == 1)
            {
                $file='../files/bannedextensionlist';
                $data=file($file);
                $a=0;
                foreach ($data as $line)
                {
                    echo $line;
                    if(trim($line) != "")
                    {
                        echo "<form action=apagar.php method=post>";
                        echo "<input type='hidden' name='apaga' size='20' value=$a>";
                        echo "<input type='hidden' name='op' size='1' value=1>";
                        echo "<input type=submit value=Apagar>";
                        echo "</form>";
                        echo "<br><br>";
                    }
                    $a=$a+1;
                }
            }
            else if ($op == 2)
            {
                $file='../files/bannedmimetypelist';
                $data=file($file);
                $a=0;
                foreach ($data as $line)
                {
                    echo $line;
                    if(trim($line) != "")
                    {
                        echo "<form action=apagar.php method=post>";
                        echo "<input type='hidden' name='apaga' size='20' value=$a>";
                        echo "<input type='hidden' name='op' size='1' value=2>";
                        echo "<input type=submit value=Apagar>";
                        echo "</form>";
                        echo "<br><br>";
                    }
                    $a=$a+1;
                }
            }
            else if ($op == 3)
            {
                $file='../files/exceptionsitelist';
                $data=file($file);
                $a=0;
                foreach ($data as $line)
                {
                    echo $line;
                    if(trim($line) != "")
                    {
                        echo "<form action=apagar.php method=post>";
                        echo "<input type='hidden' name='apaga' size='20' value=$a>";
                        echo "<input type='hidden' name='op' size='1' value=3>";
                        echo "<input type=submit value=Apagar>";
                        echo "</form>";
                        echo "<br><br>";
                    }
                    $a=$a+1;
                }
            }
            else
            {
                echo "Op&ccedil;&atilde;o Inv&aacute;lida";
                echo "<form action=../index.html method=post>";
                echo "<input type=submit value=Voltar>";
            }
    
        ?>
    </div>
    </div>
     
    
    <div style="clear:both;">  
    </div>
    
     
    <div id="footer">
    
        <div id="footer-left"> 
        </div>
    
    
        <div id="footer-right"> 
        </div>
    
    </div>
    </center> 
     
    </body> 
    </html>
    
     
    Última edição pelo moderador: 3 de Março de 2009
  5. Totoro

    Totoro Folding Member

    Por exemplo:

    Código:
    <div style=" width:760px">
    <div style=" background-color:#CC0; width:50%; height:400px; float:left">A</div>
    <div style=" background-color:#9CF; width:50%; height:400px; overflow:scroll; float:right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque enim non libero. Nullam non lectus. Ut condimentum nunc non tortor. Duis sit amet nisl. Cras odio sapien, semper vitae, dapibus ut, pulvinar vel, metus. Suspendisse potenti. In augue leo, adipiscing eu, adipiscing eu, ultricies id, est. Sed turpis. Praesent felis dolor, vulputate id, cursus in, dapibus vel, mauris. Proin vulputate arcu placerat eros. Morbi tempor, dolor eget aliquam venenatis, purus tellus fringilla quam, eu fringilla metus orci ac metus. Praesent eget urna. In eget elit. Pellentesque varius rhoncus tortor.
    
    Sed a enim. Phasellus erat leo, lobortis id, interdum ac, hendrerit id, quam. Sed convallis. Quisque a erat. Etiam adipiscing. Aliquam justo turpis, malesuada sit amet, mollis a, iaculis in, quam. Aliquam dui eros, adipiscing sed, eleifend vitae, convallis tincidunt, metus. Donec vestibulum. Integer pharetra risus non lorem. Cras luctus, lectus non dignissim condimentum, nunc nisl porta diam, a condimentum sem dolor eu diam.
    
    In pulvinar. Etiam ac justo in leo condimentum vestibulum. Cras et est eu sem tristique adipiscing. Suspendisse tellus odio, consequat ac, mollis non, convallis non, turpis. Nunc laoreet. Sed posuere. Nam non urna. Nullam fermentum ultrices lorem. Etiam sodales ultrices augue. Morbi lacinia, turpis non faucibus lacinia, leo lacus pulvinar risus, quis porta libero tortor nec nulla. Ut porttitor. Donec ut purus. Suspendisse ipsum augue, vehicula sed, hendrerit sit amet, dignissim eu, arcu. In ante dolor, sollicitudin a, pretium id, porta eu, lorem. Suspendisse potenti. Donec sit amet ligula. Nam non lorem.
    
    Suspendisse faucibus, metus in viverra ultrices, est leo pharetra libero, ac luctus sem mi suscipit leo. Aliquam in turpis. Cras nec ipsum ut felis pharetra placerat. Cras augue turpis, vulputate et, pretium eu, vehicula id, purus. Mauris et elit. Etiam id velit. Praesent ligula. Ut consequat adipiscing leo. Nullam vitae lacus a augue feugiat accumsan. Nullam consequat lacus vel ante. Etiam scelerisque tincidunt erat. 
    </div>
    </div>
    
     
  6. hYpe

    hYpe [email protected] Member

    Sugiro overflow a auto, para a barra não aparecer quando não é necessária.
     
  7. ricardoaux

    ricardoaux Power Member

    PHP:
    if ($op == || $op == || $op == 3)
        { 
            
            echo 
    "<div id='content-left'>"
            echo 
    "<h3> Insira um conte&uacute;do </h3><br><br>"
            echo 
    "<form action=inserir.php method=post>"
            echo 
    "<input type=text size=40 name=linha> <br>";
            echo 
    "<input type='hidden' name='op' size='1' value=$op>"
            echo 
    "<br>"
            echo 
    "<input type=submit value=Inserir></form>";
            echo 
    "</div>";

        
            echo 
    "<div id='content-right'>";
            echo 
    "<h3> Clique no bot&atilde;o do conte&uacute;do que deseja bloquear </h3><br><br>";
        }

            if (
    $op == 1)
            {    
                echo 
    "<div id='content-scrollbar-right'>";
                
    $file='../files/bannedextensionlist';
                
    $data=file($file);
                
    $a=0;
                foreach (
    $data as $line)
                {    
                    if(
    trim($line) != "" &&  (preg_match'/^[^#\s]/'$line )))
                    {
                        echo 
    $line;
                        echo 
    "<form action=apagar.php method=post>";
                        echo 
    "<input type='hidden' name='apaga' size='20' value=$a>";
                        echo 
    "<input type='hidden' name='op' size='1' value=1>";
                        echo 
    "<input type=submit value=Bloquear>";
                        echo 
    "</form>";
                        echo 
    "<br><br>";
                    }
                    if (
    trim($line) != "" &&  !(preg_match'/^[^#\s]/'$line )))
                    {
                        echo 
    $line;
                        echo 
    "<form action=apagar.php method=post>";
                        echo 
    "<input type='hidden' name='apaga' size='20' value=$a>";
                        echo 
    "<input type='hidden' name='op' size='1' value=1>";
                        echo 
    "<input type=submit value=Desbloquear>";
                        echo 
    "</form>";
                        echo 
    "<br><br>";
                    }
                
    $a=$a+1;
                }
                echo 
    "</div>";
            }
    Boas
    A minha dúvida é o seguinte: como faço para separar a página de modo a ficar na esquerda o "insira o conteúdo", ao centro o if de Bloquear ... e á direita o if de Desbloquear.
    Esse script é apenas uma pequena amostra.

    Isto agora está assim:
    http://f.imagehost.org/0834/script.png
     
    Última edição pelo moderador: 6 de Março de 2009
  8. Totoro

    Totoro Folding Member

    Se percebi bem queres dividir a página em 3 colunas, certo?

    Código:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body{ margin:0}
    .wrap{ width:600px; height:200px}
    .esq{ width:200px; height:200px; float:left}
    .centro{ width:200px; height:200px; float:left}
    .dir{ width:200px; height:200px; float:left}
    
    -->
    </style>
    </head>
    
    <body>
    
    <div class="esq">insira o conteúdo</div>
    <div class="centro">bloquear</div>
    <div class="dir">desbloquear</div>
    
    </body>
    </html>
    
    
     
  9. ricardoaux

    ricardoaux Power Member

    há um problema, é que tenho de dividir o que está dentro do foreach:
    Código:
    [COLOR=#000000][COLOR=#007700]            foreach ([/COLOR][COLOR=#0000bb]$data [/COLOR][COLOR=#007700]as [/COLOR][COLOR=#0000bb]$line[/COLOR][COLOR=#007700])
                {    
                    if([/COLOR][COLOR=#0000bb]trim[/COLOR][COLOR=#007700]([/COLOR][COLOR=#0000bb]$line[/COLOR][COLOR=#007700]) != [/COLOR][COLOR=#dd0000]"" [/COLOR][COLOR=#007700]&&  ([/COLOR][COLOR=#0000bb]preg_match[/COLOR][COLOR=#007700]( [/COLOR][COLOR=#dd0000]'/^[^#\s]/'[/COLOR][COLOR=#007700], [/COLOR][COLOR=#0000bb]$line [/COLOR][COLOR=#007700])))
                    {
                        echo [/COLOR][COLOR=#0000bb]$line[/COLOR][COLOR=#007700];
                        echo [/COLOR][COLOR=#dd0000]"<form action=apagar.php method=post>"[/COLOR][COLOR=#007700];
                        echo [/COLOR][COLOR=#dd0000]"<input type='hidden' name='apaga' size='20' value=$a>"[/COLOR][COLOR=#007700];
                        echo [/COLOR][COLOR=#dd0000]"<input type='hidden' name='op' size='1' value=1>"[/COLOR][COLOR=#007700];
                        echo [/COLOR][COLOR=#dd0000]"<input type=submit value=Bloquear>"[/COLOR][COLOR=#007700];
                        echo [/COLOR][COLOR=#dd0000]"</form>"[/COLOR][COLOR=#007700];
                        echo [/COLOR][COLOR=#dd0000]"<br><br>"[/COLOR][COLOR=#007700];
                    }
    
    #DIVIDIR
    
                    if ([/COLOR][COLOR=#0000bb]trim[/COLOR][COLOR=#007700]([/COLOR][COLOR=#0000bb]$line[/COLOR][COLOR=#007700]) != [/COLOR][COLOR=#dd0000]"" [/COLOR][COLOR=#007700]&&  !([/COLOR][COLOR=#0000bb]preg_match[/COLOR][COLOR=#007700]( [/COLOR][COLOR=#dd0000]'/^[^#\s]/'[/COLOR][COLOR=#007700], [/COLOR][COLOR=#0000bb]$line [/COLOR][COLOR=#007700])))
                    {
                        echo [/COLOR][COLOR=#0000bb]$line[/COLOR][COLOR=#007700];
                        echo [/COLOR][COLOR=#dd0000]"<form action=apagar.php method=post>"[/COLOR][COLOR=#007700];
                        echo [/COLOR][COLOR=#dd0000]"<input type='hidden' name='apaga' size='20' value=$a>"[/COLOR][COLOR=#007700];
                        echo [/COLOR][COLOR=#dd0000]"<input type='hidden' name='op' size='1' value=1>"[/COLOR][COLOR=#007700];
                        echo [/COLOR][COLOR=#dd0000]"<input type=submit value=Desbloquear>"[/COLOR][COLOR=#007700];
                        echo [/COLOR][COLOR=#dd0000]"</form>"[/COLOR][COLOR=#007700];
                        echo [/COLOR][COLOR=#dd0000]"<br><br>"[/COLOR][COLOR=#007700];
                    }
                [/COLOR][COLOR=#0000bb]$a[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#0000bb]$a[/COLOR][COLOR=#007700]+[/COLOR][COLOR=#0000bb]1[/COLOR][COLOR=#007700];
                }[/COLOR][/COLOR]
     
    Com tabelas não é possível, então como faço????
     
    Última edição pelo moderador: 9 de Março de 2009
  10. ricardoaux

    ricardoaux Power Member

    tou msm a precisar de ajuda!
     
  11. ricardoaux

    ricardoaux Power Member

    ...
     

Partilhar esta Página