PDA

View Full Version : Why are my images overlapping ?



jeddi
Mar 21st, 2009, 07:13 PM
Hi,

I can not see what the problem is :confused:

Two images ar placed next to each other with the following
html:


<div class="topwrapper">

<span class="logo">
<img alt="expert world (7K)" src="/im/sys_images/globe.jpg" height="120px" width="220px" >
</span>

<span class="banner">
<img alt="logo (34K)" src="/im/sys_images/logo.jpg" height="120px" width="740px" >
</span>


And this is the CSS


.logo{
position:absolute;
top: 15px;
left: 15px;
width: 220px;
height: 120px;
}

.banner{
width: 740px;
height: 120px;
border: 0;
margin: 15px 0px 0px 10px;
float:left;
}

.topwrapper {
width: 900px;
overflow:hidden;
margin: 0px auto 10px auto;
padding: 0px 0px 0px 0px;
border-bottom-style: none;
}


For some reason they come out with the left hand image overlapping
the right hand image by about 10 or 15px - you can see that the
capital "E" is overlapped.

Here is an image of the page:

http://www.expert-world.com/im/test/world.jpg

Can anyone help solve this riddle ?

Thanks :)

oesxyl
Mar 21st, 2009, 07:32 PM
Hi,

I can not see what the problem is :confused:

Two images ar placed next to each other with the following
html:


<div class="topwrapper">

<span class="logo">
<img alt="expert world (7K)" src="/im/sys_images/globe.jpg" height="120px" width="220px" >
</span>

<span class="banner">
<img alt="logo (34K)" src="/im/sys_images/logo.jpg" height="120px" width="740px" >
</span>


And this is the CSS


.logo{
position:absolute;
top: 15px;
left: 15px;
width: 220px;
height: 120px;
}

.banner{
width: 740px;
height: 120px;
border: 0;
margin: 15px 0px 0px 10px;
float:left;
}

.topwrapper {
width: 900px;
overflow:hidden;
margin: 0px auto 10px auto;
padding: 0px 0px 0px 0px;
border-bottom-style: none;
}


For some reason they come out with the left hand image overlapping
the right hand image by about 10 or 15px - you can see that the
capital "E" is overlapped.

Here is an image of the page:

http://www.expert-world.com/im/test/world.jpg

Can anyone help solve this riddle ?

Thanks :)
in my opinion you don't need what is yellow.

html:


<div class="topwrapper">
<div class="header">
<img alt="expert world (7K)" src="/im/sys_images/globe.jpg" height="120px" width="220px" >
<img alt="logo (34K)" src="/im/sys_images/logo.jpg" height="120px" width="740px" >
</div>
</div>


css:


.header { padding: 15px 0 0 10px; width: 740px; height: 120px; }
img { border: none; }


and probably you need a global reset in the top of your css file:


* { margin: 0; padding: 0; }


regards

PitbullMean
Mar 21st, 2009, 07:41 PM
HTML

<div class="topwrapper">
<span class="logo"><img alt="expert world (7K)" src="/im/sys_images/globe.jpg" height="120px" width="220px". /></span>
<span class="banner"><img alt="logo (34K)" src="/im/sys_images/logo.jpg" height="120px" width="740px"/></span>
</div>





CSS
.logo{
float:left;
width: 220px;
height: 120px;
}

.banner{
float:right;
width: 740px;
height: 120px;
border: 0;
}

.topwrapper {
width: 960px;
overflow:hidden;
margin: 0px auto 10px auto;
padding: 0px 0px 0px 0px;
border-bottom-style: none;
}



Things in red is what I changed, I also removed the margin you added to the banner. the Div you made was only 900px and the images were 960 so it had no choice but to overlap.

jeddi
Mar 22nd, 2009, 07:26 PM
Thanks for your help :thumbsup: