Display:Inline Element Not Working

[pcgameslab]

I have added a display:inline element to a box called as SEO Tips For Webmasters,in the news_pictures class but still it's appearing in the block element way.Here's how it's appearing :

 

 

And I expected it to appear in the following way:-

 

 

My blog's url is this:- http://technopcarea.blogspot.com/ can anybody tell me why is it not appearing correctly

[newseed]

set that ul to use padding: 0;

[davej]

Obviously there is insufficient width available for the three images. If items don't fit on a line they drop to the next line. This can be due to the width or the margin or the padding of the items.

[kelly2marie]

I agree that there is not enough space available. However, let's back up a bit... you have overflow set to hidden. I would remove this, and instead, clear the float to keep the content beneath from floating upwards. Hiding overflow is part of the reason you do not have enough space.

 

Another reason: remove the -13px margin from the <ul> element.

 

You will have to investigate further by experimenting in order to find other reasons for lack of space. Though I think you will find removing hidden for overflow is going to help you out quite a bit!!

[pcgameslab]

I did it by decreasing the width of the images to 180px but now it's not appearing as it should.

 

See the below screenshot:-

 

There's a lot of space left at the left sie,I think that is is causing problem in the default sizing of the images and there's also no gap in between images.

I know that very correctly it should appear like below screenshot

It is having correct gap between images and no extra space at left side

Edited July 1, 2014 by pcgameslab

[dsonesuk]

ul come with default padding, margin, text-indent you have to zero these, yours is coming with 30px + on left side of ul and its li if you use any.

Edited July 1, 2014 by dsonesuk

[pcgameslab]

I have done the padding and margins 0,but still same result.

[newseed]

Per your link, you have not touched the correct ul and you may have set the width for one thing but the other. You have 3 places to edit in order to lay down correctly.

 

.news_pictures .news_pictures_list { margin-right: -13px; overflow: hidden; /*really don't need this*/ padding: 0;}

.news_pictures .news_pictures_list li { float: left; height: 130px; list-style: none outside none; margin-bottom: 9px; margin-right: 9px; width: 198px;}

.news_pictures .news_pictures_list li img { height: 120px; width: 198px;}

 

 

Now if you want the far left images (or third image of each row) to flush to the right then you will need to define a class for the end li and then use margin-right: 0; Then you would adjust the other two so that it balances out the spacing.

 

.news_pictures .news_pictures_list li.end

{

margin-right: 0;

}

Finally, you are using one extremely large image and the rest could be downsized as well optimized so that it loads quickly.

[kelly2marie]

Here's what you need to do in order to do better troubleshooting.... Use Mozilla Firefox browser. Then get an addon called Firebug. Once you have Firebug, then view your page in Firefox, right click where ever you have a problem and choose Inspect with Firebug. Firebug will open in the bottom of the window. Now click on the particular HTML in question and firebug will highlight that area on the page plus show you the existing CSS being applied to that element. You can turn off any CSS Style to see what happens. This process will help you figure out what to change.

 

You still have overflow set to hidden and still have -13px margin on the ul. Instead of hiding overflow, clear the float.

 

You also need to add a small margin on the left of each image to create space between the images.

Edited July 1, 2014 by kelly2marie

[pcgameslab]

This was the output of removing overflow:hidden

[newseed]

Per your link, I do not see any of the changes I have suggested to you per my previous post July 1st..

[dsonesuk]

LOOK! everything we have suggested, the link does not show any of the suggestions.

1) First and utmost you must sort out the padding so you have the maximum available space, its no good trying to fit, adjust width of any of the other elements until then.

2) apply images/li width and margins sizes that will fit in the now established maximum width of parent container.

 

simpeeellsss

[pcgameslab]

I tried to add this:-

 

padding-left:0px; and even tried to add this

padding-left:-50px;

 

But no effect of both.

[newseed]

We are not seeing the changes we have suggested to you. This is the last time I will point this out. Per my July 1st post to you this is what you need to change to make it lay down correctly:

 

.news_pictures .news_pictures_list { margin-right: -13px; overflow: hidden; /*really don't need this*/ padding: 0;}

.news_pictures .news_pictures_list li { float: left; height: 130px; list-style: none outside none; margin-bottom: 9px; margin-right: 9px; width: 198px;}

.news_pictures .news_pictures_list li img { height: 120px; width: 198px;}

 

 

Now if you want the far left images (or third image of each row) to flush to the right then you will need to define a class for the end li and then use margin-right: 0; Then you would adjust the other two so that it balances out the spacing.

 

.news_pictures .news_pictures_list li.end

{

margin-right: 0;

}

[dsonesuk]

you have already been given the code to use

.news_pictures .news_pictures_list {  /*margin-right: -13px;  overflow: hidden; you really REALLY don't need these*/  padding: 0;}

minus padding values don't work.

 

just add this code to the bottom of css styling which should be around line 3000.

 

actually you do nned overflow: hidden;

 

Another option where no overflow is required

.news_pictures_list {    padding: 0;}.news_pictures .news_pictures_list li {    height: 130px;    list-style: none outside none;    width: 32%;}.news_pictures_list li:nth-of-type(1n) {    display: block;    float: left;}.news_pictures_list li:nth-of-type(2n) {    display: block;    float: right;}.news_pictures_list li:nth-of-type(3n) {    display: block;    float: none;    margin: 0 auto 9px;}

Edited July 4, 2014 by dsonesuk

[pcgameslab]

Very Much Thank You Sir,Now It's All Fine