Forums

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

<?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\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
<head>
    <title>Prenatal</title>
    <link href=\"css/reset.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\" />
    <link href=\"css/layout.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\" />
    <link href=\"css/typography.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\" />
    <!--[if lt IE 7]>
        <script type=\"text/javascript\" src=\"js/unitpngfix.js\"></script>
<![endif]--> 
    <script type=\"text/javascript\" src=\"js/jquery.js\"></script>
    <script type=\"text/javascript\" src=\"js/cycle.js\"></script>
    <script type=\"text/javascript\" src=\"js/slideshow.js\"></script>
    <script type=\"text/javascript\" src=\"js/cufon.js\"></script>
    <script type=\"text/javascript\">
	Cufon.replace('h1, h2, h3, h5');
    </script>
</head>
<body>
    <div id=\"wrap\">
        
        <div id=\"header\">
            
            <div id=\"logo\">
                <h1>Prenatal</h1>
            </div>
            
            <div id=\"audio\">
                <img src=\"img/audioPlayer.png\" alt=\"audio player\" />
            </div>
          
            <ul id=\"topMenu\">
		<li><a href=\"#\" id=\"programacion\">Programacion</a></li>
		<li><a href=\"#\" class=\"ultimo\" id=\"contactanos\">Contactanos</a></li>
            </ul>
            
        </div><!---end of Header-->
       
        <div id=\"menuTabs\">
            
            <ul id=\"menu\">
                
                <li><a href=\"#\">Nosotros</a></li>
                <li><a href=\"#\">Servicios</a></li>
                <li><a href=\"#\">Productos</a></li>
                <li><a href=\"#\">Galeria</a></li>
                <li><a href=\"#\">Testimonios</a></li>
                
            </ul>
            
            <div class=\"bgBottom\"></div>
            
        </div><!---end of menuTabs-->
        
        <div id=\"curva\">
         <img src=\"img/curvas.png\" alt=\"curvas\" />
        </div>
        
        <div id=\"contentWrap\">
            <div id=\"slideShow\">
                
                <div id=\"slides\">
                    <a href=\"#\" title=\"See Details\" class=\"thumb defaultSlide\" ><img src=\"img/mainPic1.png\" alt=\"#\" class=\"slideshow-image\" /></a>
                    <a href=\"#\" title=\"See Details\" class=\"thumb\" ><img src=\"img/mainPic2.png\" alt=\"#\" class=\"slideshow-image\" /></a>
                    <a href=\"#\" title=\"See Details\" class=\"thumb\"><img src=\"img/mainPic3.png\" alt=\"#\"  class=\"slideshow-image\"/></a>
                </div>
                
            </div><!---end of Slideshow-->
            
            <div id=\"sidebar\">
               
               <div id=\"col1\" class=\"bloques\">
                    
                    <h2>Articulo del mes</h2>
                 
                </div>
              
                <div id=\"col2\" class=\"bloques\">
                    
                    <h2>Novedades</h2>
                    
                </div>
            </div><!---end of sidebar-->
           
        </div><!---end of contentWrap-->
	
	<div id=\"bottomWrap\">
            
            <div id=\"bottomContent\">
                
		<div id=\"tarjeta\" class=\"info\">
                    <img src=\"img/visa.jpg\" alt=\"tarjeta visa\" />
                    <p>Aceptamos visa</p>
                </div>
             
                <div class=\"info\">
                    <ul id=\"bottomMenu\">
                        <li><a href=\"#\">Trabajamos con EPS</a></li>
                        <li><a href=\"#\">Mapa de Ubicacion</a></li>
                        <li><a href=\"#\" class=\"ultimo\">Envia esta Pagina</a></li>
                    </ul> 
                </div>  
                
		<div class=\"info\" id=\"direccion\">
                    <p>Felix Olcay 169 San Antonio-Miraflores<br /> Telef: 241-5771 / 445-0515</p>
                    
                </div>  
               
            </div><!---end of bottomContent--> 
	    
	</div><!---end of bottomWrap-->
	
	<div id=\"footer\">
	    
	    <div class=\"auspiciadores\">
		
		<img src=\"img/jonson.png\" alt=\"jonsos baby\"  id=\"au1\"/>
		<img src=\"img/ameda.png\" alt=\"ameda hospital\" id=\"au2\"/>
		<img src=\"img/baby.png\" alt=\"baby center\" id=\"au3\" />
		
	    </div>
	    
	</div><!---end of footer-->
        
    </div><!---end of wrap-->
</body>
</html>

and this is my layout.css

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

ikthius

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

treehouse : what would you like to learn today?

Forums

Problem with my layout live view