Please look at this fiddle:
http://jsfiddle.net/Smartix/98sdrnkk/
The :before css property doesn't seem to work on a bootstrap row.
In the example above a centered red line should be displayed in the bacground of the div with class myline.
apply your :after pseudo class to this rule instead (after col-xs-12) :
<div class="row myline">
<div class="col-xs-12 myline">
<p>A red line should appear in the background of this row</p>
<p>The line should span from the top of the row...</p>
<p>... till here. Why is there no line?</p>
</div>
</div>
LIVE DEMO
or just add a height value and it will work properly :
.myline:before {
content: '';
top: 0;
bottom: 0;
position: absolute;
width: 4px;
background-color: red;
left: 50%;
margin-left: -1.5px;
height: 100px;
}
Live Demo
Related
I need to close the gap following a CSS transform: translateY(-50%) so that content flows on naturally.
I have tried other methods but have been unable to move the element up by 50% of its own height. Negative margin as a percentage is based on the height of the window so this doesn't seem like an option, nor can I set a negative margin on the following element as it needs to be based on the height of the header.
HTML:
<div class="header">
<div class="featured-image">
<!-- this is in place of the featured image -->
</div>
<div class="title-container">
<h1>Title<br />goes<br />here</h1>
</div>
</div>
<div class="article-body">
<p>There is too much space above class="article-body". I want the content to flow on naturally after class="title-container", however using translateY is purely visual so an alternate method of moving the yellow block up by 50% of its own height is necessary.</p>
</div>
CSS:
.header {
width: 100%.
position: relative;
}
.featured-image {
width: 100%;
height: 200px;
background-color: blue;
}
.title-container {
width: 50%;
margin: 0 auto;
transform: translateY(-50%);
background-color: yellow;
}
JS Fiddle:
https://jsfiddle.net/robertirish/tyh18orq/16/
It may be that this is only possible using Javascript but it would be great to get it done with pure CSS as JS and media queries are a pain to implement.
Thanks in advance.
Instead of using transform: translateY(-50%), use margin-top: -25vh.This will place the .title-container in the same place, yet keep the .article-body flush below it:
.header {
width: 100%.
position: relative;
}
.featured-image {
width: 100%;
height: 200px;
background-color: blue;
}
.title-container {
width: 50%;
margin: 0 auto;
/*transform: translateY(-50%);*/
margin-top: -25vh;
background-color: yellow;
}
<div class="header">
<div class="featured-image">
<!-- this is in place of the featured image -->
</div>
<div class="title-container">
<h1>Title<br />goes<br />here</h1>
</div>
</div>
<div class="article-body">
<p>There is too much space above class="article-body". I want the content to flow on naturally after class="title-container", however using translateY is purely visual so an alternate method of moving the yellow block up by 50% of its own height is necessary.</p>
</div>
So my understanding, which is demonstrated by the code below, is that :hover is true for a block element if the mouse is over the area defined for the element, or over any of its overflowed content or children. Note that the .outer div turns blue even if it is not over the text content, in particular.
I haven't yet been successful in isolating a small test case from an extremely complex page, however, which demonstrates that in some cases, the :hover effect only happens for the content, and the blank areas of the element do not cause :hover to be enabled.
This happens in both Firefox and Chrome. So my question is, what feature(s) causes blank regions of a div to be ignored for :hover effects? I haven't found reference in the css documents to such interactions, neither by starting at the description of the :hover feature, or any other references I can find to :hover.
And the other question would be, if there is some feature(s) that causes such behavior, would be conformant to the standard, or a bug in the browsers?
.outer:hover { background: blue; }
.outer {
font-size: 30px;
width: 10em;
height: 2.7em;
overflow: visible;
z-index: 4;
}
<div>
Just some uninvolved stuff
</div><div class=outer>
<p class=inner>item 1</p>
<p class=inner>longer item 2</p>
</div>
<div>
<p>
Just some more uninvolved stuff
</p>
</div>
#victoria I came to a solution, if there is no height give p float:left; clear:both; and hover on outer should make paragraph color blue that will remove white space hover.
Hope this will help !
.outer p{ float: left; clear:both;}
.outer:hover p{ background: blue; }
.outer {
font-size: 30px;
width: 10em;
height: 2.7em;
overflow: visible;
z-index: 4;
}
<div>
Just some uninvolved stuff
</div><div class=outer>
<p class=inner>item 1</p>
<p class=inner>longer item 2</p>
</div>
<div>
<p>
Just some more uninvolved stuff
</p>
</div>
If I understand correctly you want the same blue background area on hover but only while hovering on the "item 1" text. For this I would use a pseudo element to create the background color. One minor changes needed to the HTML, add a new unique class to the "hover trigger element:
<p class="inner trigger">item 1</p>
Then remove the rule for .outer:hover and add position: relative to the .outer div that will serve as the bounds of the blue background pseudo element we will add:
.outer {
// ...pre-existing CSS for .outer
position: relative;
}
Now you can have an absolutely positioned pseudo element with the blue background, only on hover of the "item 1" element:
.trigger:hover:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
background-color: blue;
z-index: 0;
}
.content:hover {
background: #00c;
color: #cff;
cursor: default;
padding:0.2em;
}
.outer {
font-size: 30px;
width: 10em;
height: 2.7em;
overflow: visible;
z-index: 4;
}
<div>
Just some uninvolved stuff
</div><div class=outer>
<p><span class="content">item 1</span></p>
<p class=inner>longer item 2</p>
</div>
<div>
<p>
Just some more uninvolved stuff
</p>
</div>
The thing to remember is that with respect to CSS and HTML pages, there is a concept of a box model:
The CSS box model describes the rectangular boxes that are generated
for elements in the document tree and laid out according to the visual
formatting model.
See more here
So, if you just wish the background to be blue over specific text, you can target that text with SPAN tags and then assign a class, such as combining the pseudo hover class with .content, the class of the pair of SPAN tags enveloping "item 1". Note, I took the liberty of adding some other things to the hover event, such as also changing the color of the text and adding a little padding.
If you mean to hover over the div containing the text content and then have only the text content background and possibly text colors change, you could use JavaScript to program these changes, as follows:
var divs = document.getElementsByTagName("div");
var spans = document.getElementsByTagName("span");
divs[1].onmouseover = function() {
spans[0].style.backgroundColor = '#00c';
spans[0].style.color = '#ccf';
};
divs[1].onmouseout = function() {
spans[0].style.backgroundColor = '#fff';
spans[0].style.color = '#000';
};
.outer:hover {
cursor:crosshair;
}
.outer {
font-size: 30px;
width: 10em;
height: 2.7em;
overflow: visible;
z-index: 4;
}
<div>
Just some uninvolved stuff
</div>
<div class="outer">
<p><span>item 1</span></p>
<p class=inner>longer item 2</p>
</div>
<div>
<p>
Just some more uninvolved stuff
</p>
</div>
I want to create a scrollable area for the text (class text), who have the size of the picture (class picture).
<div class="wrapper">
<div class="picture">
<img src="..." >
</div>
<div class="text">
<p>....</p>
</div>
</div>
The only way, I have found is set the size for the wrapper but if the picture have height more importe than the wrapper, she is crop.
So make it's possible to realize a scroll area for text with the size of picture?
I assumed they are columns. Not possible for rows with CSS.
Try this, if you have extra paragraphs wrap them in a div and change the selector accordingly.
.wrapper {
display: flex;
}
.picture,
.text {
flex: 1; /* example */
position: relative;
}
.text p {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
overflow: auto;
}
I am trying to position a <div> absolutely using bottom=50% in an AngularJS/Ionic page as follows:
HTML:
<ion-view title="BoardLine">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<div id="imagecontainer">
<img id="boardimage" ng-src="{{mainResultImagePath}}" />
<div id="photocredits" class="rotateimagecredits">
Image courtesy: {{computed.prophotocredits}}</div>
</div>
....
CSS:
#imagecontainer {
position:absolute;
top:3%;
left:0;
right:62%;
bottom:50%;
}
#boardimage {
position:absolute;
left:10%;
max-width:85%;
bottom:0;
height:100%;
}
But just before div id="imagecontainer", Ionic generates a div class="scroll",like below, which has a height of 20px. And the top and bottom css for my imagecontainer refers to this height, but the div class="scroll" has a position:static. Therefore my imagecontainer absolute positioning should refer to the first parent that has a non-static position
which should be the <ion-content>
<ion-content class="scroll-content ionic-scroll has-header">
<div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
<div id="imagecontainer">
<img id="boardimage" ng-src="./img/boards/SD360.jpg" src="./img/boards/SD360.jpg">
<div id="photocredits" class="rotateimagecredits ng-binding">Image courtesy: john carper</div>
</div>
I'm not really sure this answers a question, but a valuable information for people struggling with Ionic and absolute position would be that
position: absolute
Has to be used with elements outside of ion-content
So:
<ion-content>
</ion-content>
<div class="bottom">
</div>
.bottom {
position: absolute;
bottom: 0px;
width: 100%;
}
The footer component of ionic is fixed regarding the screen, I think you can try to implement an equivalent one. More info about the footer: http://ionicframework.com/docs/v1/components/#footer
The main css-properties of the element are:
.bar-footer {
bottom: 0;
height: 44px;
}
.bar {
display: flex;
user-select: none;
position: absolute;
right: 0;
left: 0;
z-index: 9;
width: 100%;
height: 44px;
}
Modify the above properties with your specific ones (eg. bottom: 50%;) and ensure display is set as absolute.
Considering your parent's positionning issues, you should try to put your piece of code outside <ion-content></ion-content>, inside <ion-view></ion-view>.
It's the only way I succesfully set a button positioned as absolute within ionic mobile framework.
EDIT: /!\ Be careful not to write anything out of <ion-view></ion-view>. My previous answer was creating trouble in the way ionic manages the different pages.
Updated question:
I have a bunch of DIV, they are part of a menusystem and are displayed using display:inline-box. Each div contains text. I want to have different background-color on the different DIVs and that the background fills up the whole height of the div and I also want the text to be vertically aligned along all the div. The fiddle below shows that the background color is only used around the text.
Old text:
I've spent hours on this. I found the vertical alignment quite easy (for example here: How to vertically align div inside another div without display:table-cell) but cannot figure out how i i can fill the whole div with the background color.
My example code is on fiddle: http://jsfiddle.net/joche/s7beksLt/
<div class="DivParent">
<div class="DivWhichNeedToBeVerticallyAligned bg1">
one line
</div>
<div class="DivWhichNeedToBeVerticallyAligned bg2">
<p>one line</p>
</div>
<div class="DivWhichNeedToBeVerticallyAligned bg3">
<p>one line</p>
<p>two line</p>
</div>
<div class="DivHelper"></div>
</div>
css:
.DivParent {
height: 100px;
border: 1px solid lime;
white-space: nowrap;
background-color:#deadad;
}
.DivWhichNeedToBeVerticallyAligned {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
.bg1 {
background-color:#ffaaff;
}
.bg2 {
background-color:#ffffff;
}
.bg3 {
background-color:#ffffa9;
height:100%
}
.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}
I looked at your JSfiddle, and based on your code and question it's a little misleading. Especially since the code at the fiddle is not the code you posted in your question.
So you are trying to fill each div "cell" with a different background color? If so, those "cells" are of the .DivParent class. The internal divs (which you have labeled .bg1, .bg2, .bg3) are simply composed of the text itself - these divs only extend to the boundaries of the text they include (plus any margins, padding, etc.) The .DivParent is actually the entire "cell". See this image to see what I mean: http://i.imgur.com/67y3iWV.png
So all you need to do is apply the classes .bg1, .bg2, etc. to the parent classes. Here is my fiddle with each "cell" a different background color: http://jsfiddle.net/Arkatect/8vmp0124/
Notice in the HTML that the separate bg classes are on the parents, not the divs that just have the text:
<div class="DivParent bg2">
<div class="DivWhichNeedToBeVerticallyAligned">
<p>Two</p>
<p>Lines</p>
</div><div class="DivHelper"></div>
</div>
I hope this is what you were looking for.
Take a look at this one i made for you without .table-cell :http://jsfiddle.net/csdtesting/sos5sxkj/
.DivParent {
height: 100px;
border: 1px solid lime;
white-space: nowrap;
background: gray;
text-align: center;
position: relative;
}
.DivWhichNeedToBeVerticallyAligned {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: red;
}
.DivHelper {
display: inline-block;
vertical-align: middle;
height: 100%;
}
<div class="DivParent">
<div class="DivWhichNeedToBeVerticallyAligned">one line</div>
<div class="DivHelper"></div>
</div>
<div class="DivParent">
<div class="DivWhichNeedToBeVerticallyAligned">
<p>Two</p>
<p>Lines</p>
</div>
<div class="DivHelper"></div>
</div>