background problem in widgets

**aliqayyum** · Jun 6, 2012 22:41

hi friends

i need your help

plz open this http://uptenlist.com/all/10-fitness-tips-to-be-healthy/ and see widget "recent post" (http://i.imgur.com/W32Vf.png) , "recent post' background is showing on "search box" widget on top..
suppose i add any new widget above "recent post" , suppose i added "abc" widget" , background will shown on recent post, but "abc" background will disappeared

thanks, hop fully you guys can understand...

**unconformed** · Jun 6, 2012 23:57

I can see that

<div id="sidebartitlewrapper">
<h3>Recent Posts</h3>
</div>

Is in it's own div, where

<div class="sectioncont">
<div class="block-item-small">
<div class="block-item-small">
<div class="block-item-small">
</div>

Should sit under it.

It looks like a problem with the template. Perhaps you can not fit enough contnet in your right-hand widget area. I'm sorry I am fairly new to WP and coding.

**aliqayyum** · Jun 7, 2012 00:15

Originally Posted by unconformed

I can see that

It looks like a problem with the template. Perhaps you can not fit enough contnet in your right-hand widget area. I'm sorry I am fairly new to WP and coding.

thanks for your reply, waiting for any other expert

**Paul O'B** · Jun 7, 2012 07:27

Hi,

The background on elements following a float will slide up under the float so all your backgrounds end up on the top of the sidebar instead.

Either add clear:both to the element that follows after the float or indeed it looks as though your sidebar doesn't need to be floated anyway as it is already inside a floated column.

Code:

#sidebar{float:none}

**aliqayyum** · Jun 7, 2012 07:34

Originally Posted by Paul O'B

Hi,

Code:

#sidebar{float:none}

thanks sir, its works

one more question

suppose open this http://uptenlist.com/misc/top-10-bes...gifts-in-2012/
you can see social media icons below title, i am using digg digg plugin, is it possible, i can place above and below borders on it?

and i want to push logo little up as well

thanks

**Paul O'B** · Jun 7, 2012 07:46

Hi,

I'm not sure where you want borders exactly but play around with something like this:

Code:

#twfb ul{
border-top:1px solid red;
border-bottom:1px solid red;
padding-bottom:0;
}
#twfb ul li{padding:3px 4px 0}

#twfb ul li img{border:1px solid #000}

The logo can be moved up like so.

Code:

#logo {margin-top: -10px}

**aliqayyum** · Jun 7, 2012 09:30

Originally Posted by Paul O'B

Hi,

I'm not sure where you want borders exactly but play around with something like this:

Code:

#twfb ul{
border-top:1px solid red;
border-bottom:1px solid red;
padding-bottom:0;
}
#twfb ul li{padding:3px 4px 0}

#twfb ul li img{border:1px solid #000}

The logo can be moved up like so.

Code:

#logo {margin-top: -10px}

thanks , logo fixed sir

i am talking about this buttons http://s15.postimage.org/3ocs9uwmz/button.png

let me know, how i can add border on them

**Paul O'B** · Jun 7, 2012 10:09

Hi,

You can add borders with this:

Code:

.dd_post_share{
border-top:2px solid #000;
border-bottom:2px solid #000;
padding:7px 0 0
}

You may be able to tidy the buttons up a little with something like this:

Code:

.dd_button + .dd_button + .dd_button{position:relative;top:-2px}
.dd_button + .dd_button + .dd_button + .dd_button{position:relative;top:-4px}
.dd_button + .dd_button + .dd_button + .dd_button  + .dd_button{position:relative;top:-1px}

**aliqayyum** · Jun 7, 2012 10:27

Originally Posted by Paul O'B

Hi,

thanks sir, buttons are not equally divided in spaces, can we adjusted into equal space? http://uptenlist.com/all/10-most-dan...world-in-2012/

**ralph.m** · Jun 7, 2012 15:37

Originally Posted by aliqayyum

buttons are not equally divided in spaces, can we adjusted into equal space?

Each one has a different width set, so you could adjust those. E.g.

Code:

<iframe ... style="width: 107px; height: 20px; " title="Twitter Tweet Button"></iframe>

**Paul O'B** · Jun 8, 2012 01:58

If you don;t want to adjust the html as Ralph suggests then you could follow my other code and just apply margins to each element as required.

e.g.

Code:

.dd_button + .dd_button{margin-right:20px}/* second button */
.dd_button + .dd_button + .dd_button{margin-right:10px}/* third + button */

and so on...

**aliqayyum** · Jun 8, 2012 09:03

Originally Posted by Paul O'B

If you don;t want to adjust the html as Ralph suggests then you could follow my other code and just apply margins to each element as required.

e.g.

Code:

.dd_button + .dd_button{margin-right:20px}/* second button */
.dd_button + .dd_button + .dd_button{margin-right:10px}/* third + button */

and so on...

thanks sir, i applied your 2nd code , can you check it
http://uptenlist.com/health/10-worst...nt-want-to-do/

1 more thing, i visited my site on smart phone, header moved on left side ... and site on right side,... can you tell me, whats a problem on it

thanks

**Paul O'B** · Jun 8, 2012 11:59

Originally Posted by aliqayyum

1 more thing, i visited my site on smart phone, header moved on left side ... and site on right side,... can you tell me, whats a problem on it

thanks

I don't own a smart phone to test but unless you have specifically designed for mobile then it is unlikely that a site like that will display correctly.

On the iphone emulator your js slideshow is sitting on top of the nav so try adding clear:both to the section (section{clear:both}) that follows the nav or at least contain the floated navigation within the header with a containing mechanism.

**ralph.m** · Jun 8, 2012 15:38

Originally Posted by aliqayyum

on smart phone, header moved on left side ... and site on right side,...

The page renders fine on my iPhone. Which phone are you using?

**aliqayyum** · Jun 9, 2012 03:28

Originally Posted by ralph.m

The page renders fine on my iPhone. Which phone are you using?

sir on samsung gallexy s 2, its displaying incorrect..

can you tell me, where i can paste div clear code?

Sir here is screenshot ! CGjoq.png

**aliqayyum** · Jun 9, 2012 03:37

Originally Posted by Paul O'B

I don't own a smart phone to test but unless you have specifically designed for mobile then it is unlikely that a site like that will display correctly.

On the iphone emulator your js slideshow is sitting on top of the nav so try adding clear:both to the section (section{clear:both}) that follows the nav or at least contain the floated navigation within the header with a containing mechanism.

sir i attached screenshot, it can help you better understanding! and sir kindly tell me, where i ve to add "clear both code" Attachment 60023

thanks

**Paul O'B** · Jun 9, 2012 07:08

Hi,

You don't have a class on the section element to target which is where it is needed so this fix may upset anywhere you have floated a section element - if any.

Code:

section{clear:both}

**aliqayyum** · Jun 9, 2012 07:58

Originally Posted by Paul O'B

Hi,

You don't have a class on the section element to target which is where it is needed so this fix may upset anywhere you have floated a section element - if any.

Code:

section{clear:both}

thanks works

User Tag List

Thread: background problem in widgets

Thread Tools

Display

background problem in widgets

Bookmarks

Bookmarks

Posting Permissions