Problema con PHP y CSS

poetiya · #1 (**permalink**) 24/11/2009, 18:42

Hola buenas a todos!

Soy un principiante en esto de la programación web. Empecé ha hacer mi primera web en xhtml y css. Todo me fué bien después de algún problemilla de maquetación. La web quedó estupenda y bonita. Me dispuse a comenzar con la parte de programación del sitio web y me llevé una enorme sorpresa. Al incluir código PHP en mi web todo el diseño se descolocaba... Ya digo que soy medio nuevo en esto así que supuse que algo estaría haciendo mal. Entonces copie el contenido de mi "index.xhtml" íntegramente a un archivo nuevo que llame "index.php" y simplemente por el hecho de cambiarle la extensión, tooooodo el diseño se desbarata. ¿Es lógico esto? ¿Como puedo solucionarlo? Gracias a todos de antemano por su tiempo.

rompeguesos · #2 (**permalink**) 24/11/2009, 18:51

puedes indicar el enlace de la web para poder ver lo que sucede??

Perdon pero creo que no se te permite poner enlaces aun por ser nuevo si lo deseas enviame el enlace por privado o publica el codigo de tu pagina.

poetiya · #3 (**permalink**) 24/11/2009, 19:00

Cita:

Iniciado por rompeguesos

puedes indicar el enlace de la web para poder ver lo que sucede??

Aún no la tengo subida a ninguna parte, está en local ya que no pude hacer la parte de progrmación y esto me impide terminarla...

Aqui te dejo un par de capturas de pantalla para que veas lo que sucede.
Esta sería la web index.xhtml en img403 . imageshack . us/img403/5582/xhtml . png

Y esta sería la index.php en img94 . imageshack . us/img94/9867/phpx . png

((No me dejan publicar enlaces por que soy nuevo jajaja perdon por la molestia))

Recalco que copié y pegué el código y está revisado que no hay ni el más mínimo cambio en los dos archivos, y como css usan el mismo archivo directamente...

Gracias otra vez!!

rompeguesos · #4 (**permalink**) 24/11/2009, 19:05

ok publica tu codigo que pueda echarle un vistazo, de todas formas hasta mañna ya o lo vere porque me marcho, un saludo ;)

poetiya · #5 (**permalink**) 24/11/2009, 19:10

Esta sería la web en xhtml (la misma ke en el index.php solo que cambie la extension del archivo):

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "no me dejan poner enlaces">
<html xmlns="no me dejan poner enlaces" xml:lang="es">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="styles/stylesheet.css" />
		<title>Todos Somos NewBies</title>
 	</head>
<body>
<div id="preborde" /> 
<div id="borde"> 
	<div id="contenedor">
		<div id="cabecera" /><br /> 
	    <div id="navegador">
			<a href="#" class="enlaceNav">Portada</a>
            <span class="separadorNav">|</span>
			<a href="#" class="enlaceNav">Enlaces</a>
            <span class="separadorNav">|</span>
			<a href="#" class="enlaceNav">Contacto</a>
            <span class="separadorNav">|</span>
			<a href="#" class="enlaceNav">Acerca de</a>
		</div>
		<div id="cuerpo">
			<div id="tituloCuerpo"><h1>Lorem Ipsum</h1></div>
            <div id="contenidoCuerpo">
            <div id="textoCuerpo"><br />
			<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum ligula sed elit malesuada tristique. Mauris bibendum ligula et turpis faucibus ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed a lorem turpis. Morbi venenatis elementum purus, eu cursus magna tempus a. Aenean et eros eu nisi tempus feugiat. Phasellus ac dui felis, vitae placerat neque. Ut eget nibh risus. Nulla tristique mi in lectus facilisis a tristique diam eleifend. Vivamus sit amet justo varius ligula placerat tempor. Etiam euismod lorem sit amet felis hendrerit pharetra.
			</p>
			<p>
