Absolute Positioning with images

Happytodd

05-07-2011, 10:50 AM

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

<!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>

abduraooft

05-07-2011, 10:53 AM

How about setting negative margins along with floats?

Happytodd

05-07-2011, 11:06 AM

How about setting negative margins along with floats?

Just doesn't seem to be working, unless I'm doing it wrong...

abduraooft

05-07-2011, 01:18 PM

unless I'm doing it wrong...
Then, post what you've tried in this direction.

Happytodd

05-07-2011, 01:53 PM

Well I've kept this:

<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

#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...

abduraooft

05-07-2011, 02:35 PM

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.