I am basically trying to align text within a div element to format an interactive SI unit chart. I want to create two columns of content on the left and right side of the divide. The left has prefixes (centi-, milli-, etc.) and the right has their corresponding values (10^-2, 10^-3 etc.). When hovering cursor over an element in the chart, I want that entire horizontal section of the chart to change in background color (so the horizontal section with both centi- and 10^-2 for example). I tried subdividing the div element but was unsuccessful because the columns will not align properly and the prefix and its corresponding value are on different lines. An example of the code is below. Help
<body>
<style>
.hover:hover {
background-color:yellow;
}
</style>
<div style="with:300px;border:solid;position:absolute;margin-left:100px;margin-top:200px;">
<div class="hover">
<div style="width:100px;text-align:left">
centi-
</div>
<div style="width:100px;text-align:right">
10^-2
</div>
</div>
<div class="hover">
<div style="width:100px;text-align:left">
milli-
</div>
<div style="width:100px;text-align:right">
10^-3
</div>
</div>
<div class="hover">
<div style="width:100px;text-align:left">
micro-
</div>
<div style="width:100px;text-align:right">
10^-6
</div>
</div>
</div>
</body>
.hover div {
display: inline-block
}
.hover:hover {
background-color: yellow;
}
<div style="with:300px;border:1px solid;">
<div class="hover">
<div style="width:100px;text-align:left">
centi-
</div>
<div style="width:100px;text-align:right">
10^-2
</div>
</div>
<div class="hover">
<div style="width:100px;text-align:left">
milli-
</div>
<div style="width:100px;text-align:right">
10^-3
</div>
</div>
<div class="hover">
<div style="width:100px;text-align:left">
micro-
</div>
<div style="width:100px;text-align:right">
10^-6
</div>
</div>
</div>
Div has display:block by default. Make those divs display:inline-block.
Related
This one i want to display. In here i want to display all these in same way same height & width.But in here bottom part height will be larger if the title has many words.
This is my html code block
<div [style.width.%]="105" [style.height.%]="25">
<div matRipple [matRippleColor]="primary" class="m-tile">
<div class="a-tile-graph a-tile-graph--hotel">
<div class="titles">
<div class="head">{{name}}</div>
<div class="sub">{{level}}</div>
</div>
<div id="{{chartId}}" class="graph"></div>
</div>
<div class="o-tile-content" [ngStyle]="{'font-size.px':14}">
<div class="a-tile-btn"><i class="fa fa-signal"></i></div>
<div class="a-tile-title">{{name}}</div>
<div class="a-tile-value"><span class="currency">$</span>{{getFormattedValues(ttv)}}</div>
<div class="a-tile-count">{{getFormattedValues(ttc)}}</div>
</div>
</div>
</div>
how could i fix this?
I am having trouble selecting the first and last div for the following html markup:
<div class="layout__side">
<div class="portlet-dropzone">
<div id="id1">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id2">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id1 div-->
<div id="id3">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id4">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id3 div-->
<div id="id5">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id6">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id5 div-->
<div id="id7">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id8">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id7 div-->
<div id="id9">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id10">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id9 div-->
<div id="id11">
<span></span>
<div class="portlet-body">
<div class="portlet-borderless-container">
<div class="portlet-body">
<article id="id12">
<div class="inner">
<header>yoyoyoyoyoyoy</header>
</div>
</article>
</div>
</div>
</div>
</div><!--end id11 div-->
</div><!--end portlet-dropzone-->
</div><!--end layout__side-->
I am trying to select and style only the id1 div header without explicitly selecting it using the div id. I tried using the div:first-child selector, but all of the divs are being selected! This is what I tried, along with using nth-child(1)
.layout__side .portlet-dropzone div:first-child header{
padding: 10px;
border: 1px solid red;
}
The problem is that you're selecting all div descendant elements that are a first child.
In other words, the descendant div elements .portlet-borderless-container, .portlet-body, and .inner are selected (since they are descendants of .portlet-dropzone and they are the first child relative to their parent element). Since all the div elements are selected, each header element is thereby selected and styled.
You need to select the direct child div element instead (by using the direct child combinator, >). In doing so, only the div element that is a direct child of .portlet-dropzone will be selected if it is the first child.
Example Here
.layout__side .portlet-dropzone > div:first-child header {
padding: 10px;
border: 1px solid red;
}
As your title suggests, if you also want to select the last one:
Updated Example
.layout__side .portlet-dropzone > div:first-child header,
.layout__side .portlet-dropzone > div:last-child header {
padding: 10px;
border: 1px solid red;
}
It's also worth pointing out that there are :first-of-type and :last-of-type pseudo classes which will select the first/last element by type (unlike :first-child/:last-child which will select based on the index only rather than the type).
Updated Example
.layout__side .portlet-dropzone > div:first-of-type header,
.layout__side .portlet-dropzone > div:last-of-type header {
padding: 10px;
border: 1px solid red;
}
This may be useful if there are elements of varying types and you only want to target the div elements. For instance, if there was a random h1 element before the first div, like in the example above, the first div would still be selected.
I have a page that essentially behaving as I want it, except that I would like to place an image every so often along a horizontal scroll track. This JS Fiddle shows the code: http://jsfiddle.net/bretwhiteley/39cLc0vm/
So what I am trying to do is add an image that is the height of the "Scrolling" DIV 1000px from the left. I tried to use the following code, with no luck:
<div class="Timeline_Break" style="margin-left:1000px;">
<div style="margin-left:1000px"><img src="http://s.w-x.co/TWC_logo_100x100.gif" style="width:20px;height:130px"></div>
</div>
The Styling is:
.Timeline_Break {
position: fixed;
z-index: 99;
}
test this code
jsfiddle
<div id="Header">
Google Chart ...
</div>
<div id="Map">Map</div>
<div id="Footer">
<div id="FooterLeft">
<div class="Timeline_Title">Industry</div>
<div class="Timeline_Title">Infrastructure</div>
<div class="Timeline_Title">Individuals</div>
</div>
<div id="FooterRight">
<div id="Scrolling">
<div class="Timeline_Banner">
<div style="margin-left:400px;"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:20px">
</div>
</div>
<div class="Timeline_Banner">
<div style="margin-left:700px"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:20px">
</div>
</div>
<div class="Timeline_Banner">
<div style="margin-left:200px"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:20px">
</div>
</div>
<div style="color:red;position:relative">
<div style="color:blue;position:absolute;top:0px;left:500px"><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Bundesarchiv_Bild_183-J07989,_Berlin,_Sportpalast,_Waffen-SS-Angeh%C3%B6rige.jpg" style="width:20px;height:130px">
</div>
</div>
</div>
</div>
</div>
HTML
<div id="outer_div" style="overflow:auto; width:1238px; height:310px;">
<div id="inner_div" style="height:300px;">
<div id="child1" style="width:400px;">
</div>
<div id="child2" style="width:400px;">
</div>
<div id="child3" style="width:300px;">
</div>
<div id="child4" style="width:500px;">
</div>
<div id="child5" style="width:300px;">
</div>
<div id="child6" style="width:600px;">
</div>
</div>
</div>
What I want is the inner_div's width should go beyond the outer_div and child divs will remain on same line. I am adding child divs into inner_div by using jquery prepend and append method. Currently the maximum width inner_div is taking the width of outer_div and after that the line breaks.
I tried with display:inline-block, overflow:auto; and width:auto on inner_div but its not working.
Currently I am getting it to work using jquery by adding width dynamically to inner_div as I am dynamically adding child divs into inner_div. I would like to achieve it using css if possible.
Use table and table-cell properties to achieve this.
#inner_div{display:table;}
#inner_div div{display:table-cell;}
DEMO
you should use min-width on outer_div and float(or display:inline-block) on children of inner_div .
or use position absoulote on inner_div:
<div id="outer_div" style="min-width:1238px; height:310px">
<div id="inner_div" style="height:300px;">
<div id="child1" style="width:400px;display:inline-block">
</div>
<div id="child2" style="width:400px;display:inline-block">
</div>
<div id="child3" style="width:300px;display:inline-block">
</div>
<div id="child4" style="width:500px;display:inline-block">
</div>
<div id="child5" style="width:300px;display:inline-block">
</div>
<div id="child6" style="width:600px;display:inline-block">
</div>
</div>
</div>
or if you want fixed width of outer_div you can use position:
<div id="outer_div" style="width:1238px; height:310px;position:relative;white-space: nowrap;">
<div id="inner_div" style="height:300px;position:absolute; top:0 ">
<div id="child1" style="width:400px;display:inline-block">
</div>
<div id="child2" style="width:400px;display:inline-block">
</div>
<div id="child3" style="width:300px;display:inline-block">
</div>
<div id="child4" style="width:500px;display:inline-block">
</div>
<div id="child5" style="width:300px;display:inline-block">
</div>
<div id="child6" style="width:600px;display:inline-block">
</div>
</div>
</div>
by display table , inner_div can't get width larger than 1238!
also, I think , you can't add new element by css!
I have the following:
<!-- BLUE BOX --!>
<div style="width:100%;position:relative;min-height:100%">
<div style="position:absolute;left:1px;top:15px;">
IMAGE GOES HERE
</div>
<div style="position:absolute;left:20px;top:0;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">
messages go here
</div>
</div>
<!-- PINK BOX --!>
<div style="width:100%;position:relative;min-height:100%">
<div style="position:absolute;right:1px;top:15px;">
IMAGE HERE
</div>
<div style="position:absolute;right:20px;top:0;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">
messages go here
</div>
</div>
here is the image of the HTML output:
Please help me getting those divs in vertical order, I don't want them to float over each other, I want the message div to get the automatic height according to content too.
You should use floats for this. float:left , float:right and a clear:both inbetween :
<div style="width:100%;position:relative;min-height:100%;float:left">
<div style="float:left">img</div>
<div style="float:left;background-color:#2b5797; color:#fff;width:80%;min-height:40px;border-radius:5px;padding:10px;">First messages go here</div>
</div>
<div style="clear:both;width:100%;position:relative;min-height:100%">
<div style="float:right">img</div>
<div style="float:right;background-color:#b91d47; color:#fff;width:80%;border-radius:5px;padding:10px;min-height:40px">messages go here</div>
</div>
You can see it in action here : jsfiddle
Remove absolute position form your message DIV. Write like this:
<div style="position:relative;">
<div style="position:absolute;left:1px;top:15px;">
IMAGE GOES HERE
</div>
<div style="margin-left:20px;margin-right:20%;background-color:#2b5797; color:#fff;min-height:40px;border-radius:5px;padding:10px;">
messages go here
</div>
</div>
<div style="position:relative;">
<div style="position:absolute;right:1px;top:15px;">
IMAGE HERE
</div>
<div style="margin-right:20px;margin-left:20%;background-color:#b91d47; color:#fff;border-radius:5px;padding:10px;min-height:40px">
messages go here
</div>
</div>
Check this http://jsfiddle.net/y44NC/2/