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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Posts
    153
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Problems with css alignment

    Hey all,

    Really can't figure this out - would appreciate any help.

    Problem is that images are not aligned properly.

    many thanks in advance,
    Andy

    HTML Code:

    Code:
    <div class="freshdesignweb"> 
    				<!-- start article 1 -->
    				<div class="border c-two" style="background-image:url(http://freshdesignweb.com/demo/2012/09/beautiful-mage-hover-effects-jquery-css3/example1/images/portfolio/p1.jpg)">
    					<div style="opacity: 0;" class="fdw-background">
    						<h4><a href="http://www.freshdesignweb.com" style="color:#fff;">Save the Queen is my goal</a></h4>
    						<p class="fdw-port">
    							<a href="http://www.freshdesignweb.com">Open project</a>
    						</p>
    					</div>
    				</div>
    				<!-- end article 1 -->
    				<!-- start article 1 -->
    				<div class="border c-two" style="background-image:url(http://freshdesignweb.com/demo/2012/09/beautiful-mage-hover-effects-jquery-css3/example1/images/portfolio/p1.jpg)">
    					<div style="opacity: 0;" class="fdw-background">
    						<h4><a href="http://www.freshdesignweb.com" style="color:#fff;">Save the Queen is my goal</a></h4>
    						<p class="fdw-port">
    							<a href="http://www.freshdesignweb.com">Open project</a>
    						</p>
    					</div>
    				</div>
    				<!-- end article 1 -->
    				<!-- start article 1 -->
    				<div class="border c-two" style="background-image:url(http://freshdesignweb.com/demo/2012/09/beautiful-mage-hover-effects-jquery-css3/example1/images/portfolio/p1.jpg)">
    					<div style="opacity: 0;" class="fdw-background">
    						<h4><a href="http://www.freshdesignweb.com" style="color:#fff;">Save the Queen is my goal</a></h4>
    						<p class="fdw-port">
    							<a href="http://www.freshdesignweb.com">Open project</a>
    						</p>
    					</div>
    				</div>
    				<!-- end article 1 -->
    				<!-- start article 1 -->
    				<div class="border c-two" style="background-image:url(http://freshdesignweb.com/demo/2012/09/beautiful-mage-hover-effects-jquery-css3/example1/images/portfolio/p1.jpg)">
    					<div style="opacity: 0;" class="fdw-background">
    						<h4><a href="http://www.freshdesignweb.com" style="color:#fff;">Save the Queen is my goal</a></h4>
    					<p class="fdw-port"><a href="http://www.freshdesignweb.com">Open project</a></p>
    					</div>
    				</div>
    				<!-- end article 1 -->
    				<!-- start article 1 -->
    				<div class="border c-two" style="background-image:url(http://freshdesignweb.com/demo/2012/09/beautiful-mage-hover-effects-jquery-css3/example1/images/portfolio/p1.jpg)">
    					<div style="opacity: 0.319595;" class="fdw-background">
    						<h4><a href="http://www.freshdesignweb.com" style="color:#fff;">Save the Queen is my goal</a></h4>
    											<p class="fdw-port">
    							<a href="http://www.freshdesignweb.com">Open project</a>
    						</p>
    					</div>
    				</div>
    				<!-- end article 1 -->
    				<!-- start article 1 -->
    				<div class="border c-two" style="background-image:url(http://freshdesignweb.com/demo/2012/09/beautiful-mage-hover-effects-jquery-css3/example1/images/portfolio/p1.jpg)">
    					<div style="opacity: 0.276511;" class="fdw-background">
    						<h4><a href="http://www.freshdesignweb.com" style="color:#fff;">Save the Queen is my goal</a></h4>
    												<p class="fdw-port">
    							<a href="http://www.freshdesignweb.com">Open project</a>
    						</p>
    					</div>
    				</div>
    				<!-- end article 1 -->
    
    			</div>
    CSS Code:

    Code:
    .freshdesignweb{width:950px; margin:0 auto;}
    	 .freshdesignweb a:link{text-decoration:none;}
         .freshdesignweb div{ float:left; width:100%; height:100%; } /*cursor:pointer;opacity:0.5;*/
    	/*portfolio*/
    	.fdw-background{ background-color:rgba(0,0,0,0.6);opacity:0; margin-top:-25px; width:100%; height:100%; }
    	.fdw-background h4{font-size:20px; font-family: 'Dosis', sans-serif; text-align:center; padding:40px 40px 0; }
    	.fdw-background .fdw-port{ text-align:center; padding:0 40px 0; }
    	.fdw-background .fdw-port a{ padding:8px 15px; font-size:1em; }
    	/*subtitle*/
    	.fdw-subtitle{ font-size:0.8em; margin-top:-20px; color:#0CF; }
    	.fdw-subtitle a{ color:#F90; }
    	/*columns*/
    	.c-two{ width:314px !important; }
    	/*align*/
    	.a-center{ text-align:center; }
    	/*border*/
    	.border{ border:1px solid #CCC; margin:-1px;}
    	/*link buttons*/
        .fdw-port a{ 
    		background-color:#336699; 
    		color:#fff; 
    		border-radius:3px;
    		-moz-border-radius:3px;
    		-webkit-border-radius:3px;
    		-o-border-radius:3px;
    		-webkit-box-shadow: 0 3px 0 #0f3963, 3px 5px 3px #333;
    		-moz-box-shadow: 0 3px 0 #0f3963, 3px 5px 3px #333;
    		box-shadow: 0 3px 0 #0f3963, 3px 5px 3px #333;
    		-o-box-shadow: 0 3px 0 #0f3963, 3px 5px 3px #333;
    		text-shadow:0 1px 1px #000;
    	}
        .fdw-port a:hover{ 
    		background-color:#f2f2f2; 
    		color:#336699 !important; 
    		text-shadow:0 1px 1px #ccc;
    		-webkit-box-shadow: 0 3px 0 #ccc, 3px 5px 3px #333;
    		-moz-box-shadow: 0 3px 0 #ccc, 3px 5px 3px #333;
    		box-shadow: 0 3px 0 #ccc, 3px 5px 3px #333;
    		-o-box-shadow: 0 3px 0 #ccc, 3px 5px 3px #333;
    	}
    Jquery Code:

    Code:
     jQuery('.fdw-background').hover(
    	        function () {
    	            jQuery(this).animate({opacity:'1'});
    	        },
    	        function () {
    	            jQuery(this).animate({opacity:'0'});
    	        }
    	    );
    Last edited by neodjandre; 04-06-2013 at 08:49 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello jeodjandre,
    I see 2 rows of 3 images. How did you want them aligned?
    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
    Regular Coder
    Join Date
    Aug 2002
    Posts
    153
    Thanks
    5
    Thanked 0 Times in 0 Posts
    There should be 3 images per row.

    Right now the images are breaking in terms of height alignment..

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by neodjandre View Post
    There should be 3 images per row.

    Right now the images are breaking in terms of height alignment..
    Ah, I see now.
    Sorry for being so dense...sometimes it helps to describe an issue in the forum as if the person looking at your work is seeing it for the first time.

    See if this gives you any ideas -
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .freshdesignweb {
    	width: 950px;
    	margin: 0 auto;
    	overflow: auto;
    }
    .border {
    	height: 157px;
    	width: 314px;
    	float: left;
    	border: 1px solid #ccc;
    	background: url(http://freshdesignweb.com/demo/2012/09/beautiful-mage-hover-effects-jquery-css3/example1/images/portfolio/p1.jpg)
    }
    .fdw-background {
    	height: 100%;
    	overflow: auto;
    	background: rgba(0,0,0,0.6);
    	opacity: 90;
    	text-align: center;
    }
    .fdw-background h4 {
    	margin: 40px 0 0;
    	font-size: 20px;
    	font-family: 'Dosis', sans-serif;
    	color: #fff;
    }
    a.fdw-port:link,
    a.fdw-port:visited {
    	width: 150px;
    	margin: 20px auto 0;
    	padding: 8px 15px;
    	display: block;
    	font-size: 1em;
    	background: #336699;
    	color: #fff;
    	border-radius: 3px;
    	-moz-border-radius: 3px;
    	-webkit-border-radius: 3px;
    	-o-border-radius: 3px;
    	-webkit-box-shadow: 0 3px 0 #0f3963, 3px 5px 3px #333;
    	-moz-box-shadow: 0 3px 0 #0f3963, 3px 5px 3px #333;
    	box-shadow: 0 3px 0 #0f3963, 3px 5px 3px #333;
    	-o-box-shadow: 0 3px 0 #0f3963, 3px 5px 3px #333;
    	text-shadow: 0 1px 1px #000;
    }
    a.fdw-port:hover,
    a.fdw-port:active {
    	background: #f2f2f2;
    	color: #336699;
    	text-shadow: 0 1px 1px #ccc;
    	-webkit-box-shadow: 0 3px 0 #ccc, 3px 5px 3px #333;
    	-moz-box-shadow: 0 3px 0 #ccc, 3px 5px 3px #333;
    	box-shadow: 0 3px 0 #ccc, 3px 5px 3px #333;
    	-o-box-shadow: 0 3px 0 #ccc, 3px 5px 3px #333;
    }
    .freshdesignweb a { text-decoration: none; }
    </style>
    </head>
    <body>
    	<div class="freshdesignweb"> 
    		<div class="border">
    			<div class="fdw-background">
    				<h4>Save the Queen is my goal</h4>
    					<a href="http://www.freshdesignweb.com" class="fdw-port">Open project</a>
    			<!--end .fdw-background--></div>
    		<!--end .border--></div>
    		<div class="border">
    			<div class="fdw-background">
    				<h4>Save the Queen is my goal</h4>
    					<a href="http://www.freshdesignweb.com" class="fdw-port">Open project</a>
    			<!--end .fdw-background--></div>
    		<!--end .border--></div>
    		<div class="border">
    			<div class="fdw-background">
    				<h4>Save the Queen is my goal</h4>
    					<a href="http://www.freshdesignweb.com" class="fdw-port">Open project</a>
    			<!--end .fdw-background--></div>
    		<!--end .border--></div>
    		<div class="border">
    			<div class="fdw-background">
    				<h4>Save the Queen is my goal</h4>
    					<a href="http://www.freshdesignweb.com" class="fdw-port">Open project</a>
    			<!--end .fdw-background--></div>
    		<!--end .border--></div>
    		<div class="border">
    			<div class="fdw-background">
    				<h4>Save the Queen is my goal</h4>
    					<a href="http://www.freshdesignweb.com" class="fdw-port">Open project</a>
    			<!--end .fdw-background--></div>
    		<!--end .border--></div>
    		<div class="border">
    			<div class="fdw-background">
    				<h4>Save the Queen is my goal</h4>
    					<a href="http://www.freshdesignweb.com" class="fdw-port">Open project</a>
    			<!--end .fdw-background--></div>
    		<!--end .border--></div>
    	<!--end .freshdesignweb--></div>
    </body>
    </html>
    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
    Regular Coder
    Join Date
    Aug 2002
    Posts
    153
    Thanks
    5
    Thanked 0 Times in 0 Posts
    ok i used this code but unfortunately it doesn't do what i want.. you can check the beta site!

    It should be 3 images per row..

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by neodjandre View Post
    ok i used this code but unfortunately it doesn't do what i want.. you can check the beta site!

    It should be 3 images per row..
    Is this the beta site you're talking about? You never posted a link to it.

    I'm not sure how the snippet I provided above does not have 2 rows of three... not without seeing how you're trying to use it 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

  • #7
    Regular Coder
    Join Date
    Aug 2002
    Posts
    153
    Thanks
    5
    Thanked 0 Times in 0 Posts
    nop - i sent you a PM with the details as it's a private beta site!


    The original code comes from the site you mentioned but i had to modify it as not to use the .article. tag which is not supported in IE8.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by neodjandre View Post
    nop - i sent you a PM with the details as it's a private beta site!
    I like to keep questions like this in the forum so others can also help. If some info is really so sensitive it can't be seen by the few that are trying to help then I can see the need for PMing a password.
    The other option is creating a test site that holds only your problem and not the secret info you can't show the forum. I think by doing that you might have found your error so it would have that added bonus as well.

    In any case, I sent you a PM.

    You should check out the links about validation in my signature line. Validating catches the error that's causing your problem and many others.

    The original code comes from the site you mentioned but i had to modify it as not to use the .article. tag which is not supported in IE8.
    To get older browsers up to speed with the new HTML5 spec, have a look at a demo page of mine here.
    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:

    neodjandre (04-08-2013)


  •  

    Posting Permissions

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