[SOLUCIONADO] como solucionar este problema???

bryanzark01 · #1 (**permalink**) 11/11/2013, 13:40

amigos esque tengo un problema con mi codigo, cuando esta fuera del <?php ?> se visualiza asi

[URL="http://www.subirimagenes.net/i/131111081035381341.png"]http://www.subirimagenes.net/i/131111081035381341.png[/URL]

pero cuando esta dentro del codigo <?php ?> se visualiza de esta otra manera

[URL="http://www.subirimagenes.net/i/131111081035843475.png"]http://www.subirimagenes.net/i/131111081035843475.png[/URL]

y lo que ocupo es que aparezca igual a la segunda imagen, pero con los echo y asi

este es el codigo php

Código PHP:

  
<?php

echo"<div class=horizontalaccordion>";

echo "<ul>";

echo "<li>";

echo "<h3>Heading 1</h3>";

echo "<div>Content For Panel 1.</div>";

echo "</li>";

echo "</ul>";

echo "</div>";

?>

y aca les dejo todo el codigo completo

Código HTML:

<html>
<head>
<title> EJEMPLO DE COMENTARIOS </title>
    <link rel="stylesheet" type="text/css" href="estilo.css"/>
  <link rel="stylesheet" href="horizontalaccordion.css" type="text/css" />

</head>

<body bgcolor="gray">
<?php
    include "config.php";
?>
<img src="TEU.jpg" width="900" height="200"/>
<?php
echo"<div class=horizontalaccordion>";
echo "<ul>";
echo "<li>";
echo "<h3>Heading 1</h3>";
echo "<div>Content For Panel 1.</div>";
echo "</li>";
echo "</ul>";
echo "</div>";
?>
</body>

</html>

y el codigo css

Código:

.horizontalaccordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
   	height: 300px;
}

.horizontalaccordion>ul>li {
    display:block;
	overflow: hidden;
    float:left;
    margin: 0;
    padding: 0;
    list-style:none;
	width:40px;
	height: 300px;

    /* Decorative CSS */
    background:#f0f0f0;

    /* CSS3 Transitions */
    transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
}

.horizontalaccordion>ul>li>h3 {
    display:block;
    float:left;
    margin: 0;
    padding:10px;
    height:19px;
    width:280px;

    /* Decorative CSS */
    border-left:#f0f0f0 1px solid;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration:none;
    text-transform:uppercase;
    color: #000;
    background:#cccccc;

    /* CSS3 Transform Rotate & Translate */
    white-space:nowrap;
    -moz-transform: rotate(90.0deg) translate(-40px,0px);  /* FF3.5+ */
    -moz-transform-origin: 0 100%;
    -o-transform: rotate(90.0deg) translate(-40px,0px);  /* Opera 10.5 */
    -o-transform-origin: 0 100%;
    -webkit-transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
    -webkit-transform-origin: 0 100%;
    transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
    transform-origin: 0 100%;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
            progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);  /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
                "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE8 */

    /* CSS3 Gradient Effect */
    background: -moz-linear-gradient( top, #999999, #cccccc);
    background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
}

.horizontalaccordion>ul>li>div {
    display:none;
    float:left;
	overflow: auto;
    position:relative;
    top:-40px;
    left:40px;
    *top:0px;       /* IE7 Hack */
    *left:0px;      /* IE7 Hack */
    margin:0;
    width:320px;
    height:280px;
    padding:10px;
}

.horizontalaccordion>ul>li:hover {
    overflow: hidden;
	width: 380px;
}

.horizontalaccordion:hover>ul>li:hover>div {
    display:block;
}

.horizontalaccordion:hover>ul>li:hover>h3 {
    /* Decorative CSS */
    color:#fff;
    background:#000000;

    /* CSS3 Gradient Effect */
    background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
    background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
            progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
                "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";   /* IE 8 */
}

.horizontalaccordion>ul>li>h3:hover {
    cursor:pointer;
}

tquezada · #2 (**permalink**) 11/11/2013, 13:53

obviamente se va ver como en la primera imagen fuera del <?php?> por que los echo son propios del lenguaje php y fuera de las etiquetas seria html puro y no las interpreta,
para poder ocuparlas fueras del codigo <?php?> debes sacar los echo, los "" y los;

bryanzark01 · #3 (**permalink**) 11/11/2013, 13:58

Cita:

Iniciado por tquezada

obviamente se va ver como en la primera imagen fuera del <?php?> por que los echo son propios del lenguaje php y fuera de las etiquetas seria html puro y no las interpreta,
para poder ocuparlas fueras del codigo <?php?> debes sacar los echo, los "" y los;

No entiendes, esque quiero que se vea como la segunda imagen, pero utilizando los echo

tquezada · #4 (**permalink**) 11/11/2013, 14:09

revise tu código tal cual esta y esta bien no entiendo que quieres hacer?

bryanzark01 · #5 (**permalink**) 11/11/2013, 14:13

Cita:

Iniciado por tquezada

revise tu código tal cual esta y esta bien no entiendo que quieres hacer?

Es que digamos, cuando ingreso el codigo html, dentro de los echo, de php , cuando actualizo la pagina, me aparece parte del codigo, en vez de aparecerme la interfaz grafica, como si algo le faltara

andresdzphp · #6 (**permalink**) 11/11/2013, 14:16

No necesitas imprimir este código HTML con PHP y si "lo necesitaras", aquí te faltan las comillas en class:

Código PHP:

Ver originalecho "<div class=\"horizontalaccordion\">";

o

Código PHP:

Ver originalecho '<div class="horizontalaccordion">';

tquezada · #7 (**permalink**) 11/11/2013, 14:22

sin las comillas también funca

andresdzphp · #8 (**permalink**) 11/11/2013, 14:22

Cita:

Iniciado por tquezada

sin las comillas también funca

Que funcione no quiere decir que sea correcto y que no traiga problemas.

tquezada · #9 (**permalink**) 11/11/2013, 14:26

Cita:

Iniciado por andresdzphp

Que funcione no quiere decir que sea correcto y que no traiga problemas.

y cuales son los problemas que pueden ocurrir que no se cuales pueden ser

Gracias

andresdzphp · #10 (**permalink**) 11/11/2013, 14:58

No tendrás un XHTML válido y si no usas comillas no podrás usar espacios ni (> " ' =) en el atributo. Prueba escribiendo algo como "Esto es una prueba", en el atributo value de un input de tipo text.