I've tried #logos img:first-child{} to try and format my top img a little different from the rest but it just doesn't work. Can anyone help me figure out why?
<div id="logos" name="logos">
<div class="container">
<div class="row">
<br>
<h1 class="centered">SHOWS</h1>
<img src="img/kenshows400x300.jpg" class="img-responsive" alt="Ken Cooper" width="400px" height="300px">
<hr>
</div><!-- end row -->
<div class="row">
<div class="col-lg-6">
<img src="img/shows/jkllogo450x300.jpg" class="img-responsive" alt="Jimmy Kimmel Live" width="450px" height="300px">
</div>
<div class="col-lg-6">
<img src="img/shows/latelateshowlogo450x300.jpg" class="img-responsive" alt="Late Late Show" width="450px" height="300px">
</div>
</div><!-- end row -->
</div>
</div>
The first-child pseudo-selector selects any element which is the first child of its parent. In your example, in the first .row div, the h1 "SHOWS" is the first element and your img is the second element. So it doesn't get selected. In contrast, in the other div, both img tags are the first child of their parent, so they do get selected.
In other words, img:first-child doesn't select the first img tag, it selects the img tag which is the first child of its parent. If it has a previous sibling, then first-child doesn't apply.
We can fix your code by instead putting the first-child on .row so that the img in the first row div is selected, which also happens to be the first image.
#logos .row:first-child img {
border: 1px solid blue;
}
<div id="logos" name="logos">
<div class="container">
<div class="row">
<br>
<h1 class="centered">SHOWS</h1>
<img src="img/kenshows400x300.jpg" class="img-responsive" alt="Ken Cooper" width="400px" height="300px">
<hr>
</div> <!-- end row -->
<div class="row">
<div class="col-lg-6">
<img src="img/shows/jkllogo450x300.jpg" class="img-responsive" alt="Jimmy Kimmel Live" width="450px" height="300px">
</div>
<div class="col-lg-6">
<img src="img/shows/latelateshowlogo450x300.jpg" class="img-responsive" alt="Late Late Show" width="450px" height="300px">
</div>
</div> <!-- end row -->
</div>
</div>
:first-child / :last-child required any list in one section, but in your code img wrapped with div so try to add :first-child on just parent div, see below sample code
#logos .row:first-child img{}
Try this:-
#logos .row:first-child img{
}
Another option could be first-of-type
try #logos img:first-of-type{}
Related
This question already has answers here:
Float 2 elements side by side inside a container div
(2 answers)
Closed 3 years ago.
I have loop that goes trough all pictures that I have and displays them. I would like to display them in one row, from left to right, but with css that I have is displaying them one under other. I have use flow but not sure if I used it correctly.
Here is my code:
.column.is-narrow {
float: right;
}
.box {
float: right;
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
I am aware that my css is not correct I have been searching for answer but couldn't find it.
Basically, when you float things, they'll still wrap if there isn't enough space to display both side by side. The easiest solution is to set a width on them to ensure that their container will always be wide enough to fit the content. You can do it with percentages or pixels, depending on your use case.
Note: If you use percentages, percentages adding up to 100% may still cause it to wrap, because they may not take into account padding, margin and/or border depending on other things. I usually do something like 49% for both, then float one right and one left.
You may use display and mind this inline-style <div class="box" style="width: 200px;"> wich is to start with, not wide enough to hold texts and img side by side
display:table/table-cell;
.column.is-narrow {
float: right;
}
.box {display:table;}
.box> p, .box> figure {display:table-cell;vertical-align:middle/* or top or else */
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
display:flex;
.column.is-narrow {
float: right;
}
.box {
display: flex;
/* removed width:200px from inline-style*/
}
p {
margin: auto;
}
<div class="column">
<div class="columns" ng-repeat="a in $ctrl.f">
<div class="column is-narrow">
<div class="box">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
The easiest way is to declare the parent div as a flex container by setting the property display: flex and flex-direction:row. If you don't want to wrap your pictures, you can set flex-wrap:nowrap.
Here http://the-echoplex.net/flexyboxes/ is nice playground for flex box.
So I found the answer and it was pretty simple :)
I just had to add one more div with class with which I will float it to left. This is what I wanted:
.html
<div class="column">
<div class="columns">
<div class="float" ng-repeat="a in $ctrl.f"> /* added this line of code */
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">{{album}}</p>
<figure class="image is-128x128">
<!--<img ng-src="{{src}}"> remove and replaced for demo purpose-->
<img src="http://dummyimage.com/128x128" />
</figure>
</div>
</div>
<p class="subtitle">{{person}}</p>
</div>
</div>
</div>
.css
.float{
float:left;
}
That was it. It's working. :)
I am working on my portfolio. I have this page here:
The first picture there is a date on. I would like a text in the bottom, like this:
But I cannot get that text placed. Everytime I add a div tag and set in a text, it is going outside of the picture. I guess it is a div tag there has to be somewhere?
<div class="portfolio logo" data-cat="logo">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="date">
<span class="day">10</span>
<span class="month">aug</span>
<span class="month">2016</span>
</div>
</a>
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="image-caption">
<div class="col-md-4 col-sm-6 col-xs-12">
<h2>link</h2>
</div>
</div>
<img src="img/portfolios/logo/5.jpg" alt="" />
</div>
</div>
</div>
If we are talking about the h2 element, that html tag sits inside a element that is hidden by default and only appears on hover.
I will move it outside the .image-caption div
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="col-md-4 example col-sm-6 col-xs-12">
<h2>link</h2>
</div>
<div class="image-caption">
</div>
<img src="img/portfolios/logo/5.jpg" alt="" />
</div>
</div>
and give it those styles
.example {
position: absolute;
bottom: 0;
z-index: 1;
text-align: center;
left: 0;
}
Adjust than bottom and left values to match the positioning for your design
You'll have to create a css for your image-caption class, that will be in absolute position, meaning it can clash with other things. This should help you with that: Position absolute but relative to parent . Then just make sure you have your z-index right so it's not behind the image
I have a container which has three divs. Each div contains a hidden div which has a 'hide' class (display:none;) inside which is supposed to show when hovering on its parent div.
I use toggleClass('show') to which makes the secretDiv display has a block. I need the secretDiv to be shown when hovering on the parent div.
The parent div should show on top of the div below, and not push the other divs
http://jsfiddle.net/2xLMQ/4/
--- HTML ---
<div class="row">
<div class="element">
<img src="http://placehold.it/200x100" alt="" title="" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
<div class="element">
<img src="http://placehold.it/200x100" alt="my image" title="image title" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
</div>
<div class="row">
<div class="element">
<img src="http://placehold.it/200x100" alt="" title="" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
<div class="element">
<img src="http://placehold.it/200x100" alt="my image" title="image title" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
</div>
--- CSS ---
.hide {display:none;}
.show {display:block;}
.row {height:160px;background:#dedede;float:left;width:480px;position:relative:z-index:1;}
.row .element {position:relative;z-index:9;text-align:center; float:left; background:#666;width:200px;padding:12px;margin:6px;}
.row .image {}
.row .secretDiv {background:#ff0000;padding:8px;}
--- JS ---
$('.element').hover(function(){
$('.element .secretDiv').toggleClass('show');
});
First at all change your selector to only match the respective hidden div:
$('.secretDiv',this).toggleClass('show');
Then add another class on that item to display ontop of the others :
$(this).toggleClass('ontop');
And the class:
.row .ontop {z-index:10;background:orange;}
Check this Demo
Simply add absolute positioning to your 'secret' div:
.row .secretDiv {background:#ff0000;padding:8px; position: absolute; top: 5px; left: 5px;}
Fiddle here: http://jsfiddle.net/moonspace/2xLMQ/12/
As a bonus, I've edited your jQuery to show only the 'secret' div associated with each element:
$('.secretDiv', this).toggleClass('show');
HTML CODE
<div class="header" style="float:left">
<div class="logo">
<img src="some image" height="200px" width="200px"/>
</div>
<div class="name">company name</div>
<div class="pic">
<img src="some image" height="200" width="200"/>
</div>
</div>
CSS styling
header{background-color:red;width:1200px;height:400px;float:;}
.logo{width:17%;}
.name{color:#ADFF2F;font-size:48pt;margin-left:250px;width:38%}
.pic{;margin-left:950px;}
.header > div {
float: left;
}
Also, your header class in the CSS needs to have a . in front of it.
You also need to remove the margin-left from .pic
http://jsfiddle.net/samliew/DAC7p
I have a list of icons to be displayed. I am using the following layout to do this:
<div class="icons">
<div class="icon1">
img src="someimage" <p>Some test </p>
</div>
.
.
.
</div>
This is the CSS I am using:
.icons{
margin-top:5px;
margin-left:5px;
left:0;
}
.icon1{
line-height:15px;
margin-top:8px;
width:75px;
}
How do I modify this so that if I add more divs with the class icon1 they will be aligned in a new column when the max-height is reached?
I am unsure whether float:left will work. In my experience this causes the div tags to be added side by side and once they reach the end of the parent div the next one will be added to the bottom of the first column. He requires the opposite #Jack
what i suggest is using jquery to check if the height of your div tags are exceeding the parent div. If they are then add a new div and begin appending your image-div tags to the new div with style="float:left". Thus if your initial DOM contains
< div class="icons" > < /div >
appending one element should change the DOM to
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
</div>
</div>
appending another element should change it to
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
<div class="icon2" > <img src="" height="" width="" /> </div>
</div>
</div>
appending a third element which exceeds the parent div would change the DOM to this
<div class="icons" >
<div class ="column" style="float:left">
<div class="icon1" > <img src="" height="" width="" /> </div>
<div class="icon2" > <img src="" height="" width="" /> </div>
</div>
<div class ="column" style="float:left">
<div class="icon3" > <img src="" height="" width="" /> </div>
</div>
</div>
You can do this with CSS 'multi-columns',
demo
but it is still a Candidate Recommendation, so the support is still very minimal even though you can use vendor prefixes to get it working(although not without some quirks) on the latest versions of Firefox, Chrome and Opera.