Volver al Foro de Diseño de páginas Web

CSS punta en la posición

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

Nota Abril 25th, 2009, 12:29 pm

Ive sido alrededor jugueteando con este por un tiempo y ahora la realidad comienza a ser más de un dolor que como identificador. Me pregunto si alguien podría ayudarme un poco.

El problema que tengo en este momento es poner el grupo de cajas dentro de la columna de la derecha tengo en la página.

El sitio

El html "cuerpo" de código:

/ / REMOVIDO CÓDIGO: este código ya no es importante.

Aunque estoy escribiendo esto me permite explicar y otro i saber algunas cuestiones im probable que tropiece con un aquí y soy incapaz de deshacerse. ID de la esperanza de tener un sistema de navegación horizontal que atraviesa la parte inferior de la caja donde está el símbolo del copyright y los derechos de autor para que aparezca el símbolo debajo de la caja, pero siempre he intentado que este sólo comedores y se coloca fuera de centro y parece una tontería.

Im conciencia cuando se ve en la frontera, es decir, que las líneas de la derecha y la izquierda a la derecha al principio, pero en francos franceses como me parece que debería. Cualquier ideas sobre cómo puedo resolver esto?

También soy consciente de que la columna de la izquierda y la derecha han nulas y las imágenes no se muestran.

¡Salud!! :)
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Abril 25th, 2009, 12:29 pm

  • Bogey
  • Bogey
  • Genius
  • Avatar de Usuario
  • Registrado: Jul 14, 2005
  • Mensajes: 8211
  • Loc: USA
  • Status: Offline

Nota Abril 25th, 2009, 2:25 pm

Realmente no conseguirlo...que desea que las cajas que se encuentran fuera de las fronteras cuadro amarillo a amarillo dentro de esa caja de frontera en el lado derecho...¿verdad?

De acuerdo con usted si me recodificar toda la cosa para ti?
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • SB
  • Moderator
  • Genius
  • Avatar de Usuario
  • Registrado: Nov 16, 2004
  • Mensajes: 8676
  • Loc: Aberdeen, Scotland
  • Status: Offline

Nota Abril 25th, 2009, 2:28 pm

Esa es exactamente la misma.

Yo no se opondrá a que Bogey. Cualquier ayuda y asesoramiento aquí serán bienvenidos.
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Registrado: Mar 28, 2009
  • Mensajes: 305
  • Loc: AFK
  • Status: Offline

Nota Abril 25th, 2009, 3:12 pm

Eliminar la línea 113 de su css. Trabaja para mí
Custom Web Design
  • Bogey
  • Bogey
  • Genius
  • Avatar de Usuario
  • Registrado: Jul 14, 2005
  • Mensajes: 8211
  • Loc: USA
  • Status: Offline

Nota Abril 25th, 2009, 8:26 pm

Supongo que tengo resuelto...No pude publicar por un tiempo desde que tuve que ir a trabajar...:lol:
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • SB
  • Moderator
  • Genius
  • Avatar de Usuario
  • Registrado: Nov 16, 2004
  • Mensajes: 8676
  • Loc: Aberdeen, Scotland
  • Status: Offline

Nota Abril 26th, 2009, 12:30 pm

No todos figuró sin embargo, todavía los demás pequeños niggly bits que siguen siendo un dolor en el trasero de averiguar.

Gracias por su ayuda, tanto de NATAS y bandido. Muy apreciada.
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Registrado: Mar 28, 2009
  • Mensajes: 305
  • Loc: AFK
  • Status: Offline

Nota Abril 26th, 2009, 2:43 pm

SB,

Si aún necesita más ayuda, Id con mucho gusto porque Im still en el proceso de aprendizaje CSS. Sería una experiencia de aprendizaje para mí también.
Custom Web Design
  • SB
  • Moderator
  • Genius
  • Avatar de Usuario
  • Registrado: Nov 16, 2004
  • Mensajes: 8676
  • Loc: Aberdeen, Scotland
  • Status: Offline