Sed mollis sagittis tortor id viverra. Duis eget convallis nunc. Maecenas feugiat felis et augue fermentum a gravida lorem eleifend. Nullam ac nisl mi, sed aliquet mauris. Duis purus libero, dapibus id tincidunt quis, blandit ac erat. Donec tempor varius dolor, sit amet luctus justo mattis et. Integer gravida eleifend purus vel elementum. Curabitur dictum euismod vulputate. Maecenas pulvinar convallis tellus, at porttitor erat tempus nec. Nunc convallis consequat sem ac semper. Sed vitae turpis sapien. Mauris urna dolor, dictum vitae fermentum non, dapibus sit amet lorem. 
			</p>
            <p>
Etiam sed pellentesque ligula. Aliquam varius mattis porttitor. Quisque porta, ligula in laoreet gravida, nibh felis tempor dui, quis porta purus ante id eros. Curabitur tortor velit, porta quis tincidunt non, eleifend in mauris. Sed sit amet risus neque, a sollicitudin augue. Fusce luctus commodo orci id cursus. Suspendisse quis quam eget neque sollicitudin dictum at in tellus. Maecenas id porta mauris. Vivamus aliquam metus eu ligula condimentum aliquet. Vestibulum et nibh a elit rutrum ornare. 
			</p><br />
            </div>
            </div>
            <div id="tituloCuerpo"><h1>Lorem Ipsum II </h1></div>
            <div id="contenidoCuerpo">
            <div id="textoCuerpo"><br />
			<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum ligula sed elit malesuada tristique. Mauris bibendum ligula et turpis faucibus ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed a lorem turpis. Morbi venenatis elementum purus, eu cursus magna tempus a. Aenean et eros eu nisi tempus feugiat. Phasellus ac dui felis, vitae placerat neque. Ut eget nibh risus. Nulla tristique mi in lectus facilisis a tristique diam eleifend. Vivamus sit amet justo varius ligula placerat tempor. Etiam euismod lorem sit amet felis hendrerit pharetra.
			</p>
			<p>
Sed mollis sagittis tortor id viverra. Duis eget convallis nunc. Maecenas feugiat felis et augue fermentum a gravida lorem eleifend. Nullam ac nisl mi, sed aliquet mauris. Duis purus libero, dapibus id tincidunt quis, blandit ac erat. Donec tempor varius dolor, sit amet luctus justo mattis et. Integer gravida eleifend purus vel elementum. Curabitur dictum euismod vulputate. Maecenas pulvinar convallis tellus, at porttitor erat tempus nec. Nunc convallis consequat sem ac semper. Sed vitae turpis sapien. Mauris urna dolor, dictum vitae fermentum non, dapibus sit amet lorem. 
			</p>
            <p>
Etiam sed pellentesque ligula. Aliquam varius mattis porttitor. Quisque porta, ligula in laoreet gravida, nibh felis tempor dui, quis porta purus ante id eros. Curabitur tortor velit, porta quis tincidunt non, eleifend in mauris. Sed sit amet risus neque, a sollicitudin augue. Fusce luctus commodo orci id cursus. Suspendisse quis quam eget neque sollicitudin dictum at in tellus. Maecenas id porta mauris. Vivamus aliquam metus eu ligula condimentum aliquet. Vestibulum et nibh a elit rutrum ornare. 
			</p><br />
            </div>
            </div>
			<div id="nevegadorInf">
				<a href="#">Volver</a> |
				<a href="#">Portada</a> |
				<a href="#">Mapa del sitio</a>
			</div> 
	    </div>
	    <div id="lateral">
           	<h2 class="titlat">Titulo de la caja</h2>
			<div id="idunico" class="cuerpolateral">
				<p>Contenido de la caja</p>
	        </div>
	        <h2 class="titlat">Buscar</h2>
			<div id="fbuscar" class="cuerpolateral">
				<form>
					<div id="campotexto">
	                	<input type="text" name="criterio" />
	                </div>
					<div id="botonbuscar">
	                	<input type="image" src="images/go.gif" width="25" height="15" />
	                </div>
					<div class="radio">
	                	<input type="radio" name="op" value="1" /> En TSNB
	                </div>
					<div class="radio">
	                	<input type="radio" name="op" value="2" /> En toda la Web
	                </div>
				</form>
			</div>
	        <h2 class="titlat">Tags</h2>
			<div id="otras" class="cuerpolateral">
				<ul>
					<li><a href="#">Python</a></li>
					<li><a href="#">Ruby</a></li>
					<li><a href="#">Ubuntu</a></li>
				</ul>
			</div>  
		</div>
	    <div id="pie">
			germaNRG © 2009 
        </div> 
	</div> 
