Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Problem with my layout live view

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #25374
    micha
    Member

    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:




    Prenatal






    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

    #60338
    raymondselda
    Member

    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

    #60339
    micha
    Member

    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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.