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,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    •