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

Thread: Offset images

  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post

    Exclamation Offset images

    Hey, I can't seem to offset these images. Basically I want them looking like this:


    Here is my HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
    <title>Tendon Clinic - Nicola Maffulli</title>
    </head>
    <body>
    <div class="container">
    	<div>
    		<div class="header">
        		<div class="contact">Phone: +44(0)7645362712<br />Email: <a href="mailto:test@hotmail.com">test@hotmail.com</a></div>
        		<div class="title">NicolaMafulli<br /><div> - Tendon Clinic</div></div>
        	</div>
            <div class="header_images">
                <span class="u"><img src="images/image1.jpg" /></span>
                <span class="d"><img src="images/image2.jpg" /></span>
                <span class="u"><img src="images/image3.jpg" /></span>
                <span class="d"><img src="images/image4.jpg" /></span>
                <span class="u"><img src="images/image5.jpg" /></span>
        	</div>
        </div>
    </div>
    </body>
    </html>
    And here is my CSS:
    Code:
    body {
    	background-color:#FFF;
    	margin:0px;	
    	height:100%;
    }
    .container {
    	margin:0 auto;
    	width:900px;
    }
    .header {
    	background-color:#9c1919;
    	font-family:Berlin Sans FB;	
    	height:220px;
    }
    .title {
    	color:#FFF;
    	font-size:55px;
    	margin:0em 0.5em 0.5em 0.5em;
    }
    .title div {
    	font-size:36px;	
    	margin:0em 0.5em 0.5em 0.5em;
    }
    .contact {
    	float:right;
    	padding:1em;
    	color:#FFF;
    }
    .contact a {
    	text-decoration:none;
    	color:#FF3;	
    } 
    .contact a:hover { text-decoration:underline; }
    .header_images img {
    	margin:4px;
    	border-style:solid;
    	border-width:2px;
    	border-color:#FFF;	
    }
    .header_images {
    	margin-top:-6em;	
    }
    .u {
    	margin-top:2em;
    	display:inline-block;
    }
    .d {
    	margin-top:-2em;
    	display:inline-block;
    }
    If I manage to move one image, the rest move with it so I cant really offset them :/

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    Hello I think this might work for you.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
    <title>Tendon Clinic - Nicola Maffulli</title>
    
    <style>
    
    body {
    	background-color:#FFF;
    	margin:0px;	
    	height:100%;
    }
    .container {
    	margin:0 auto;
    	width:900px;
    }
    .header {
    	background-color:#9c1919;
    	font-family:Berlin Sans FB;	
    	height:220px;
    }
    .title {
    	color:#FFF;
    	font-size:55px;
    	margin:0em 0.5em 0.5em 0.5em;
    }
    .title div {
    	font-size:36px;	
    	margin:0em 0.5em 0.5em 0.5em;
    }
    .contact {
    	float:right;
    	padding:1em;
    	color:#FFF;
    }
    .contact a {
    	text-decoration:none;
    	color:#FF3;	
    } 
    .contact a:hover { text-decoration:underline; }
    .header_images img {
    	margin:4px;
    	border-style:solid;
    	border-width:2px;
    	border-color:#FFF;	
    }
    .header_images {
    	margin-top:0px;	
    }
    .header_images .u {
    	width:50px;
    	height:34px;
    	margin:0 20px 0 0;
    	float:left;
    }
    .header_images .d {
    	float:left;
    	width:50px;
    	height:34px;
    	margin:20px 20px 0 0;
    	
    }
    
    </style>
    </head>
    <body>
    <div class="container">
    	<div>
    		<div class="header">
        		<div class="contact">Phone: +44(0)7645362712<br />Email: <a href="mailto:test@hotmail.com">test@hotmail.com</a></div>
        		<div class="title">NicolaMafulli<br /><div> - Tendon Clinic</div></div>
    			
    			<div class="header_images">
                <span class="u"><img src="image1.jpg" /></span>
                <span class="d"><img src="image2.jpg" /></span>
                <span class="u"><img src="image3.jpg" /></span>
                <span class="d"><img src="image4.jpg" /></span>
                <span class="u"><img src="image5.jpg" /></span>
    			</div>
    		</div>
    		
    	</div>
            
    </div>
    </body>
    </html>
    what I changed....The css on the two .d and .u classes and I moved the header_images div into the header div.


    Code:
    .header_images .u {
    	width:50px;
    	height:34px;
    	margin:0 20px 0 0;
    	float:left;
    }
    .header_images .d {
    	float:left;
    	width:50px;
    	height:34px;
    	margin:20px 20px 0 0;
    	
    }
    
    <div class="header">
        		<div class="contact">Phone: +44(0)7645362712<br />Email: <a href="mailto:test@hotmail.com">test@hotmail.com</a></div>
        		<div class="title">NicolaMafulli<br /><div> - Tendon Clinic</div></div>
    			
    			<div class="header_images">
                <span class="u"><img src="image1.jpg" /></span>
                <span class="d"><img src="image2.jpg" /></span>
                <span class="u"><img src="image3.jpg" /></span>
                <span class="d"><img src="image4.jpg" /></span>
                <span class="u"><img src="image5.jpg" /></span>
    			</div>
    		</div>

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post

  • #4
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    Adjust your margins appopriately to spread the pictures out.

    Code:
    .header_images .u {
    	width:50px;
    	height:34px;
    	margin:0 20px 0 0; <---
    	float:left;
    }
    .header_images .d {
    	float:left;
    	width:50px;
    	height:34px;
    	margin:20px 20px 0 0; <---
    I dont know why the pictures are showing behind the title, maybe someone has input on that...

    adjusting the code below should allow you to move it down though.

    Code:
    .header_images {
    	margin-top:0px;

  • Users who have thanked SeattleMicah for this post:

    martynball (06-07-2012)

  • #5
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post
    That works thanks


  •  

    Posting Permissions

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