:last-child is not working - html

This is my first post here, so please tell me, if I'm doing something wrong.
I have a problem with the following code:
That's my HTML:
<div class="sideSection">
<div class="sidebar">
<div class="mainContainer">
<div class="articleHeader">
<h3>Sapien lorem tempus</h3>
<h4>Pharetra sed bibendum lorem</h4>
</div>
<p>Nunc cursus quam vitae ipsum viverra luctus. Nam nullam feugiat massa lacinia lectus vitae. Sed eu turpis at adipiscing.</p>
<div class="sidebarBox">
<img src="images/pic04.jpg" alt="ernster Blick">
<div class="sidebarBoxText">
Cursus quam vitae
<p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
</div>
</div>
<div class="sidebarBox">
<img src="images/pic05.jpg" alt="Straße">
<div class="sidebarBoxText">
Etiam at orci ut nibh
<p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
</div>
</div>
<div class="sidebarBox">
<img src="images/pic06.jpg" alt="telefonierender Blick">
<div class="sidebarBoxText">
Mauris non tellus
<p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
</div>
</div>
<div class="sidebarBox">
<img src="images/pic07.jpg" alt="Skyscraper">
<div class="sidebarBoxText">
Duis id ipsum
<p>Nunc cursus quam vitae ipsum viverra luctus sapien.</p>
</div>
</div>
<div class="moreInfoButton">More Info</div>
</div>
</div>
</div>
And here is my CSS:
.sideSection .sidebar,
.sideSection .sidebar .sidebarBox {
float: left;
}
.sideSection .sidebar .sidebarBox {
padding: 25px 0px 20px;
border-bottom-style: solid;
border-width: 1px;
border-color: #ccc;
}
.sideSection .sidebar .sidebarBox:last-child {
border: none;
}
Now, what I'm trying to do, is to remove the border from the last "sidebarBox" class.
This isn't quite working out yet, because the code isn't affecting the border at all. I don't really know what I'm doing wrong, and I hope that someone can help me here, as it is for work :S
EDIT: Okay, as far as I figured it out by now, it's a problem with the s.
When I use "".sidebarBox:nth-child(6)"" it works just fine..
Does the ":last-child" attribute actually count all s that I used in that section?

:last-child only matches the actual last child of the parent div.
You have the .moreinfoButton following it. If you can move the button to outside the .mainContainer, it will work as you expect it

The :last-child selector applies to the last element inside a parent div. In your case the parent div is .mainContainer and its last child is .moreInfoButton and not .sidebarBox.
I would recommend you to add last class to the sidebarBox you want to modify, i.e.
<div class="sidebarBox last">
and the corrspondent css code is
.sideSection .sidebar .sidebarBox.last {
border: none;
}
Or another way to handle it is to wrap all your .sidebarBox elements in one parent <div>. Then you would be able to use :last-child selector.

Related

How to make the image displays right below the text, not behind the next div content?

