I would like to remove the border around the widgets on my home page. The CSS of my theme removes this universally. I thought I could specify the location and name of the Div text widget, (ie text-7, text-6) etc. and alter this. I can control the elements within the widget doing this, but it still will not remove the border. For example, the text widget:
#text-7. {border:1px solid transparent; text align: center}
Centers the elements, but does not remove the border. I've tried a few variations with no luck. Here is the source code: http://pastebin.com/7dSUebhk. Link to the live site in the comments below.
Thank you very much.
Alex
There is no border around the div#text-7 element on your page so that is why your css does not remove the border. There is a border around div.sidebox which if you add:
.sidebox {border:0px}
Will remove all sidebox borders.
Your options are: a) use javascript/jquery to select the parent div of #text-7 and remove the border that way, b) add a unique ID to the .sidebox DIVs so you can then remove the border for the specific sidebox DIV.
Related
I built a small mobile website with AngularJS & Bootstrap. Please see http://www.quaaoutlodge.com/mobile/
Now I would like to move the text into the center of the <li list items but when I add a padding-bottom or margin-bottom to the #desc element, the text doesn't move up at all but the reserved space seems to just go across the <li border. Why is this? How do I change this so that I achieve above described effect?
Thank you!
edit 1
I changed the <span style from id to class, added display: inline-block; and padding-bottom: 10px;and the padding gets applied right now but, how do I move the text up while the icon on the left stays so that they get aligned centred to each other?
First, you need to fix the problem of having non-unique id elements on the page! You should probably be using a class for #desc, instead of an id.
In regards to the padding on the #desc span, you need to set the display style to inline-block, and then you should be able to use padding to affect the space around it.
I have a unordered list styled in CSS to create a horizontal navigation. Each list item has a border-left property to create a separator line. The last item in the list does not have this border-left property (override by using border-left:0). It works, however, the <a> link element (as opposed to the <li> element) is showing the border-left property. I cannot for the life of me figure out how to remove it.
Here is the web page in question: http://sa4idev.com/stabilis/buy-lng-here/ -- if you look at the bottom navigation, you'll see "BUY LNG HERE" with a stray vertical border just to the left of the "BUY" -- it is not supposed to be there. Any suggestions on how to remove that?
Thanks!
It seems like that's actually coming from the background image background:url('images/buy_lng_on.png') no-repeat; applied to #menu-item-59.current-menu-item a (inspector said line 659). Double-check that the image doesn't have stray blue lines in it.
EDIT:
It's actually because you're putting the background image on both the li and the a inside it (and on a:hover, incidentally). The blue line at the far left of the image is showing once for the li and once for the a. Removing the background image from the a fixed the issue in my testing.
you can use CSS2 pseudo CSS selector.
in your case you want to remove border from the last li so you can do this by selecting last-child or if you want to remove border from the first li then you can choose first-child CSS selector.
li:first-child{border:0}
li:last-child{border:0}
I know how to display an icon as such:
<span class='icon-remove'></span>
But If I add padding to the span, extra icon shows up. How to fix it?
span {
padding-right:60px;
}
fiddle
The glyphs are presented using one large image map (or so called CSS sprites), so if you leave enough space on in either side of the element it will show other glyphs as well. Two solutions comes to mind:
1) Put the icon in a containing element:
<span><i class='icon-remove'></i></span>
2) Or use margin:
span { margin-right: 60px }
I figure you just want to have some whitespace to the right of the icon? Have you tried margin:
<span class='icon-remove' style='margin-right:60px'></span>
The reason extra padding displays more icons is that Bootstrap uses CSS sprites to display icons. What you're actually seeing is a background image, more specifically a section of a large background image that includes many available icons. The definition of the class "icon-remove" specifies the background-position property to select the particular icon. If you add padding, you will reveal more of the background image, which will show additional icons.
The solution, then, is to either add margin, as Rid Iculous suggested, or couch your within another element and add padding to that. I'd go with the margin.
Here is my site: http://solarsource.net/new/
Hover over the main nav to see the menu in question.
The About Us menu is almost perfect. The only thing I need to fix on this one is to extend the vertical lines all the way to the top and bottom.
On the News menu, we need to extend the vertical lines all the way to the top and bottom. In addition, the blue highlighting needs to extend the entire height/width of the box.
On the Products/Services menu, again the vertical line needs to be the entire height of the menu. Also, the blue hover background needs to extend the full width inside and the "headers" need to be bold (For Home, Business & Government, Education).
This is wordpress so I can add a special class to the menus if needed but the fixes need to be generic enough so we can add new items without causing something to break.
Any help would be greatly appreciated.
Use negative margins, and then increase the padding to compensate on the li class with the dotted line borders.
padding: 10px 8px;
margin: -10px 0px -10px 0px!important;
I have a 3 elements stacked on top of each other. The top element is the overlay content. The second element is a background border image. The bottom element is a background.
What I want to do is hollow out the middle element, so that I can see through the top element into the bottom element, but leave the border of the middle element surrounding the top element.
http://jsbin.com/unimux/4/edit
As you can see the middle element is blocking the view to the bottom element.
Edit: I did try using border-image but it wouldn't render correctly for me with border-radius.
Edit2: is it possible to get the desired effect with border-image? Kudos to anyone who can make it look not terrible with border-image.
Edit3: Some progress based on Zuul's answer:
http://jsbin.com/unimux/15/edit
Setup a new element, with a class, e.g., .apple and place it over all other existent elements with the same image as the bottom one:
See your JS Bin Example Altered!
div.apple {
margin: 100px;
width: 200px;
height: 200px;
background: url(http://www.ipadwallpapersonly.com/images/wallpapers/1gk0rv4ng.jpg) center center;
}
Having the image centred and by give a correct margin value, it simulates the "hollow" effect at the div.middle.
See the result preview:
If the elements dimensions aren't the same, the use of CSS position helps keepping everything into the proper place:
An example here!
You can't really do that with the current state of CSS. Maybe just put the bottom element on top of the middle one, and work?
As per egasimus, you can't really do that with CSS.
Try something like this though, with four divs creating the 'window'.