Jump to content

How remove overlaping?


spottraining

Recommended Posts

I definitely wouldn't use position absolute, that's for sure. Get rid of that, I don't know what you are using it for. you should use a wrapper for your content (i.e. surrounding your two pilt divs), and then center that, and give it the min-width as has been suggested.

#wrapper{  margin: 0px auto;  min-width: 1200px;}

display:inline is redundant on the selectors targeting the anchor elements because they are inline to by default. start with that and see what you get. post your code or update your site.

Link to comment
Share on other sites

Still nothing.Here is html source:

<html>   <head>  <title>ONIAR</title>  <link rel="stylesheet" type="text/css" href="style/style.css" />   </head>   <body><div id="wrapper">    <div class="pilt1">   <a href="http://agriforestry.com"></a>   </div>	 <div class="pilt2">   <a href="http://oniar.eu"></a>   </div></div>   </body> </html>

and here is css source:

body {background : #e1e1e1;text-align : center;}#wrapper{  margin: 0px auto;  min-width: 1200px;}.pilt1 a {display : inline;position : absolute;background-image : url(for.jpg);top : 125px;right : 12%;width : 472px;height : 354px;}.pilt1 a:hover {background-image : url(for2.jpg);}.pilt2 a {display : inline;position : absolute;background-image : url(sub.jpg);top : 125px;left : 12%;width : 472px;height : 354px;}.pilt2 a:hover {background-image : url(sub2.jpg);}

Link to comment
Share on other sites

inline is not affected by height or width settings, it's height is determined by its content, usually text. You have no text so its height/width = 0, and because the background image will only show if a areas width/height is defined, that is why they don't show either. <a> elements are inline elements by default, so it is pointless giving them display: inline; Block elements CAN have a defined height/width to define there area, so you should have used display: block;

Link to comment
Share on other sites

when I am removing position:absolute - then the effects and pictures doesn't show at all.
right, and I addressed that in my post, because certainly there will be a few more tweaks to make....
I definitely wouldn't use position absolute, that's for sure. Get rid of that, I don't know what you are using it for. you should use a wrapper for your content (i.e. surrounding your two pilt divs), and then center that, and give it the min-width as has been suggested.
#wrapper{  margin: 0px auto;  min-width: 1200px;}

display:inline is redundant on the selectors targeting the anchor elements because they are inline to by default. start with that and see what you get. post your code or update your site.

there's a reason why everyone has told you to do the same thing. It's because it is a bad practice and we advocate only the use of best practices, and unless you use positioning for the right things, it makes even simple layouts harder than they need to. So I will say again, make the changes we suggested, then post your code and tell us what problems you are encountering.
Link to comment
Share on other sites

Hi all again.Thanks for tips - I removed absolute positioning and I used w3schools.com page (found some tips again) and now It looks much better.Now I need to center that wrapper also. Right now everything is left oriented.http://oniar.eu/oniariesileht/Code is here:

body {background : #e1e1e1;text-align : center;}#wrapper{  margin: 80px auto;  min-width: 1200px;}.pilt1 a {display: inline-block;background-image : url(for.jpg);right : 12%;width : 472px;height : 354px;float:left;}.pilt1 a:hover {background-image : url(for2.jpg);}.pilt2 a {display: inline-block;background-image : url(sub.jpg);left : 12%;width : 472px;height : 354px;float:left;}.pilt2 a:hover {background-image : url(sub2.jpg);}

and html:

<html>   <head>  <title>ONIAR</title>  <link rel="stylesheet" type="text/css" href="style/style.css" />   </head>   <body><div id="wrapper">	<div class="pilt1">   <a href="http://agriforestry.com"></a>   </div>	 <div class="pilt2">   <a href="http://oniar.eu"></a>   </div></div>   </body></html>

So can You give tips - what CSS function I can use to center it.

Link to comment
Share on other sites

You have giving it a min-width: of 1200px which means it stretch to total width of browser window width, but not below 1200px, which means the auto in margin:0 auto is trying to centre the wrapper with no space at all! on left or right edges. You need to make the wrapper the same width as the total width from left edge of first image to right edge of second, only then will it be able to truly centre using margin: 0 auto;

Link to comment
Share on other sites

You should be setting the width property to 1200 instead of min-width. If you don't set the width, then the box will expand to take the whole width of the page.

Link to comment
Share on other sites

IF you use 1200px, and want the images to appear with equal distance from the left and right of your browser screen, you will need to give the right image a float: right; but you will end up with a 250+ pixel gap in between the images. Otherwise the images will appear 250+ pixels closer to the left. Your total width of images from left to right edges = 944px, to centre these image, with the same gap between them you HAVE to use a width of 944px for the #wrapper, and remove min-width completely.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...