Problemilla con CSS

hokul · #1 (**permalink**) 21/11/2007, 11:00

Buenass, tengo un problemilla con el css.

Os comento me baje una plantilla html con css y en el ordenador me va perfecta, le doy a vista previa en el iexplorer o firefox y me va muy bien, pero la he subido al servidor gratuito de usuarios.lycos y se me ve desencuadrada, no se si puede ser xq el servidor tiene publicidad y me modifica la web o algo, pero me sale la web en vez de centrada en una esquina y todos sus componentes totalmente movidos.
Alguien sabe xq puede ser y si tiene solución?

Muchisimas gracias

bootexe · #2 (**permalink**) 21/11/2007, 11:16

posiblemente sea lycos
¿cual es la url?

Perovic · #3 (**permalink**) 21/11/2007, 11:36

Yo también voto porque sea Lycos con la publicidad que te meten, o cualquier cosa que te metan en el código y te modifiquen lo que tienes.

hokul · #4 (**permalink**) 21/11/2007, 12:27

mi url momentanea es esta ya que estoy probando cosillas.

http://usuarios.lycos.es/laotrahuelva/index3.html

igarcia66 · #5 (**permalink**) 21/11/2007, 12:32

tengo un problema con esta web... en internet explorer si me la muestra bien pero en Mozilla Firefoxno me muesta el contenido.... ayuda.

http://www.clickssolutions.com/

archivos:
index.php
stilo.css

DragonX · #6 (**permalink**) 21/11/2007, 12:51

FireFox no soporta este tipo de comentarios

Cita:

probá con estos comentarios

Cita:

hokul · #7 (**permalink**) 21/11/2007, 13:02

Cita:

Iniciado por bootexe

posiblemente sea lycos
¿cual es la url?

http://usuarios.lycos.es/laotrahuelva/index3.html

no se alguien m puede decir si es x lycos q la css no funciona?

gracias

bootexe · #8 (**permalink**) 21/11/2007, 16:24

El problema esta en la imagen de la cabecera es que no esta dentro de un div sino dentro del body alineado al tope y lycos añade un div por lo que esta la monta encima, modifica el siguiente código en el css para que quede de la siguiente forma:

en body:

Código:

body {
	margin: 0;
	padding: 0;
	background: #314D6B;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #A0A0A0;
}

y antes de #header añade esto:

Código:

#wrapper {
	width: 819px;
	background: url(images/img01.jpg) no-repeat center top;
	margin: 0 auto;
}

Pruebas y nos lo cuentas

esta corrección la hice al vuelo con Firefox + Web Developer
No lo he testeado en otros navegadores.

Saludos

bootexe · #9 (**permalink**) 21/11/2007, 16:29

Ahh si, pues otro detalle, lo vi bien en firefox antes de editarlo, como que mi Firefox bloquea la publicidad (por eso se veia bien), pero como coloqué la imagen dentro de wrapper debo pensar que esta bien

hokul · #10 (**permalink**) 22/11/2007, 08:26

No se donde poner el codigo xDD, t agrego al messenger y t paso el codigo y m ayudas??

JavierB · #11 (**permalink**) 22/11/2007, 09:18

Hola hokul

Igual que has puesto una respuesta, puedes poner el código. Encierralo con las etiquetas [ code] y [ /code] (sin espacios) para que se lea mejor.

La ayuda se pide y se da en el foro, no en privado.

Por cierto, esto no es el messenger, no abrevies tus mensajes y se entenderán mejor.

Saludos,

hokul · #12 (**permalink**) 22/11/2007, 09:59

Este es el codigo de mi web xDD

Cita:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>..::La Otra Huelva..:: La web más completa sobre Huelva, desde un punto diferente</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1> </h1>
</div>

<div id="menu">
<h2>Main Menu</h2>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">ARTÍCULOS</a></li>
<li><a href="#">mapa web </a></li>
<li><a href="#">historia</a></li>
<li><a href="http://www.usuarios.lycos.es/laotrahuelva/foros/">foro´s</a></li>
<li><a href="#">blogs</a></li>
<li><a href="#">enlaces</a></li>
</ul>
</div>

