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.