Overriding BootStrap CSS - difficulty understanding specificity - html

I'm absolutely new to coding and attempting a basic website, and have used the BootStrap CSS as a basis.
I've set up nav-pills and managed to customise them thus far (spacing, font, background colours etc) but struggled for hours trying to change the background colour of my header behind the nav-pills - 1 white b/g to 2 grey b/g.
My HTML header container reads:
<div class="header">
<div class="row">
<p id="navigator">
[nav-pills code]
</>
</div>
</div>
With a lot of researching into specificity I thought this may be my problem so I tried CSS code:
.header .row #navigator {
background-color: #CCCDD9;
}
to no avail, but found that simply did work:
.header .row {
background-color: #CCCDD9;
}
now produced the desired override of the bootstrap CSS even though I was not even selecting the #navigator ID to increase rule specifity. Could someone explain why this method works?
Further, as the new background does not appear for the other website pages I did not add the #navigator header ID to, is there a method (besides adding the #navigator ID to each HTML page) of modifying my CSS which would make this override work across all pages?

In your first CSS example, you are targeting the paragraph tag within the row, but in the HTML you provided your paragraph tag is malformed (missing a closure and contains no content). Because of this, the paragraph tag is being rendered with 0 height which explains why you don't see the background color. If you add content to the paragraph tag and you add a closure, it will work with the first bit of CSS you posted.
In other words, this is not a specificity issue.
<div class="header">
<div class="row">
<div class="col-sm-12">
<p id="navigator">Testing</p>
</div>
</div>
</div>
Bootply Example
After re-reading your question, I don't think you should be using a paragraph tag at all. It looks like you were trying to use it as a container for the pills, but you should be using either an unordered list (like in the Bootstrap docs example or a div). Here's some sample code:
HTML:
<div class="header">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-pills">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
</div>
</div>
</div>
CSS:
.nav-pills {
background-color: #CCCDD9;
}
Bootply

Related

Restore navigation bar with and height with bootstrap link

I'm incorporating bootstrap into my site, and there is a noticeable difference in the layout, particularly the navigation grid item div. This is the html code for the navigation bar:
<div id="container-i" class="container">
<div class="item logo">
<h1><a class="myName"
href="index.html">BROOKLYN</a></h1>
</div>
<div class="item links">
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Shop</li>
<li>Music</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</div>
<div class="item menu">
<div class="menu-btn">
<div class="btn-mid"></div>
</div>
</div>
</div>
And this is the css code for the container:
.container {
display: grid;
grid-template-columns: repeat(8, 1fr);
margin-left: 0;
margin-right: 0;
}
When I add the line <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> to the header the width and height change. Here are two screenshots showing the results before and after:
I'm aware that 'container' is a class in bootstrap, so I can kind of adjust the with by changing the class to 'container-fullwidth', but even so, I still can't change the height and re-center the content vertically. I've already tried altering the style with the height attribute.
I'm trying to keep everything as ordered and as consistent and as centered as I can because I want this to be as professional as possible, so is there a way for me to reverse the changes after adding the code?
boostrap has its own classes sometimes it matches with your classes too.
so for that you have to remove bootstrap class from your html and custom class and add your css to that class.
It turns out for the display, some of the bootstrap class styles overwrite the ones that I write. So to counter this, make sure that the custom css file is declared after the bootstrap css file like this:
And make sure that each element in the layout has a class to specify what the changes apply to. Your changes should then overwrite bootstrap designs.

No Style Applying Without Verflow:Hidden Property To Any Section On Webpage

I am creating a website based on Wordpress i am facing a very strange issue with each of the section, that when i apply any style specially the background color it does not apply directly, but when i add CSS property as follows:
.abc {
background-color:red;
overflow:hidden:
}
It starts work fine, and also when overflow property is not applied it not even highlighting the whole area of that section in Debug Mode.
Now the issue with the overflow property is i have some content cutting due to this as you can see in the following image:
And without overflow property the behavior of the section can be seen in the following image:
So now i want the background color to the section as well as to not cut the content as you can see in the first image. how i can fix this any quick solution will be appreciated.
consider the following structure
<header class="header-abc">
::before
<div class="inner-abc-left">
<img src="img.jpg">
</div>
<div class="inner-abc-right">
<ul class="navigation">
<li> < href="#"> abc </a> </li>
<li> < href="#"> abc </a> </li>
<li> < href="#"> abc </a> </li>
</ul>
</div>
</header>
Style is like:
.header-abc {
background: rgba(0,0,0,0.5);
position:relative;
width:100%;
display: block;
clear: both;
}
.header-abc:before {
display:inline;
}
So with this style it is not working fine but added an additional overflow property make it work. keep in mind i am using wordpress with some pagebuilder and purchased theme.
Thanks
It is not possible to solve this issue without having a link or a codepen so that we can at least see where this .abc div is located and what is it's relation to the rest of your code.
I have solved it by my own this issue, it was due to a ::before tag to the header tag like below:
<header class="header-abc">
::before
</header>
so the ::before tag was given display:inline style that why it was blocking the style to be applied, now removed the inline property and everything worked fine.

HTML/CSS transparent border indent, z-index

