spottraining Posted February 1, 2012 Share Posted February 1, 2012 Hi all I am learning here CSS. I made one frontpage: http://oniar.eu/oniariesileht/All effects working fine - as needed. Thanks for www.w3schools.comBut I have one problem - when the screen is smaller then the pictures obscure each other. But I want then automaticly is added scroll bar. Can You give some hints, how to do that. Link to comment Share on other sites More sharing options...
eTianbun Posted February 1, 2012 Share Posted February 1, 2012 Add min-width to the body element.e.g: min-width:1000px Link to comment Share on other sites More sharing options...
spottraining Posted February 1, 2012 Author Share Posted February 1, 2012 It doesn't help - when I am doing screen smaller - still the same problem. Link to comment Share on other sites More sharing options...
eTianbun Posted February 1, 2012 Share Posted February 1, 2012 I cant view the page source code, because i use mobile device to access the net. What i gave you, works, except you have an Error in your code, or i did not get your explaination wright. Link to comment Share on other sites More sharing options...
spottraining Posted February 1, 2012 Author Share Posted February 1, 2012 Hi CSS validator doesn't show any errors. I added two pictures:This is normal view and so I want to look all the time. But when I am doing screen smaller, then it will look so: Link to comment Share on other sites More sharing options...
eTianbun Posted February 1, 2012 Share Posted February 1, 2012 Did you Try changing the value in the min-width?e.g: min-width:1200px Link to comment Share on other sites More sharing options...
spottraining Posted February 1, 2012 Author Share Posted February 1, 2012 Still nothing.Maybe I need to make some box or table around these two pictures? Link to comment Share on other sites More sharing options...
eTianbun Posted February 1, 2012 Share Posted February 1, 2012 Post the code, and let me see! Link to comment Share on other sites More sharing options...
thescientist Posted February 1, 2012 Share Posted February 1, 2012 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 More sharing options...
spottraining Posted February 3, 2012 Author Share Posted February 3, 2012 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 More sharing options...
eTianbun Posted February 3, 2012 Share Posted February 3, 2012 I definitely wouldn't useposition:absolute, that's for sure. Get RID of that, I don't know what you are using it for... display:inline is redundant on the selectors targeting the anchor elements because they are inline by default... Link to comment Share on other sites More sharing options...
spottraining Posted February 3, 2012 Author Share Posted February 3, 2012 when I am removing position:absolute - then the effects and pictures doesn't show at all. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 3, 2012 Share Posted February 3, 2012 As mention before, get rid of position: absolute; left, right, bottom, top and use float, margin, and padding instead, you should only use positioning as a last resort is float,margin etc fails, which would be very rare. Link to comment Share on other sites More sharing options...
eTianbun Posted February 3, 2012 Share Posted February 3, 2012 We can copy your code to our PCs and fix your code for you by ourselfs, but we just want you to learn, thats why we are telling you what to do! Link to comment Share on other sites More sharing options...
eTianbun Posted February 3, 2012 Share Posted February 3, 2012 In the .pilt1 a{} and .pit2 a{}, do the following:(1)change display:inline to: Display:inline-block; &(2) Remove the following: Position:absolute; top:125px; right:12% Do that, and post your feedback! Link to comment Share on other sites More sharing options...
dsonesuk Posted February 3, 2012 Share Posted February 3, 2012 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 More sharing options...
thescientist Posted February 3, 2012 Share Posted February 3, 2012 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 More sharing options...
spottraining Posted February 5, 2012 Author Share Posted February 5, 2012 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 More sharing options...
dsonesuk Posted February 5, 2012 Share Posted February 5, 2012 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 More sharing options...
Ingolme Posted February 5, 2012 Share Posted February 5, 2012 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 More sharing options...
dsonesuk Posted February 5, 2012 Share Posted February 5, 2012 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 More sharing options...
spottraining Posted February 6, 2012 Author Share Posted February 6, 2012 Thanks It worked. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.