PHP+CSS. Cómo aplicar estilos a una página dinámica
Buenas gente,
Estoy rediseñando mi portafolio, y he decido utilizar php para el contenido dinámico y css para la maquetacion. el "problema" es que no se implementar correctamente las css en el documento php. el caso es que en la etiqueta script hago la referencia al css ( es un archivo externo), y se me aplican los estilos "generales", backgroun del body, los estilos para los enlaces, la fuente...
sin embargo, no se como asignar estos estilos a un div que debe contener informacion extraida de la base de datos mediante un bucle "while". Alguien sabe donde podia encontrar algunos ejemplos de este tipo? a que se puede deber que mis estilos no se implementen correctamente en las div?
muchas gracias de antemano
ozke
No entiendo muy bien la duda.
Yo hago primero el html maquetado... una vez chuta solo substituyo los textos/imagenes o lo q sea d ejemplo por los buenos... en lugar de <code><div>ejemplo</div></code> pongo <code><div><? echo $row["nombre"]; ?></div></code>
Salvo si es algo mu raro o esta lleno de variables q lo meto en un echo o lo q se tercie. :? El HTML previo t va bien?
funkplastic
mmm, quizas no me estoy explicando demasiado bien, y mi falta de experiencia en el mundillo web hace que me explique todavia peor:) el HTML ( si te refieres a eso) se maqueta correctamente. el problema es cuando intento utilizar los div, que pienso que es posiblemente por errores de sintaxis ya que todavía no domino demasiado la programación web. Me sería de mucha utilidad ver una pagina php que haga referencia a una css, porque me aclariaria seguramente algunas cosas.
Si alguien tuviera algo similar de ejemplo le estaria eternamente agradecido!!. cuando salga del curro posteare la pagina para que quien quiera le eche un vistazo y me pueda echar una mano.
graciassss
zigotica
buen, por lo visto tienes un buen lio, a ver si me se explicar :)
php es un lenguaje de servidor, que ejecuta unas ordenes y devuelve html. es decir, tu ejecutas php y lo que ves en el navegador es el html resultante. mira el codigo fuente de la pagina a ver si encuentras el error, o pasanos un enlace
ozke
Eso eso! Enlace!
Yo creo q lo que quiere es algo con javascript, rollo eventos cliente y no algo d server.
helenp
no sé ,
según te entiendo es que tienes problemas a asignar la clase css dentro del script php,
si es eso igualmente necesitas usar las barras de escape \
esto es un ejemplo de clases css dentro de php:
echo "<p class=\"resulttext\">Available: $availability<br>Price in euros: <span class=\"red\">$half_round</span><br>Nights: <span class=\"red\">$dias</span></p>";
Igualmente es otro problema que tienes
zigotica
si fuera eso le saltaria un error
funkplastic
Buenas,
estoy probando y creo que es lo que dice helena. a ver si dejo el php mas o menos listo para que le echeis un vistazo y me contais si es que no lo doy resuelto ( soy muy cabezon:)
entre hoy y mañana os cuento si al final he sido capaz o es que sigo sin enterarme de ná!!
funkplastic
Efectivamente eraera lo que decia helena, sin embargo me han ido saliendo algunos problemas a medida que he ido programando.
Bueno gente, ahi os mando un "regalito". Un ejemplo seguramente de como no se debe programar, pero es mi prime ra inmersion medianamente seria en la programac ion. vamos a considerarlo como una experimentación:)
he intentado ponerlo todo lo mas claro posible aunque no se si lo he conseguido. y bueno, despues de estas dudas vendran seguramente algunas mas.
es una pagina muy sencilla ( sera mi portafolio). la idea es ir poniendo en un bloque de noticias las novedades que voy insertando y que cliceando en el link "ver" lleve a la pagina con informacion completa del video.en la portada aparecera junto a las "news" una cover que sera la imagen del ultimo video realizado.
Bueno, a ver si algun guru por ahi se anima. seguro que se entretiene un rato:)
gracias de antemano a todos los valientes!!!
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><head>
<script type="text/javascript" src="niftycube.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>_________________FUNKPLASTIC MOTION GRAPHICS /////</title>
<style type="text/css">
body {
background-image: url(fondo1.gif);
}
</style>
<script language="JavaScript" type="text/JavaScript">
<link href="estilosweb.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="estilosWeb.css" title="linksSitio" media="print"/>
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<link href="estilosweb.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="estilosWeb.css" title="linksSitio" media="print" />
<!--<link href="../../../sitio/ejemplo.css" rel="stylesheet" type="text/css">-->
</head>
<?php
include ("includes/config.php");
include ("includes/funciones.php");
?>
<?
//nos conectamos a mysql
$cnx = conectar ();
//consulta.
$sql = "SELECT id,descripcion FROM directorio ORDER BY id ASC";
$res= mysql_query($sql) or die (mysql_error());
echo "<div id=\"contenedorfecha\">";
echo "</div>";
echo "<div id=\"contenedorLayout\">";
echo "<div id=\"contenedorBody\">";
echo "<div id=\"contenedorCover\">";
echo "<img src=\"imagenes\cover.jpg\">";
echo "</img>";
echo "</div>";
if( mysql_num_rows($res) >0){
//impresión de los datos.
echo "<div id=\"contenedorTxt\">";
while (list($id,$descripcion) = mysql_fetch_array($res)) {
echo "<div class=\"TrianguloTxt\">";
echo "</div>";
echo "<div class=\"separadorSupTxt\">";
echo "</div>";
echo $id.",";
echo $descripcion.",";
echo "<a href='ver.php?id=$id'>ver</a>";
echo "<br>";
echo "<br>";
}
echo "</div>";
}else{
echo "no se obtuvieron resultados";
}
echo "</div>";
echo "</div>";
echo "</div>";
mysql_close($cnx);
?>
<!--
</table>
-->
</code>
<code>
#contenedorfecha{position:absolute; width:60%; height: auto; left: 20%; top: 2%; background-color: #55450D;
}
/*contenedor principal*/
#contenedorLayout{position:absolute; width:60%; height:100%; top:3%; background-color: #55450D; border: 1px none #000000;margin:auto;
margin-top:2%;left: 20%;right:20%;padding-bottom:2px;
}
/*contenedor de noticias y cover*/
#contenedorBody{position:relative; width:94%; height:100%; left: 3%;right:3%; border: 1px #000000;background-color:#bbd4b7;margin-top:2.0%;margin-bottom:10%;
background-image: url(degradadoFondo.gif);padding-bottom:2%;
}
/*este separador (la linea rosa) deberia llegar al mismo borde tanto a izquierda como a derecha en la capa contenedorTXT pero sigue heredando la propiedad padding pese haber probado con la etiqueta SPAN (quizas la utilizo incorrectamente.
lo mismo debería pasar con .trianguloTxt. Pongo como referncia captura2.jpg*/
.separadorSupTxt{
margin-top:0px;
margin-bottom:5px;
background-image: url(separadorSupTxt.gif);
width:100%; height:100%;position:relative;
background-repeat: no-repeat;
padding-top:2px;
padding-bottom:2px;
}
.TrianguloTxt{
margin-top:0px;
margin-bottom:5px;
background-image: url(triangulotxt.gif);
width:100%; height:100%;position:absolute;
background-repeat: no-repeat;
padding-top:0px;
padding-bottom:2px;
}
#contenedorTxt{
position:relative; width:93%; height: 100%; left: 1.5%;right:1.5%; background-color:#f6eebb; border: 1px none #000000;
margin-top:3%;
margin-bottom:0%;
margin-right:0%;
margin-left:0%;
font-size: 10px;
font-family: Georgia, verdana;
padding-left: 2%;
padding-right: 2%;
padding-top:0px;
padding-bottom:3px;
background-attachment: fixed;
background-repeat: repeat;
background-image: url(background2.gif) ;
border-top: 7px rgb(107, 118, 61) solid;
}
/* el cover deberia tener el mismo margen a izquierda y derecha independientemente del tamaño de la imagen. respeta el margen de la izquierda pero se sale en el margen derecha.pongo como referencia captura1.jpg*/
#contenedorCover{
position:relative;width:100%;height:100%;left:1.5%;right:1.5%;
margin-top:10%;
margin-bottom:2%;
margin-right:0%;
margin-left:0%;
padding-top:0px;
padding-bottom:3px;
overflow:hidden ;
}
a:link {color: #c23595;
background-color: #ede509;
text-decoration: none;
}
a{text-decoration:none;color: #c23595;}
a:visited{color: #c23595;
background-color: #ede509;
text-decoration: none;
}
a:hover {color: #c23595;
text-decoration: line-through ;}
.fecha{
font-family: Georgia, verdana;
color: #b6509c;
text-align: right;
font-weight: bold;
margin-right: +2%;
margin-bottom:0.5%;
margin-top:0.5%;
font-size:12px;
text-decoration: line-through;
border: none;}
</code>
Veo que no puedo adjuntar imagenes en el foro sino tengo servidor web.
hasta el mes q viene no contratare el host. si alguien quiere que le envie un zip con el codigo y las imagenes, no tengo problema.
bueno, a ver si con esto os vale gurus!
[/img][/url]