Coding a header to a website which will look like this:
Having problems creating the 5px indent under the "People" link, which is intended to indicate the active/current page. I know how to "fake" this effect by using background images/colors, etc -- but the content underneath is going to be different on each page (sometimes a solid color, sometimes the background pattern shown in the example, sometimes a photo). So that indent needs to be transparent.
I'm assuming I'll use z-index to overlay this header over whatever content will be underneath. Just can't figure out how to get a transparent indent in only one section while also having the grey menu bar continue to be 100% browser width. Probably something simple that I've overlooked. Thanks.
Edit: working JSfiddle here: http://jsfiddle.net/brandonpeat/mVSBj/14/
<div id="menu">
<div id="ombre">
<div id="ombre1"></div>
<div id="ombre2"></div>
<div id="ombre3"></div>
<div id="ombre4"></div>
<div id="ombre5"></div>
</div>
<div class="container">
<img src="http://asheragency.com/websites/asher2014/asher_logo.png" alt="Asher" id="asherLogo"/>
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
not very elegant but here's a fiddle: http://jsfiddle.net/vlrprbttst/cke6U/1/
there's no way you can produce a 5px "hole" in your background, my solution needs the li element to have a background (not the header or the ul) so that may not suit you
you basically have to play with height on :hover
li {list-style:none;float:left;height:50px;line-height:50px;width:16.66666666666667%;text-align:center;position:relative;background:grey}
li:hover {height:45px}

Width: 100% is not quite 100%

I have set an element's width to 100%, but the border is not going all the way to the edge of the page, It leaves maybe a two-pixel gap each side of the line.
Here is my HTML:
<body>
<div class="headerContainer">
</div>
</body>
Here is my CSS:
.headerContainer{
border-bottom:black 2px solid;
height:40px;
width:100%;
color:blue;
}
Also, another question. I came across this code while looking through a website:
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
<h1 class="brand">Legend!</h1>
<nav class="pull-right nav-collapse collapse">
<ul id="menu-main" class="nav">
<li><a title="portfolio" href="#products">Out Products</a></li>
<li><a title="services" href="#services">Services</a></li>
<li><a title="news" href="#news">News</a></li>
<li><a title="team" href="#team">Team</a></li>
<li><a title="contact" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<!-- /.container -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar -->
</div>
And I cannot think of any reason to have that many div tags, Wouldn't one--or possibly two--do fine?
And a third question: if I have a div tag within a div tag, How will I reference it in CSS?
The body element has a default margin. Add this:
body {
margin:0;
}
and your space goes away.
jsFiddle example
And there's no real answer to your second question. The structure can depend on numerous things.
Finally, to refer to a div in a div with CSS use div div {...} to target any descendant divs of a parent div, or div > div {...} to specifically target the child div of another div.
1) Include a CSS Reset. The few pixels of space on the edges are most likely due to some kind of padding or margin on the html, body or wrapper element(s). html, body { margin: 0; padding: 0; } would also probably fix it.
2) There is probably not a need for that many nested div tags in the code you pasted, but it's hard to say without knowing the functionality (there is probably a lot of javascript involved in how that navigation works). Even so, that code can probably be significantly improved / simplified.
3) You can reference a div tag inside of a div with the CSS selector div div { } which selects all div tags that live inside at least one other div tag. div > div { } by contrast would only select div tags that are nested immediately inside another div as a direct child.
try adding this line at the top of the css:
*{
padding: 0;
margin: 0;
outline: 0;
}
Add body {margin: 0;} to your CSS. Body has a margin by default, and you need to remove it. Adding padding: 0; or outline: 0; (as suggested in another answer) is not necessary.
Sometimes you will need extra containers in your HTML code to apply CSS to separate parts of your content. One example is when you want to have a sticky footer at the bottom of your page be separate from the rest of your page's CSS rules.
Not exactly sure what you mean by your question, but you can select children of elements a number of ways. Without giving an example, you can try parentelement > childelement for immediate children.
2) The large amounts of DIV's in your example probably comes from Twitter Bootstrap. I would claim that by the use of many divs and lots of separated CSS classes Bootstrap becomes a flexible CSS framework. Useful in different layouts and good for quick mockups.
You can definitely remove alot of of the divs and combine many of the css classes, and then you have made a custom-made html/css solution that suits your meny... and menues very similiar to yours.

Putting two colours in listview

I have created a list view in JQuery mobile with 2 grids. And I need to set background color to only 1 grid (block-a) but doing so, the padding of the list view is being displayed as white. I need to set color for the padding also. I need the first half to have one colour and second half to have different colour.
Thanks in advance.
<div data-role="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-theme="none">
<li data-role="list-didvider" >
<a href="#">
<div class="ui-grid-a" data-theme="none">
<div class="ui-block-a">Distance</div>
<div class="ui-block-b">Places</div>
</div>
</a>
</li>
</ul>
</div>
</div>
You need to customize css in jQuery.
Like for example
.ui-grid-a .ui-block-a { customization goes here }
.ui-grid-a .ui-block-b { customization goes here }
I have set up a sample jsFiddle, it will get you started.
http://jsfiddle.net/Akki619/z3BQ2/
The fiddle may not provide the exact solution you are looking for but you can always play along for desired results.
In your case: You need to customize data-theme a/c to your need.
It might be a tricky to get the desired result as you want.
Your padding is already colorized so far, but the margin isn't.
You need to remove the margin and set a padding:
ul li {
padding-left: 10px;
margin-left: 0px;
}
Then your background color will be set with the space before your items content.