Problem with my layout live view

[micha]

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

• Programacion
• Contactanos

• Nosotros
• Servicios
• Productos
• Galeria
• Testimonios

Articulo del mes

Novedades

Aceptamos visa

• Trabajamos con EPS
• Mapa de Ubicacion
• Envia esta Pagina

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

[raymondselda]

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

[micha]

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

[Author]

Posts