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
    Aug 2011
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts

    centering div issue after screen query

    hello brilliant people,

    how are you?

    I've got an issue centering my list items after the screen has resized......

    i want the block of thumbnails to be centered after the screen has been resized to less than 915px

    http://gandhiproductions.herobo.com/.../projects.html

    if you resize the browser window you'll see what i mean...

    hope you can help

    Gandhi

  • #2
    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 evilgandhi,
    You will need a different approach to center that. You don't center it now, all you do is space out 4 li's so it looks centered. When containing psholder narrows up to less than 4 li's, it looks differrent...until you get narrow enough that 3 li's fit and look centered.

    Try it like this example instead. Look closely in that example how the containing ul is text-align: center; and the child li's are display: inline-block;

    You seem to be randomly naming div elements which is invalid. While <nav> is a valid element in HTML5, your DocType does not support that. Check your code in the validator and it will show you what I'm talking about.
    Also, do you really need to nest that ul in 2 containing elements? I don't see <psel> doing much for you anyway.
    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

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this doesn't work.....

    why would i center the text?

    <div id="psel"> is there to create the rollover effect on each thumbnail.... so is needed

    ..... your example i don't feel applies to this situation..... also i can't really understand your help sorry..... this is actually driving me MAD..... i can't be the only person trying to do this....

    is it really that hard?? i feel like i'm going around in circles

    thank you for your help

    Gandhi

  • #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
    Quote Originally Posted by evilgandhi View Post
    this doesn't work.....

    why would i center the text?
    Did you try this at all?





    <div id="psel"> is there to create the rollover effect on each thumbnail.... so is needed
    When I first looked at your code, <psel> was some random element you'd just made up. Now that you've given your ul the class name of psel, <ul class="psel">, it's valid. It doesn't seem to have much to do with the rollover affect at all, either before or after.




    ..... your example i don't feel applies to this situation..... also i can't really understand your help sorry..... this is actually driving me MAD..... i can't be the only person trying to do this....

    is it really that hard?? i feel like i'm going around in circles
    It is not that hard and my example is one valid solution to your problem.
    Copy/paste this snippet into a new .html document and see if it acts like you want when you resize the browser window -
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #psholder {
    	width: 96%;	
    	max-width: 880px;
    	margin: 20px auto;
    	padding: 20px 0;
    	background: #fff;
    }
    ul.psel {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	text-align: center;
    }
    	ul.psel li {
    		height: 120px;
    		width: 120px;
    		margin: 4%;
    		display: inline-block;
    		position: relative;
    		background:#6194aa;
    	}
    		ul.psel li .details {
    			line-height: 100px;
    			width: 120px;
    			text-align: center;
    			position: absolute;
    			top: 0;
    			left: 0;
    			color: #fff;
    			opacity: 0;
    			-webkit-transition:opacity color;
    			-webkit-transition-timing-function: ease-in-out;
    			-webkit-transition-duration: 0.5s;
    			-moz-transition:opacity color;
    			-moz-transition-timing-function: ease-in-out;
    			-moz-transition-duration: 0.5s;
    		}
    			ul.psel li:hover .details {
    				opacity: .9;
    				background:#666;
    			}
    </style>
    </head>
    <body>
        <div id="psholder">
          <ul class="psel">
            <li><img src="http://gandhiproductions.herobo.com/martanitest3/image/testimage.png" alt="testImg">
              <div class="details">
                <p>Glade</p>
              </div>
            </li>
            <li><img src="http://gandhiproductions.herobo.com/martanitest3/image/testimage.png" alt="testImg">
              <div class="details">
                <p>Glade</p>
              </div>
            </li>
            <li><img src="http://gandhiproductions.herobo.com/martanitest3/image/testimage.png" alt="testImg">
              <div class="details">
                <p>Glade</p>
              </div>
            </li>
            <li><img src="http://gandhiproductions.herobo.com/martanitest3/image/testimage.png" alt="testImg">
              <div class="details">
                <p>Glade</p>
              </div>
            </li>
            <li><img src="http://gandhiproductions.herobo.com/martanitest3/image/testimage.png" alt="testImg">
              <div class="details">
                <p>Glade</p>
              </div>
            </li>
            <li><img src="http://gandhiproductions.herobo.com/martanitest3/image/testimage.png" alt="testImg">
              <div class="details">
                <p>Glade</p>
              </div>
            </li>
            <li><img src="http://gandhiproductions.herobo.com/martanitest3/image/testimage.png" alt="testImg">
              <div class="details">
                <p>Glade</p>
              </div>
            </li>
            <li><img src="http://gandhiproductions.herobo.com/martanitest3/image/testimage.png" alt="testImg">
              <div class="details">
                <p>Glade</p>
              </div>
            </li>
          </ul>
        </div>
    </body>
    </html>
    Last edited by Excavator; 02-07-2013 at 02:24 AM.
    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

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank for this, it really helped, sorry if i sounded aggressive before, it wasn't aimed at you (it was aimed at the code).

    thank you again for your help


  •  

    Tags for this Thread

    Posting Permissions

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