1.

Solve : Help needed with web coding?

Answer»

I can't seem to get my website to fit into different monitors without it moving things around. This is urgent so any help is greatly appreciated!!!

MY HTML:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


Kjærulf Praksti






   
       
          KJÆRULF PRAKSTI              
     

   
       


   
       
       
         
       
       
       
       

A Neo-traditional approach


       
       
   
     
   

© MMXIV KJÆRULF PRAKSTI


   
   
       
   





MY CSS:

html, body {
   margin:0;
   padding:0;
   WIDTH:100%;
   height:100%;
   background-color:#FFF;
   font-family:"Helvetica Neue";
   font-size:11px;
   text-transform:uppercase;
}


h1 {
   font-family:"Helvetica Neue";
   font-size:27px;
   font-weight:bold;
}

p {
   text-align:center;
}

#note {
   font-size:10px;
   margin-top:-5px;
   font-style:ITALIC;
}

#wrapper {
   min-height:100%;
   position:relative;
}


#header {
   padding:10px;
   background:#FFF;
   text-align:center;   
}


#button {
   width:100%;
   
}

#CONTENT {
   padding:10px;
   padding-bottom:50px;   /* Height of the footer element */
}

#image {
   display:block;
   text-align:center;
   margin-top:25px;
}

#menu, ul li {
   text-decoration:none;
}


#footer {
   position:absolute;
   bottom:0;
   width:100%;
   text-align:center;
   height:40px;
   margin-top:50px;
   font-size:9px;
   
}

/*Initialize*/
ul#menu, ul#menu ul.submenu {
    padding:0;
    margin-top:-10px;
   text-align:center;
}
ul#menu li, ul#menu ul.submenu li {
    list-style-type: none;
    display: inline-block;
}
/*LINK Appearance*/
ul#menu li a, ul#menu li ul.submenu li a {
    text-decoration: none;
    color: #000;
    background: #FFF;
    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.submenu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu li:hover ul.submenu {
    display:block;
}





/* Links
-------------------------------------------*/

a:link {
   color:#000;
   text-decoration:underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
   color: #000;
   text-decoration:underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover EXPERIENCE as the person using a mouse. */
   text-decoration:underline;
}

THANK YOU SO MUCH!!!Honestly, this is a guess but I think it's worth trying.  Instead of using width of 100% in your CSS code for body, try a fixed width.


Discussion

No Comment Found

Related InterviewSolutions