Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje22-10-2008, 16:13 (UTC)    
Título del mensaje: [Resuelto] AYUDA CON CSS DESIGN!!
Responder citando
HOLA A TODOS!

yo use esta plantilla http://www.paginawebgratis.es/forum/viewtopic.php?t=13853&highlight=css+regalo#top

Es la que mas se acomoda a mis necesidades, de tooodas las que he visto y que han sido muchas.

TENGO 2 PROBLEMAS CON ELLA!:

1º CAMBIE LA IMAGEN DE FONDO y le puse un cabezal mas delgado, porque el otro era muy ancho e incomodo para navegar, YA QUE hay que poner el contenido muy abajo, para PARA QUE NO CHOQUE CON EL MENU DESPLEGADO vean http://www.dhiell.tk

La solucion sería mover el menu hacia arriba!,

la verdad modifique de todo, pero no pude mover el menu hacia arriba.

PORFAVOR! ¿ ALGUIEN PUEDE DECIRME QUE PARTE DEL CODIGO MODIFICO PARA SUBIR EL MENU, Y QUEDE JUSTO ABAJO DE MI CABEZAL??!?

y 2º- alguien tiene el code de un menu horizontal desplegable, PERO DE COLOR NEGRO?!!

DESDE YA MUCHAS GRACIAS!!!! CONFIO ME AYUDEN


Ultima edición por dhiell el Mie Oct 22, 2008 1:07 pm; editado 1 vez
↑
Mensaje22-10-2008, 16:22 (UTC)    
Título del mensaje:
Responder citando
Debe ser porque el espacio de encabezamiento tiene asignada una medida... Podría saberlo viendo tu código de fuente pero ha sido tu decisión ocultarlo.
Fíjate si se ha asignado una etiqueta para el espacio del encabezamiento en CSS Code sin Style-tags y redúcele el valor a height.
Respecto al menú revise este tema:
http://www.paginawebgratis.es/forum/viewtopic.php?t=14262
En la zona CSS (en la Página 2) puede encontrar más menúes.

Salu2!


Ultima edición por tokarg el Mie Oct 22, 2008 12:26 pm; editado 1 vez
↑
Mensaje22-10-2008, 16:28 (UTC)    
Título del mensaje: esta es mi fuente, que le modifico??
Responder citando
Pegar En Texto por encima de la página:


Código:
<style type="text/css" media="screen">
<!--
body
{
font-family: Times New Roman, Arial;
font-size: 00px;
overflow: auto;
padding: 10px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

li a
{
padding-right: 20px;padding-top: 5px;
}

div.menu
{
position: absolute;
z-index: 3;
top: 163px;
left: 52%;
margin-left: 149px;
width: 100px;
}

.menu li
{
width: 95px;
float: left;
}

.menu a
{
border: 0px solid #ffffff;
background-color: #xxxxxx;
background-image: url();
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height:67px;
color: #808080;
}

.menu a:hover
{
background-color: #transparent;
background-image: url();
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 15px;
display: none;
width: 70px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF;
}
//-->

</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<div class="menu">
<li><a href="Link1"></a> </li>
<li><a href="Link2"></a> </li>
<li><a href="Link3"></a> </li>
<li><a href="Link4"></a> </li>
<li><a href="Link5"></a> </li>


</div>

<div id="Designmystic">

<div id="text"><h1></h1>
</div>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/www.w3.org/1999/xhtml">
<div style="width:846px; position: relative; margin-left: auto; margin-right: auto;">





Menu Desplegable Necesario Para Navegar

Código:
<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif;margin: 0;padding: 0;}
#marco {width:843px;margin:110px 0;padding:0px;text-align:left;}

.preload2 {background: url(http://pixelea.com/s/63c3c373f9.png);}
.menu2 {padding:0; margin:0; margin-bottom:0; list-style:none; height:25px; background:#fff url(http://pixelea.com/s/63c3c373f9.png) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:25px; margin-left:6px; line-height:25px; color:#FFFFFF; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 6px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 10px 0 6px; height:40px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 10px0 6px; height:25px;/*background:url(prodrop2/down.gif) no-repeat right top;*/}
.menu2 li a.top_link:hover {color:#fff; background:url(http://pixelea.com/s/63c3c373f9.png);}
.menu2 li a.top_link:hover span { background:url(http://pixelea.com/s/63c3c373f9.png)}
.menu2 li a.top_link:hover span.down { background:url(hhttp://pixelea.com/s/63c3c373f9.png)}

.menu2 li:hover > a.top_link {color:#ffffff; background:url(http://pixelea.com/s/63c3c373f9.png);}
.menu2 li:hover > a.top_link span {background:url(http://pixelea.com/s/63c3c373f9.png);}
.menu2 li:hover > a.top_link span.down {background:url(http://pixelea.com/s/63c3c373f9.png);}


.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}

.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu2 :hover ul.sub {left:6px; top:25px; background:#6699FF; padding:0; /*border:1px solid #1E8BB5; white-space:nowrap;*/ width:auto; height:auto; font-weight:normal;}
.menu2 :hover ul.sub li {display:block; /*height:20px; */position:relative; float:left; width:160px; border-bottom:1px solid #0000FF; border-left:1px solid #0000FF; border-right:1px solid #0000FF; margin-bottom:0;}
.menu2 :hover ul.sub li a {display:block; height:auto; font-size:11px; padding:4px 3px; line-height:1; color: #ffffff; text-decoration:none;}
.menu2 :hover ul.sub li a.fly {background:#6699FF url(http://pixelea.com/s/2dfee34e5f.png) no-repeat 150px 6px;}
.menu2 :hover ul.sub li a:hover {background: #000000; color#ffffff;}
.menu2 :hover ul.sub li a.fly:hover {background: #000000url(http://pixelea.com/s/2dfee34e5f.png) no-repeat 150px 6px;}
.menu2 :hover ul li:hover > a.fly {background:
#6699FF}

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:160px; top:-1px; background: #fff; padding:0; /* white-space:nowrap; */width:auto; z-index:300; height:auto;}
.menu2 :hover ul.sub li ul {border-top:1px solid #0000FF; background: #000000; z-index:300;}
</style>

<div style="position:absolute;left:0px;top:114px;">
<div id="marco">
<span class="preload2"></span>
<!--MENU-->
<ul class="menu2"><img src="http://pixelea.com/s/91cc705aae.png" align="left" /><img src="http://pixelea.com/s/c8d445da7e.png" align="right"/>
<li class="top"><a href="#" id="Menu1" class="top_link"><span class="down">Menu1</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Link 1.1</a></li>
<li><a href="#">Link 1.2</a></li>
<li><a href="#">Link 1.3</a></li>
<li><a href="#">Link 1.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="top"><a href="#" id="Menu2" class="top_link"><span class="down">Menu2</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
<li><a href="#">Link 2.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="top"><a href="#" id="Menu3" class="top_link"><span class="down">Menu3</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>

<li class="mid"><a href="#" class="fly">Link 3.3
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Link 3.3.1</a></li>
<li><a href="#">Link 3.3.2</a></li>
<li><a href="#">Link 3.3.3</a></li>
<li><a href="#">Link 3.3.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="mid"><a href="#" class="fly">Link 3.4
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Link 3.4.1</a></li>
<li><a href="#">Link 3.4.2</a></li>
<li><a href="#">Link 3.4.3</a></li>
<li><a href="#">Link 3.4.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>
<!-- FIN MENU-->
</div>


Pegar En CSS-Code
sin Style Tags:

lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}



#text{
color: ffffff;
position: absolute;
top: 100px;
margin-left:-300px;
left: 50%;
}

body {
background-color:#ffffff;}


*{ padding: 0; margin: 0; }

#Designmystic {
margin: 0 auto;
width:921px;
height:1000px;
background-image:url(http://pixelea.com/s/ece6bd4e8e.png);}


#content {
position: absolute;
left: 50%;
top: 170px;
margin-left:-380px;
width:780px;
height: 600px;
padding:10px;
color: #transparent;
font-size:13px;
background-color:#transparent;
background-image:url();
border: 0px solid #FFFFFF;
overflow:auto;}




#Uebersicht{
position: absolute;
left: 50%;
top: 204px;
margin-left:-440px;
font-color:#cccccc;}



a{
color:#ffffff;
text-decoration: none;
font-size:13px;}

a:hover {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}

a:link {
color: #000000;
font-size: 13px;
text-decoration: none;}

a:active {
color: #000000;
font-size: 13px;
text-decoration: none;}

a:visited {
color: #cccccc;
font-size: 13px;
text-decoration: none;}



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


EN TODO CASO ARRIBA ESTA EL LINK DE DONDE SAQUE LA PLANTILLA
↑
Mensaje22-10-2008, 16:40 (UTC)    
Título del mensaje:
Responder citando
Debes subri el menú y el contenido:
Menú:
Fíjate que en el code del menú aparece esto:
Cita:
<div style="position:absolute;left:0px;top:14px;">

Reduce el valor marcado en rojo para moverlo hacia arriba.

Contenido:
Esta parte esta en la de CSS sin style-tags:
Cita:
#content {
position: absolute;
left: 50%;
top: 170px;


Salu2!
↑
Mensaje22-10-2008, 16:59 (UTC)    
Título del mensaje: :( no resulto
Responder citando
modifique ambos valores e incluso probe con otros y no consegui mover el menu hacia arriba
↑
Mensaje22-10-2008, 17:01 (UTC)    
Título del mensaje:
Responder citando
Debe funcionar ya que lo he probado en mi site de ejemplo.
Te pongo todo el code para que no te confundas:


Cita:
Menu Desplegable Necesario Para Navegar

Código:
<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif;margin: 0;padding: 0;}
#marco {width:843px;margin:110px 0;padding:0px;text-align:left;}

.preload2 {background: url(http://pixelea.com/s/63c3c373f9.png);}
.menu2 {padding:0; margin:0; margin-bottom:0; list-style:none; height:25px; background:#fff url(http://pixelea.com/s/63c3c373f9.png) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:25px; margin-left:6px; line-height:25px; color:#FFFFFF; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 6px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 10px 0 6px; height:40px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 10px0 6px; height:25px;/*background:url(prodrop2/down.gif) no-repeat right top;*/}
.menu2 li a.top_link:hover {color:#fff; background:url(http://pixelea.com/s/63c3c373f9.png);}
.menu2 li a.top_link:hover span { background:url(http://pixelea.com/s/63c3c373f9.png)}
.menu2 li a.top_link:hover span.down { background:url(hhttp://pixelea.com/s/63c3c373f9.png)}

.menu2 li:hover > a.top_link {color:#ffffff; background:url(http://pixelea.com/s/63c3c373f9.png);}
.menu2 li:hover > a.top_link span {background:url(http://pixelea.com/s/63c3c373f9.png);}
.menu2 li:hover > a.top_link span.down {background:url(http://pixelea.com/s/63c3c373f9.png);}


.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}

.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu2 :hover ul.sub {left:6px; top:25px; background:#6699FF; padding:0; /*border:1px solid #1E8BB5; white-space:nowrap;*/ width:auto; height:auto; font-weight:normal;}
.menu2 :hover ul.sub li {display:block; /*height:20px; */position:relative; float:left; width:160px; border-bottom:1px solid #0000FF; border-left:1px solid #0000FF; border-right:1px solid #0000FF; margin-bottom:0;}
.menu2 :hover ul.sub li a {display:block; height:auto; font-size:11px; padding:4px 3px; line-height:1; color: #ffffff; text-decoration:none;}
.menu2 :hover ul.sub li a.fly {background:#6699FF url(http://pixelea.com/s/2dfee34e5f.png) no-repeat 150px 6px;}
.menu2 :hover ul.sub li a:hover {background: #000000; color#ffffff;}
.menu2 :hover ul.sub li a.fly:hover {background: #000000url(http://pixelea.com/s/2dfee34e5f.png) no-repeat 150px 6px;}
.menu2 :hover ul li:hover > a.fly {background:
#6699FF}

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:160px; top:-1px; background: #fff; padding:0; /* white-space:nowrap; */width:auto; z-index:300; height:auto;}
.menu2 :hover ul.sub li ul {border-top:1px solid #0000FF; background: #000000; z-index:300;}
</style>

<div style="position:absolute;left:0px;top:114px;">
<div id="marco">
<span class="preload2"></span>
<!--MENU-->
<ul class="menu2"><img src="http://pixelea.com/s/91cc705aae.png" align="left" /><img src="http://pixelea.com/s/c8d445da7e.png" align="right"/>
<li class="top"><a href="#" id="Menu1" class="top_link"><span class="down">Menu1</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Link 1.1</a></li>
<li><a href="#">Link 1.2</a></li>
<li><a href="#">Link 1.3</a></li>
<li><a href="#">Link 1.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="top"><a href="#" id="Menu2" class="top_link"><span class="down">Menu2</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
<li><a href="#">Link 2.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="top"><a href="#" id="Menu3" class="top_link"><span class="down">Menu3</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>

<li class="mid"><a href="#" class="fly">Link 3.3
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Link 3.3.1</a></li>
<li><a href="#">Link 3.3.2</a></li>
<li><a href="#">Link 3.3.3</a></li>
<li><a href="#">Link 3.3.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="mid"><a href="#" class="fly">Link 3.4
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Link 3.4.1</a></li>
<li><a href="#">Link 3.4.2</a></li>
<li><a href="#">Link 3.4.3</a></li>
<li><a href="#">Link 3.4.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>
<!-- FIN MENU-->
</div>

Te marque en rojo el code que hay que editar (edita el valor de top)

Salu2!
↑
Mensaje22-10-2008, 17:06 (UTC)    
Título del mensaje: AHORA SIP!
Responder citando
MUCHAS GRACIAS POR TU AYUDA!!!!!!


ahora si me funciono!!

gracias !!!
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.