Grow your CSS skills. Land your dream job.

Problem with space and positions.

  • # February 3, 2010 at 9:16 pm

    Hello guys, first of all i want to say thank for the help if you’ll give me if not, thanks for read.
    Here is my trouble, i have my page i’m testing how to make a website this is my first try.
    So, i was reading the articles of Chris and i decided to start.
    Well, i have my HTML code i don’t know if it was coded wrong
    But in my stylesheet i have all the divs in the correct position, but below the footer i have a big white space that i
    don’t know where it come from, i was trying changing many things but it doesn’t work, i hope you can help, here i leave my CSS and my HTML code.

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




    Bienvenidos

    San Francisco

    Productos

    Todos los Derechos Reservados © CIVELYVEL
    Las imágenes presentadas en este sitio no corresponden precisamente al modelo, puede variar.


    And the CSS

    Code:
    body {
    margin: 0 auto;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    }

    img {
    border:none;
    }

    #menu {
    background-image:url(imagenes/menubg.jpg);
    background-repeat: no-repeat;
    height:47px;
    margin: 0 auto;
    padding:0;
    width:800px;
    }

    #menu ul, li {
    list-style-type: none;
    }

    .nav {
    float:left;
    margin:0 auto;
    position:relative;
    }

    .nav ul {
    padding:0;
    margin: 0;
    }

    .nav li {
    float:left;

    }

    .nav li a {
    color:#FFFFFF;
    display: block;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    font-weight:bold;
    padding: 17px 40px;
    text-decoration:none;
    }

    .nav li a:hover {
    background-color:#ccb479;
    }

    #header {
    height: 127px;
    margin: 0 auto;
    padding: 10px;
    width: 785px;
    }

    #bienvenidos {
    margin:0 auto;
    width:600px;
    }

    #sanfco {
    background-color:#f0f0f0;
    border: 1px solid #cecfd0;
    height:420px;
    margin:0 auto;
    position:relative;
    right:140px;
    width:400px;
    }

    .contenido img{
    padding-left:47px;
    padding-top:22px;
    margin:0 auto;
    width:300px;
    }

    #productos {
    margin:0 auto;
    width:100px;
    position:relative;
    bottom:475px;
    left:200px;
    }

    #galeria {
    margin:0 auto;
    position:relative;
    bottom:475px;
    left:180px;
    width:100px;
    }

    #fotos {
    padding:0px;
    background-color:#f0f0f0;
    border: 1px solid #cecfd0;
    height:480px;
    width:200px;
    }

    #fotos img {
    padding:10px;
    }

    #galeria p {
    position:absolute;
    left:80px;
    width:100px;
    bottom:0px;
    }

    #galeria a {
    color:#5eac35;
    text-decoration:none;
    font-size:12px;
    font-family:Tahoma, Geneva, sans-serif;
    font-weight:bold;
    }

    #galeria a:hover {
    text-decoration:underline;
    }
    #pieindex {
    width:785px;
    margin: 0 auto;
    height:auto;
    position:relative;
    bottom:450px;
    }
    #pieindex p {
    font-weight:bold;
    border-top: 1px solid #cecfd0;
    padding-top:15px;
    text-align:center;
    }

    #pie {
    margin: 0 auto;
    width:785px;
    }

    #pieindex span {
    color:#5eac35;
    font-weight:bold;
    }

    #pieindex a {
    color:#004385;
    font-weight:bold;
    text-decoration:none;
    }

    #pieindex a:hover {
    text-decoration:underline;
    }

    #pie p {
    font-weight:bold;
    border-top: 1px solid #cecfd0;
    padding-top:15px;
    text-align:center;

    }

    #pie span {
    color:#5eac35;
    font-weight:bold;
    }

    #pie a {
    color:#004385;
    font-weight:bold;
    text-decoration:none;
    }

    #pie a:hover {
    text-decoration:underline;
    }

    /* Nosotros */

    #nosotros {
    height:180px;
    margin: 0 auto;
    width:800px;
    }

    .noscont h2 {
    color:#58cd38;
    font-family:Georgia, “Times New Roman”, Times, serif;
    text-align:center;
    }

    .noscont {
    border:1px solid #cecfd0;
    margin-top:50px;
    padding:20px;
    width:400px;
    }

    .noscont p {
    text-align:justify;
    }

    #nosimg {
    margin:0 auto;
    padding:0;
    position:absolute;
    width:800px;
    }

    .imgnos {
    float:right;
    }

    /* Productos */

    #nuestrosproductos {
    height:50px;
    margin: 0 auto;
    width:600px;
    }

    .religiosos {
    padding-top:30px;
    }

    /* Contacto */

    #contacto {
    margin: 0 auto;
    width:800px;
    padding:0;
    height:230px;
    }

    #contacto h2{
    background:url(imagenes/formulario.jpg)no-repeat;
    position:relative;
    padding:10px;
    text-indent:-9999px;
    }
    #contactolista li {
    padding-top:20px;
    list-style-image:url(imagenes/flama.png);
    }

    .formulario input {
    padding:4px;
    }

    .nombre {
    margin-left:10px;
    }

    .telefono {
    margin-left:8px;
    }

    .email {
    margin-left:20px;
    }

    .comentarios {
    margin-left:63px;
    margin-top:-12px;
    }

    .enviar {
    background-color:#6e6141;
    color:#FFFFFF;
    font-weight:bold;
    font-family:Tahoma, Geneva, sans-serif;
    padding:7px;
    margin-left:90px;
    }

    .reset {
    background-color:#6e6141;
    color:#FFFFFF;
    font-weight:bold;
    font-family:Tahoma, Geneva, sans-serif;
    padding:7px;
    }

    #infocontacto {
    height:180px;
    width:300px;
    margin: 0 auto;
    padding:10px;
    position:relative;
    bottom:165px;
    left:180px;
    }

    #contactanos {
    border: 1px solid #cecfd0;
    height:265px;
    }

    #contactanos p {
    padding:10px;
    position:relative;
    bottom:100px;
    text-align:left;
    font-family:georgia;
    font-size:13px;
    }

    #contactanos h2{
    background-image:url(imagenes/contactanos.jpg);
    background-repeat: no-repeat;
    height:80px;
    position:relative;
    left:50px;
    bottom:85px;
    text-indent:-9999px;
    }

    If i’m doing somethin’ wrong you can tell me, i learn from my mistakes.
    Greatings.

    Alejandro.-

    # February 3, 2010 at 10:07 pm

    I see that in .pieindex you have a bottom: 450px on it…? Also, try to use float: left/right and wrap everything in a #container…

    Hope that help…

    # February 4, 2010 at 7:22 pm

    Thanks for read and the help…
    But that "bottom" that i got there is because if i don’t use that bottom my "pieindex" is on the floor, so it is just a small fixed.
    Maybe you can advice me how to float an element or how to position an element in the right side, because i just used a position:relative; and move it with "top" and "left", but i don’t think that it is the best option.
    Thanks for the help.

    Greattings.

    Alex.-

    # February 5, 2010 at 6:01 am

    Read this article which explains positioning in css
    http://www.barelyfitz.com/screencast/ht … sitioning/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".