Jump to content

Display:Inline Element Not Working


pcgameslab
 Share

Recommended Posts

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 :

 

2Ez6Qml.png

 

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

 

StPHtlu.png

 

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

bCD938J.png

 

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

StPHtlu.png

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

Edited by pcgameslab
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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 by kelly2marie
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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;
}
Link to comment
Share on other sites

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 by dsonesuk
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...