I removed
background: url(none);
in my stylesheet because of load performance Why Firebug pretends that my stylesheet is calling my xmlrpc?
The problem is that it now causes some glitch on css list.
Any idea how to fix this ?
Thanks.
Update: picture below
http://reboltutorial.com/wp-content/themes/minaflow/glitch.png
Tried to put background: none as suggested but didn't solve the problem/
ul.sidebar_list li ul li ul {
margin: 0px;
padding: 0px!important;
float: left;
width: 100%;
list-style-type: none;
background: none;
}
Referring to your other question I assume you mean the background image on your list items within the sidebar. You have to explicitly declare that you don't want a background image on the inner list items inside the list of widgets in your sidebar.
See line 370 of your styles.css and add background-image:none; as shown:
ul.sidebar_list li ul li {
background-image:none;
}
Good luck with your blog!
Related
I have Joomla 3.4.5 + Virtuemart 3 + Template Purity III.
I have a problem with the "pages navigation" links. You can see the problem here:
http://alturl.com/ofbav [link broken]
The problem is the list <ul> is displayed vertically instead of horizontally.
I would like to know which css code I have to add to get horizontally and "normal" looking my pagination buttons.
Can some expert help me please?
Not sure. Try like this.
.vm-pagination > ul > li
{
display:inline-block;
padding:0px 10px;
}
EDIT:
According to comment below if you want one code should solve both the problem then use it like below. In the above code i tried to apply only for the direct children list items. In your bottom page case it is not direct children. So change your code like below.
.vm-pagination ul > li
{
display:inline-block;
padding:0px 10px;
}
You should put list-style: none; on "ul" to get rid of the bullet points and display: inline; or display: inline-block; on the contained "li"s to display them in a row.
.vm-pagination ul li
{
list-style: none;
}
.vm-pagination ul li
{
display: inline;
}
Then you can play with marging+paddings+borders to make them look more like tabs.
Just add text-align: left; to your pagination ul. Also you can disable list styling with list-style: none;. And as a final step, you can remove unnecessary paddings and margins of your ul element
.vm-pagination > ul {
text-align: none;
list-style: none;
padding: 0;
}
use in your style may help you
ul
{
list-style:none;
margin:0px 0px;
padding:0px 0px;
}
ul li
{
float:left;
padding:4px 4px;
}
My Dropdown-Menu Background only appears when hovering over the Dropdown sites, but I want it to appear all the time.
My Site is: http://bellezza-ribelle.blogspot.de/
There are Dropdowns on "Meine Bücher", "Rezensionen" and "Challenges" but the background only shows on the first Dropdown-Tabs, which makes it difficult the read the other ones, if you don't hover over them.
How can I make the Background appear on the drop-down-tabs with only hovering over die "Main"-Tabs (Meine Bücher, etc.)?
Add this to your CSS:
#nav1 ul ul li {
background-color: #f3f3f3;
}
You can also have more "air" by using padding for the li:
#nav1 ul ul li {
background-color: #f3f3f3;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
}
Looks like you might have a little issue with your max-height # .tabs-inner .widget ul on Line 255. Maybe setup a different max-height on :hover?
I'm trying to style my wordpress sub-menu with CSS to show only when a user hovers the "Color" menu item but I haven't succeed so I need some help please.
Here's how my menu looks like at this state:
The sub-menu shows all the time and there is a weird space after the "Color" menu item. Also, the sub-menu items are displayed one after another and not one below other like a drop-down menu should be.
Could you please help me out?
I'm aware that there are some similar questions to this one but they were of no help.
EDIT: added current CSS menu code that I have in my style.css
nav.main { float: left; }
nav.main li { float: left; margin-right: 11px; }
nav.main li.last-child { margin-right: 0; }
nav.main li a {
color: #7A0018;
display: block;
font-size: 13px;
padding: 50px 7px 22px 7px;
text-decoration: none;
}
nav.main li a:hover { background: #fbf6dc; }
nav.main li.current-menu-item a { background: #fbf6dc; }
where is css for your child list items ? you haven't use display property for those sub-menu which should be done none first then only on hovering them you have to change display property 'block'.
You have given margin-right property 11px; where as ul on default also occupies some margin.
Can you also provide your html frame (code)?
While working on a responsive design, I noticed that everything is responsive except for my unordered list. When I resize the browser, the list doesn't move or stay centered in its DIV. I've tried a bunch of things all day but simply can't figure it out. For context, #sitecontent is the container holding everything, #sitecontent .leftsidebar contains an image and the unordered list, and #sitecontent .leftsidebar ul is the unordered list. Can someone check it out and tell me what's wrong? Please visit my site at http://www.tommaxwell.me and view the source.
Try this CSS:
#sitecontent .leftsidebar ul {
position: relative;
top: -5px;
list-style-type: none;
font-family: 'Patua One', cursive;
padding-left: 10px;
}
#sitecontent .leftsidebar ul li {
margin-bottom: 3%;
clear: both;
border-bottom: 1px solid #E5E5E5;
font-family: helvetica;
text-align: center;
}
My browser is adding some padding to the list, which is a pretty common thing for browsers to do. You might consider using a reset (meyer, yui), or just setting explicit padding/margin on the ul and li's.
I guess I was overcomplicating the whole thing, and in the process forgetting the whole point of responsive designs in the first place. Adding padding/margin around the list is absolutely acceptable to use in the case, as I'll use media queries at breakpoints. Don't know why I was making things so complicated in my head!
Hi update your css with mine actually i have given the horizontal padding to your .leftsidebar ul parent div and made some changes in its list-items and its working fine now.. see the attached image for your reference :-
CSS for till IPad
#sitecontent .leftsidebar ul {
padding: 0 25%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#sitecontent .leftsidebar ul li {
border-bottom: 1px solid #E5E5E5;
display: block;
font-family: helvetica;
line-height: 25px;
margin: 2px;
}
And for iphone you will have to write the css :-
image reference for iphone :-
CSS for till IPhone
#sitecontent .leftsidebar ul {
margin-top: 10%;
margin-bottom:20%;
position: relative;
}
I'm styling a list of recent posts and images from a plugin from wordpress. I know there is a wordpress section but my question is to just get some advice as how to style this list.
The website is here
This is what it looks like now.
This is my CSS
.advanced-recent-posts {
list-style-type: none;
}
.advanced-recent-posts li {
font-size: .7em;
font-weight: bold;
line-height: 20px;
color: #761616;
margin-bottom: 10px;
text-transform: uppercase;
width: 250px;
position: relative;
top: -35px;
border: 1px solid #000;
}
.advanced-recent-posts li a {
margin-left: 10px;
}
.advanced-recent-posts li img {
position: relative;
top: 0px;
left: -10px;
padding: 5px;
border: 1px solid #999;
}
and so far so good. But because both the image and the title & date are in the some They move together which is not what I want, but because it is a plugin I dont know how to change that. So I was hoping with the provided website and CSS that someone could help me just make that second line of each recent post follow directly under the first. Like in my design here.
#Bonjour: This is what I got doing the
.advanced-recent-posts li { display:table-row; vertical-align:top;}
(and of course with all the other styling I had on it)
The post titles are at least flowing right.
Some weird positioning going on there. Anyway, there are two ways to make this happen:
Float the image left, add a bit of right/bottom padding. This way text naturally flows under the image
Take advantage of the relative positioning on the li and set position:absolute on the image, while giving the li enough padding to move the text from under it. This way text will never flow under the image
Examples: http://jsfiddle.net/Ucrsk/
Try modifying the style of the anchor ie.
.advanced-recent-posts li a {
display: block;
margin-left: 10px;
}
Just to reiterate from my comment in your question, try using:
li {
display:table-cell;
vertical-align:top;
}
OR
li {
display:table-row;
vertical-align:top;
}