Desmoronamiento en TODOS los navegadores.

Kiwi · 26 Ago 2010, 00:57 · Solicitar retirada

q.q

Bueno, quize hacerle un nuevo diseño, más dinámico a:
http://www.i-kiwi.com.ar
Durante el proceso de creación, todo bien, el "Preview" (que según tengo entendido se asemeja a la visualización de Firefox) se veía perfectamente.
Pero en cuanto subo la página encuentro que en ningún navegador se ve como debería.
Problema 1: (creo que éste problema es mio y no de los navegadores) el borde no sigue todo el contenido, aunque debería.
El resto de los problemas los pueden ver en éstas imágenes:

HTML-KIT:
[contenido no disponible]

IE:
[contenido no disponible]

FF:
[contenido no disponible]

Si alguien me puede ayudar se lo agradecería un MONTÓN. =)

Códigos:

reset.css
/* Reset CSS */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>I-Kiwi</title>
<meta name="keywords"
content="kiwi, internet, buscador, inicio, link, google, facebook, twitter, yahoo, msn, wikipedia, youtube, acceso directo" >
<meta name="description"
content="web que facilita links de uso frecuente, utilizada como pagina de inicio" >
<meta name="Autor" content="Kiwi" >
<meta name="Language" CONTENT="Spanish" >
<meta name="Revisit" content="1 day" >
<meta name="Distribution" CONTENT="Global" >
<link rel="stylesheet" href="reset.css" media="all" >
<link rel="stylesheet" href="estilo-index.css" type="text/css">
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18085920-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
<link rel="stylesheet" href="estilo-index.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
[contenido no disponible]
</div>
<div id="publicidad"><h1>Internet-Kiwi es una web creada con el objetivo de facilitarle al usuario links de uso frecuente.</h1></div>
</div>

<div id="contenido">
[contenido no disponible]
<div id="googlesearch">

<center>
<FORM method=GET name= google action="http://www.google.com.ar/search">
<input type=hidden name=ie value=UTF-8>
<input type=hidden name=oe value=UTF-8>
<TABLE bgcolor=""><tr><td>
<INPUT TYPE=text name=q id=cuadro size=70 maxlength=255 value="" onFocus="this.select()">
<INPUT type=submit name=btnG VALUE="Buscar">
</td></tr></TABLE>
</FORM>
</center>

</div>

<div id="allmaceffect">

<div class="dock" id="dock2">
<div class="dock-container2">
<span>Youtube</span>[contenido no disponible]
<span>Facebook</span>[contenido no disponible]
<span>Twitter</span>[contenido no disponible]
<span>Wikipedia</span>[contenido no disponible]
<span>Yahoo</span>[contenido no disponible]
<span>Msn</span>[contenido no disponible]
</div>
</div>

<script type="text/javascript">

$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 90,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 70,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);

</script>
</div>

</div>

<div id="pie">Establecer como página de inicio.</div>
</div>

</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>

estilo-index.css

* {text-indent: 0px ; margin:0px ; padding:0px ; border: 0px}
p {text-align: justify}
h1 {font-size: 0.9em; color:green ; font-weight: bold ; text-decoration: none ; text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
body {text-align: center}
#global {width:800px ; margin: 4px auto }
#curva-superior { background-image: url(objetos/curva-superior[1].gif) ;
background-repeat: no-repeat ;
width:800px ;
height: 12px ; overflow : hidden }
#cabecera { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px }
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px}
#contenido {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid }
#googlesearch { background-color: #ADD8E6 ; border-top: black 1px solid ; border-bottom: black 1px solid ; margin-bottom: 200px}
#allmaceffect {}

img {
border: none;
}

/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 350px;
position: absolute;
left: 200px;
}
.dock-container2 {
position: absolute;
height: 50px;
background: url(images/dock-bg.gif);
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}

#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; padding-top: 30px }

a {color: #4682B4 ; text-decoration:none}
a:link {}
a:visited {}
a:hover {}
a:active {}

#curva-inferior { background-image: url(objetos/curva-inferior[1].gif) ;
background-repeat: no-repeat ;
width:800px ;
height: 12px ; overflow: hidden }

iepngfix.htc
<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />

<script type="text/javascript">

// IE5.5+ PNG Alpha Fix v1.0RC4
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com

// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/

// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'images/blank.gif';

var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m)
{
if (filters)
{
filters.enabled = s ? true : false;
if (s) with (filters) { src = s; sizingMethod = m }
}
else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}

function doFix()
{
// Assume IE7 is OK.
if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
(event && !/(background|src)/.test(event.propertyName))) return;

var bgImg = currentStyle.backgroundImage || style.backgroundImage;

