como alineo mi fieldset???

bryanzark01 · #1 (**permalink**) 01/11/2013, 16:46

tengo un problema, estoy haciendo un sistema de comentarios, y quiero alinear mis fieldsets , uno a la derecha y otro a la izquierda, segun vayan comentando tipo whatsapp x decirlo de algun modo, solo que lo he intentado de varias formas y no lo logro conseguir, alguien podria ser tan amable ayudarme en este enigma??, les dejo mi codigo...

ah bueno y el error que tengo, esque a la hora de ingresar un nuevo comentario, se me alinean todos los fieldset a la izquierda o todos a la derecha =/
index.php

Código PHP:

  
<?php

    include "config.php";

?>

<html>

    <head>

    <style>

        .estiloarea {

           resize: none;

            border-top-right-radius: 15px;

            background-color: #00CC54;

        } 

        .estiloarea1 {

            

            resize: none;

            border-top-right-radius: 15px;

            border-top-left-radius: 15px;

            border-bottom-left-radius: 15px;

            border-bottom-right-radius: 15px;

        }

        .redondear{

            height: 30px;

            border-bottom-color: blue;

            border-top-color:blue;

            border-right-color:blue;

            border-left-color: blue;

            border-top-right-radius: 7px;

            border-top-left-radius: 7px;

            border-bottom-left-radius: 7px;

            border-bottom-right-radius: 7px;             

            

        }

        .fie{

            height: 10%;

            width: 25%;

            margin: 0 2px;

        }

        .fie2{

            height: 10%;

            width: 25%;

            margin: 0 70px;

        }

    </style>

    </head>

    <title> EJEMPLO DE COMENTARIOS </title>

    <body bgcolor="black">

    <img src="TEU.jpg" width="800" height="200"/>

    <br />

    <br />

    

    <?php

        

        $select = "SELECT * FROM comentarios ORDER BY id DESC";

        $query = mysql_query($select,$conex);

        $rows = mysql_num_rows($query);

        $a = $rows;

        if($rows > 0)

        {

            if(($a % 2)== 0)

            {

                while($row = mysql_fetch_assoc($query))

                {   echo "<fieldset class=fie id=col ><legend><font color= #006654> <strong>" . $row['user'] . "</strong></font></legend>";

                    echo "<strong><textarea class=estiloarea disabled=true>" . nl2br($row['comentario']) . "</textarea></strong><br/><br/>";

                    echo "</fieldset>";

                    echo "<br />";

                }

            }

            else {

                

                while($row = mysql_fetch_assoc($query))

                {   echo "<fieldset class=fie2 ><legend><font color= #006654> <strong>" . $row['user'] . "</strong></font></legend>";

                    echo "<strong><textarea class=estiloarea disabled=true>" . nl2br($row['comentario']) . "</textarea></strong><br/><br/>";

                    echo "</fieldset>";

                    echo "<br />";

                }

                

            }

            

        }else{

            

            echo " ";

        }

    ?>

    <br /><br /><br />

    <form method="POST" action="proceso.php">

        

       <font color="white">Usuario:</font>  <input type="text" class="redondear" placeholder="Nombre"  name="user" /> <br /> <br />

       <font color="white"> Comentario:</font> <br />

        <textarea class="estiloarea1" rows="20" cols="100" placeholder="Inserte su comentario" name="comentario"></textarea><br />

        <button type="submit" name="Enviar"> Enviar Comentario</button>

        <input type="text" value="<?php echo($rows)?>" />

    </form>

    </body>

</html>

config.php

Código PHP:

  <?php

    

    $conex = mysql_connect("localhost","Bryan","escorpio01");

    $db = mysql_select_db("ejemploc",$conex);

 
?>

proceso.php

Código PHP:

  
<?php

    include "config.php";

    if(isset($_POST['Enviar']))

        {

            $user = $_POST['user'];

            $comentario = $_POST['comentario'];

            $insert = "INSERT INTO comentarios (user,comentario)";

            $insert.= "VALUES ('" . $user . "','" . $comentario . "')";

            mysql_query($insert,$conex); 

            header("location: index.php");  

            

        }else{

            

            echo "Error!";

        }

?>

C2am · #2 (**permalink**) 01/11/2013, 18:47

Primero, como este es el foro de css, pues lo que interesa es el CSS, y el HTML, no el php que genera el html, y mucho menos la conexión a la base de datos.

Dicho lo anterior, lo que quieres se puede lograr con css, sin php.
Por ejemplo:

Código CSS:

Ver original.fie{ 
            height: 10%; 
            width: 25%; 
            margin: 0 2px; 
          } 
        .fie:nth-of-type(2n+1) { float: left;clear:right; }
        .fie:nth-of-type(2n) { float: right;clear:left; }

Info a consultar: http://librosweb.es/css_avanzado/cap..._de_css_3.html

Aquí te dejo el ejemplo funcionando:
http://jsfiddle.net/c2am/5h2pC/25/embedded/result/

NOTA: Esto no considera quién deja el mensaje, simplemente ubica los impares a la izquierda y los pares a la derecha.
Si tu idea es que sea tipo whats, sí tendrías que usar php para colocar el estilo correspondiente a cada usuario.

Saludos

EDITO: Para mostrar la sugerencia de pzin de usar nth-of-type(odd) y nth-of-type(even) en vez de la expresión matemática 2n+1 y 2n.