<div id="page">
<div id="content">
<h1 class="title"><span>Bienvenidos a The Old Onuba!</span></h1>
<p><span class="Estilo11"><strong>The Old Onuba </strong> es la página más completa sobre la maravillosa ciudad de Huelva, con un contenido variado y actualizado podrás encontrar; su historia, la historia de sus munumentos, leyendas, artículos de actualidad, sobre el turismo, Videos, Blogs.... </span><br />
<br />
<span class="Estilo8">PARA SACARLE EL MAYOR PARTIDO A LA WEB--)</span> VISITA <em><strong>EL MAPA WEB</strong> </em><table width="373" height="25" border="0">
<tr>
<th width="367" bgcolor="#000000" scope="col"><span class="Estilo9">HUELVA NOTICIAS DIARIAS </span></th>
</tr>
</table>
<div style="border-style:solid; border-width:0; border-color:#000066;width:330"><iframe name="ianContenido_8725" frameborder="0" width="330" height="300" src="http://www.abastodenoticias.com/abastodenoticias.ventana.asp?pb=4629&cn=8725"></iframe></div><div style="width:330"><a href="http://www.abastodenoticias.com/" style="background-color:#669999;color:#CCFFCC;font-size:8pt">abastodenoticias.com, Titulares a medida para blogs y páginas web</a></div>
</p>
<div class="boxed">
<h2 class="title">Actualizaciones importantes y noticias </h2>
<div class="content">
<p>Todas las noticias y actualizaciones de la web<br />
<br />
</p>
<h3>Historia</h3>
<p>La historia de Huelva al completo :</p>
<blockquote>
<p>“lallalalal<br />
LLL<br />
Ldfff<br />
L<br />
LLLLLLLLLLLLLLLLLLLLLLLLLL
.”</p>
</blockquote>
</div>
</div>
</div>

<div id="sidebar">
<ul>
<li id="search">
<form id="searchform" method="get" action="">
<fieldset>
<legend>Search</legend>
<input id="searchfield" type="text" name="q" value="" />
<input id="searchsubmit" type="submit" value="Search" />
</fieldset>
</form>
</li>
<li id="submenu">
<h2>Menu</h2>
<ul>
<li><a href="#">Leyendas</a></li>
<li><a href="#">Premios LOHWeb </a></li>
<li><a href="#">Personajes Ilustres </a></li>
<li><a href="#">Turismo</a></li>
<li><a href="#">Gastronomía </a></li>
<li><a href="#">LOH Media y Descargas </a></li>
<li><a href="#">Colabora con nosotros </a></li>
</ul>
</li>
<li id="news">
<h2>actualizaciones</h2>
<ul>
<li>
<h3>25th May</h3>
<p><a href="#">Pellentesque quis elit non lectus gravida blandit…</a></p>
</li>
<li>
<h3>23rd May</h3>
<p><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing…</a></p>
</li>
<li>
<h3>21st May</h3>
<p><a href="#">Phasellus nec erat sit amet nibh pellentesque congue…</a></p>
</li>
<li>
<h3>17th May</h3>
<p><a href="#">Maecenas vitae orci vitae tellus feugiat eleifend…</a></p>
</li>
</ul>
</li>
</ul>
</div>

<div style="clear: both;"> </div>
</div>

<div id="footer">
<p id="legal">Copyright © 2007 <span class="Estilo17">La Otra Huelva</span> / <span class="Estilo14">Grupo</span> <span class="Estilo17">Redondo´s-SOFT</span>. All Rights Reserved. Designed by Alvaro R.R. </p>
<p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
</div>

</div>


<div style="font-size: 0.8em; text-align: center; margin-top: 1.0em; margin-bottom: 1.0em;">
Design downloaded from <a href="http://www.freewebtemplates.com/">Free Templates</a> - your source for free web templates
</div>
</body>
</html>

bootexe · #13 (**permalink**) 22/11/2007, 10:06

Allí nooo, el código que te di es para que modifiques el archivo default.css esto es la hoja de estilo

hokul · #14 (**permalink**) 22/11/2007, 10:43

jaja, estoy tonto xD.
Entonces el codigo defaul quedaría así??

Cita:

* {
margin-top: 0;
}

body {
margin: 0;
padding: 0;
background: #314D6B url(images/img01.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #A0A0A0;
}

h1, h2, h3 {
font-weight: normal;
color: #FFFFFF;
}

h1 { font-size: 197%; }
h2 { font-size: 167%; }
h3 { font-size: 100%; font-weight: bold; }

p, ul, ol {
font-size: 100%;
}

p {
}

ul {
}

ol {
}

blockquote {
}

a {
color: #7EBCFF;
}

a:hover {
text-decoration: none;
}

/* Header */
#wrapper {
width: 819px;
background: url(images/img01.jpg) no-repeat center top;
margin: 0 auto;
}
#header {
width: 680px;
height: 110px;
margin: 0 auto;
}

#header h1, #header p {
margin: 0;
font-weight: bold;
}

#header h1 {
padding: 30px 0 0 20px;
text-transform: lowercase;
font-size: 229%;
}

#header p {
margin: -5px 0 0 0;
padding: 0 0 0 20px;
text-transform: uppercase;
font-size: 85%;
}

#header a {
text-decoration: none;
color: #FFFFFF;
}

/* Menu */

#menu {
width: 680px;
height: 51px;
margin: 0 auto;
background: url(images/img02.jpg) no-repeat;
}

#menu h2 {
display: none;
}

#menu ul {
margin: 0;
padding: 20px 0 0 20px;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
height: 22px;
padding: 8px 20px 0 20px;
border-right: 1px solid #2A2C2F;
text-transform: lowercase;
text-decoration: none;
text-align: center;
font-size: 11px;
color: #DFE8F2;
}

#menu a:hover, #menu .active a {
background-color: #000000;
}