if (tagName == 'IMG')
{
if ((/\.png$/i).test(src))
{
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
filt(src, 'scale');
src = blankImg;
}
else if (src.indexOf(blankImg) < 0) filt();
}
else if (bgImg && bgImg != 'none')
{
if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
{
var s = RegExp.$1;
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
style.backgroundImage = 'none';
filt(s, 'crop');
// IE link fix.
for (var n = 0; n < childNodes.length; n++)
if (childNodes.style) childNodes.style.position = 'relative';
}
else filt();
}
}

doFix();

</script>
</public:component>

También tengo una carpeta js (javascript) y objetos.

waldragon · 27 Ago 2010, 09:50 · Solicitar retirada

la verdad que no se que decirte sobre tu problema, pero me encanto ese efecto cuando pasas el mouse sobre los iconos, me podrias decir como se hace? estoy seguro que alguien de aqui te ayudara con tus preguntas, saludos.

Foley · 27 Ago 2010, 12:04 · Solicitar retirada

Yo ahora mismo no tengo tiempo de mirarte el código pero te digo cómo hago yo las webs:

- No uso para nada el html-kit
- Uso un bloc de notas normal y corriente que se llama notepad++
- A medida que voy haciendo cambios en la web, voy guardando el archivo y ejecutándolo con el firefox para así saber cómo se ve. Es que no me fío del html-kit

Así harás la web sólo con código html y css, lo harás todo a mano. Parece que es más complicado pero cuando te acostumbras es comodísimo, nada de dreamweavers ni nvus, ni html kits :)

De todas formas ese error que tienes en la visualización en firefox tiene que ser un error grave porque si te fijas se te sale todo del div general de la web.

@Waldragon es un simple efecto javascript, si miras su código lo puedes coger ;)

Saludos

Kiwi · 27 Ago 2010, 21:08 · Solicitar retirada

Foley, muchas gracias. Re-diseñé la web en base a Firefox (y saqué cosas que no había forma de que qudaran en su debido lugar).

La nueva web se ve bien en varios navegadores, si alguien la ve mal por favor avísenme y diganme en que navegador así lo arreglo con una hoja de estilos específica para ese navegador/versión de navegador.

Aquí está presentada mi segunda versión de I-kiwi: http://www.comocreartuweb.com/phpBB2/ftopic26381.html

-------------------------------------------------------------------------------------

waldragon:
1-bajate los archivos interface.js y jquery.js, ubicalos en una carpeta js (javascript) en tu raíz (como la carpeta objetos).
2-Poné esto entre <head> y </head>:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

3-Poné el código en tu <body>:

<div class="dock" id="dock2">
  <div class="dock-container2">
  [url="http://www.youtube.com/"]<span>Youtube</span>[img]objetos/Youtube.jpg[/img][/url] 
  [url="http://es-es.facebook.com/"]<span>Facebook</span>[img]objetos/Facebook.jpg[/img][/url] 
  [url="http://twitter.com/"]<span>Twitter</span>[img]objetos/Twitter.jpg[/img][/url] 
  [url="http://www.wikipedia.org/"]<span>Wikipedia</span>[img]objetos/Wikipedia.jpg[/img][/url] 
  [url="http://www.yahoo.com/"]<span>Yahoo</span>[img]objetos/Yahoo.jpg[/img][/url] 
  [url="http://www.msn.com/"]<span>Msn</span>[img]objetos/Msn.jpg[/img][/url] 
  </div>
</div>

<script type="text/javascript">
	
	$(document).ready(
		function()
		{
			$('#dock2').Fisheye(
				{
					maxWidth: 90,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container2',
					itemWidth: 70,
					proximity: 80,
					alignment : 'left',
					valign: 'bottom',
					halign : 'center'
				}
			)
		}
	);

</script>
</div>

Ahora, reemplazá mis imágenes y sus nombres por los que vos quieras.
Jugá con el código hasta que te guste.´
4- Te dejo lo que va en la hoja de estilos:

#dock2 {
	width: 100%;
	bottom: 350px;
	position: absolute;
	left: 200px;
}
.dock-container2 {
	position: absolute;
	height: 50px;
	background: url(images/dock-bg.gif);
	padding-left: 20px;
}
a.dock-item2 {
	display: block; 
	font: bold 12px Arial, Helvetica, sans-serif;
	width: 40px; 
	color: #000; 
	bottom: 0px; 
	position: absolute;
	text-align: center;
	text-decoration: none;
}
.dock-item2 span {
	display: none;
	padding-left: 20px;
}
.dock-item2 img {
	border: none; 
	margin: 5px 10px 0px; 
	width: 100%; 
}

Éste código viene con algunas imágenes del ejemplo que no tengo (del contenedor del los items del ejemplo), podés borrarlas o dejarlas, pero si no tenés las imágenes no van a aparecer los bordes del contenedor (que en mi caso no me molesta, me gusta el efcto sn bordes). Con el bottom y el left del principio del código lo podés ubicar.

Espero que te sirva!

waldragon · 28 Ago 2010, 09:34 · Solicitar retirada

gracias muchachos, ya mismo me pongo a probarlo, saludos.