Nota Abril 26th, 2009, 2:58 pm

Gracias.

Como he mencionado en el post inicial estoy consciente de que el sitio se muestra diferente en tanto IE como FF con la izquierda ya la derecha las fronteras. Lo ideal sería importante que tengan que mirar la pantalla como se muestra en FF.

Para ser honestos, fue un poco interesado en ver si iba a Bogey recodificar porque sé que la codificación es horrible y me causa problemas en el futuro. Me parece que nunca puede tener un sitio de codificación de la manera que me gusta sin que exista un problema mostrando en cualquiera de los navegadores.

Gracias de nuevo.
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Registrado: Mar 28, 2009
  • Mensajes: 305
  • Loc: AFK
  • Status: Offline

Nota Abril 26th, 2009, 3:07 pm

También voy a trabajar en un nuevo código y ver si funciona mejor para usted. Se me dará una oportunidad a la práctica.
Custom Web Design
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Registrado: Mar 28, 2009
  • Mensajes: 305
  • Loc: AFK
  • Status: Offline

Nota Abril 26th, 2009, 3:47 pm

Pruebe este SB .. Lo comprobé en Firefox e IE.

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" />
</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>
 
    <div id="footer">
        <p>&copy;</p>
    </div>
</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
  2.  
  3. transitional.dtd">
  4. <html>
  5. <head>
  6. <title>James Campbell Architects and Environmental</title>
  7. <link rel="stylesheet" type="text/css" href="style.css" />
  8. </head>
  9.  
  10. <body>
  11. <div id="page_container">
  12.     <div id="header">
  13.         <p>James Campbell Architects &amp; Environmental</p>
  14.     </div>
  15.  
  16.     <div id="left_column">
  17.         <ul>
  18.         </ul>
  19.     </div>
  20.  
  21.     <div id="center_column">
  22.         <h2>Welcome</h2>
  23.         <p>Example: text position</p>
  24.     </div>
  25.  
  26.     <div id="right_column">
  27.         <p>
  28.         <div id="smallboxes">
  29.             <div class="smallbox" id="bluecube"></div>
  30.             <div class="smallbox"></div>
  31.             <div class="smallbox"></div>
  32.  
  33.  
  34.             <div class="smallbox"></div>
  35.             <div class="smallbox"></div>
  36.             <div class="smallbox" id="greencube"></div>
  37.  
  38.             <div class="smallbox" id="yellowcube"></div>
  39.             <div class="smallbox"></div>
  40.             <div class="smallbox"></div>
  41.         </div>
  42.         </p>
  43.     </div>
  44.  
  45.     <div id="footer">
  46.         <p>&copy;</p>
  47.     </div>
  48. </div>
  49. </body>
  50. </html>



CSS

Código: [ Select ]
/* Intrinsic HTML Elements */
body{
    margin:0;
    padding:0;
    background: #000;
    font-family: sans-serif;
    font-size: 75%;
    color: #fff;
}
 
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:149px;
    float:left;
    background:url(back.gif);
    height: 340px;
    border-left: 1px solid #ffff00;
    padding-top: 60px;
    padding-left: 30px;
}
 
#center_column{
    width:420px;
    float:left;
    height: 375px; 
    padding-top: 25px;
    padding-left: 50px;
}
 
#right_column{
    width:299px;
    float:left;
    background:url(back.gif);
    height: 325px;
    border-right: 1px solid #ffff00;
    padding-top: 75px;
}
 
