Volver al Programación / Codificación foro

Barra de Navegación

  • SB
  • Moderator
  • Genius
  • Avatar de Usuario
  • Registrado: Nov 16, 2004
  • Mensajes: 8671
  • Loc: Aberdeen, Scotland
  • Status: Offline

Nota Agosto 8th, 2009, 5:34 pm

Ive efectivamente publicados en este sitio antes de que sobre este tema, pero debido a la falta de tiempo no voy a la red de arrastre a través de las páginas.

Problema de navegación

Básicamente, Ive tenía un problema de la creación de una barra de navegación en una página web que estoy en el proceso de desarrollo. La barra de navegación que la longitud del vano de la caja de contenido. La navegación que aparecerá con una lista de enlaces separados. Por el momento, no muestra la derecha en cualquiera de FF o IE, sin embargo, su mejor Ive tenía que mirar. Ive buscado tutoriales en línea y nada parece llegar bien, yo trabajo en ello y se muestra bien en un navegador, pero en otro es tan incorrecto como puede ser incorrecta.

Otro problema que han tenido alguna barra de navegación que han tenido parece complicar el i la corriente de codificación tiene en el sitio. Yo soy de ninguna manera relativamente buenos en diseño de sitios web por lo que estoy teniendo este problema, así que mucho de lo que he hecho se pudo haber hecho de una manera incorrecta.

¿Alguien aquí puedan orientarme en la dirección correcta y me ayude a progresar más allá de esta pared me parece que han surgido en contra.

Cualquier consejo sería con gratitud.

Aquí está el código PHP para la página web (dentro de las etiquetas del cuerpo)...

Código: [ Select ]
<body>
<div id="page_container">
<div id="header">
<p>James Campbell Architects &amp; Environmental</p>
</div>
 
<div id="left_column">
<ul>
</ul>
</div>
 
<div id="center_column">
<h2>Welcome</h2>
<p>Example: text position</p>
</div>
 
<div id="right_column">
<p>
<div id="smallboxes">
<div class="smallbox" id="bluecube"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox" id="greencube"></div>
 
<div class="smallbox" id="yellowcube"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
</p>
</div>
 
<div id="footer">
<ul id="navigation"><li id="youarehere"><a href="/2006/index.php">Home</a></li>
<p><li><a href="/2006/about.php">About</a></li>
<li><a href="/2006/projects.php">Projects</a></li>
<li><a href="/2006/services.php">Services</a></li>
<li><a href="/2006/contact.php">Contact Us</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li></p>
</ul></div>
</div>
</body>
  1. <body>
  2. <div id="page_container">
  3. <div id="header">
  4. <p>James Campbell Architects &amp; Environmental</p>
  5. </div>
  6.  
  7. <div id="left_column">
  8. <ul>
  9. </ul>
  10. </div>
  11.  
  12. <div id="center_column">
  13. <h2>Welcome</h2>
  14. <p>Example: text position</p>
  15. </div>
  16.  
  17. <div id="right_column">
  18. <p>
  19. <div id="smallboxes">
  20. <div class="smallbox" id="bluecube"></div>
  21. <div class="smallbox"></div>
  22. <div class="smallbox"></div>
  23. <div class="smallbox"></div>
  24. <div class="smallbox"></div>
  25. <div class="smallbox" id="greencube"></div>
  26.  
  27. <div class="smallbox" id="yellowcube"></div>
  28. <div class="smallbox"></div>
  29. <div class="smallbox"></div>
  30. </div>
  31. </p>
  32. </div>
  33.  
  34. <div id="footer">
  35. <ul id="navigation"><li id="youarehere"><a href="/2006/index.php">Home</a></li>
  36. <p><li><a href="/2006/about.php">About</a></li>
  37. <li><a href="/2006/projects.php">Projects</a></li>
  38. <li><a href="/2006/services.php">Services</a></li>
  39. <li><a href="/2006/contact.php">Contact Us</a></li>
  40. <li><a href="#">Link 1</a></li>
  41. <li><a href="#">Link 2</a></li></p>
  42. </ul></div>
  43. </div>
  44. </body>


y el CSS...

