Grow your CSS skills. Land your dream job.

Problem with my layout live view

  • # July 7, 2009 at 10:43 pm

    Hi, there i’m in web design school and i’m doing my final exam with a simulation on a real-life client who wants a web site and i’ve been working on the Home page and it’s finished already but when i see in opera or my work-budy sees it in his firefox or other browser it looks like this

    this is a screenshot i took so you could see how it looks like

    http://www.urbanoarquitectonica.com/pre … rdView.jpg

    and this is the home page

    http://www.urbanoarquitectonica.com/prenatal/index.html

    this is my markup

    Code:
    < ?xml version="1.0" encoding="UTF-8"?>
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">








    curvas
    #
    #
    #

    tarjeta visa

    Aceptamos visa

    Felix Olcay 169 San Antonio-Miraflores
    Telef: 241-5771 / 445-0515



    and this is my layout.css

    Code:
    body{
    background-image:url(“../img/bg.jpg”);
    background-color:#f7e9ce;
    }

    div#wrap{
    margin: 20px auto;
    width: 1000px;
    }

    /* HEADER */

    div#header{
    background-image:url(“../img/headerBG.png”);
    height:146px;
    overflow:hidden;
    padding-bottom:10px;
    position:relative;
    z-index:10;
    }

    div#logo{
    background-image:url(“../img/logo.png”);
    background-repeat:no-repeat;
    float:left;
    height:80px;
    margin: 20px 0 0 36px;
    padding-bottom:15px;
    width:279px;
    }

    /* header top menu*/

    div#audio, ul#topMenu{
    margin-top:12px;
    }

    div#audio{
    position:absolute;
    right:200px;
    }

    ul#topMenu{
    position:absolute;
    right: 0px;
    margin-right:16px;
    }

    ul#topMenu li{
    display:inline;
    }

    ul#topMenu a{
    border-right:1px solid #000;
    }

    a#programacion{
    padding-right:5px;
    }

    ul#topMenu a.ultimo, ul#bottomMenu a.ultimo{
    border:none;
    }

    /* MENU */

    div#menuTabs{
    position:relative;
    width:1000px;
    }

    div.bgBottom{
    background-image: url(“../img/menuBottomBG.png”);
    background-repeat:no-repeat;
    padding-bottom: 30px;
    position:absolute;
    top:-37px;
    left: 391px;
    width:619px;
    z-index:10;
    }

    ul#menu{
    position:absolute;
    top:-54px;
    left:565px;
    z-index:20;
    }

    ul#menu li{
    display:inline;
    }

    ul#menu a{
    background-color:#ffcc00;
    padding:3px 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }

    /* CONTENIDO */

    div#contentWrap{
    background-color:#fffbe8;
    position:relative;
    }

    div#curva{
    position:relative;
    }

    div#curva img{
    position:absolute;
    top:-59px;
    z-index:500;
    }

    div#slideShow{
    position:relative;
    z-index:200;
    }

    div#slides{
    margin-top:-38px;
    width:652px;
    }

    div#sidebar{
    background-color: #fffbe8;
    position:absolute;
    top:0px;
    width:349px;
    left: 648px;
    padding-bottom: 225px;
    }

    div#col1{
    background-image:url(“../img/col1BG.png”);
    background-repeat:no-repeat;
    background-color:#ffe28d;
    height:79px;
    margin-top:50px;
    padding-top:10px;
    width:344px;
    }

    div#col2{
    background-image:url(“../img/col2BG.png”);
    background-repeat:no-repeat;
    height:79px;
    width:344px;
    }

    div.bloques{
    margin-left:5px;
    position:relative;
    top:208px;
    padding-top:10px;
    }

    div#bottomWrap{
    overflow:hidden;
    position:relative;
    top:419px;
    }

    div#bottomContent{
    background:url(“../img/bottomContent.png”) no-repeat;
    height:115px;
    width:1000px;
    }

    div.info{
    float:left;
    margin-top:65px;
    }

    div#tarjeta{
    width:200px;
    margin-left:45px;
    }

    div#tarjeta img{
    float:left;
    margin-top:-10px;
    }

    ul#bottomMenu{
    width:470px;
    margin-left:20px;
    }

    ul#bottomMenu li{
    display:inline;
    }

    ul#bottomMenu a{
    border-right: 1px solid #000;
    padding: 0 10px;
    }

    /* FOOTER */

    div#footer{
    background-image:url(“../img/footerbg.png”);
    background-repeat:no-repeat;
    background-color:#ffe28d;
    overflow:hidden;
    position:relative;
    top:460px;
    width:1000px;
    }

    div.auspiciadores img{
    margin: 5px 50px 0px 50px;
    }

    img#au2{
    margin-left:190px;
    }

    img#au3{
    margin-left: 190px;
    }

    please i really need the help this is the first time this happens to me. Maybe it’s cause i’ve been using to much relative and absolute positioning i don’t know please i need some help or trick i HAVE TO email this to my teacher some time this week.

    thanks in advance

    Raymi

    # July 8, 2009 at 12:04 am

    Hi Micha,

    As for the homepage, try to:

    - put a width maybe around 500px for the ul#menu. Then position it to the left with a value of 530px.
    - adjust position of div audio with right:225px (im not sure if you wanted this fixed)
    - apply larger width(maybe 500px) to ul#bottomMenu

    I saw your homepage and I must say that you’re doing a great job. Don’t get frustrated and never stop learning. There are tons of learning materials out there including CSS Tricks. Eventually everything will pay off.

    Just let me know if you have any more questions. :D

    # July 8, 2009 at 12:45 am

    thanks very very much for taking your time and helping me i’m really grateful i’m gonna try it that way and let you know. :) i have a question tho:

    do you think i should get rid of the div#menuTabs? i’m not sure cause i red that it’s kind of bad practice

    thanks for the compliment i really need it hahaa :D

    # July 8, 2009 at 2:26 am

    looks like it is fixed…. all ok on FF, IE8 & Opera

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".