/* Page */

#page {
width: 680px;
margin: 0 auto;
background: #0F1720 url(images/img03.gif) repeat-y;
}

/* Content */

#content {
float: left;
width: 375px;
padding: 20px 25px 0 40px;
background: url(images/img04.jpg) no-repeat;
}

.boxed {
background: #121B23;
border: 1px dotted #000000;
}

.boxed .title {
margin: 0;
padding: 5px 20px;
background: #000000;
text-transform: uppercase;
font-size: 100%;
font-weight: bold;
}

.boxed .content {
padding: 20px;
}

/* Sidebar */

#sidebar {
float: right;
width: 220px;
padding: 20px 20px 0 0;
background: url(images/img05.jpg) no-repeat;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
}

#sidebar li ul {
padding: 20px;
}

#sidebar li li {
margin: 0;
padding: 5px 0;
background: url(images/img06.gif) repeat-x left bottom;
}

#sidebar h2 {
margin: 0;
padding: 10px;
background: #000000;
border-top: 1px solid #23282E;
border-bottom: 1px solid #23282E;
text-transform: lowercase;
font-size: 100%;
font-weight: bold;
color: #DFE8F2;
}

#sidebar h3 {
margin: 0;
}

#sidebar p {
margin: 0;
}

#sidebar a {
text-decoration: none;
}

#sidebar a:hover {
text-decoration: underline;
}

/* Search */

#search {
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search legend {
display: none;
}

#search input {
float: right;
margin-bottom: 5px;
background: #5A83AE;
border: 1px solid #000000;
text-transform: lowercase;
font: bold 100% Arial, Helvetica, sans-serif;
color: #000000;
}

#searchform {
margin: 0;
padding: 10px 20px 20px 20px;
}

#searchfield {
width: 165px;
padding: 2px 5px;
}

#searchsubmit {
}

/* Submenu */

#submenu a {
padding-left: 15px;
background: url(images/img07.gif) no-repeat left center;
}

/* Footer */

#footer {
width: 680px;
height: 100px;
margin: 0 auto;
padding: 30px 0 0 0;
background: url(images/img08.jpg) no-repeat;
}

#footer p {
margin: 0;
padding: 0 0 0 40px;
font-size: 77%;
color: #0F1720;
}

#footer a {
color: #0F1720;
}

hokul · #15 (**permalink**) 22/11/2007, 10:47

Lo acabo de subir al server y se me sigue viendo mal, aunq algo mejor que antes.

http://usuarios.lycos.es/laotrahuelva/index3.html

bootexe · #16 (**permalink**) 22/11/2007, 10:51

Cambia

Código:

body {
margin: 0;
padding: 0;
background: #314D6B url(images/img01.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #A0A0A0;
}

por:

Código:

body {
margin: 0;
padding: 0;
background-color: #314D6B;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #A0A0A0;
}

hokul · #17 (**permalink**) 22/11/2007, 11:16

Ya lo he cambiado y sigue viendose igual

xD
No se yo estoy buscando ya un hosting de pago cn el q supongo que no pasara esto no??, pero hasta despues de navidade no lo tendre asi que de momento me tendría q aguanta con uno gratuito, haber si podemos arreglarlo

.

bootexe · #18 (**permalink**) 22/11/2007, 11:55

Lo veo bien en Opera y Firefox, lo malo se ve en IE,
prueba añadiendo esta línea en wrapper en tu código css:

Código:

#wrapper {
text-align: left;
width: 819px;
background: url(images/img01.jpg) no-repeat center top;
margin: 0 auto;
}

Saludos :-p

hokul · #19 (**permalink**) 22/11/2007, 12:11

ya lo he cambiado, pero sigue viendose mal.
Entoces nada mas que se ve mal en el iexplorer?

bootexe · #20 (**permalink**) 22/11/2007, 12:27

Será porque IE no bloquea publicidad y porque lycos añade mucho codigo por donde quiere, necesitas un hosting sin tanta publicidad obtrusiva, malogra el diseño

hokul · #21 (**permalink**) 22/11/2007, 12:32

pues la verdad es que si, pero el unico gratuito que me funcionaba la base de datos para el foro xD.

Por cierto cambiando un poquito..
Me podrías aconsejar algun hosting de pago rapidito y barato, yo no espero llegar a tener más de 100 visitas diarias, auque ojala!

Porque me parece que dejare el foro puesto aqui, hasta que ponga el hosting y alli lanzo la web.

PD: seria muy trabajo poner menus despegables en mi menu de arriba como "http://www.clickssolutions.com/" o sino en el del lateral.

bootexe · #22 (**permalink**) 22/11/2007, 13:12

Lee aqui: ¿Busca hosting?

Saludos.

hokul · #23 (**permalink**) 22/11/2007, 15:55

Oye otra preguntita xDD

En la plantilla, podría modificarla para que fuera un poco mas ancha, para poder escribir más sin perder los valores??, e incluso el menu de la derecha que aparezca más estrecho?