I'm new to StackOverflow, still learning fullstack web-development.
Just started creating my own website and I'm stuck at my image keeps displaying behind the next div's item, not right below the text. :(
Please help me!! Thank you :D
HTML
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-8 text-container">
<p>
<h1>laoreet ante eget, vehicula ligula.</h1><br />
sed odio eu, eleifend aliquet urna. Donec ultrices dapibus ipsum.
Suspendisse ac hendrerit augue. Pellentesque massa eros, auctor ac sapien a, lacinia
luctus dolor. Proin et eleifend quam. Mauris tristique dictum tellus vitae molestie.
Praesent
auctor justo nisl, eu porta leo aliquam at.
</p>
</div>
<div class="col-sm-4">
<img src="images/picture.png" class="picture-container my-picture" alt="">
</div>
</div>
</div>
CSS
.wrapper {
width: 100%;
height: 700px;
background-color: #ed8d8d;
}
.container {
height: 500px;
padding: 80px 0px;
}
.text-container {
width: 700px;
height: 500px;
float: left;
margin-top: 80px;
text-align: right;
}
.picture-container {
overflow: hidden;
}
/* IMAGES */
.sophie-picture {
height: 450px
}
Inside your HTML code, the "picture-container" class on the IMG element should likely be moved, so it sits on the "col-sm-4"-div above.
I suspect the "my-picture" class on the IMG and the "sophie-picture" class in the CSS should be the same thing ? most likely you've renamed one of them and forgot to do the same in the other file, If so you should rename one so their names match up again.
There's a </div> missing at the end of the HTML code here, but i suspect that is likely just the case here because you only pasted part of your HTML document, and not the case in your own version.
The reason your image and text-container overlap is the use of float.
Removing that likely solves most of the issue.
But judging by the col-sm-8 style classnames i'm guessing you're using something like bootstrap ? Those classes apply a whole bunch of CSS (that you don't particularly have to worry about), but they provide the "column(s) within row; row(s) within container"-style of rapidly building a layout. If you're using those classes its best not to mix it with floats, manual width/height and margin statements, or really any significant CSS (just cosmetic only things like colors, font bold/italic, ...). Bootstrap has many classes so you effectively don't have to write any CSS yourself (classes like mb-4 or such for margins for example).
I would suggest using 1 or the other for a given container:
either building it the bootstrap-way with container/row/col and then using the margin/color/etc classes from boostrap.
or writing the CSS yourself, but then not using those bootstrap classes.
move the h1 tag above the p tag and set margin-bottom on the p tag to 0. also picture-container has no declared height so overflow:hidden won't do anything there. aplly overflow:hidden to wrapper.
.wrapper {
width: 100%;
height: 700px;
background-color: #ed8d8d;
border:solid 2px red;
overflow:hidden;
}
.container {
height: 500px;
padding: 80px 0px;
border:solid 2px blue;
}
.text-container {
width: 700px;
height: 500px;
float: left;
margin-top: 80px;
text-align: right;
border:solid green 2px;
}
.picture-container {
overflow: hidden;
}
p{
margin-bottom:0}
/* IMAGES */
.sophie-picture {
height: 450px
}
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-8 text-container">
<h1>laoreet ante eget, vehicula ligula.</h1>
<p>
sed odio eu, eleifend aliquet urna. Donec ultrices dapibus ipsum.
Suspendisse ac hendrerit augue. Pellentesque massa eros, auctor ac sapien a, lacinia
luctus dolor. Proin et eleifend quam. Mauris tristique dictum tellus vitae molestie.
Praesent
auctor justo nisl, eu porta leo aliquam at.
</p>
</div>
<div class="col-sm-4">
<img src="https://via.placeholder.com/450" class="picture-container my-picture" alt="">
</div>
</div>
</div>
</div>

Can’t get the text to appear below the Image

I am trying to make the text appear below the image but it is not budging at all. My goal is it make the text appear below the image in the container
.left-col p {
text-align: justify;
width: 300px;
}
.left-col img {
margin: 0 auto;
left: 5%;
width: 300px;
height: 130px;
position: absolute;
text-align: center;
}
</head>
<body>
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="Cyber.jpg" width="200" height=150"/>
<p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium
</p>
Instead of using position absolute, remove it. Reason is that the element is positioned relative to its first positioned (not static) ancestor element. So, you could of course mess with top, right and left values to make it work but it would not be responsive at all.
Read more about it here: MDN Position CSS
The default value of position is static, this way the elements renders in a specific order(its what you want, render img and p after).
This is the pen if you need:
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="https://via.placeholder.com/200x150" width="200" height="150" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>
</div>
</div>
.left-col p{
text-align: justify;
width:300px;
}
.left-col img{
width:300px;
height: 130px;
}
Also, instead of setting width 300px to paragraph and img, you could set only one time to your .left-col div. I have also removed other properties that you were not using.
another note is that you forgot the " on height attribute.
In css there is use [ position absolute ] For the image and is not used in the text You must set the position in the image and the text or leave it to the default setting I deleted it from the image properties in css
.left-col p{
text-align: justify;
width:300px;
}
.left-col img{
margin: 0 auto;
left: 5%;
width:300px;
height: 130px;
text-align:center;
}
<body>
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="Cyber.jpg" width="200" height=150"/>
<p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>
</body>
Remove the line 'position: absolute;' from CSS. Complete (close) the DIV and P tags. You may introduce '.container{...}' where you may position (or whatever) the image-and-text together. You may wish to use 'margin: 0;' to glue the text to the image. Good luck!

Each div lower than the previous one, no margin or padding issue

Creating a custom WordPress theme with Bootstrap3.
My divs are behaving ridiculous, as I probably missed something. I tried various solutions like display: inline, vertical-align: top, floats and clears, etc... But nothing worked.
Here is my current look, and everything should be inline:
here is my current code:
<div class="container content">
<!-- CONTENT -->
<div class="col-md-12 blog-posts">
<article class="single-article col-md-4">
<a href="myweb.com/blog/tempus-non-auctor/">
<img width="300" height="300" src="myweb.com/wp-content/uploads/2016/07/team4-300x300.jpg" class="img-responsive wp-post-image" alt="team4" srcset="myweb.com/wp-content/uploads/2016/07/team4-300x300.jpg 300w, myweb.com/wp-content/uploads/2016/07/team4-150x150.jpg 150w, myweb.com/wp-content/uploads/2016/07/team4.jpg 573w" sizes="(max-width: 300px) 100vw, 300px"> </a>
<h1 class="article-headline">tempus non, auctor</h1>
<h4 class="article-time-stamp"><i>Posted on July 15th, 2016</i></h4>
<p></p><p>Etiam sit amet orci eget eros faucibus tincidunt. In hac habitasse platea dictumst. Aenean commodo ligula eget dolor. Vivamus in erat ut urna cursus vestibulum. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Fusce fermentum. Etiam feugiat lorem non metus. Suspendisse feugiat. Praesent congue erat at massa.<br><a class="moretag hvr-pop" href="myweb.com/blog/tempus-non-auctor/"><i>Read more</i></a></p>
<p></p> </article>
</div> <!-- end blog posts part -->
<!--END content wrapper -->
</div>
and css:
.single-article {
padding-bottom: 10%;
em {
font-style: italic;
}
}
.article-headline {
padding-bottom: 2%;
a {
color: $purple-color;
}
}
.article-time-stamp {
font-size: 1em;
padding-bottom: 1%;
}
Any advices? Thanks
You have col-md-4 nested right under col-md-12. You can't nest columns like that. You need a row in between. That is improper Bootstrap.
<div class="row">
<div class"col-md-12">
<div class="row">
<div class="col-md-4">
<p>Blah Blah</p>
</div>
<div class="col-md-4">
<p>Blah Blah</p>
</div>
<div class="col-md-4">
<p>Blah Blah</p>
</div>
</div>
</div>
</div>
If you are using inline-block, make sure that you have this CSS declaration:
vertical-align: top
This way everything gets aligned at the top of the div. You can always use margins or padding to push things down if you need to.
Hope this fixes what you need!
sometimes the easiest solution is the most logical one.
I've found out that I had a <br> tag under each article and this was causing that each article is being pushed down.

How to display a <p> within a <div>element with the display property of inline-block?

This is what I am currently working on...
.scake_one {
color: #cc3300;
display: inline-block;
}
.scake_two {
color: #cc3300;
display: inline-block;
}
.scake_three {
color: #cc3300;
display: inline-block;
}
<div class="scake_one">
<h1>CAKE ONE</h1>
<p>Lorem ipsum etiam porttitor ultrices
<br>tortor tempus vehicula.</p>
</div>
<div class="scake_two">
<h1>CAKE TWO</h1>
<p>Lorem ipsum eu quisque velit
<br>quam convallis massa tellus.</p>
</div>
<div class="scake_three">
<h1>CAKE THREE</h1>
<p>Lorem ipsum sed mauris aenean
<br>pretium pulvinar.</p>
</div>
I was able to use this property well with an other section that had < h1 > and < li > elements. I was able to used inline-block because they are block level elements? I saw this info on the w3 site
http://www.w3schools.com/htmL/html_blocks.aspI also saw that < div > tags are also block level elements. I can't seem to understand why it isn't working.
Here you go! You need float-left, and the width needs to tell it to take up a third of the screen.
Also, just as a style thing, you can give all of your "scake" the same class name, because the CSS styling is the same for each one. Then if you change the style on one, it'll update it for all of them.
.scake {
color: #cc3300;
display: inline-block;
float: left;
max-width: 32%;
margin-left: .5%;
margin-right: .5%;
}
<div class="scake">
<h1>CAKE ONE</h1>
<p>Lorem ipsum etiam porttitor ultrices
<br>tortor tempus vehicula.</p>
</div>
<div class="scake">
<h1>CAKE TWO</h1>
<p>Lorem ipsum eu quisque velit
<br>quam convallis massa tellus.</p>
</div>
<div class="scake">
<h1>CAKE THREE</h1>
<p>Lorem ipsum sed mauris aenean
<br>pretium pulvinar.</p>
</div>

text-shadow applying to all the text on website?

So i have this weird problem if it's even a problem(?) might just be me who doesn't understand CSS and how it works
i created a css class called textShadow
.textshadow {
text-shadow: 1px 1px 0px #000000;
}
and when i added it to en element suddenly all the text had the same text-shadow is it supposed to be like this?
if you add text-shadow with
style="text-shadow: 1px 1px 0px #000000;"
only the specefide element gets text-shadow
Thank you for reading my post and happy holidays!
EDIT: Adding some html code
<div class="w-container">
<div class="w-slider w-hidden-tiny headerslider" data-animation="slide" data-duration="500" data-infinite="1" data-delay="4000" data-autoplay="1">
<div class="w-slider-mask">
<div class="w-slide headerSliderContentPadding" style="text-align: center">
<h1 class="textOnDark1 textshadow">Suspendisse varius enim in eros elementum tristique!
</h1>
<h4 class="w-hidden-tiny w-hidden-small textOnDark1 textshadow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
</h4>
<div class="w-hidden-main w-hidden-medium" style="display: inline-block; margin-left: auto; margin-right: auto;">
<a class="buttonBlue btn extraPaddíng10px" href="#">Button Text</a>
</div>
</div>
<div class="w-slide">
</div>
<div class="w-slide">
</div>
</div>
<div class="w-slider-arrow-left">
<div class="w-icon-slider-left"></div>
</div>
<div class="w-slider-arrow-right">
<div class="w-icon-slider-right"></div>
</div>
<div class="w-slider-nav w-round w-num"></div>
</div>
</div>
I only want the elements that have the textshadow class to have text-shadow, but all the element get's text-shadow when i run it in chrome, firefox and internet explorer (even the div slider get's shadowing) why is that?
After some html inspection i found that the class had for some reason been applied to the <html> tag(?)
and some other weird classes as well i guess it have to do something with how webflow works (forgot to mention that the website was created with webflow) why it dose this i have no idé but at least i know why now :)
Thanks for all the suggestions and help guys you are great