CSS Forum

**silverglade** · 01-27-2009, 08:55 PM

hi, i have a series of horizontal image links, and i want to try to center them in their containing div. as it is, they are floated to the left on a white background div. im not sure how to get them centered. any help greatly appreciated again. thank you. derek

here is the page im talking about.

http://derekvanderven.com/doctors_columbia/home.html

here is the css for the page.

Code:

@charset "utf-8";
/* CSS Document */

body {
    margin: 0;  /* clear for browsers */
    padding: 0;
    background-color: #517E86;
}
#container {
    margin: 0 auto 0 auto;
    width: 800px;
    overflow: auto;
    }
    
#header {
    background-image: url(header.gif);
     background-repeat: no-repeat;
     width: 800px;
     height: 96px;
     }
#navigation {
     
      width: 800px;
     height: 20px;
    
}     

#imgnavigation {
    width: 800px;
     height: 122px; /* images height*/
     background-color: #ffffff;

here is the html/css for the page.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<link href="doctor_style.css" rel="stylesheet" type="text/css">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]--> 
<style type="text/css">
.style2 {
    font-size: 13px
}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 

<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;

 
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
 background-color: #517e86;    /*makes background color of dropdown blue*/
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #000000;  /* makes hover color black*/
}
 
a:link {color: #ffffff;}
a:visited {color: #ffffff;}
a:hover {color: #ffffff;}
a:active {color: #ffffff;} /* make all links white */
 
  
 /* IMAGE GALLERY CODE CHANGED AROUND */
 
 div.img
  {
    
  float: left;
  margin-left: 0px;
   
 /* height: 105px;
  width: 135px;  */  /* dont set div sizes when you want to fit your image perfectly tightly */
  text-align: center;
  display: inline;
   
  }  

div.img img
  {
   
  /* margin: 0 auto 0 auto;*/ /*not needed*/
   /* display:block; */ /*suggested but not needed*/

  /*margin: 5px;*/  /* popped out my images */
  
  } 

 

  
 
</style>

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="meet_the_staff.html#specialists">Specialists</a>'
menu1[1]='<a href="meet_the_staff.html#endodontist">Endodontist</a>'
menu1[2]='<a href="meet_the_staff.html#periodontist">Periodontist</a>'
menu1[3]='<a href="meet_the_staff.html#ceramist">Ceramist/Dental Technician</a>'
menu1[4]='<a href="meet_the_staff.html#hygiene">Dental Hygiene/ Preventative Dentistry Staff</a>'
menu1[5]='<a href="meet_the_staff.html#assistants">Dental Assistants</a>'
menu1[6]='<a href="meet_the_staff.html#reception">Reception/Front Desk Staff</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="forms_instructions.html#forms">Medical Hx/Registration Form</a>'
menu2[1]='<a href="meet_the_staff.html#">Post-Periodontal Surgery Instructions</a>'
menu2[2]='<a href="meet_the_staff.html#">Post-Extraction Instructions</a>'
menu2[3]='<a href="meet_the_staff.html#">Post Root Canal Instructions</a>'
 
var menu3=new Array()
menu3[0]='<a href="advanced_technologies.html">Cosmetic Dental Imaging</a>'
menu3[1]='<a href="advanced_technologies.html#laser_cavity">Laser Cavity Detection</a>'
menu3[2]='<a href="advanced_technologies.html#magnification">Advanced Magnification</a>'
menu3[3]='<a href="advanced_technologies.html#radiography">Digital Radiography</a>'
 
 var menu6=new Array()
menu6[0]='<a href="convenience_services.html">Consierge Services</a>'
menu6[1]='<a href="meet_the_staff.html#ceramist">Onsite Dental Ceramist</a>'
menu6[2]='<a href="meet_the_staff.html#specialists">Onsite Specialists</a>'
 
 
var menuwidth='165px' //default menu width
var menubgcolor='lightyellow'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)

dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>
<title>Dental Partners of Columbia Home</title>
</head>

<body>
<div id="container">
   <div id="header"> </div> 
   <div id="navigation"> 
            <div align="center" class="style2">
         <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" 
         onMouseout="delayhidemenu()">Meet the Staff</a> |
             <a href="default2.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" 
           onMouseout="delayhidemenu()">Forms and Instructions</a> |
             <a href="default3.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" 
           onMouseout="delayhidemenu()">Advanced Technologies</a> |  
             <a href="smile_gallery.html">Smile Gallery</a> |  
             <a href="contact.html">Contact Us</a> |  
             <a href="default6.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu6, '150px')" 
           onMouseout="delayhidemenu()">Convenience Services</a> |  
             <a href="links.html">Links</a> |  
             <a href="press_mentions.html">Press Mentions</a></div>
   </div>
   <!-- end NAVIGATION-->
               <div id="imgnavigation">
                <div class="img">
            <a  href="meet_the_staff.html"><img src="images/meet_dentists.jpg" border="0"/></a></div>
               <div class="img">
            <a href="our_office.html"><img src="images/our_office.jpg" width="151" height="122" border="0" /></a></div>
                <div class="img">
            <a href="service_procedures.html"><img src="images/service_pro.jpg" width="151" height="122" border="0" /></a></div>
                <div class="img">
            <a href="cosmetic_dentistry.html"><img src="images/cosmetic.jpg" width="155" height="122" border="0" /></a></div>
                  <div class="img">         
            <a href="tmj.html"><img src="images/tmj.jpg" width="150" height="122" border="0" /></a></div>
            
            
            </div> 
               <!-- END IMGNAVIGATION-->    
  
  
   
</div><!-- END CONTAINTER-->
</body>
</html>

**LadynRed** · 01-27-2009, 09:00 PM

Don't use <divs> for the image navigation, put them in a list, then float the list elements.

**silverglade** · 09:33 PM

i thought i fixed it. but its not centered again. check out my page now its all messed up. the background of the text is supposed to have "textbox.gif" on it. and the images are not centered.

http://derekvanderven.com/doctors_columbia/home.html

heres the new css

Code:

@charset "utf-8";
/* CSS Document */

body {
    margin: 0;  /* clear for browsers */
    padding: 0;
    background-color: #517E86;
}
#container {
    margin: 0 auto 0 auto;
    width: 800px;
    overflow: auto;

    }
    
#header {
    background-image: url(header.gif);
     background-repeat: no-repeat;
     width: 800px;
     height: 96px;
     }
#navigation {
     
      width: 800px;
     height: 20px;
    
}     