Código: [ Select ]
body{
    margin:0;
    padding:0;
    background: #333;
    font-family: sans-serif;
    font-size: 75%;
    color: #fff;
    text-align: justify;
}
 
div{
margin:0;
padding-top:0;
}
 
h1, h2, h3, p {
     margin:0;
     padding:10px;
 }
 
 
 
 ul{
     margin:0;
     padding:0;
 }
 
 li{
     list-style-type:none;
     color: #fff;
 }
 
 li a{
     display:block;
     background:#000;
     padding:5px 10px 5px 10px;
     color: #fff;
}
 
li a:hover{
     background:#000;
 }
 
 /* Uniquely Identified Containers */
 
 #page_container{
     width:950px;
     margin:0 auto;
     margin-bottom: 50px;
 }
 
 #header{
     background:#000;
     margin-top: 50px;
     border-top: 1px solid #ffff00;
     border-left: 1px solid #ffff00;
     border-right: 1px solid #ffff00;
     border-bottom: 1px solid #666666;
 }
 
 #left_column{
     width:19px;
     float:left;
     background:url(back.gif);
     height: 340px;
     border-left: 1px solid #ffff00;
     padding-top: 60px;
     padding-left: 0px;
 }
 
 #center_column{
     width:549px;
     float:left;
     height: 355px;
     padding-top: 45px;
     padding-left: 50px;
     p width: 200px;
 }
 
#center_column p{
    width: 70%;
}
 
 #right_column{
     width:330px;
     float:left;
     background:url(back.gif);
     height: 355px;
     border-right: 1px solid #ffff00;
     padding-top: 45px;
 }
 
 #footer{
     clear:both;
     background:#000;
     border-bottom: 1px solid #ffff00;
     border-right: 1px solid #ffff00;
     border-left: 1px solid #ffff00;
 }
 
 /* CSS Document */
 
 .smallbox {
     width: 80px;
     height: 80px;
     border: 1px solid #666;
     float: left;
     margin-left: 6px;
     margin-bottom: 7px;
 }
 
 div#smallbox div a:link, div#smallbox div a:visited {
     text-decoration: none;
 }
 
 div#smallbox div a:hover {
 
 }
 #bluecube {
     background-color: #40668C;
     filter:alpha(opacity=75);
     -moz-opacity:0.75;
     opacity: 0.75;
 }
#greencube {
background-color: #335C33;
     filter:alpha(opacity=75);
     -moz-opacity:0.75;
     opacity: 0.75;
 }
 #yellowcube {
     background-color: #FFD699;
     filter:alpha(opacity=75);
     -moz-opacity:0.75;
     opacity: 0.75;
 }
 #yellowcube:link, #yellowcube:visited {
     opacity: .40;
     filter: alpha(opacity=40);
 }
 
 #logo {
    background-image: url('/2006/logo.gif');
    background-position: 0% 0%;
    width: 80px;
    height: 80px;
 }
 
 /*the following is the code for nav bar which can be removed if it fails to work*/
 
#navigation {
    height: 30px;
    width: 948px;
    background:#000;
}
 
#navigation li {
display: inline;
}
 
#navigation a {
float: left;
display: block;
width: 115px;
text-align: center;
padding: 3px 0;
}
 
