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.
Related
I am trying to create a custom menu component. And I need the consumer of this component to be able to style it from the outside.
I thought the ::part selector would be perfect for this. So I used this in my Sass file:
custom-menu
&::part(navbar-sub-content)
position: absolute
display: none
//it seems not possible to combine part selectors?
&::part(navbar-subnav):hover &::part(navbar-sub-content)
display: block
color: red
(the colour is just for debugging purposes)
And the relevant generated HTML. Keep in mind that this is in the shadowDOM.
<ul part="navbar">
<div part="navbar-subnav navbar-item">
<div part="navbar-subnav-button ">sub-menu</div>
<div part="navbar-sub-content div li">
<a part="a navbar-sub-link li" href="example.com">
sub-1
</a>
<a part="a navbar-sub-link li" href="example.com">
sub-2
</a>
<a part="a navbar-sub-link li" href="example.com">
sub-3
</a>
</div>
</div>
</ul>
For some reason, this does not work as expected. I would expect that, when hovering navbar-subnav, that navbar-sub-content would become visible. But instead, nothing happens. I do wonder if I got my selectors wrong, or that this is a limitation of the ::part selector.
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
I try to created multicolumn menu here (updated link is HERE):
I made used of display: inline-block strategy to make (horizontal) rows. And seems it works.
But it stops work when I wrapped it into the span which comes with position:relative.
<section>
<button>123</button>
<button>123</button>
<span class="dropdown">
* <!-- this is a link that should be inline with buttons -->
<div class="menu">
<div class="row">
<ul>
<li>11111111111111111111111111</li>
<li>1111111111111</li>
<li>111</li>
</ul>
</div>
<div class="row">
<ul>
<li>2222222222</li>
<li>222222222222222222222</li>
</ul>
</div>
<div class="row">
<ul>
<li>33</li>
<li>33</li>
<li>33</li>
</ul>
</div>
</div>
</span>
</section>
The href link in the span represents a button or link where I would click to make menu appeared.
I have to have position relative in the span to make menu appears on right place, relatively to it.
(all buttons and link should be on the same horizontal line)
Question: how to make it working?
It works though if I change span to div and make fixed size for it like width:600px (and this width have be more or less of the menu width to make it work like expected, which is weird), but/so I want it to be span (with no specific/hard-coded width).
UPDATE:
I've updated my example to show how it works with span as block and buttons: http://jsfiddle.net/uz0do787/32/
Just put a little more detail that was not shown on previous demo, to show what I want.
I want all buttons and the href link be on the same line, but making span "display:block" breaks that order.
Simply add display:block to span
see DEMO
See why you need to add display:block
The HTML <span> element is a generic inline container for phrasing
content, which does not inherently represent anything. It can be used
to group elements for styling purposes (using the class or id
attributes), or because they share attribute values, such as lang. It
should be used only when no other semantic element is appropriate.
<span> is very much like a element, but <div> is a block-level
element whereas a <span> is an inline element.
Source:Mozilla Developer Network
Do you mean something like this?: Fiddle
.dropdown {
position:relative;
display: block;
padding: 10px;
}
a {
position:absolute;
top: -15px;
left: 100px;
}
Span - this is an inline element. You can't wrap block with inline element. To make it work with span, add "display: block;" property to the .dropdown
Like:
.dropdown {
position:relative;
display: block;
}
I guess If fixed it by switching to display:table then I can stay with span not trying to make it block and it does not jump then to the next line:
Before:
http://jsfiddle.net/uz0do787/32/
After
http://jsfiddle.net/uz0do787/34/
But in any case, I think there is a room for re-factoring - the menu should be independent to show itself by js by x,y depending on the span/link location so that the DOM not to be so dependable on each other and not to be so fragile.
And I just do not understand, why when I apply "display:table" (on that solution/answer I proposed) span stays on place with buttons, but with "display:inline-block" the span breaks the menu layout. What makes display:table works like expected comparing to inline-block solution.
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.
<div class="pictures">
<ul>
<li>
<img src="img1.jpg" />
</li>
<li>
<img src="img2.jpg" />
</li>
<li>
<img src="img3.jpg" />
</li>
</ul>
</div>
I'm building a jQuery IMG slider and the basic code breakdown is what you see above. I'm having a bunch of different issues, but one, in particular, is kind of baffling. There seems to be a partial pixel space (1.5px, I believe) between each photo... not sure if it's a margin, padding, a border or something else. I have to animate the photos 331.5px up or down in order for them sit properly inside the container div. My general reset.css doesn't work. I have border, margin, margin-width and padding all set to 0 by default.
This is weird. Any ideas why it's happening? Or how I can eliminate it?
Link to actual page: http://www.ficreates.com/_SiteDemos/PBL/projects.html
Couple of things going on here.
First thing is that body {line-height: 1;} is inherited by your ul. Get rid of that or override it such as ul {lineheight: 0;} and the black spacing is gone.
Doing this does not align your animation though so you are going to have to fix your script.
One thing I noticed is that you are animating the position of the img tag instead of the container element such as the ul. Curious why you are doing it this way. Usually one would just do the += or -= on the container element. You can set the ul to display: block; if needed.
Hope this helps. Let me know if you have further questions. Perhaps later I can get a full working example.