#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);
}
 
  1. /* Intrinsic HTML Elements */
  2. body{
  3.     margin:0;
  4.     padding:0;
  5.     background: #000;
  6.     font-family: sans-serif;
  7.     font-size: 75%;
  8.     color: #fff;
  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:149px;
  63.     float:left;
  64.     background:url(back.gif);
  65.     height: 340px;
  66.     border-left: 1px solid #ffff00;
  67.     padding-top: 60px;
  68.     padding-left: 30px;
  69. }
  70.  
  71. #center_column{
  72.     width:420px;
  73.     float:left;
  74.     height: 375px; 
  75.     padding-top: 25px;
  76.     padding-left: 50px;
  77. }
  78.  
  79. #right_column{
  80.     width:299px;
  81.     float:left;
  82.     background:url(back.gif);
  83.     height: 325px;
  84.     border-right: 1px solid #ffff00;
  85.     padding-top: 75px;
  86. }
  87.  
  88. #footer{
  89.     clear:both;
  90.     background:#000;
  91.     border-bottom: 1px solid #ffff00;
  92.     border-right: 1px solid #ffff00;
  93.     border-left: 1px solid #ffff00;
  94. }
  95.  
  96. /* CSS Document */
  97.  
  98. .smallbox {
  99.     width: 80px;
  100.     height: 80px;
  101.     border: 1px solid #666;
  102.     float: left;
  103.     margin-left: 6px;
  104.     margin-bottom: 7px;
  105. }
  106.  
  107. div#smallbox div a:link, div#smallbox div a:visited {
  108.     text-decoration: none;
  109. }
  110.  
  111. div#smallbox div a:hover {
  112.  
  113. }
  114. #bluecube {
  115.     background-color: #40668C;
  116.     filter:alpha(opacity=75);
  117.     -moz-opacity:0.75;
  118.     opacity: 0.75;
  119. }
  120. #greencube {
  121.     background-color: #335C33;
  122.     filter:alpha(opacity=75);
  123.     -moz-opacity:0.75;
  124.     opacity: 0.75;
  125. }
  126. #yellowcube {
  127.     background-color: #FFD699;
  128.     filter:alpha(opacity=75);
  129.     -moz-opacity:0.75;
  130.     opacity: 0.75;
  131. }
  132. #yellowcube:link, #yellowcube:visited {
  133.     opacity: .40;
  134.     filter: alpha(opacity=40);
  135. }
  136.  
Custom Web Design
  • SB
  • Moderator
  • Genius
  • Avatar de Usuario
  • Registrado: Nov 16, 2004
  • Mensajes: 8676
  • Loc: Aberdeen, Scotland
  • Status: Offline

Nota Abril 26th, 2009, 4:25 pm

NATAS muy apreciada. Que ha resuelto una de las cuestiones que tenía y ha hecho el php texto mucho más claro para entender y trabajar con ellos.

Im una deuda con ustedes.

Ahora tengo que trabajar en la barra de navegación :lol:
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Registrado: Mar 28, 2009
  • Mensajes: 305
  • Loc: AFK
  • Status: Offline

Nota Abril 26th, 2009, 4:33 pm

Yo consideraba que el código fuente aquí...

http://www.campbell-james.co.uk/2006/new/index.php

Hay etiquetas para una lista desordenada, pero no hay elementos de lista. Im adivinar esto va a ser su menú de navegación, por lo que Im que no está seguro de cómo me puede ayudar con eso.
Custom Web Design
  • SB
  • Moderator
  • Genius
  • Avatar de Usuario
  • Registrado: Nov 16, 2004
  • Mensajes: 8676
  • Loc: Aberdeen, Scotland
  • Status: Offline

Nota Abril 27th, 2009, 6:15 am

Gracias NATAS.

Idea era que el sistema de navegación extenderse a lo largo de la parte inferior de la página en la que es símbolo del derecho de autor y de los derechos de autor para conocer inmediatamente debajo de la principal área de contenido (la caja).

Va a examinar esto un poco más ahora.

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

Nota Mayo 8th, 2009, 7:14 am

Im en realidad aún tiene algunos problemas con la barra de navegación.

Lo ideal sería que la esperanza de la barra de navegación se encuentra por debajo de la principal caja de contenido rectángulo. ¿Alguna idea de lo que estoy haciendo mal para que sea el posicionamiento de la forma en que está ahora?