</div>
<div id="postborde" />
</body>
</html>

poetiya · #6 (**permalink**) 24/11/2009, 19:13

Y esta sería la hoja de estilos, la web esta maquetada íntegramente con css sin tablas y usando xhtml estricto (nada de diseño dentro del archivo xhtml):

Código:

@charset "utf-8";
/* Fondo de la pagina detras del contenido */
body {
background: #C0D9D9 url(../images/fondo.gif) repeat;
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #666666;
margin: 20px 0px 20px 0px;
text-align: center;
}

/* Contenedor del contenido e imagen de cabecera */
#contenedor{
text-align: left;
width: 700px;
background-color: #ffffff;
margin: auto;
} 
#cabecera{
background-image: url(../images/header.png);
height: 106px;
width: 700px;
-moz-border-radius: 5px 5px;
} 

/* Estilo de la barra de navegador, sus enlaces y los separadores */
#navegador{
background: #F5F4C3 url(../images/navegador.png);
padding: 3px 10px 5px 10px;
font-weight: bold;
-moz-border-radius: 5px 5px;
} 
a.enlaceNav, a.enlaceNav:visited, a.enlaceNav:active, a.enlaceNav:focus, a.enlaceNav:link{
color: #FFFFFF;
}
a.enlaceNav:HOVER{
color: #0033FF; 
} 
.separadorNav{
color: #FFFFFF;
}

/* Texto Titulos y Enlaces de administracion */
a.enlaceAdm, a.enlaceAdm:visited, a.enlaceAdm:active, a.enlaceAdm:focus, a.enlaceAdm:link{
color: #0099FF;
}
a.enlaceAdm:hover{
color: #0033FF;
}
h1.admTitle{
color: #FF3300;
border: 2px double #FF3300;
}
label.admText{
color: #0000FF;
font-size: 12px;
}
/* Main donde iran todos los articulos */
#cuerpo{
width: 480px;
margin-left: 8px;
padding: 12px 0px 10px 0px;
background-color : #ffffff;
float: left;
} 
#contenidoCuerpo{
background: #FFFF99;
-moz-border-radius: 5px 5px;
}
#textoCuerpo{
text-align: justify;
margin-left: 20px;
margin-right: 20px;
}
h1{
font-size: 12pt;
}
#navegadorInf{
font-weight: bold;
}

/* Barra lateral y sus cajas de contenidos */
#lateral{
width: 200px;
float: right;
}
.titlat{
background-color: #68729E;
color: #ffffff;
font-size: 8pt;
text-transform: uppercase;
padding: 7px 3px 7px 8px;
font-weight: normal;
letter-spacing: 2px;
-moz-border-radius: 5px 5px;
}
.cuerpolateral{
background-color: #EBF2FE;
padding: 5px 4px 13px 10px;
border-left: 2px solid #68729E;
}
input{
font-size: 8pt;
}
#fbuscar form{
margin-bottom: 0px;
margin-top: 0px;
}
#campotexto{
float: left;
}
#campotexto input{
width: 100px;
}
#botonbuscar{
padding-top: 3px;
padding-left: 106px;
}
#botonbuscar input{
border: 0px none;
}
.radio{
clear: both;
}
#otras ul{
margin: 5px 10px 0px 0px;
padding: 0px 0px 0px 4px;
list-style: none;
}
#otras li{
padding-left: 14px;
background: transparent url(../images/bullet.gif) 0 2px no-repeat;
margin-bottom: 10px;
}

/* Pie de pagina */
#pie{
clear: both;
color: #cccccc;
text-align: right;
margin: 10px 10px 0px 10px;
padding-bottom: 10px;
}

/* Borde Preborde y Postborde se encargan de darle fondo blanco al contenido de la web */
#borde{
background: #FFFFFF;
text-align: left;
width: 730px;
margin: auto;
}
#postborde{
background: #FFFFFF;
width: 730px;
height: 15px;
margin: auto;
}
#preborde{
background: #FFFFFF;
width: 730px;
height: 15px;
margin: auto;
}