I have a responsive page with two sections. All elements in right section should be responsive so I used :
#rightSection * {max-width:100%;height:auto}
however any further height styles are being ignored as you see in the code snippet.
I don't want to use !important because I have many inline styles with html codes so I prefer not forcing the styles through CSS. Is there any other way to set heights after height:auto?
#rightSection * {max-width:100%;height:auto}
.mydiv {
width:534px;
height:37px;
box-sizing:border-box;
}
<div id="rightSection">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is invisible because the height is igonred!
According to your code whatever is happening is fine CSS means Cascading Style sheet that means the last rule applies and that to whichever is more specific. So in your case the first rule has higher specifity than the second rule so height:auto is being applied.
Refer link for more details on Specificity.
So in you code you can make the second role morre specific by different ways which you will come to know from the above link. Below is one such example.
#rightSection * {max-width:100%;height:auto}
#rightSection div {
width:534px;
height:37px;
box-sizing:border-box;
}
<div id="rightSection">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is invisible because the height is igonred!
Edit:
As pointed out by #connexo i would suggest not use Id selectors refer this for more details on why.
You can use css classes instead as classes help to make your code more general for example
.outerDiv * {max-width:100%;height:auto}
.outerDiv .mydiv{
width:534px;
height:37px;
box-sizing:border-box;
}
<div class="outerDiv">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is visible now as the rule is more specific.
Hope it helps :)
#rightSection * {max-width:100%;height:auto}
#rightSection .mydiv {
width:534px;
height:37px;
box-sizing:border-box;
}
<div id="rightSection">
<div class="mydiv" style="background:#ff0000"></div>
</div>
That Red div is invisible because the height is igonred!
Related
I can't seem to make a CSS listen to a :hover.
I have the following CSS:
<style>
.hidescroll
{
}
.hidescroll :hover
{
overflow-x: auto;
}
</style>
And html:
<div class="hidescroll" style="width:100%; height:100px; background-color:green; overflow-y:hidden; overflow-x:hidden;">
<div style="width:300%; height:100px; background-color:red; ">abc</div>
</div>
I would expect the scrollbar to appear when I hover over the div. It doesn't. Why? (I tried to add div before :hover but that didn't help either.)
Inline styles have a higher specificity. You either have to say !important on the hover declaration or move your styles away from inline. I'd recommend the latter.
style="..." on the <div class="hidescroll" takes precedence over the separate css rule in the <style> block.
Since you already have a css rule for hidescroll, put those styles in there instead of putting them inline.
<style>
.hidescroll
{
width:100%;
height:100px;
background-color:green;
overflow-y:hidden;
overflow-x:hidden;
}
.hidescroll:hover
{
overflow-x: auto;
}
</style>
<div class="hidescroll">
<div style="width:300%; height:100px; background-color:red;">abc</div>
</div>
It would be better to also put the styles for the inner div into a style rule.
Note — !important was meant to be used the user agents; used by the end-user to be able to override site styles, for example I use it to in my browser (with the Stylebot plugin) to fix font-size and contrast problems to make sites readable)
I have this HTML:
<div class="row">
<div id="sidebar" class="column large-2 medium-3">
<div class="row">
test
</div>
</div>
<div id="rightside" class="column large-10 medium-9">
<div class="row">test2</div>
</div>
</div>
And this CSS:
#rightside:first-child{
border-bottom:solid 1px #main_color;
text-align:center;
}
#sidebar:first-child{
border-bottom:solid 1px #main_color;
text-align:center;
}
I'm using Zurb Foundation 5. The sidebar first-child works, but the one for the #rightside elements does not. Any idea why?
I've inspected the element #rightside and I can't see the CSS selector that I've applied in the inspector in Chrome. It seems that it doesn't recognize that selector for some reason.
I have nothing else in the CSS code, just this.
#rightside div:first-child
{
/* styles */
}
#sidebar div:first-child
{
/* styles */
}
This way you apply your styles to the first DIV inside of #rightside and #sidebar.
Because of comments: this will only work if your first-child is actually a div, if you want to style the first-child regardless of it's type you can use:
#sidebar :first-child
{
/* styles */
}
For #rightside:first-child to work, the div with ID rightside would need to be the first child of the parent, as the div with ID sidebar is.
Given that you're using IDs, the div with ID rightside should be the only one in your HTML so the selector you'd use would be simply #rightside.
You need this https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type
This targets the first type of a particular element, in your case it is a div
#rightside div:first-of-type {
background-color: red;
}
http://jsfiddle.net/w0wprkb0/
I have two sections(a header section and main body section) and for whatever reason there is this big gap. I have tried many things such as setting padding to 0, margin to 0, etc but nothing seems to get the job done. Please help!
http://jsfiddle.net/Pfc2Z/2/
Here's the relevant HTML
<section class="header">
<section class="logo">
<img src="logo.png" height="100px" width="200px" alt="Img Not Available">
</section>
<section class="link">
<nav>
<ul>
<li>
<span>Home</span>
</li>
</ul>
</nav>
</section>
</section>
<section class="main">
<p>Hello World</p>
</section>
Here is the CSS
html, body {
margin:0;
padding:0;
background-color:#46a7bb;
}
.header {
background-color:#313145;
}
.logo {
padding-left:20%;
}
.logo, .link {
display:inline-block;
}
nav ul {
list-style:none;
padding:0;
margin:0;
}
.main {
background-color:white;
width:60%;
margin:0 auto;
}
That is because your main section contains a paragraph tag. Paragraph tags have their own default styling (read margins and paddings). If you remove that, you'll be just fine. Just add the following to your CSS classes:
p {
margin:0;
padding: 0;
}
See this here: http://jsfiddle.net/y9deH/1/
UPDATE:
Yes its possible. You can do that by making use of class selectors or id selectors. Class selectors will let you use this kind of styling again whenever you want to use it (re-usability) while not altering the default paragraph styling.
ID selectors on the other hand, will apply only an only to this paragraph.
See the class selector example here: http://jsfiddle.net/y9deH/2/
See the id selector example here: http://jsfiddle.net/y9deH/3/
Hope this helps!!!
There's nothing wrong with the layout and they doesn't have any margin or padding problem. The problem is with the paragraph <p>Hello World</p>. It has a default margin. You can fix this problem by removing its default margin to 0 or sending it down with padding but its not a good idea to override the default paragraph style use padding to the parent instead. Here's the link, i used (20px padding to the main section). Thank you
http://jsfiddle.net/fyfWq/
Just in case someone comes here looking for an annoying gap they cannot explain, and they've gone through all the usual checks on margin, padding, and borders:
If you have made your elements inline-block, then the browser will render white space between your elements at whatever font-size is defined there. I chose to solve this by adding a negative margin, but you can also solve it by removing white-space in your html (either by commenting it out, or... wait for it... using your delete / backspace button).
I came here looking for this answer to this problem, so hope it helps someone else out there.
Update: Just re-looking at the question above, I see an inline-block there, so perhaps this was actually the issue!
I cannot seem to figure out how to get the space between each element to disappear. I mainly want to remove the white space on top. I have tried using margin-top:0 and it didn't work. Any advice would be greatly appreciated.
This is my html
<body>
<div style="background-color:green;">
<h1>top</h1>
</div>
<div style="background-color:blue;">
<h1>body</h1>
</div>
<div style="background-color:red;">
<h1>footer</h1>
</div>
</body>
This is my css
body, div, header {
padding:0;
margin:0;
margin-top:0px;
}
The space is caused by the User Agent Stylesheet (the default styles applied by your browser).
You need to target the H1 also.
html, body, div, h1 {
margin:0;
}
Alternately, rather than individually targetting each element, you can use the universal CSS selector * to target everything at the start:
* {
margin:0;
padding:0;
}
To avoid trouble, you should start your CSS with a CSS reset. This sets all padding, margins etc on all elements to ensure browsers interpret your styles from the same starting point rather than relying on each browser's individual user agent stylesheet.
If you want to go modern, you can use Normalise.css
Include h1 on your CSS:
Fiddle
body, div, header, h1 {
padding:0;
margin:0;
margin-top:0px;
}
I have a div and in that div I want to create another div with a different class and have the inner div completely separated from the outer div CSS settings.
Like this:
<div class="outer">
<div><h1> h1 </h1><div>
<div class="inner">
<h2> h2 </h2>
</div>
<h2> h2 </h2>
</div>
.outer h1{ color:blue; }
.outer h2{ color:red; }
.inner { height: 111px; }
What I want is to unset the red color from the h2 in the "inner" div
It might seem stupid not to just overweight the color to black here, but what if I have a lot more arguments in the CSS or even if it's dynamic.
Edit: I guess it isn't clear, but what I need is actually kind of the opposite of the answers I got so far. I have a main-container div and it has alot of settings in the CSS. Now I want to insert a div into the main-container without it having any of the main-container CSS settings.
.outer > h2 { color:red; }
this way only the direct child of the outer div get this color value, should fix the job.
.outer .inner * { color: #000; }
sets all elements within the inner container as having the color black.
Demo here
I think what you need is
.inner h2 {color: inherit}