Link es en el post original aquí y la codificación en el cuerpo es ahora...

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">
<p>Index</p>
<p>James Campbell Architects &amp; Environmental...</p>
</div>
 
<div id="right_column">
<p>
<div id="smallboxes">
<div class="smallbox" id="blue"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
 
 
<div class="smallbox"></div>
<div class="smallbox" id="logo"></div>
<div class="smallbox" id="green"></div>
 
<div class="smallbox" id="yellow"></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. <p>Index</p>
  14. <p>James Campbell Architects &amp; Environmental...</p>
  15. </div>
  16.  
  17. <div id="right_column">
  18. <p>
  19. <div id="smallboxes">
  20. <div class="smallbox" id="blue"></div>
  21. <div class="smallbox"></div>
  22. <div class="smallbox"></div>
  23.  
  24.  
  25. <div class="smallbox"></div>
  26. <div class="smallbox" id="logo"></div>
  27. <div class="smallbox" id="green"></div>
  28.  
  29. <div class="smallbox" id="yellow"></div>
  30. <div class="smallbox"></div>
  31. <div class="smallbox"></div>
  32. </div>
  33. </p>
  34. </div>
  35.  
  36. <div id="footer">
  37. <ul id="navigation"><li id="youarehere"><a href="/2006/index.php">Home</a></li>
  38. <p><li><a href="/2006/about.php">About</a></li>
  39. <li><a href="/2006/projects.php">Projects</a></li>
  40. <li><a href="/2006/services.php">Services</a></li>
  41. <li><a href="/2006/contact.php">Contact Us</a></li>
  42. <li><a href="#">Link 1</a></li>
  43. <li><a href="#">Link 2</a></li></p>
  44. </ul>
  45. </div>
  46. </div>
  47. </body>


CSS es la navegación...

Código: [ Select ]
#navigation {
clear:both;
    background:#000;
    border-bottom: 1px solid #ffff00;
    border-right: 1px solid #ffff00;
    border-left: 1px solid #ffff00;
}
#navigation li {
float: left;
}
#navigation li a {
display: block;
width: 115px;
text-align: center;
padding: 3px 0;
}
#navigation li a:hover {
background: ;
color: ;
}
  1. #navigation {
  2. clear:both;
  3.     background:#000;
  4.     border-bottom: 1px solid #ffff00;
  5.     border-right: 1px solid #ffff00;
  6.     border-left: 1px solid #ffff00;
  7. }
  8. #navigation li {
  9. float: left;
  10. }
  11. #navigation li a {
  12. display: block;
  13. width: 115px;
  14. text-align: center;
  15. padding: 3px 0;
  16. }
  17. #navigation li a:hover {
  18. background: ;
  19. color: ;
  20. }


Gracias a todos.
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Registrado: Mar 28, 2009
  • Mensajes: 305
  • Loc: AFK
  • Status: Offline

Nota Mayo 8th, 2009, 2:57 pm

He visitado el enlace en el post original en este hilo, pero no parece nada como el youve código escrito previamente.

Me di cuenta de algunas clases de nuevo en su html no definidos en el CSS anteriormente, por lo thats confuso.

Heres mi CSS para la navegación que funciona para mí en ambos navegadores (utilizando el código HTML anterior que había publicado antes).

Código: [ Select ]
 
 #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.  
  2.  #navigation {
  3.       height: 30px;
  4.       width: 948px;
  5.       background:#000;
  6.  }
  7.  #navigation li {
  8.     display: inline;
  9.  }
  10.  #navigation a {
  11.     float: left;
  12.     display: block;
  13.     width: 115px;
  14.     text-align: center;
  15.     padding: 3px 0;
  16.  }
  17.  #navigation li a:hover {
  18.     background: ;
  19.     color: ;
  20.  }
  21.  
Custom Web Design
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Mayo 8th, 2009, 2:57 pm

1, 2

Publicar Información

  • Total de mensajes en este tema: 17 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 139 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