I am working on joomla template, and i make a custom button inside module, but the button css is override by module css. how can i fix this. help would be appreciated.
This is css i want for the button:
.button-middle {
background: url("../images/button-mid.gif") repeat-x scroll 0 0 transparent;
color: #FFFFFF;
float: left;
height: 27px;
line-height: 27px;
}
The code below has override button background :(
div.module div div div div, div.module_menu div div div div, div.module_text div div div div, div.module_grey div div div div {
background: none repeat scroll 0 0 transparent;
margin: 0;
overflow: hidden;
padding: 0;
}
template_css.css (line 342)
div.module div div div, div.module_menu div div div, div.module_text div div div, div.module_grey div div div {
background: url("../images/module_default/mod_tlb.png") no-repeat scroll left top transparent;
padding: 0 15px 15px;
}
template_css.css (line 304)
div.module div div, div.module_menu div div, div.module_text div div, div.module_grey div div {
background: url("../images/module_default/mod_trb.png") no-repeat scroll right top transparent;
padding: 0;
}
Add !important at the end of the background:
background: url("../images/button-mid.gif") repeat-x scroll 0 0 transparent !important;
Does the <link> declaration for your custom CSS file (if you're using one) come after Joomla's included CSS files within your <head> section? If you're not using a custom CSS file, do consider it - it means you can completely skirt similar issues by having your own selectors "trump" Joomla's by the simple virtue of having your CSS load last (thereby taking higher priority).
<!-- Joomla styles -->
<link rel="stylesheet" href="joomla.css" />
<!-- anything in here overrides anything in "joomla.css" -->
<link rel="stylesheet" href="custom_styles.css" />
(Omit the / from the closing brackets for HTML 5.)
If you've had this issue once, believe me that you'll have it again. (And again...)
If you have control over the markup you might be able to get away with adding an id attribute and then making your background selector #someid. As far as I can tell there were only class and element selectors, a single id selector might trump them all.
Disclaimer: im on the train and I can't test it right now. This could be totally incorrect. I also don't have the CSS specificity spec up to check either.
Edit:
Consider the following markup:
<div id="info" class="module">
<div>
<div>
<div>
<div>
<div>
<div>
<div class="test">
data
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And then the following css:
.test { background-color: red; } /* 0,1,0 */
div.module div div div div div div { background-color: blue; } /* 0,1,7 */
#info .test { background-color: green; } /* 1,0,1 */
The word "data" will have a background color of green.
Even if you can't easily change the markup to add an id, try to find an id any where in the parental chain or you could write your selector as div.module .button-middle { ... }, which still classifies as a 0,2,1. As long as your style is more specific than the one you are trying to override, it will trump.
fiddle here.
And a couple of links on specificity: here and here.
Related
As I have demonstrated in this pen, I am having a problem with the hover style of a link taking away the styles of the div it is in. The problem goes away, though, if I change the style on the #div div {background-color:blue; } to div {background-color:blue; }.
Just remove the second div in your CSS. Your problem is caused by the #div div which in CSS, actually means the div INSIDE the parent div. Right now you don't have that.
#div {
background-color: blue;
}
a:hover {
color: red;
}
<div id="div">
<a>Yo!</a>
</div>
I'm trying to get a parent div tag to hold n children div tags such that they are all on the same line, yet grouped together in the center. For example:
Here the children are blue, and the parent is red.
Here are the things I've tried:
Making blue divs display:inline to get them on the same line. Problems: doesn't display even with its width and height both set to 10px.I tried adding , but it only was a couple pixels wide.
Making blue divs float:left. Problems: Have to programmatically resize red parent to child contents since the divs are floated and then center in its parent to get what I want. There should be a solution that doesn't involve javascript.
For IE6 and IE7 compatibility you might have to add zoom:1; and *display:inline; to your child CSS
jsFiddle
.parent {width:100%;border:1px solid red;text-align:center;}
.child {width:15%;display:inline-block;border:1px solid blue;}
<style>
.container {
width: 100%;
padding: 0;
text-align: center;
border: 1px solid red;
}
.inner {
display: inline-block;
margin: 0 5px;
border: 1px solid blue;
}
</style>
<div class="container">
<div class="inner">
one
</div>
<div class="inner">
two
</div>
<div class="inner">
three
</div>
</div>
Stick the blue divs in a container div. Find their widths (margin and padding included) and give the container div that width. Then set the container div's margin to 0 auto, stick it in the red div and you should be fine.
Try to use display: inline-block;:
.child {
display: inline-block;
...
}
http://jsfiddle.net/mupuR/
I am trying to wrap a div called content with another div that has a different background.
However, when using "margin-top" with the content div, it seems like the wrapping DIV gets the margin-top instead of the content div.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
html {
background-color:red;
}
#container-top {
background-color: #ccc;
overflow: hidden;
padding-top: 10px;
border-bottom: 1px solid #000;
height:30px;
}
#container-bottom {
background-color: #F1F4F2;
}
#content {
margin-top:20px;
}
</style>
</head>
<body>
<div id="container-top">
</div>
<div id="container-bottom">
<div id="content">
Hello
</div>
</div>
</body>
</html>
So in the example, the div container-bottom gets the margin-top instead of the content div.
I found out that if I add a char inside container-bottom it fixes the issue.
<div id="container-bottom">
**A**
<div id="content">
Hello
</div>
But of course that is not a good solution...
Thanks,
Joel
What's happening is called margin-collapsing.
If two margins (top & bottom only, not right or left) of 2 elements are touching (or in your case, the top-margin of the inner div is touching the top-margin of the outer div), the max between them is used (in your case max(0, 20) = 20) and placed as far as possible from the touching elements (in your case outside the container div (the outermost element)).
To break this behavior, you have to place something between the 2 margins -> a padding at the top of the container div will do.
#container-bottom {
background-color: #F1F4F2;
padding-top: 1px;
}
#content {
margin-top:19px;
}
other solution (works, but may not suit your needs):
you can simply put a padding-top of 20 px in the container div:
#container-bottom {
background-color: #F1F4F2;
padding-top: 20px;
}
#content {
}
for more informations, this page explains it very well: Margin Collapsing
You could try adding a non-breaking space to the #container-bottom:
<div id="container-bottom">
<div id="content">
Hello
</div>
</div>
This is a suitable solution as it is often used to let a browser know that an element is not empty (some browsers ignore empty elements).
Margin-top is a mysterious creature because of its collapsing properties. I have found the easiest fix to this problem is to apply a 1px padding-top to the container-bottom div and change the content margin-top to 19px.
For example, if you look at Facebook, they have a short blue bar on top that extends the entire width of the browser. I thought about using width:100%; but I know that it needs to have a parent element to be able to do that.
One way:
<div style="position:absolute;left:0px;right:0px;height:20px"> </div>
The document itself acts as a parent element. Divs, by default, are 100% of their parent's width.
What you probably need to do is set no margin or padding on the body element.
<html>
<style>
body { margin: 0; padding: 0; }
#strip { background: #89f; padding: 5px; }
</style>
<body>
<div id="strip">This is a nav strip</div>
</body>
</html>
Demo at http://www.coffeepowered.net/projects/navstrip.html
If you use a CSS reset, then this should Just Work.
Hi I have a container which has a width of 1150px. Now I have this other mainmenu, with width: 100% that I want to place inside the container. But then ofcourse it only get 100%(1150px) but I want it full width from side to side, so it should ignore the setted width only for .mainmenu
I tried position: absolute which made it all wrong and weird
#mainmenu
{
height: 37px;
width: 100%;
margin: 0px auto;
background-image: url(../images/mainmenu_bg5.jpg);
}
Why is the menu in the container in the first place? If you want the menu to span the full width yet the contents of the container are only 1150px I think it is by definition not right to put the menu in the container. Consider restructuring your document. This is an example, I do not have your full code:
<body>
<div id="page">
<div id="header" style="background:Blue;">
header header header
</div>
<div id="mainmenu" style="background:Green;">
menu menu menu menu
</div>
<div id="container" style="width:1150px;margin:auto;background:Red;">
container container container
</div>
</div>
</body>
And if you want the contents of the header and menu to span no farther than 1150px which I think is what you want then consider this:
<head>
<style type="text/css">
.pagewidth {
width: 1150px;
margin: auto;
}
</style>
</head>
<body>
<div id="page">
<div id="header" style="background:Blue;">
<div class="pagewidth">
header header header
</div>
</div>
<div id="mainmenu" style="background:Green;">
<div class="pagewidth">
menu menu menu menu
</div>
</div>
<div id="container" class="pagewidth" style="background:Red;">
container container container
</div>
</div>
</body>
If your container is fixed-width, but you want a menu which has a background at full page-width, then you can have the menu background as a positioned background of html, and maintain the same HTML code. This will make the menu's background "bar" cover the whole page width.
Example of this method: http://templates.arcsin.se/demo/freshmade-software-website-template/index.html
How to do this: use positioned backgrounds:
http://www.w3schools.com/css/pr_background-position.asp
css is below, but sometime it depend from the content inside:
#mainmenu
{
height: 37px;
width: 100%;
margin: 0px;
position: relative;
background-image: url(../images/mainmenu_bg5.jpg);
}
This is a jQuery solution:
$('#mainmenu').width() == $('#container').width();
To get a background image to simulate the menubar spanning the entire width of the page you need to apply the #mainmenu background to the body or a container div like so:
body {
background: url(YOURIMAGE) repeat-x left 64px;
}
The 64px needs to be how far the #mainmenu is from the top.
If the body already has a background image then you will need another div just inside the body containing everything else. If you have no control over the HTML then using javascript to insert a div that will either wrap all the content or get rendered behind it (using position and z-index.)
position:absolute is the best way to get this while keeping the background in #mainmenu. In fact, it's the only one I can think of off the top of my head. Without javascript, of course. Everything else will require changing HTML or moving the background property to a different place.
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
Because #mainmenu's width:100% then will become 100% of the viewport rather than the containing block. (Unless a parent is position:relative or overflow:hidden)
So when you say it "got all weird", I assume that's because of other things on the page. Both absolute and float take items out of the normal document flow. So things below the menu can & will end up underneath it.
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
#mainmenu + *
{
padding-top:37px;
}
/* Exact selector not recommended due to poor browser support */
The solution to that is, basically, applying 37px of margin or padding to the first thing after #mainmenu. You'll also be unable to center absolutely positioned elements using margin:0 auto, but if you want it spanning the full width of the viewport, that shouldn't be a concern...If you want to center the live sections of the menu, of course, you'll need some sort of descendant to center:
#mainmenu
{
position:absolute;
left:0;top:??px;
width:100%;
height:37px;
background-image: url(../images/mainmenu_bg5.jpg);
}
#mainmenu > *
{
margin:0 auto;
}
/* Exact selector not recommended due to poor browser support */
/* & more properties needed if descendant is list with floated <li>s */
#mainmenu + *
{
padding-top:37px;
}
/* Exact selector not recommended due to poor browser support */
But there are lots of things you'll see change in relation to other things on the page with position:absolute. So to troubleshoot that I really need to know more about the other things on the page.
You may find another solution, but if you don't -- post a page I can look at & I may be able to help you with the weirdness you experienced with absolute positioning. That is, if it will work with this particular layout.