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 durangod's Avatar
    Join Date
    Nov 2010
    Location
    southwestern USA
    Posts
    1,634
    Thanks
    314
    Thanked 34 Times in 33 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 -tabs-jpg  
    Last edited by durangod; 03-09-2014 at 07:55 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,911
    Thanks
    23
    Thanked 1,874 Times in 1,858 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 a 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 durangod's Avatar
    Join Date
    Nov 2010
    Location
    southwestern USA
    Posts
    1,634
    Thanks
    314
    Thanked 34 Times in 33 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 -yellowtabs-jpg  
    Last edited by durangod; 03-08-2014 at 01: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
    •