#imgnavigation {
    width: 800px;
     height: 122px; /* images height*/
     background-color: #ffffff;
     
 }
 
 /* IMAGE GALLERY CODE CHANGED AROUND */
 
 div.img
  {
    
  margin: 0 auto 0 auto;
  
   
 /* height: 105px;
  width: 135px;  */  /* dont set div sizes when you want to fit your image perfectly tightly */
  display: inline;
   text-align: center;
  }  



#textbox {
    overflow: scroll;
    background-image: url(/images/textbox.gif);
     background-repeat: no-repeat;
    width: 800px;
    height: 600px;
}

**silverglade** · 10:21 PM

i dont know how to put images into lists. here is the new page, i finally got the white background in. but the divs are not centered. any help greatly appreciated on either how to center those divs, or how to put images into lists. thanks . derek ( i looked up "images in lists" on google and couldnt find anything.

http://derekvanderven.com/doctors_columbia/home.html

**silverglade** · 01-27-2009, 11:44 PM

ok i GOT IT! i spent a total of 7 hours trying to make this page right today. LOL> what a newbie. anyway, here is what i did. i took the images out of divs, and gave their attributes through their containing div. then i added this code to the style.

Code:

#imgnavigation img {
 
     display: inline: 
     
    float: left;
    margin-left: 7px;
    }

here is the finished page! or allmost

http://derekvanderven.com/doctors_columbia/home.html

**LadynRed** · 01-28-2009, 03:51 PM

Quote:

i dont know how to put images into lists

Same way you put anything into a list:

Quote:

**silverglade** · 01-28-2009, 06:55 PM

thanks very much ladynred. i will try it out. i was afraid to do it with this website though because i managed to get the images in the right place and im afraid to mess with it, but i will definitely try to do it on my next website. thank you for the advice. derek