I created the carousel and I need to override styles Indicators buttons. I have style:
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 1;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
display: inline-block;
}
and the need to get:
.carousel-indicators {
z-index: 1;
padding-left: 0;
list-style: none;
display: inline-block;
}
How do I override styles or remove the default?
You mean styles to its default css?
.carousel-indicators {
z-index: 1;
padding-left: 0;
list-style: none;
display: inline-block;
/*lets override other properties*/
position: static;/*or relative*/
width: auto;
margin: 0;
text-align: left;
}
top, left aren't required to modify as it is using static position won't sense for those
You should also keep an eye in which order your scripts are loaded to get everything working correctly. If you overwrite CSS, the overrided code should be loaded at last. Also interesting is to make use of important:
.exampleClass {
margin: 0 !important;
}
.exampleClass {
margin: 5px;
}
The first one will overwrite the second one so that .exampleClass will have a margin of 0 because with !important you can tell the browsers that this directive has a higher weight than the others. But keep in mind that CSS will use the logical loading order of the code when you've multiplice important-statements because in this case the browser can't know which of them is more important than the other one.
Which Bootstrap version are you using?
If it's the CSS version, simply write your styles with a more specific selector. For example:
#your-carousel .carousel-indicators {
/* your styles*/
}
If you use the LESS version of Bootstrap (the option I always recommend), you can easily change it in the carousel.less file and compile to the CSS version.
Related
I have a problem with sidebar of this page. I can not make it go under in the responsive version, especially in the smartphone version. Sidebar remains attached to the contents of the left but does not wrap
This is the link for the codepen
If codepen does not work, this is the link for the website.
archive-posts-w.with-sidebar .archive-sidebar {
display: block !important;
position: relative;
top: inherit;
left: 0;
width: 100%;
max-width: 350px;
bottom: inherit;
right: inherit;
clear: both;
float: left;
}
Html there will certainly be errors because it is a copy of a source of a website wordpress.
There are a few problems here:
Your container .archive-posts-w.with-sidebar has display: table;. Change that to display: block for smaller screens (i.e. in your media query)
The CSS for the part above your sidebar should be like this (for smaller screens):
.archive-posts-w.with-sidebar .archive-posts {
display: block;
vertical-align: top;
width: 100%;
}
And for .archive-posts-w.with-sidebar .archive-sidebar you have a max-width setting of 350px, also inherited from everal other rules, so change this rule (for smaller screens) to
.archive-posts-w.with-sidebar .archive-sidebar {
display: block !important;
position: relative;
top: inherit;
left: 0;
width: 100%;
max-width: none;/* <-- this one is changed */
bottom: inherit;
right: inherit;
clear: both;
}
First add class table td in that td class="test"
td.test
{
display:block
}
#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3
{
margin:0px!important;
}
#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3
In that class you have 'margin: 0 0 0 60px!important;' you change that 0px
abd check the devices
http://www.responsinator.com/?url=http://www.alchimieadv.biz/ricette/&device=ipad&orientation=portrait
I created the carousel and I need to override styles Indicators buttons. I have style:
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 1;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
display: inline-block;
}
and the need to get:
.carousel-indicators {
z-index: 1;
padding-left: 0;
list-style: none;
display: inline-block;
}
How do I override styles or remove the default?
You mean styles to its default css?
.carousel-indicators {
z-index: 1;
padding-left: 0;
list-style: none;
display: inline-block;
/*lets override other properties*/
position: static;/*or relative*/
width: auto;
margin: 0;
text-align: left;
}
top, left aren't required to modify as it is using static position won't sense for those
You should also keep an eye in which order your scripts are loaded to get everything working correctly. If you overwrite CSS, the overrided code should be loaded at last. Also interesting is to make use of important:
.exampleClass {
margin: 0 !important;
}
.exampleClass {
margin: 5px;
}
The first one will overwrite the second one so that .exampleClass will have a margin of 0 because with !important you can tell the browsers that this directive has a higher weight than the others. But keep in mind that CSS will use the logical loading order of the code when you've multiplice important-statements because in this case the browser can't know which of them is more important than the other one.
Which Bootstrap version are you using?
If it's the CSS version, simply write your styles with a more specific selector. For example:
#your-carousel .carousel-indicators {
/* your styles*/
}
If you use the LESS version of Bootstrap (the option I always recommend), you can easily change it in the carousel.less file and compile to the CSS version.
In a CSS file I have the following rules:
div.breadcrumbs span {
position: relative;
left: -120px;
height: 16px;
line-height: 16px;
margin: 0 20px;
overflow: hidden;
}
div.breadcrumbs img {
margin: 0 -20px;
padding: 5px 5px 0px 5px;
}
div.breadcrumbs a {
color: #88263F;
font-weight:bold;
}
The rules for img and a work, but not for span.
Also something does not work like
span {
display: none;
}
At the moment I have no clue how to debug this.
In principal, your posted CSS works.
If your HTML looks like this...
<div class="breadcrumbs">
These are <span>breadcrumbs</span> in a line...
</div>
and this is your CSS:
div.breadcrumbs span {
position: relative;
left: -120px;
height: 16px;
line-height: 16px;
margin: 0 20px;
overflow: hidden;
}
span {
display: none;
}
then the span element is not shown as you intended.
See demo at: http://jsfiddle.net/audetwebdesign/qyu5A/
You may have other problems such as other CSS rules that are conflicting and preventing the display: none property from working correctly.
There is nothing wrong with the positioning of an inline element, but you may not get exactly what you expect depending on the line height and surrounding content.
You may want to learn more about how the CSS cascade and specificity work.
Reference: http://www.w3.org/TR/CSS2/cascade.html#cascade
Note: The height property is ignored for inline elements.
Thank you for your hints, especially the fiddle!
Playing around with it I found the following code snippet also in the CSS file:
body.home div.breadcrumbs span { position:relative; left:0; }
Placing "div.breadcrumbs span" after this and deleting "position: relative;" it works as exspected.
I have the next CSS code:
#mgheader .letters {
display: inline-block;
margin-left: 55px;
margin-top: -45px;
position: absolute;
}
#mgheader .letters {
display: inline-block;
margin-left: 10px;
position: absolute;
}
Now I want to execute the first just in Google Chrome and Safari, and the second in other browsers.
I tried this, but second code seems to be executing always:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#mgheader .letters {
display: inline-block;
margin-left: 55px;
margin-top: -45px;
position: absolute;
}
}
#mgheader .letters {
display: inline-block;
margin-left: 10px;
position: absolute;
}
How can I fix that?
The problem is that you're overriding your webkit styling with the non-webkit styling.
Reversing the order should fix this:
#mgheader .letters {
display: inline-block;
margin-left: 10px;
position: absolute;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#mgheader .letters {
display: inline-block;
margin-left: 55px;
margin-top: -45px;
position: absolute;
}
}
You may also want to check that your -webkit-min-device-pixel-ratio fires on all webkit-using devices, but it probably does.
For reference, Cascading Style Sheets are read from top to bottom. The key word is Cascading. If one CSS rule is given before an identical CSS rule, the latter one will take precedence. In your example you were styling specifically to webkit browsers but then overriding it with the general styling rules. Reversing the order means that the webkit styling here will override the general styling (without affecting non-webkit browsers).
I am a bit pressed for time so I am sorry that this is brief.
I am trying to align these six li tags that act as drop downs, IE7, IE8 and all the good browsers work fine but IE6 continues to be stubborn and put them all over the place, you can find the page here.
I am using this CSS to place them inline.
/* I beleive this is the important bit? FROM HERE */
li.rathdown {
position: relative;
float: left;
margin: 0;
padding: 0;
display: block;
}
/* TO HERE */
li.rathdown * {
margin: 0;
padding: 0;
float: left;
}
li.rathdown ul {
width: inherit;
display: none;
position: absolute;
z-index: 100;
}
li.rathdown-sub {
position: relative;
}
li.rathdown-sub ul {
z-index: 99;
}
li.rathdown img.arrow {
float: right;
margin-right: 3px;
padding: 3px;
}
I also have another problem, in IE7 and IE8 the bottom of the page curls up slightly, any ideas?
Thanks for any suggestions you can give.
I have fixed them both now. The gap at the bottom was due to the height of the page, I think it was being shortend in IE by somethings padding (???) and the menu was fixed by applying the styles to all of the li's.
Sorry for the bad answer. It's a bit of an edge case really.