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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Absolute Positioning with images

    Hello everyone,

    I'm new here so I'll try my best at explaining. I'm trying to make a website for mobile devices, just for my personal needs. I have a menu at the top with a couple of image buttons. They look good using "float: left;" however I wish to set an absolute position so I overlap each image by 1px. I know absolute positioning is not recommended so I thought I'll come here and see if someone can help me out. Thankyou very much guys!!

    The Image divs are home, profile and search

    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" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 
    <meta name="format-detection" content="telephone=no" /> 
    <title>Mobile Empire Avenue</title>
    <style type="text/css">
    
    body {
    	padding: 0;
    	margin: 0;
    	background: #314d61;
    	color: #333333;
    	width: 100%;
    	display: table;
    	left: 10;
    	right:10;
    }
    
    
    
    #menu{
    	overflow:hidden;
    	width: 290px;
    	margin: 0px auto 0;
    	background: #fff;
    	padding-top:0px;
    	padding-bottom:20px;
    	padding-right:0px;
    	padding-left:0px;
    
    	border-bottom-right-radius: 15px;
    	border-bottom-left-radius: 15px;
    }
    
    #content {
    	width: 250px;
    	margin: 10px auto 0;
    	background: #fff;
    	padding: 20px;
    	font-size: 8px;
    	border-radius: 15px;
    	color:red;
    	
    #home
    {
    	width:			100px;
    	height:			40px;
    	position:		absolute;
    	top:			0px;
    	left:			0px;
    }
    
    #profile
    {
    	width:			100px;
    	height:			40px;
    	position:		absolute;
    	top:			0px;
    	left:			0;
    }
    
    #search
    {
    	width:			100px;
    	height:			40px;
    	position:		absolute;
    	top:			0px;
    	left:			0px;
    }
    
    }
    
    h1 {
    	margin: 0;
    	padding: 0;
    }
    
    
    </style>
    </head>
    
    <body>
    
    			<div id="menu">
    
    	<div id="home">
    	<img src="image/home1.PNG" border="0" alt="Home Button"style="float: left;
    	onmouseover="this.src='image/home1.PNG';"
    	onmouseout="this.src='image/home1.PNG';">
    	</div>
    	
    	<div id="profile">
    	<img src="image/profile2.PNG" border="0" alt="Profile Button"style="float: left;
    	onmouseover="this.src='image/profile1.PNG';"
    	onmouseout="this.src='image/profile2.PNG';">
    	</div>
    	
    	<div id="search">
    	<img src="image/search2.PNG" border="0" alt="Search Button"style="float: left;"
    	onmouseover="this.src='image/search1.PNG';"
    	onmouseout="this.src='image/search2.PNG';">
    	</div>
    
    			</div>
    
    <div id="content">
    	<h1>This site is under construction - Created by Happytodd</h1>
    </div>
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    How about setting negative margins along with floats?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    How about setting negative margins along with floats?
    Just doesn't seem to be working, unless I'm doing it wrong...

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    unless I'm doing it wrong...
    Then, post what you've tried in this direction.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    May 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well I've kept this:
    Code:
    	<div id="profile">
    	<img src="image/profile2.PNG" border="0" alt="Profile Button"style="float: left;
    	onmouseover="this.src='image/profile1.PNG';"
    	onmouseout="this.src='image/profile2.PNG';">
    	</div>
    
    	<div id="search">
    	<img src="image/search2.PNG" border="0" alt="Search Button"style="float: left;"
    	onmouseover="this.src='image/search1.PNG';"
    	onmouseout="this.src='image/search2.PNG';">
    	</div>
    and added
    Code:
    #profile
    {
    	width:			100px;
    	height:			40px;
    	position:		absolute;
    	top:			0px;
    	left:			0px;
    }
    
    #search
    {
    margin: -10px;
    	width:			100px;
    	height:			40px;
    	position:		absolute;
    	top:			0px;
    	left:			0px;
    }
    That didn't seem to work, I've tried:
    position: absolute;
    left:-10px

    Still nothing, I think something is conflicting but I just cant find it... I put my whole code at first post. Its really stressing me out, I bet I put a space somewhere where I shouldn't have...

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    That didn't seem to work, I've tried:
    What I had asked is to set negative margins with floats and not with absolute positions.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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