My HTML DOM is given below. I want to remove margin and padding for all h3 elements which is an immediate sibling of div (id=successor). I used adjacent sibling selector "+" to acheive this.
But im not getting the expected output. Please help me.
<style type="text/css">
div#successor {
display: block;
}
div#successor+h3 {
padding :0 !important;
margin :0 !important;
border: 1px solid red;
}
</style>
<div id="access">
<div class="profile clearfix">
<div id="successor" class="memeberDetails">
<h3>Personal</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus dolor, vulputate iaculis erat ut, pulvinar commodo orci.Cras ac lorem a lectus luctus vestibulum. Suspendisse odio ligula, fringilla ut ultrices sed, aliquam nec ligula. Praesent porttitor,</p>
<br />
<h3>Training</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus dolor, vulputate iaculis erat ut, pulvinar commodo orci.</p>
<br />
<h3>Contact</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
If you want to add styles to h3 elements you need to select them by:
div#successor>h3
Adjacent selector selects element next to the object on the left of '+' operator, so it will work if you have such structure:
<div id="successor" class="memeberDetails">
...
</div>
<h3>...</h3>
As IMSoP said #successor is the parent and you want to select its immediate child.
You might want to use : div#successor>h3
Here is a working example: http://jsfiddle.net/Au4Vh/
Related
I have a case, where I have a div and inside the div, I need to get the first element, whatever that is (eg. p, div, a, h2, h3), and I want to add before the statement to that element. Is that possible to write that in SASS? I don't want to use js.
See my HTML bellow :
<div id="q1">
<h3>
<a href="#c5ac">
Curabitur quis lobortis elit, et porttitor ligula.
</a>
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit euismod ipsum, id pellentesque lorem viverra faucibus. Donec ornare laoreet purus ut pulvinar.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit euismod ipsum, id pellentesque lorem viverra faucibus. Donec ornare laoreet purus ut pulvinar.
</p>
</div>
Or maybe there is a simpler way to achieve something like that? Any tips?
I have a div and inside the div, I need to get the first element, whatever that is (eg. p, div, a, h2, h3),
You need:
#q1 > :first-child
to select the first child that is a direct descendant of your parent div.
Assuming that this ""I want to add before the statement to that element" " refers to a psuedo element...
#q1 > :first-child:before
In SASS
#q1 {
& > :first-child:before {
/* styles here */
}
}
If you need to add content before the first-child of an div, you can do:
#q1:first-child::before {
content: "Hello World";
font-size: 22px;
}
Why does adding the 60px margin to the p tag inside the body, also change the placement of the div with the class* header. Shouldn't a fixed position element be unaffected by the other elements on the page?
.header {
position: fixed;
}
.left {
margin-top: 60px;
}
<body>
<div class="header">
Exercise 2.4
</div>
<p class="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed magna vitae lorem hendrerit posuere. Nullam ut ex ipsum. Cras volutpat augue in metus tempus ultricies sit amet nec lacus.
</p>
</body>
If I remove the class left from the p tag, the spacing between the body and the html goes down to 8 pixels as expected.
Collapsing margins!
If you have two nested elements with top margins, the margin gets shared between them. That is, both elements get the same value for the margin.
Normally, this will only affect the first child element in the parent, but in this case the browser will make an exception for you because the first element has position:fixed, so it will take the second element.
Solution: give .left a padding instead of a margin.
.header {
position: fixed;
}
.left {
padding-top: 60px;
}
<div class="header">
Exercise 2.4
</div>
<p class="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed magna vitae lorem hendrerit posuere. Nullam ut ex ipsum. Cras volutpat augue in metus tempus ultricies sit amet nec lacus.
</p>
I'm making a new website and in my sidebar I'm trying to add this section below but I'm struggling to get the about text to be to the right of the image. I've tried floating the text left but it didn't really work. The only CSS I've got so far is that the sidebar is 300px wide.
<div id="sidebarabout">
<h3>About Elliott Davidson</h3>
<img src="http://placehold.it/100x100"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus luctus odio, sed sagittis dolor volutpat ut. Pellentesque efficitur orci at nunc fermentum, nec feugiat erat gravida. Continue reading</p>
</div>
Add this css and check out
img{float:left;padding:0 15px 0 0}
https://jsfiddle.net/vasanthanvas/s4pb17tr/
Try like this
<p><img src="http://placehold.it/100x100"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus luctus odio, sed sagittis dolor volutpat ut. Pellentesque efficitur orci at nunc fermentum, nec feugiat erat gravida. Continue reading</p>
img{float:left;margin:0 15px 0 0}
Padding will squeeze your image little.
You can use margin instead of padding.
You need to set the img and p to be either inline or inline-block on their CSS styles.
And also - depending how you want your text to "float" it may need a width:
https://jsfiddle.net/xoL510og/ << Example
<div id="sidebarabout">
<h3>About Elliott Davidson</h3>
<img style='display:inline-block;' src="http://placehold.it/100x100"><p style='display:inline-block; width:400px;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus luctus odio, sed sagittis dolor volutpat ut. Pellentesque efficitur orci at nunc fermentum, nec feugiat erat gravida. Continue reading</p>
</div>
use display: table;
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.item-inner{
display: table;
width: 100%;
padding: 20px;
}
.item{
display: table-cell;
vertical-align: top;
}
.item-text{
padding-left: 15px;
}
<div class="item-inner">
<div class="item">
<img src="http://placehold.it/100x100" />
</div>
<div class="item item-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus luctus odio, sed sagittis dolor volutpat ut. Pellentesque efficitur orci at nunc fermentum, nec feugiat erat gravida. Continue reading</p>
</div>
When defining the img markup, make sure that it only affects the sidebarabout div. So define the div before img. Example:
#sidebarabout img{
float: left;
padding: 0 15px 0 0;
}
In case u declared a width in ur paragraph element, for example 200px, make sure to reduce this to 185px, since we're using a 15px padding. Otherwise it will mess up ur webpage because the div will become 315px width.
I noticed someone suggested using a margin. Don't use a margin, this will only push the image 15px to the left out of the div.
Also i'm missing a width, height and alt. Make sure to define ur img element the right way, otherwise it will not pass the W3C validator. Use the following:
<img src="http://placehold.it/100x100" width="100" height="100" alt="Description">
This question is kind of hard to explain with words, so I will link to a jsFiddle. jsFiddle. If you look at any of the links, you will see some boxes that are at different levels. These are supposed to tile across the screen, kind of like what you can see here. How can I stop them from having the weird vertical spacing above the elements and get them to tile properly? I think that it is caused by each elements contents having different heights, but I don't know how to fix it. Here is the code that you can find in the jsFiddle:
HTML:
<div id="elements">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id nunc ut erat facilisis pharetra. Sed egestas gravida mattis.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu lectus eu purus pulvinar tincidunt. Phasellus at elit id nulla volutpat gravida sit amet vitae lorem. Nunc mattis venenatis varius. Aenean nec odio lorem. Nulla in turpis sed velit venenatis lacinia eget id ante. Maecenas quis massa nunc.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
</div>
CSS:
#elements div {
display:inline-block;
width:250px;
height:250px;
border:solid thin #000;
}
Add vertical-align: top; to the CSS rule.
There are lot of techniques to fix this. Either float these elements like-
#elements div {
display:inline-block;
width:250px;
height:250px;
border:solid thin #000;
float:left;
}
or vertical-align: top; buyt as i think in case of inline-block elements flaot one is more robust that'll not last at any breakpoint and also where you haven't applied resets to the body.
I have an ordered list which is actually a display of products on a page. Within each list item (li) there is some content followed by a div containing some more content, before closing the list item.
I need for the div within each list item to expand (its width) beyond its parent list item and actually fill the width of the ordered list (ol). Each div also needs to sit directly below its parent list item and push any following list items down.
I know the probably doesn't make sense, it's not very easy to explain.
Here's the HTML I have so far:
<ol class="products group">
<li>
<a href="#">
<img src="assets/img/ind-aerospace.jpg" align="" />
<h4>Product Title</h4>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
<li>
<a href="#">
<img src="assets/img/ind-automotive.jpg" align="" />
<h4>Product Title</h4>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
<!-- Expand this -->
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor blandit lacus in sodales.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor blandit lacus in sodales.</p>
</div>
</li>
<li>
<a href="#">
<img src="assets/img/ind-power.jpg" align="" />
<h4>Product Title</h4>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
<li>
<a href="#">
<img src="assets/img/ind-power.jpg" align="" />
<h4>Product Title</h4>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
<li>
<a href="#">
<img src="assets/img/ind-power.jpg" align="" />
<h4>Product Title</h4>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
<li>
<a href="#">
<img src="assets/img/ind-power.jpg" align="" />
<h4>Product Title</h4>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at auctor justo. Vivamus non elit velit. Vestibulum porttitor blandit lacus in sodales.</p>
</li>
Here's my CSS:
ol.products {
position: relative;
}
ol.products li {
list-style: none;
float: left;
width: 30%;
margin: 0 3% 1.5em 0;
border-bottom: dotted 1px #ed2124;
border-bottom: dotted 1px rgba(237,33,36,.5);
}
ol.products li p {
margin: .5em 0;
min-height: 140px;
line-height: 1.2em;
}
ol.products li div {
position: relative;
width: 100%;
border: solid 1px red;
}
ol.products li div p {
min-height: 0;
}
Here's a wireframe of the list that might help it make a little sense:
You should use jQuery to accomplish this. You can add a "expandable" class to each of the info boxes and in the css have it display:none; then when you click on the parent info button use jQuery to position the box as you need it to (and return the display to visible, add animation, fade, etc). You will need to have jQuery traverse your html and place the info box in the correct area.
I tried something similar with css hover states, you can see my results here:
CSS Popouts
It's similar because I have a nested div that's set to display:none by default and is set to display:block by a hover anywhere on the list item.
The div floats overtop the other content though, rather than pushing it out of the way like your wireframes seem to indicate. You might have to get some JS going for you like #JohnP and #Collin White mentioned.