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 to the CF scene
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    centering on viewport resize

    Hi all,
    I'm trying to make a simple demonstration page where I have a background image on the body, and a couple of buttons that will link to other pages. My problem is when I resize the viewport, the image and buttons resize to top left...I want them to stay centered, otherwise when viewed on a larger monitor, it will not be centered...

    CSS:
    Code:
    body {
    	background: url(images/body.jpg) no-repeat;
    }
    
    
    ul {
    	
    	display: block;
    	width: 110px;
    	margin: 190px 0px 0px 900px;
    	
    }
    
    ul li {
    	padding: 0px 0px 5px 0px;
    	text-align: center;
    }
    
    ul li a {
    	display: block;
    	background: url(images/button.png) no-repeat no-repeat scroll 0% 0% transparent;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #fff;
    	height: 20px;
    	width: 110px;
    	line-height: 20px;
    	font-weight: bold;
    	font-size: 11px;
    	text-decoration: none;
    }
    
    ul li a:hover {
    	background-position: 0 -20px;
    }
    HTML:
    Code:
    <link href="/internship/css/screen.css" rel="stylesheet" type="text/css" media="screen">
    </head>
    <body>
    	<ul>
         <li><a href="current.html">Current Students</a></li>
         <li><a href="new.html">New Students</a></li>
        </ul>
    </body>
    </html>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You are positioning the elements relative to the top left of the page regardless of viewport size. If you want them centred then you need to position them that way.

    To position something centred horizontally you need to give it a width and set its left and right margins to auto.

    To position something centred vertically you need to define its wrapper as display:table and the element with the content to be centred within that wrapper as display:table-cell along with vertical-align: middle.

    To centre a background image specify a position of center center or 50% 50%.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    critterman (04-18-2013)

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    18
    Thanks
    1
    Thanked 1 Time in 1 Post
    first off, you should be using divs not lists

    second, positionging the divs will be quite easy with css. specify a width and then add margin: 0 auto; this is the prefreed and proper way to center items on the page.

  • Users who have thanked webaddict for this post:

    critterman (04-18-2013)

  • #4
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok, so I've changed my structure as advised, added some code for scaling, and have everything positioned where I want, but buttons do not scale and stay in place with background on resize or zoom...everything needs to stay put at all times..
    I feel stupid because I'm attending classes for this, but always have trouble with positioning, you guys are alot of help!

    CSS:

    Code:
    body#program {
    	background: #cccccc url(images/body.jpg) no-repeat; 
    	-webkit-background-size: cover;
      	-moz-background-size: cover;
      	-o-background-size: cover;
      	background-size: cover;
    	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.images/body.jpg', 	sizingMethod='scale');
    	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/body.jpg', sizingMethod='scale')";
    }
    
    body#current {
    	background: url(images/body2.jpg) no-repeat;
    }	
    
    #buttons {
    	position: absolute;
    	top: 190px;
    	left: 895px;
    }
    	
    
    #buttons a {
    	display: block;
    	background: url(images/button.png) no-repeat scroll 0% 0% transparent;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #fff;
    	height: 20px;
    	width: 110px;
    	line-height: 20px;
    	font-weight: bold;
    	text-align: center;
    	margin: 0px 0px 10px 0px;
    	font-size: 11px;
    	text-decoration: none;
    }
    
    #buttons a:hover {
    	background-position: 0 -20px;
    }
    
    #button2 {
    	margin: 200px 0px 0px 560px;
    }
    HTML:

    Code:
    <link href="/wcm-final/css/screen.css" rel="stylesheet" type="text/css" media="screen">
    </head>
    <body id="program">
    	<div id="buttons">
         	<a href="/wcm-final/current.html">Current Students</a></li>
        	<a href="/wcm-final/new.html">New Students</a></li>
        </div>
    </body>
    </html>

  • #5
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Anyone?


  •  

    Posting Permissions

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