Working on a responsive website, I want to remove a certain element, however, I want the child element to still be displayed.
Setting the CSS rule for parent element to display:none; removes that element and all the children. Event if I set the child element to display:block; it still doesn't appear on the site.
Something like this:
HTML:
<div id="parent">
<div id="child">Some text.</div>
</div>
CSS:
#parent {
display:block;
width:500px;
height:200px;
background:blue;
}
#child {
display: inline-block;
padding:20px 5px;
background: red url(someimage.jpg);
}
#media only screen
and (max-device-width : 700px) {
#parent {
/* code that makes the browser disregard the height of this div and not display its background */
}
#child
/* the child is still displayed */
}
}
What would be the proper CSS solution?
It looks like you just want to knock out the background of the parent in certain layouts. To do that, just use
#knockout {
background: transparent;
border: none;
outline: none;
box-shadow: none;
padding: 0;
}
This will remove the background, the borders and any shadow effects on the parent item - as though it wasn't rendered at all.
You could try setting all children to display:none, and then override it with the display:block for the relevant child. Example:
#parent>* {display:none}
#parent>#child {display:block}
Related
I have a problem with bootstrap css.
In the fiddle just type something to the input then input jumps up some pixels... WHY?
<div class="test"><input type="text" value="ABC"></div>
.test { height:86px; overflow:hidden; border:solid #000 3px; }
.test input { height:74px; margin:8px 0 0 6px; font-size:74px; }
So I want to use margin-top or somthing else to positioning lower the input inside the outter div
screenshot
<div class="test"><input type="text" value="ABC"></div>
.test { height:86px; overflow:hidden; border:solid #000 3px; }
.test input { height:74px; margin-top:20px; font-size:74px; }
New fiddle
It's not clear but it render better with this :
Css :
.test { height:86px; overflow:hidden; border:solid #000 3px; }
.test input { height:86px; margin:0; font-size:74px; padding-bottom: 10px;}
Fiddle : https://jsfiddle.net/ja8mymtr/1/
That is a bit weird but you can fix it by using absolute position like this
.test {
height:86px;
overflow:hidden;
border:solid #000 3px;
position: relative
}
.test input {
height:74px;
margin:8px 0 0 6px;
font-size:74px;
position: absolute;
bottom:0
}
<div class="test">
<input type="text" value="ABC">
</div>
... input jumps up some pixels... WHY?
After a lot of messing around I have finally zeroed in on the issue, phew.
You have set the overflow property of the container div to hidden. But, the inner content of that div, has more height than the parent (counting the margin in, and the font size of the input).
Due to which when a user types something in the input element, the browser tries to center the element by scrolling to it, its just that we aren't able to see it.
And hence we see the "jump".
DEMO with the scroll bar shown, for further demonstration of what is happening.
So I want to use margin-top to positioning lower the
input inside the outer div, while avoiding the jump
You can reduce the font-size and line-height to something which can make the input element fit snugly in the container while retaining the margins. Something like this.
I've got two images that I want to sit beside each other inside the parent div but I can't get them to do it.
.column {width:100%;max-width:1500px; margin:0 auto; }
.span_1_of_2 {width:50%; display:inline-block; }
.span_2_of_2 {width:50%;display:inline-block; }
https://jsfiddle.net/87xzwj5t/
It's white-space that's doing you in.
Add this CSS:
.column { font-size: 0; }
.column > div { font-size: 1rem; /* Or whatever you want it to be */ }
and it'll fix your problem.
The font-size: 0 makes sure the white-space isn't rendered, and then the font-size: 1rem resets the font in the child divs to whatever it was set at document root (this is by default 16px in most browsers).
Inline-block elements display just like elements in text flow, which is why the white-space is respected when they're rendered.
JSFiddle example
Remove the whitespace in html, i will work
.column {width:100%;max-width:1500px; margin:0 auto; }
.span_1_of_2 {width:50%; display:inline-block; }
.span_2_of_2 {width:50%;display:inline-block; }
<div class="column">
<div class="span_1_of_2">Div 1</div><div class="span_2_of_2">Div 2</div>
</div>
The problem is that display:inline-block adds about 4pxof margin to the div with it because of the whitespace. If you still want to use it, you could do something like this:
.span_2_of_2 {width:50%; display:inline-block; margin-left:-4px; }
EDIT
What Josh said may be true. Why don't you just float them? Like this:
.span_1_of_2 {width:50%;float:left; }
.span_2_of_2 {width:50%;float:left; }
Then of course clear the float.
Just add float:left; to the first span
CSS
.span_1_of_2 {
width:50%;
display:inline-block;
float:left;
}
Here's the deal: a series of inline-block elements formatted like you
normally format HTML will have spaces in between them. That´s why with two span and the gap between them you will have more than 100%.
DEMO HERE
Have a parent div and 3 child div's. Know the height of child2 only. Want the child1 and child3 to have the same height as height getting reduced. Also border of the parent is collapsing. Want the border of parent to be visible around the child.
Pasted the code http://jsfiddle.net/586Cr/
Provided the code below.
<html>
<head>
<style>
#parentt{
background-color:#000000;
border:4px solid #0000FF;
}
#child1{
background-color:#000000;
border:4px solid #FF0000;
float:left;
width:25%;
}
#child2{
background-color:#000000;
border:4px solid #FF0000;
float:left;
width:30%;
height:100px;
}
#child3{
background-color:#000000;
border:4px solid #FF0000;
width:25%;
float:left;
}
.trans60 {
zoom: 1;
filter: alpha(opacity=60);
opacity: 0.6;
}
.trans100 {
zoom: 1;
filter: alpha(opacity=100);
opacity: 1.0;
}
</style>
</head>
<body>
<div id="parentt">
<div id="child1" class="trans60"> child1</div>
<div id="child2" class="trans100">child2</div>
<div id="child3" class="trans60">child3</div>
</div>
</body>
</html>
Give overflow:hidden to your parent here the fiddle because child's are floating.
Briefly
http://www.w3.org/TR/CSS2/visuren.html#block-formatting
Setting overflow: hidden on an element causes a new float context to be created, so elements that are floated inside an element that has overflow: hidden applied are cleared.
Ok let's start off!
Anytime you float, it tends to break the parent. I know, children leave the parents broke.. it's just a habit we have in nature.
To fix this, I always make a class called 'clear' and just attach a div when I want to do clearing! I find this to be more useful than doing an overflow: hidden, as the clear class can be reused nearly any and everywhere.
//css
.clear { clear: both; }
// calling it up after the 3 children
<div class="clear"></div>
Ok, so that fixes that problem.
Now to do the div height, that's not overly complicated with some jQuery.
Now I could go on trying to explain this, but it would take a minute. Follow this tutorial:
Demo:
http://www.cssnewbie.com/example/equal-heights/plugin.html
Article:
http://www.cssnewbie.com/equalheights-jquery-plugin/#.UoX-neKrTIU
However, instead of on click, do it at document ready.
I have the following HTML :
<div class="top">
<div class="header title">Some Big Header Goes Here</div>
<div class="sub-header title">The fancyness enters here.</div>
A random link
</div>
Styled with the following classes :
.header {
padding:2%;
}
.sub-header {
font-size:120%;
font-style:italic;
}
.title {
font-size:158%;
line-height:80%;
}
.top {
display:block;
text-align:center;
border:1px solid lime;
padding:1%;
}
.top a {
/*color:red;*/ /* This works but I don't want this */
padding:100000px; /* This does not work, nor do smaller values */
margin:-999999px; /* This does nothing. */
}
How can I style the anchor link to position it with just a little padding and margin, so as to distance it just a little from the two headers above?
Add a display: block; to your .top a style and then adjust the margins and paddings accordingly.
top a {
display: block;
/*color:red;*/ /* This works but I don't want this */
padding:10px;
margin:20px;
}
Working fiddle: http://jsfiddle.net/jnz65/
An anchor tag does not inherit certain attributes from the parent when an href attribute is specified with it. That is why you need to add display:block to the style of the anchor tag specifically.
Hey i'm trying to align things next to each other and under each other
Here is the css I'm using.
/* title styles */
#wpp-post-title {
float:right;
width:100px
}
/* thumbnail styles */
#wpp-thumbnail {
float:left;
width:80px;
}
It shows up like this
but i want it to show like this
Use classes instead of ids and look at clear property http://www.w3schools.com/cssref/pr_class_clear.asp
Something like this could work:
jsFiddle demo: http://jsfiddle.net/vPvbn/
CSS:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: block;
height: 80px;
margin: 10px 0;
padding: 20px 0 0 85px;
}
HTML:
<ul>
<li style="background: url(http://i.imgur.com/9M7yb.jpg) no-repeat 0 0; padding-right: 10px;">LEAKED: The Winner of RuPaul's Drag Race Season 4 Is...</li>
<li style="background: url(http://i.imgur.com/eJxiy.jpg) no-repeat 0 0; padding-right: 10px;">WATCH: Rihanna's 'Battlefield' Movie Trailer.</li>
</ul>
/* title styles */
#wpp-post-title {
width:100px
display: inline-block;
.display: inline;
.zoom:1;
}
/* thumbnail styles */
#wpp-thumbnail {
display: inline-block;
.display: inline;
.zoom:1;
width:80px;
}
Without seeing your HTML, I can only guess, but my best guess would be to add the following style to your CSS:
/* You will probably need to change "li" to something more specific, lest it
break your existing list styles. */
li {
overflow:hidden;
}
This will force the list item to wrap itself around your floated bits. Elements that are floated do not change the height of the parent container, so because everything inside the <li> is floated, your <li> element has a height of 0px, and you get the weird behaviour that you're seeing. overflow: hidden fixes this by forcing the <li> to acknowledge the height of #wpp-thumbnail and #wpp-post-title.
Giving #wpp-post-title a height that is equal to your thumbnail should solve the problem, at the moment the browser is automatically determining the height of the div based on the text inside it.
Also, make sure both divs are given display: inline-block property