#navigation li a:hover {
background: ;
color: ;
}
  1. body{
  2.     margin:0;
  3.     padding:0;
  4.     background: #333;
  5.     font-family: sans-serif;
  6.     font-size: 75%;
  7.     color: #fff;
  8.     text-align: justify;
  9. }
  10.  
  11. div{
  12. margin:0;
  13. padding-top:0;
  14. }
  15.  
  16. h1, h2, h3, p {
  17.      margin:0;
  18.      padding:10px;
  19.  }
  20.  
  21.  
  22.  
  23.  ul{
  24.      margin:0;
  25.      padding:0;
  26.  }
  27.  
  28.  li{
  29.      list-style-type:none;
  30.      color: #fff;
  31.  }
  32.  
  33.  li a{
  34.      display:block;
  35.      background:#000;
  36.      padding:5px 10px 5px 10px;
  37.      color: #fff;
  38. }
  39.  
  40. li a:hover{
  41.      background:#000;
  42.  }
  43.  
  44.  /* Uniquely Identified Containers */
  45.  
  46.  #page_container{
  47.      width:950px;
  48.      margin:0 auto;
  49.      margin-bottom: 50px;
  50.  }
  51.  
  52.  #header{
  53.      background:#000;
  54.      margin-top: 50px;
  55.      border-top: 1px solid #ffff00;
  56.      border-left: 1px solid #ffff00;
  57.      border-right: 1px solid #ffff00;
  58.      border-bottom: 1px solid #666666;
  59.  }
  60.  
  61.  #left_column{
  62.      width:19px;
  63.      float:left;
  64.      background:url(back.gif);
  65.      height: 340px;
  66.      border-left: 1px solid #ffff00;
  67.      padding-top: 60px;
  68.      padding-left: 0px;
  69.  }
  70.  
  71.  #center_column{
  72.      width:549px;
  73.      float:left;
  74.      height: 355px;
  75.      padding-top: 45px;
  76.      padding-left: 50px;
  77.      p width: 200px;
  78.  }
  79.  
  80. #center_column p{
  81.     width: 70%;
  82. }
  83.  
  84.  #right_column{
  85.      width:330px;
  86.      float:left;
  87.      background:url(back.gif);
  88.      height: 355px;
  89.      border-right: 1px solid #ffff00;
  90.      padding-top: 45px;
  91.  }
  92.  
  93.  #footer{
  94.      clear:both;
  95.      background:#000;
  96.      border-bottom: 1px solid #ffff00;
  97.      border-right: 1px solid #ffff00;
  98.      border-left: 1px solid #ffff00;
  99.  }
  100.  
  101.  /* CSS Document */
  102.  
  103.  .smallbox {
  104.      width: 80px;
  105.      height: 80px;
  106.      border: 1px solid #666;
  107.      float: left;
  108.      margin-left: 6px;
  109.      margin-bottom: 7px;
  110.  }
  111.  
  112.  div#smallbox div a:link, div#smallbox div a:visited {
  113.      text-decoration: none;
  114.  }
  115.  
  116.  div#smallbox div a:hover {
  117.  
  118.  }
  119.  #bluecube {
  120.      background-color: #40668C;
  121.      filter:alpha(opacity=75);
  122.      -moz-opacity:0.75;
  123.      opacity: 0.75;
  124.  }
  125. #greencube {
  126. background-color: #335C33;
  127.      filter:alpha(opacity=75);
  128.      -moz-opacity:0.75;
  129.      opacity: 0.75;
  130.  }
  131.  #yellowcube {
  132.      background-color: #FFD699;
  133.      filter:alpha(opacity=75);
  134.      -moz-opacity:0.75;
  135.      opacity: 0.75;
  136.  }
  137.  #yellowcube:link, #yellowcube:visited {
  138.      opacity: .40;
  139.      filter: alpha(opacity=40);
  140.  }
  141.  
  142.  #logo {
  143.     background-image: url('/2006/logo.gif');
  144.     background-position: 0% 0%;
  145.     width: 80px;
  146.     height: 80px;
  147.  }
  148.  
  149.  /*the following is the code for nav bar which can be removed if it fails to work*/
  150.  
  151. #navigation {
  152.     height: 30px;
  153.     width: 948px;
  154.     background:#000;
  155. }
  156.  
  157. #navigation li {
  158. display: inline;
  159. }
  160.  
  161. #navigation a {
  162. float: left;
  163. display: block;
  164. width: 115px;
  165. text-align: center;
  166. padding: 3px 0;
  167. }
  168.  
  169. #navigation li a:hover {
  170. background: ;
  171. color: ;
  172. }


Como digo, cualquier ayuda es muy apreciada.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Agosto 8th, 2009, 5:34 pm

  • Rabid Dog
  • Web Master
  • Web Master
  • Avatar de Usuario
  • Registrado: May 21, 2004
  • Mensajes: 3229
  • Loc: South Africa
  • Status: Offline

Nota Agosto 9th, 2009, 12:03 pm

