Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Vertical Centering Images Between Anchors

    Site: http://nadamt.zxq.net/panel/ver5/index.php
    (Only tested in Firefox 3.5)

    I am in the early stages of building a web application for comics artist and storyboard artist. I want each panel and its navigation menu to be exactly in the center of the screen (horizontally and vertically centered). I could handily do this myself if I had one image per page but I don't. I have ten images per page (as shown here: http://nadamt.zxq.net/panel/ver1/index.php) and I am using anchor links to travel between them. Problem is that I am not clever enough to figure out how to vertically center each panel/navigation menu.

    Any help with this matter would be greatly appreciated. CSS is attached below, but the most relevant bit is as follows:

    Code:
    /****************************************** Panel Wrap */
    /* Each Panel Wrap contains one panel and one navigation table. */
    div.panelWrap {
    	width: 800px;
    	height: 483px;
    	margin: 0px auto 1000px auto; }
    Thanks in advance.
    Attached Files Attached Files

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well, first off, that's for replying.

    I already know how to center a div. The problem is that I have multiple divs that I want to center.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello nadamt,
    Try wrapping all that in a div with overflow:hidden; You can center that div then. I just grabbed the body so I wouldn't have to edit your markup...
    have a look at this -
    Code:
    html {
    	background-color: rgb(15,15,15); 
    	overflow: hidden; 
    	margin: 0;
    	padding: 0; }
    body {
    width: 800px;
    height: 523px;
    margin: 200px auto;
    overflow: hidden;
    }
    /****************************************** Panel Wrap */
    /* Each Panel Wrap contains one panel and one navigation table. */
    div.panelWrap {
    I know, I know, it's not vertically centered. But it gives you something you can vertically center.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    nadamt (12-11-2009)

  • #5
    New Coder
    Join Date
    Jul 2005
    Posts
    51
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks a million, excavator. I can now move on developing this application without having to guess the end user's screen resolution.


  •  

    Posting Permissions

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