Desarrollo y diseño

¿Como fijar esto? [HTML]

C
CaSeLLeS #1 Nov '05

http://www.cobspain.com/sammath/Copia%20de%20index.htm

Quiero hacer que las "transparencias rojas" se queden sobre sus respectivas palabras que forman el menu, para hacer luego un spacer blanco y añadirle un link a un iframe.

La cuestion es que se queden fijas donde yo quiero, sin que se desplacen al cambiar el tamaño de la ventana

Gracias

pd: ya que estamos... ¿que os parece la idea? es una version mejorada de www.cobspain.com pero que no requiere una resolucion 1024*800 :D ¿os parece original el diseño de que todo esta negro y en el centro irrumpa esa cosa?

guner
guner #2 Nov '05

Poniendo todo dentro de un div centrado, para que las posiciones sean relativas a éste.

C
CaSeLLeS #4 Nov '05

esque es una transparencia de 1x1 pixeles estirada... tanto..tanto que se ve asi xD

Como hago lo del DIV centrado?

guner
guner #5 Nov '05

Lo que no sé es por qué no pones las letras de los enlaces en vez de espaciadores transparentes, vamos, creo que es mejor. También puedes hacer areas.

La primera solución que di:

&#65279;< ?xml&nbsp;version="1.0"&nbsp;encoding="utf-8"?>
< ?xml-stylesheet&nbsp;href="#internalStyle"&nbsp;type="text/css"?>

< !DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;"-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Strict//EN"
&nbsp;&nbsp;&nbsp;&nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

< html&nbsp;xmlns="http://www.w3.org/1999/xhtml"&nbsp;xml:lang="es"&nbsp;lang="es">

< head>
&nbsp;&nbsp;&nbsp;&nbsp;< title>Official&nbsp;Sammath&nbsp;Webpage&nbsp;:&nbsp;Spanish&nbsp;Black&nbsp;Metal< /title>
&nbsp;&nbsp;&nbsp;&nbsp;< meta&nbsp;name="keywords"&nbsp;content=""&nbsp;/>
&nbsp;&nbsp;&nbsp;&nbsp;< meta&nbsp;name="description"&nbsp;content=""&nbsp;/>
&nbsp;&nbsp;&nbsp;&nbsp;< meta&nbsp;http-equiv="Content-type"&nbsp;content="text/html;&nbsp;charset=utf-8"&nbsp;/>
&nbsp;&nbsp;&nbsp;&nbsp;< link&nbsp;rel="alternate"&nbsp;type="application/rss+xml"&nbsp;title="RSS"&nbsp;href="main.rss"&nbsp;/>
&nbsp;&nbsp;&nbsp;&nbsp;< link&nbsp;rel="Shortcut&nbsp;Icon"&nbsp;type="image/ico"&nbsp;href="favicon.ico"&nbsp;/>
&nbsp;&nbsp;&nbsp;&nbsp;< style&nbsp;type="text/css;"&nbsp;media="all"&nbsp;id="insternalStyle">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body,&nbsp;html&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;black;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div#main&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;570px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;auto;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1px&nbsp;solid&nbsp;red;/
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div.trans_link&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;absolute;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;150px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;30px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;< /style>

< /head>

< body>

< div&nbsp;id="main">
&nbsp;&nbsp;&nbsp;&nbsp;< img&nbsp;border="0"&nbsp;src="fondo.jpg"&nbsp;widht="570"&nbsp;height="640">
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;< div&nbsp;class="trans_link"&nbsp;style="left:&nbsp;240px;&nbsp;top:&nbsp;170px;&nbsp;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;< a&nbsp;href="lalala">< img&nbsp;width="100%"&nbsp;height="100%"&nbsp;&nbsp;border="0"&nbsp;src="spacer2.gif">< /a>
&nbsp;&nbsp;&nbsp;&nbsp;< /div>
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;< div&nbsp;class="trans_link"&nbsp;style="left:&nbsp;290px;&nbsp;top:&nbsp;200px;&nbsp;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;< a&nbsp;href="lalala">< img&nbsp;width="100%"&nbsp;height="100%"&nbsp;&nbsp;border="0"&nbsp;src="spacer2.gif">< /a>
&nbsp;&nbsp;&nbsp;&nbsp;< /div>
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;< div&nbsp;class="trans_link"&nbsp;style="left:&nbsp;340px;&nbsp;top:&nbsp;230px;&nbsp;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;< a&nbsp;href="lalala">< img&nbsp;width="100%"&nbsp;height="100%"&nbsp;&nbsp;border="0"&nbsp;src="spacer2.gif">< /a>
&nbsp;&nbsp;&nbsp;&nbsp;< /div>
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;< div&nbsp;class="trans_link"&nbsp;style="left:&nbsp;390px;&nbsp;top:&nbsp;260px;&nbsp;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;< a&nbsp;href="lalala">< img&nbsp;width="100%"&nbsp;height="100%"&nbsp;&nbsp;border="0"&nbsp;src="spacer2.gif">< /a>
&nbsp;&nbsp;&nbsp;&nbsp;< /div>

< /div>

< /body>

< /html>

C
CaSeLLeS #6 Nov '05

ese codigo no esta bien, mas que anda, al pegarlo en la web, se ha deformado y estoy aqui arreglandolo pero es peor el remedio que la enfermedad.

puedes enviarmelo por email a [email protected] ?

guner
guner #8 Nov '05

Acabo de copiar y pegar ese código y funciona perfectamente.
http://img489.imageshack.us/my.php?image=200511121006581024x768scrot4fx.png

#7 ¿¿??

Te lo pego un poco corregido.

<&nbsp;?xml&nbsp;version="1.0"&nbsp;encoding="utf-8"?>
<&nbsp;?xml-stylesheet&nbsp;href="#internalStyle"&nbsp;type="text/css"?>

<&nbsp;!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;"-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Strict//EN"
&nbsp;&nbsp;&nbsp;&nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<&nbsp;html&nbsp;xmlns="http://www.w3.org/1999/xhtml"&nbsp;xml:lang="es"&nbsp;lang="es">

<&nbsp;head>
&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;title>Official&nbsp;Sammath&nbsp;Webpage&nbsp;:&nbsp;Spanish&nbsp;Black&nbsp;Metal<&nbsp;/title>
&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;meta&nbsp;name="keywords"&nbsp;content=""&nbsp;/>
&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;meta&nbsp;name="description"&nbsp;content=""&nbsp;/>
&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;meta&nbsp;http-equiv="Content-type"&nbsp;content="text/html;&nbsp;charset=utf-8"&nbsp;/>
&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;link&nbsp;rel="alternate"&nbsp;type="application/rss+xml"&nbsp;title="RSS"&nbsp;href="main.rss"&nbsp;/>
&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;link&nbsp;rel="Shortcut&nbsp;Icon"&nbsp;type="image/ico"&nbsp;href="favicon.ico"&nbsp;/>
&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;style&nbsp;type="text/css;"&nbsp;media="all"&nbsp;id="insternalStyle">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body,&nbsp;html&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;black;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div#main&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;570px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;auto;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1px&nbsp;solid&nbsp;red;/
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div.trans_link&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;absolute;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;150px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;30px;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;/style>

<&nbsp;/head>

<&nbsp;body>

<&nbsp;div&nbsp;id="main">
&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;img&nbsp;border="0"&nbsp;src="fondo.jpg"&nbsp;widht="570"&nbsp;height="640">

&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;div&nbsp;class="trans_link"&nbsp;style="left:&nbsp;225px;&nbsp;top:&nbsp;170px;&nbsp;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;a&nbsp;href="?go=news&"><&nbsp;img&nbsp;width="100%"&nbsp;height="100%"&nbsp;border="0"&nbsp;src="spacer2.gif"><&nbsp;/a>
&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;/div>
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;div&nbsp;class="trans_link"&nbsp;style="left:&nbsp;280px;&nbsp;top:&nbsp;200px;&nbsp;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;a&nbsp;href="?go=bio&"><&nbsp;img&nbsp;width="100%"&nbsp;height="100%"&nbsp;border="0"&nbsp;src="spacer2.gif"><&nbsp;/a>
&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;/div>
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;div&nbsp;class="trans_link"&nbsp;style="left:&nbsp;335px;&nbsp;top:&nbsp;230px;&nbsp;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;a&nbsp;href="?go=downl&"><&nbsp;img&nbsp;width="100%"&nbsp;height="100%"&nbsp;border="0"&nbsp;src="spacer2.gif"><&nbsp;/a>
&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;/div>
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;div&nbsp;class="trans_link"&nbsp;style="left:&nbsp;390px;&nbsp;top:&nbsp;260px;&nbsp;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;a&nbsp;href="?go=disco&"><&nbsp;img&nbsp;width="100%"&nbsp;height="100%"&nbsp;border="0"&nbsp;src="spacer2.gif"><&nbsp;/a>
&nbsp;&nbsp;&nbsp;&nbsp;<&nbsp;/div>

<&nbsp;/div>
<&nbsp;/body>
<&nbsp;/html>

C
CaSeLLeS #9 Nov '05

me sigue sin ir...

creoq eu me pasa algo con el teclado o con el idioma o yo que se, que veo un monton de espacios en el codigo, y al pegarlo, el navegador solo muestra el codigo..... no la web en sí

guner
guner #10 Nov '05

Co*o, haber dicho que era por eso, es que he puesto las etiquetas con un espacio después del <, puedes voger el notepad y reemplazar todos los '< ' por '<', y luego pegar.

Usuarios habituales

  • guner
  • CaSeLLeS