Results 1 to 3 of 3

Thread: trying to get image links centered inside div.

  1. #1
    Banned
    Join Date
    Feb 2009
    Age
    37
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    Reputation
    10

    Default trying to get image links centered inside div.

    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 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 ()
    * This notice MUST stay intact for legal use
    * Visit 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">Periodonti st</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">Las er Cavity Detection</a>'
    menu3[2]='<a href="advanced_technologies.html#magnification">Ad vanced Magnification</a>'
    menu3[3]='<a href="advanced_technologies.html#radiography">Digi tal 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+';backg round-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().clientWid th-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().clientHeig ht-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeigh t
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetHe ight
    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>



Look Here ->
  • #2
    Senior Member
    Philquad's Avatar
    Join Date
    Jan 2008
    Location
    nelson bay
    Age
    50
    Posts
    3,778
    Thanks
    183
    Thanked 1,231 Times in 736 Posts
    Rep Power
    575
    Reputation
    15458

    Default

    send me the file\files
    nelsonbaycomputers@gmail.com

  • #3
    Junior Member
    Join Date
    Apr 2008
    Age
    44
    Posts
    158
    Thanks
    7
    Thanked 3 Times in 3 Posts
    Rep Power
    143
    Reputation
    22

    Default

    perhaps the look at the class "img" in your stylesheet.

  • Bookmarks

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •