▸ To achieve the proper layout for the direction letters and bidirectional arrows, use the CSS display property with table values. And for the table rows and cells, use CSS child selector rules, not class selector rules.
I wrote Html with div/row class but have to use child selector.How to change and no rewrite everything.Honestly even don't know how.This table has no border and in row date letters and images with arrow.I am just started to study html/css/js.
here is my html
thank you
<div class="Heading">
<div class="Cell">
<p class="diagonal"><img src="dablearow.png";></p>
</div>
<div class="Cell">
<h2>E</h2>
</div>
<div class="Cell">
<p></p>
</div>
</div>
<div class="Row">
<div class="Cell">
<h2>S</h2>
</div>
<div class="Cell">
<p><img src="dablearow.png" ></p>
</div>
<div class="Cell">
<h2>N</h2>
</div>
</div>
<div class="Row">
<div class="Cell">
<p></p>
</div>
<div class="Cell">
<h2>W</h2>
</div>
<div class="Cell">
<p class="diagonal"><img src="dablearow.png"></p>
</div>
</div>
I think you want this
.table{
display: table;
}
.table > div{
display: table-row;
}
.table > div > div{
display: table-cell;
width: 100px;
}
<div class="table">
<div>
<div>
<p class="diagonal"><img src="dablearow.png";></p>
</div>
<div>
<h2>E</h2>
</div>
<div>
<p></p>
</div>
</div>
<div>
<div>
<h2>S</h2>
</div>
<div>
<p><img src="dablearow.png" ></p>
</div>
<div>
<h2>N</h2>
</div>
</div>
<div>
<div>
<p></p>
</div>
<div>
<h2>W</h2>
</div>
<div>
<p class="diagonal"><img src="dablearow.png"></p>
</div>
</div>
</div>
Just use a table using the "table" tag.It would be much better.You won't need to make that div.Just a suggestion.Also use "td" for cells in the angled brackets with "th" for headers in table.All in quotation marks are supposed to be in angled brackets:<>
Related
Suppose I have a block of code that looks like this.
<div class="lv1">
<div class="lv2">
<div class="img">
</div>
<div id="text-on-image"> // <-- I want to grab this div element.
</div>
</div>
<div class="lv2">
</div>
</div>
Now I have $(this).eq(0) which refers to the root div element.
<div class="lv1"> //<-- $(this).eq(0) is here.
<div class="lv2">
<div class="img">
</div>
<div id="text-on-image">
</div>
</div>
<div class="lv2">
</div>
</div>
$(this).eq(0).children().eq(0) now refers to first div of lv2 class div.
<div class="lv1">
<div class="lv2"> // <-- $(this).eq(0).children().eq(0) is here
<div class="img">
</div>
<div id="text-on-image">
</div>
</div>
<div class="lv2">
</div>
</div>
$(this).eq(0).children().eq(0).children().eq(1) now refers to the correct div I want.
<div class="lv1">
<div class="lv2">
<div class="img">
</div>
<div id="text-on-image"> // <-- $(this).eq(0).children().eq(0).children().eq(1) is here
</div>
</div>
<div class="lv2">
</div>
</div>
Notice how the selecting child node became very messy for my code.
"$(this).eq(0).children().eq(0).children().eq(1)"
Is there a better way to go about doing the same work?
Use:
$("#parent").find(".children") for all children (deep traverse)
or:
$("#parent").children(".children") for immediate children
Since you use an ID, and an ID must be unique - simply use $("#text-on-image")
Otherwise, use the .find() Method.
If you used id, you can select it right away.
$("#text-on-image")
id must be unique, so if you use class, you can use ".find()"
$(".lv1").find(".text-on-image")
If no id or class is specified, selectors can be used.
$(".lv1 > .lv2 > div:nth-child(2)")
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.
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 need to set width for div depends upon its content..
Below is my HTML flow.
Flow 1:
<div id="header-cart" class="block block-cart skip-content skip-active">
<div class="minicart-wrapper">
<p class="block-subtitle"></p>
<p class="empty">You have no items in your shopping cart.</p>
</div>
</div>
Flow 2:
<div id="header-cart" class="block block-cart skip-content skip-active">
<div class="minicart-wrapper">
<p class="block-subtitle"></p>
<div>
<div id="minicart-widgets"> </div>
<div class="block-content"></div>
<div class="minicart-actions"></div>
</div>
</div>
</div>
I have two HTML flows explained above..
What i need is to set
width as 220px and 300px
for
<div id="header-cart">
.
When there is an occurance of <p class="empty"> in <div id="header-cart">
<div id="header-cart"> should be in
width 220px
.
and if not it should be in 300px.
I dont know how to set flow for this cascade.
Can any one help me?? Thanks in advance..
You can use JavaScript for this.
if(document.querySelectorAll("div#header-cart p.empty").length==0){
document.getElementById('header-cart').style.width="300px";
}else{
document.getElementById('header-cart').style.width="220px";
}
By looking at your above code i feel there is no need to go for any script for this. You can acheive the same with existing css classes.
Flow 1:
Default class is applying. so, give the base width for this class.
.skip-content { width: 220px; }
Flow 2:
Active class is applying. So, give the active class width for this class.
.skip-active { width: 300px; } // This will be applied in active time.
i think this can be done by stylign inline
<div id="header-cart" class="block block-cart skip-content" style="width:220px;">
<div class="minicart-wrapper">
<p class="block-subtitle"></p>
<p class="empty">You have no items in your shopping cart.</p>
</div>
</div>
<div id="header-cart" class="block block-cart skip-content skip-active" style="width:300px;">
<div class="minicart-wrapper">
<p class="block-subtitle"></p>
<div>
<script type="text/javascript">
<div id="minicart-widgets"> </div>
<div class="block-content"></div>
<div class="minicart-actions"></div>
</div>
</div>
or make a another div for flow 1 and 2 like this
<div id="flow1">
<div id="header-cart" class="block block-cart skip-content">
<div class="minicart-wrapper">
<p class="block-subtitle"></p>
<p class="empty">You have no items in your shopping cart.</p>
</div>
</div>
</div>
<div id="flow2">
<div id="header-cart" class="block block-cart skip-content skip-active">
<div class="minicart-wrapper">
<p class="block-subtitle"></p>
<div>
<div id="minicart-widgets"> </div>
<div class="block-content"></div>
<div class="minicart-actions"></div>
</div>
</div>
</div>
</div>
CSS:
#flow1 {width:220px;}
#flow2 {width:300px;}
sample - http://jsfiddle.net/wd54paav/
I would like to select only the p tag without any attributes from the following html code.
<div id="review">
<div class="partial_review">
<div class="1">.....</div>
<div class="2">
<div class='inner_Bubble'>
<div class="entry">
<p class="partial_entry>it was a good...</p>
</div>
</div>
</div>
</div>
<div class="full_review">
<div class="1">.....</div>
<div class="2">
<div class='inner_Bubble'>
<div class="entry">
<p>it was a good trip.</p>
</div>
</div>
</div>
</div>
</div>
I have tried //div[#class='entry']/p[not class = 'partial_entry']/text(). But, its not working.
If you want all p elements with no attributes at all then the simplest path would be
//p[not(#*)]
If you want to check for the absence of class specifically then
//p[not(#class)]