Código: [ Select ]
<p><li><a href="/2006/about.php">About</a></li>
<li><a href="/2006/projects.php">Projects</a></li>
<li><a href="/2006/services.php">Services</a></li>
<li><a href="/2006/contact.php">Contact Us</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li></p>
  1. <p><li><a href="/2006/about.php">About</a></li>
  2. <li><a href="/2006/projects.php">Projects</a></li>
  3. <li><a href="/2006/services.php">Services</a></li>
  4. <li><a href="/2006/contact.php">Contact Us</a></li>
  5. <li><a href="#">Link 1</a></li>
  6. <li><a href="#">Link 2</a></li></p>


¿Por qué esta rodeado en la etiqueta de p?

Código: [ Select ]
<script>
function showNav(id){
document.getElementById(id).style.display = 'block';
}
</script>
<div id="footer">
<a href="/2006/index.php" onmouseover="showNav('navigation')">Home</a>
<ul id="navigation">
<li><a href="/2006/about.php">About</a></li>
<li><a href="/2006/projects.php">Projects</a></li>
<li><a href="/2006/services.php">Services</a></li>
<li><a href="/2006/contact.php">Contact Us</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul></div>
</div>
  1. <script>
  2. function showNav(id){
  3. document.getElementById(id).style.display = 'block';
  4. }
  5. </script>
  6. <div id="footer">
  7. <a href="/2006/index.php" onmouseover="showNav('navigation')">Home</a>
  8. <ul id="navigation">
  9. <li><a href="/2006/about.php">About</a></li>
  10. <li><a href="/2006/projects.php">Projects</a></li>
  11. <li><a href="/2006/services.php">Services</a></li>
  12. <li><a href="/2006/contact.php">Contact Us</a></li>
  13. <li><a href="#">Link 1</a></li>
  14. <li><a href="#">Link 2</a></li>
  15. </ul></div>
  16. </div>


No estoy seguro si esto es lo que busca?
Watch me grow
  • SB
  • Moderator
  • Genius
  • Avatar de Usuario
  • Registrado: Nov 16, 2004
  • Mensajes: 8671
  • Loc: Aberdeen, Scotland
  • Status: Offline

Nota Agosto 10th, 2009, 8:16 am

Gracias RD, que ha fijado a un punto. Mi única preocupación es cuando lo hace un ratón y más de una categoría sub vínculo que parecía mostrar todos gracioso.

Por una cuestión de interés, ¿cómo me voy sobre la creación de los vínculos de manera que hay una serie de opciones dentro de ese vínculo que se muestra cuando el ratón pasa sobre los vínculos?
  • Rabid Dog
  • Web Master
  • Web Master
  • Avatar de Usuario
  • Registrado: May 21, 2004
  • Mensajes: 3229
  • Loc: South Africa
  • Status: Offline

Nota Agosto 10th, 2009, 8:35 am

No me acuerdo?
Watch me grow
  • SB
  • Moderator
  • Genius
  • Avatar de Usuario
  • Registrado: Nov 16, 2004
  • Mensajes: 8671
  • Loc: Aberdeen, Scotland
  • Status: Offline

Nota Agosto 10th, 2009, 8:45 am

Id a tener que esperar por lo que si se coloca el ratón sobre "Proyectos" con el ratón, por ejemplo, que aparecerá con una lista de los diferentes proyectos en los que usted puede hacer clic en vez de hacer clic en los proyectos, ver la página a continuación, haga clic en los enlaces allí enumeradas.

¿Eso tiene sentido?
  • Rabid Dog
  • Web Master
  • Web Master
  • Avatar de Usuario
  • Registrado: May 21, 2004
  • Mensajes: 3229
  • Loc: South Africa
  • Status: Offline

Nota Agosto 10th, 2009, 11:08 am

Aún no determinados a lo que quieres decir. Yo pensaba que la solución que no siempre le dan un pase?
Watch me grow
  • SB
  • Moderator
  • Genius
  • Avatar de Usuario
  • Registrado: Nov 16, 2004
  • Mensajes: 8671
  • Loc: Aberdeen, Scotland
  • Status: Offline

Nota Agosto 10th, 2009, 2:43 pm

No, yo pensaba que era demasiado. Se fija el posicionamiento Curiosamente.

