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 4 of 4
  1. #1
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,475
    Thanks
    279
    Thanked 32 Times in 31 Posts

    moving images together

    Hi i created some tab images in PS and made one side light and one side dark so when they are put together it would look good.

    However, i am having trouble getting them to fit together, even if i put and outer div on the whole section they still wont fit together. So i thought i would ask here.


    here is the css

    Code:
    .tabslink{
    background-image:url('images/tabbtn.jpg');
    background-repeat: no-repeat; 
    width:95px;
    height:27px;
    text-align:center;
    cursor:pointer;
    display:inline-block;
    padding-top:6px;
    float:left;
    }
    
    .tabslink a {
    text-decoration:none;
    }
    here a small sample of the html (there are more buttons but just wanted to give a couple here)

    Code:
    <div class="tabslink"><a href="index.html">Home</a></div>
    <div class="tabslink"><a href="about.html">About</a></div>
    <div class="tabslink"><a href="blog" target="_blank">Blog</a></div>
    See image below for what it currently looks like (i suspect the issue is the individual divs)
    and whati would like for it to look like
    Attached Thumbnails Attached Thumbnails moving images together-tabs.jpg  
    Last edited by durangod; 03-09-2014 at 08:55 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello durangod,
    Use float instead of display: inline-block;. I see you have both in your CSS for .tabslink but the float property is losing out.
    Look at this -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    nav {
    	width: 800px;
    	margin: 0 auto;
    	background: #999;
    	overflow: auto;
    }
    .tabslink {
    	height: 27px;
    	width: 95px;
    	padding-top: 6px;
    	float: left;
    	background: #f00 url('images/tabbtn.jpg')no-repeat; 
    	cursor: pointer;
    }
    .tabslink a { text-decoration: none; }
    </style>
    </head>
    <body>
    	<nav>
    		<div class="tabslink"><a href="index.html">Home</a></div>
    		<div class="tabslink"><a href="about.html">About</a></div>
    		<div class="tabslink"><a href="blog" target="_blank">Blog</a></div>
    	</nav>
    </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

  • Users who have thanked Excavator for this post:

    durangod (03-08-2014)

  • #3
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,475
    Thanks
    279
    Thanked 32 Times in 31 Posts
    Thanks Excavator, works great, the only issue i have is that the nav element does not pass w3c as i am not using strict. I just changed nav from an element to a class and it works. But here is how it turned out after i played with the color a bit.
    Attached Thumbnails Attached Thumbnails moving images together-yellowtabs.jpg  
    Last edited by durangod; 03-08-2014 at 02:29 PM.

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Quote Originally Posted by durangod View Post
    Thanks Excavator, works great, the only issue i have is that the nav element does not pass w3c as i am not using strict. I just changed nav from an element to a class and it works. But here is how it turned out after i played with the color a bit.
    Nav is html5 code.

    Just rename the nav to something
    Code:
    <div id="nav">content</div> 
     #nav {styles}
    You should work towards HTML5 because old some html tags arent being used that widely anymore.

  • Users who have thanked tempz for this post:

    durangod (03-09-2014)


  •  

    Posting Permissions

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