Yo realmente debería comenzar desde el principio. Tengo en él hace unos pocos años después hubo un par de años i no hacer nada y en ese tiempo mi capacidad se redujo a mí de ser un novato.

Ive aún para encontrar un tutorial en línea que demuestra lo que me gusta que también están en consonancia con lo que tienen actualmente. Siempre hay un problema aquí o allá.
  • Rabid Dog
  • Web Master
  • Web Master
  • Avatar de Usuario
  • Registrado: May 21, 2004
  • Mensajes: 3229
  • Loc: South Africa
  • Status: Offline

Nota Agosto 10th, 2009, 3:14 pm

De ahí la razón por la que realmente no les gusta el diseño y la interfaz html :)
Watch me grow
  • SB
  • Moderator
  • Genius
  • Avatar de Usuario
  • Registrado: Nov 16, 2004
  • Mensajes: 8671
  • Loc: Aberdeen, Scotland
  • Status: Offline

Nota Agosto 10th, 2009, 3:46 pm

:lol:

Gracias RD.

¿Sabes cómo me gustaría poder tener más opciones en el mouse por encima?
  • Rabid Dog
  • Web Master
  • Web Master
  • Avatar de Usuario
  • Registrado: May 21, 2004
  • Mensajes: 3229
  • Loc: South Africa
  • Status: Offline

Nota Agosto 10th, 2009, 4:01 pm

Cab que prehaps puesto una captura de pantalla de lo que intentamos conseguir?
Watch me grow
  • Bogey
  • Bogey
  • Genius
  • Avatar de Usuario
  • Registrado: Jul 14, 2005
  • Mensajes: 8211
  • Loc: USA
  • Status: Offline

Nota Agosto 10th, 2009, 9:41 pm

#Gone :shock:

[EDIT:] Además, los siguientes wouldnt ser mejor?
Código: [ Select ]
<script>
function showNav(id)
{
    if(document.getElementById(id).style.display == 'block')
    {
        document.getElementById(id).style.display = 'none';
    }
    else
    {
        document.getElementById(id).style.display = 'block';
    }
}
</script>
<div id="footer">
<a href="javascript&#058;showNav('navigation');">Home</a>
<ul id="navigation">
<li><a href="/2006/about.php">About</a></li>
<li><a href="/2006/projects.php">Projects</a></li>
<li><a href="/2006/services.php">Services</a></li>
<li><a href="/2006/contact.php">Contact Us</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul></div>
</div>
  1. <script>
  2. function showNav(id)
  3. {
  4.     if(document.getElementById(id).style.display == 'block')
  5.     {
  6.         document.getElementById(id).style.display = 'none';
  7.     }
  8.     else
  9.     {
  10.         document.getElementById(id).style.display = 'block';
  11.     }
  12. }
  13. </script>
  14. <div id="footer">
  15. <a href="javascript&#058;showNav('navigation');">Home</a>
  16. <ul id="navigation">
  17. <li><a href="/2006/about.php">About</a></li>
  18. <li><a href="/2006/projects.php">Projects</a></li>
  19. <li><a href="/2006/services.php">Services</a></li>
  20. <li><a href="/2006/contact.php">Contact Us</a></li>
  21. <li><a href="#">Link 1</a></li>
  22. <li><a href="#">Link 2</a></li>
  23. </ul></div>
  24. </div>


[EDIT 2:] @ SB: Es necesario poner en display: none; para #navegación ...Esperamos que tenía sentido.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Rabid Dog
  • Web Master
  • Web Master
  • Avatar de Usuario
  • Registrado: May 21, 2004
  • Mensajes: 3229
  • Loc: South Africa
  • Status: Offline

Nota Agosto 11th, 2009, 1:48 am

Que puso la piel en bandido, me imaginé que la SB ser un avezado programador tendría que poner en sí mismo :)
Watch me grow
  • SB
  • Moderator
  • Genius
  • Avatar de Usuario
  • Registrado: Nov 16, 2004
  • Mensajes: 8671
  • Loc: Aberdeen, Scotland
  • Status: Offline

Nota Agosto 11th, 2009, 8:19 am

Ive hecho de que ambos sugieren ..

Código: [ Select ]
<script>
function showNav(id)
{
if(document.getElementById(id).style.display == 'block')
{document.getElementById(id).style.display = 'none';
}
else
{
document.getElementById(id).style.display = 'block';
}
}
</script>
<div id="footer">
<a href="javascript&#058;showNav('navigation');">Home</a>
<ul id="navigation">
<li><a href="/2006/about.php">About</a></li>
<li><a href="/2006/projects.php">Projects</a></li>
<li><a href="/2006/services.php">Services</a></li>
<li><a href="/2006/contact.php">Contact Us</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul></div>
</div>
  1. <script>
  2. function showNav(id)
  3. {
  4. if(document.getElementById(id).style.display == 'block')
  5. {document.getElementById(id).style.display = 'none';
  6. }
  7. else
  8. {
  9. document.getElementById(id).style.display = 'block';
  10. }
  11. }
  12. </script>
  13. <div id="footer">
  14. <a href="javascript&#058;showNav('navigation');">Home</a>
  15. <ul id="navigation">
  16. <li><a href="/2006/about.php">About</a></li>
  17. <li><a href="/2006/projects.php">Projects</a></li>
  18. <li><a href="/2006/services.php">Services</a></li>
  19. <li><a href="/2006/contact.php">Contact Us</a></li>
  20. <li><a href="#">Link 1</a></li>
  21. <li><a href="#">Link 2</a></li>
  22. </ul></div>
  23. </div>


y CSS,

Código: [ Select ]
#navigation {
    display: none;
    height: 30px;
    width: 948px;
    background:#000;
}

#navigation li {
display: none;
}

#navigation a {
float: left;
display: block;
width: 115px;
text-align: center;
padding: 3px 0;
}

#navigation li a:hover {
background: ;
color: ;
}
  1. #navigation {
  2.     display: none;
  3.     height: 30px;
  4.     width: 948px;
  5.     background:#000;
  6. }
  8. #navigation li {
  9. display: none;
  10. }
  12. #navigation a {
  13. float: left;
  14. display: block;
  15. width: 115px;
  16. text-align: center;
  17. padding: 3px 0;
  18. }
  20. #navigation li a:hover {
  21. background: ;
  22. color: ;
  23. }


Sin embargo, no muestra la derecha en cualquiera de FF o IE.

Para ser honesto, no soy seguro de por qué se muestra principal, y no otra cosa.

Yo realmente soy un novato, por lo que suponen que yo no sé nada.

Gracias Bogey y RD.
  • Rabid Dog
  • Web Master
  • Web Master
  • Avatar de Usuario
  • Registrado: May 21, 2004
  • Mensajes: 3229
  • Loc: South Africa
  • Status: Offline

Nota Agosto 11th, 2009, 9:12 am

Código: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>James Campbell Architects and Environmental</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style>

#navigationProjects {
    display: none;
    z-index: 10;
    position: absolute;
    margin-top: -75px;
    width: 100px;
    border: 1px solid #ff0000;
}

#navigationProjects ul {
    display: inline;
    list-style-type: none;
    
}

#navigationProjects a {
float: left;
display: block;
width: 115px;
text-align: center;
padding: 3px 0;
}

#linkcontainer{
float:left;
height: 30px;
width: 100%;
border: 1px solid #ff0000;
}

</style>
</head>

<body>
<div id="page_container">
<div id="header">
<p>James Campbell Architects &amp; Environmental</p>
</div>

<div id="left_column">
<ul>
</ul>
</div>

<div id="center_column">
<h2>Welcome</h2>
<p>Example: text position</p>
</div>

<div id="right_column">
<p>
<div id="smallboxes">
<div class="smallbox" id="bluecube"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox" id="greencube"></div>

<div class="smallbox" id="yellowcube"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
</p>
</div>

<script>
function showNav(id, parent)
{
if(document.getElementById(id).style.display == 'block')
{document.getElementById(id).style.display = 'none';
}
else
{
document.getElementById(id).style.display = 'block';
document.getElementById(id).style.left = (parent.offsetLeft - 25) + "px";
}
}
</script>
<div id="footer">
<div id="linkcontainer">
<a href="#">Home</a> |
<a href="/2006/about.php">About</a> |
<a href="#" onmouseover="showNav('navigationProjects', this);">Projects
</a> |
<a href="/2006/services.php">Services</a> |
<a href="/2006/contact.php">Contact Us</a>
</div>
</div>
</div>
<div id="navigationProjects">
<ul>
<li><a href="/2006/projects.php?id=1">Link 1</a></li>
<li><a href="/2006/projects.php?id=2">Link 2</a></li>
</ul>
</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>James Campbell Architects and Environmental</title>
  5. <link rel="stylesheet" type="text/css" href="style.css" />
  6. <style>
  8. #navigationProjects {
  9.     display: none;
  10.     z-index: 10;
  11.     position: absolute;
  12.     margin-top: -75px;
  13.     width: 100px;
  14.     border: 1px solid #ff0000;
  15. }
  17. #navigationProjects ul {
  18.     display: inline;
  19.     list-style-type: none;
  20.     
  21. }
  23. #navigationProjects a {
  24. float: left;
  25. display: block;
  26. width: 115px;
  27. text-align: center;
  28. padding: 3px 0;
  29. }
  31. #linkcontainer{
  32. float:left;
  33. height: 30px;
  34. width: 100%;
  35. border: 1px solid #ff0000;
  36. }
  38. </style>
  39. </head>
  41. <body>
  42. <div id="page_container">
  43. <div id="header">
  44. <p>James Campbell Architects &amp; Environmental</p>
  45. </div>
  47. <div id="left_column">
  48. <ul>
  49. </ul>
  50. </div>
  52. <div id="center_column">
  53. <h2>Welcome</h2>
  54. <p>Example: text position</p>
  55. </div>
  57. <div id="right_column">
  58. <p>
  59. <div id="smallboxes">
  60. <div class="smallbox" id="bluecube"></div>
  61. <div class="smallbox"></div>
  62. <div class="smallbox"></div>
  63. <div class="smallbox"></div>
  64. <div class="smallbox"></div>
  65. <div class="smallbox" id="greencube"></div>
  67. <div class="smallbox" id="yellowcube"></div>
  68. <div class="smallbox"></div>
  69. <div class="smallbox"></div>
  70. </div>
  71. </p>
  72. </div>
  74. <script>
  75. function showNav(id, parent)
  76. {
  77. if(document.getElementById(id).style.display == 'block')
  78. {document.getElementById(id).style.display = 'none';
  79. }
  80. else
  81. {
  82. document.getElementById(id).style.display = 'block';
  83. document.getElementById(id).style.left = (parent.offsetLeft - 25) + "px";
  84. }
  85. }
  86. </script>
  87. <div id="footer">
  88. <div id="linkcontainer">
  89. <a href="#">Home</a> |
  90. <a href="/2006/about.php">About</a> |
  91. <a href="#" onmouseover="showNav('navigationProjects', this);">Projects
  92. </a> |
  93. <a href="/2006/services.php">Services</a> |
  94. <a href="/2006/contact.php">Contact Us</a>
  95. </div>
  96. </div>
  97. </div>
  98. <div id="navigationProjects">
  99. <ul>
  100. <li><a href="/2006/projects.php?id=1">Link 1</a></li>
  101. <li><a href="/2006/projects.php?id=2">Link 2</a></li>
  102. </ul>
  103. </div>
  104. </body>
  105. </html>


Algo como esto?
Watch me grow
  • SB
  • Moderator
  • Genius
  • Avatar de Usuario
  • Registrado: Nov 16, 2004
  • Mensajes: 8671
  • Loc: Aberdeen, Scotland
  • Status: Offline

Nota Agosto 11th, 2009, 9:20 am

Sí, lo siento sobre lo que significa RD i para volver a darle una respuesta que le muestran lo que fue después.

Que se ve lo importante después, pero como usted puede ver (haciendo clic en el enlace original puesto) muestra manera diferente a cómo creo que debería. En IE es diferente a FF.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Agosto 11th, 2009, 9:20 am

1, 2

Publicar Información

  • Total de mensajes en este tema: 24 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 216 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC