enter link description hereI have a set 8 floated divs, each taking 25% width (and having another div and img inside), so they line up in two rows.
<div class="galleryboard" id="gallery3">
<div class="view view-first">
<img src="img/galleries/3/thumb/1.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/2.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/3.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/4.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/5.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/6.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/7.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/8.jpg">
<div class="mask">
Enlarge
</div>
</div>
</div>
I want to add only the inner borders to all floats by manually picking each float by css, like so:
.view:nth-child(1) {
border-left:none
}
.view:nth-child(5) {
border-left:none
}
.view:nth-child(4) {
border-right:none
}
.view:nth-child(8) {
border-right:none
}
.view:nth-child(1), .view:nth-child(2), .view:nth-child(3), .view:nth-child(4) {
border-top:none;
}
.view:nth-child(5), .view:nth-child(6), .view:nth-child(7), .view:nth-child(8) {
border-bottom:none;
}
but somehow, I'm getting the borders of 2nd, 3rd, 6th and 7th float all wrong - see it here
jsfiddle
the divs are styled here
.view {
width: 25%;
box-sizing:border-box;
float: left;
overflow: hidden;
position: relative;
text-align: center;
border:3px solid blue
}
.view .mask, .view .content {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
width:100%;
height:auto;
}
and apparently the problem is caused by the img having its width set to 100%. Can you find a solution to have my inner borders all the same size? Thanks
Try
Remove all child styling and apply following
.view:nth-child(1), .view:nth-child(2), .view:nth-child(3), .view:nth-child(5), .view:nth-child(6), .view:nth-child(7) {
border-right: medium none;
}
.view:nth-child(1), .view:nth-child(2), .view:nth-child(3), .view:nth-child(4) {
border-bottom: medium none;
}
In the .view i have just added height or pass the height dynamicaly
.view {
border: 3px solid blue;
box-sizing: border-box;
float: left;
**height: 240px;**
overflow: hidden;
position: relative;
text-align: center;
width: 25%;
}
Related
I want display a set of images with a description below. I chose to use Ionic cards.
I got this result (the first image):
While I want to preserve the same layout I have now, and add a description.
Here is my code:
<ion-content ng-controller="cityController">
<div class="row">
<div class="col col-33">
<div class="list card">
<div class="item item-body">
<img class="full-image"src="img/images/opera.jpg"/>
This is a "Facebook" styled Card..
</div>
</div>
</div>
<div class="col col-33">
<img src="img/images/basilique.jpg"/>
</div>
<div class="col col-33">
<img src="img/images/hoteldeville.jpg"/>
</div>
</div>
.center {
text-align: center;
}
.col {
overflow: hidden;
}
.row {
overflow: hidden;
height: 180px;
}
.fullscreen {
width: 100%;
height: 100%;
}
How can I fix this?
UPDATE
You have to change your source little bit.
Example HTML:
<div class="row">
<div class="col col-33">
<img class="full-image" src="http://www.w3schools.com/css/img_fjords.jpg"/>
<div class="card-description">This is a "Facebook" styled Card..</div>
</div>
<div class="col col-33">
<img class="full-image" src="http://www.w3schools.com/css/img_forest.jpg"/>
<div class="card-description">This is a "Facebook" styled Card..</div>
</div>
<div class="col col-33">
<img class="full-image" src="http://www.w3schools.com/css/img_mountains.jpg"/>
<div class="card-description">This is a "Facebook" styled Card..</div>
</div>
</div>
Example CSS:
.col-33 {
width: 33%;
float:left;
}
.full-image {
width: 100%;
height: 100%;
}
.card-description {
text-align: center;
}
Live demo here
This is just an example how it can work.
UPDATE:
To have the images full sized, you need to put the description over it.
In that case this CSS is required.
.col-33 {
width: 33%;
float:left;
position: relative;
}
.full-image {
width: 100%;
height: 100%;
}
.card-description {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 5px;
line-height: 1.5;
background-color: rgba(255, 255, 255, 0.6);
}
I have a CSS menu using the checkbox:checked trick here
But my issue is that when the menu is open, the content overflows off the side of the parent div - How do I make the divs fluid so that that wrap around to the next row and push each other along?
I have looked at Flexible Boxes, I have never used them before, but feel this could be the right track.
I have created a JSFiddle that illustrates what I am trying to do.
Thank you :)
EDIT
I've done some experimenting and it is the magic combination of padding and box-sizing - I've also just stumbled upon this useful post => International box-sizing Awareness Day
EDIT
HTML:
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
<div class="item">Hello</div>
</div>
</div>
CSS:
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container {
transition: left 1s;
left: 250px;
}
#container {
position: relative;
transition: left 1s;
left: 0px;
width: 100%;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
The problem is that you are moving the left value of offset menu, which moves the menu item to left 250px. Similar thing will occur if you use margin-left property, because of width:100%.
instead, if you increase the padding, which will cause the increment inwards and reduce width of parent container, causing the item elements to fall on next life if no space is found.
Check the below snippet, where i am changing the padding value
* {
box-sizing: border-box;
}
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container {
transition: padding 1s;
padding-left: 250px;
}
#container {
position: relative;
transition: padding 1s;
left: 0px;
width: 100%;
padding-left: 0;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
</div>
</div>
The problem is that you're moving the whole container so everything inside it moves too.
What you actually want to do is move the first .item.
input[type="checkbox"]:checked ~ #container .item:first-child {
transition: margin-left 1s;
margin-left: 250px;
}
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container .item:first-child {
transition: margin-left 1s;
margin-left: 250px;
}
#container {
position: relative;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
</div>
</div>
As per your JSFiddle example you have to change few properties :
HTML : one line has to added for clear the floating
<div id="content">
<input type="checkbox" />
<div id="container">
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div class="item">
Hello
</div>
<div style="clear:both"></div>
</div>
</div>
And the CSS would be :
#content {
width: 500px;
background: blue;
}
input[type="checkbox"]:checked ~ #container {
transition: margin-left 1s;
margin-left: 250px;
}
#container {
position: relative;
transition: margin-left 1s;
margin-left: 0px;
}
.item {
display: inline-block;
width: 50px;
background: red;
margin: 4px;
}
I have a series of images each with his own overlay. How can I have them aligned like inline-blocks? I tried adding adding display: inline-block;to .image-wrapper but the images are always all positioned in the top left corner of the div.container (Here is a jsfiddle).
Here are the html and css
.container {
position: relative;
}
.image-wrapper {
position: relative;
display: inline-block;
}
.tweetty {
position: absolute;
overflow: auto;
top: 0;
left: 0;
}
.image-vest {
position: absolute;
top: 0;
left: 0;
background-color: #00f;
width: 220px;
height: 300px;
opacity: 0.4;
color: #fff;
}
<div class="container">
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-one</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-two</div>
</div>
</div>
EDIT:
revised css with dfsq suggestion to remove position:absolute; from .tweetty.
Quoting dfsq comment:
"Elements with position absolute don't contribute to the width and height of their parent container. So the image-wrapper divs just collapse as if they were empty if all children have position:absolute; "
.container {
position: relative;
}
.image-wrapper {
position: relative;
display: inline-block;
}
.tweetty {
overflow: auto;
top: 0;
left: 0;
}
.image-vest {
position: absolute;
top: 0;
left: 0;
background-color: #00f;
width: 220px;
height: 300px;
opacity: 0.4;
color: #fff;
}
<div class="container">
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-one</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-two</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-three</div>
</div>
</div>
I fiddled with the fiddle, and this seems to work. removed all the positioning from all but the vest. Used the inline-block display mode. Set top to -300px, and also the bottom-margin, otherwise you get a gap below the images.
.container {
/* position:relative;*/
}
.image-wrapper {
/* position: relative;*/
display: inline-block;
}
.tweetty {
/* position:absolute;
overflow:auto;
top:0;
left:0;*/
}
.image-vest {
position:relative;
top:-300px;
margin-bottom: -300px;
left:0;
background-color:#00f;
width:220px;
height:300px;
opacity:0.4;
color:#fff;
}
<div class="container">
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-one</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-two</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-three</div>
</div>
</div>
(here's the JSFiddle version)
I've got some 'person' divs in a 'main' div. On 'person':hover I show an overlaying div. I want it appear only within the 'main' div, not go beyond 'main's boundaries.
This way:
When cursor over AGCH div
When cursor is over JALO div
I want Jack London's right border aligned with main's right border.
The complete example here: https://jsfiddle.net/yjdrnk9o/1/
HTML
<div id="main">
<div class="person">
<span class="short-name">WISH</span>
<div class="more">
<span>William</span>
<span>Shakespeare</span>
</div>
</div>
<div class="person">
<span class="short-name">AGCH</span>
<div class="more">
<span>Agatha</span>
<span>Christie</span>
</div>
</div>
<div class="person">
<span class="short-name">JALO</span>
<div class="more">
<span>Jack</span>
<span>London</span>
</div>
</div>
</div>
CSS
#main {
position: relative;
border: 1px solid;
width: 150px;
height: 100px;
}
.person {
float:left;
border:1px solid;
margin:1px 2px;;
}
.person:hover>.more {
display: block !important;
}
.more {
z-index:1;
position:absolute;
white-space: nowrap;
background-color:gray;
}
Thank you
Like this? https://jsfiddle.net/yjdrnk9o/3/
I added a class to your html to distinguish the last .person from the others and then said that the .more child of the .person.right element should be aligned to the right.
#main {
position: relative;
border: 1px solid;
width: 150px;
height: 100px;
}
.person {
float:left;
border:1px solid;
margin:1px 2px;;
}
.person:hover>.more {
display: block !important;
}
.more {
z-index:1;
position:absolute;
white-space: nowrap;
background-color:gray;
}
.person:last-of-type .more {
right: 0;
}
<div id="main">
<div class="person">
<span class="short-name">WISH</span>
<div style="display:none;" class="more">
<span>William</span>
<span>Shakespeare</span>
</div>
</div>
<div class="person">
<span class="short-name">AGCH</span>
<div style="display:none;" class="more">
<span>Agatha</span>
<span>Christie</span>
</div>
</div>
<div class="person on-right">
<span class="short-name">JALO</span>
<div style="display:none;" class="more">
<span>Jack</span>
<span>London</span>
</div>
</div>
</div>
use :last-of-type or :nth-of-type(3)
#main {
position: relative;
border: 1px solid;
width: 150px;
height: 100px;
}
.person {
float:left;
border:1px solid;
margin:1px 2px;;
}
.person:hover>.more {
display: block !important;
}
.more {
z-index:1;
position:absolute;
white-space: nowrap;
background-color:gray;
}
.person:last-of-type .more{
right: 0;
}
<div id="main">
<div class="person">
<span class="short-name">WISH</span>
<div style="display:none;" class="more">
<span>William</span>
<span>Shakespeare</span>
</div>
</div>
<div class="person">
<span class="short-name">AGCH</span>
<div style="display:none;" class="more">
<span>Agatha</span>
<span>Christie</span>
</div>
</div>
<div class="person">
<span class="short-name">JALO</span>
<div style="display:none;" class="more">
<span>Jack</span>
<span>London</span>
</div>
</div>
</div>
What I am trying to do is centre the img elements both vertically and horizontally inside the img-container. The img-container needs to be a % of the parent element not a fixed width. (ie the outer-container may not always be 1000px)
Although the code below centres the image fine withing the img-container, the width of the img-continer seems to ignore the CSS width 20%. Ie I cannnot get the img-container to get the correct (in this case 200px) width.
Any suggestions?
-Matt.
Here is my CSS
#outer-container{
width:1000px;
}
.img-container {
height:20vh;
width:20%;
vertical-align:middle;
display: table-cell;
}
.centred-img {
display:block;
margin-left:auto;
margin-right:auto;
max-height:100%;
max-width:100%;
}
Here is my HTML:
<div id="outer-container">
<div class="img-container">
<img class="centred-img" src="1.jpg">
</div>
<div class="img-container">
<img class="centred-img" src="2.jpg">
</div>
<div class="img-container">
<img class="centred-img" src="3.jpg">
</div>
<div class="img-container">
<img class="centred-img" src="4.jpg">
</div>
</div>
Use display:inline-block on the child elements and use text-align:center on the parent.
That should do the trick for horizontal centring. To make it centre vertically, you need to
add line-height to your images parent and vertical-align:middle to image itself.
Try using this CSS.
#outer-container{
width:500px;
border:1px solid black;
}
.img-container {
height:20vh;
width:20%;
display: inline-block;
border:1px solid black;
line-height:20vh;
text-align: center;
}
.centred-img {
vertical-align:middle;
margin-left:auto;
margin-right:auto;
max-height:100%;
max-width:100%;
}
Here's my fiddle just using css tables. Is this what you're looking for? The height and width are both dynamic.
http://jsfiddle.net/sinnix/dpppzuds/
<div class="container">
<div class="row">
<div class="cell">
<img src="http://placehold.it/50">
</div>
<div class="cell">
<img src="http://placehold.it/50">
</div>
<div class="cell">
<img src="http://placehold.it/50">
</div>
<div class="cell">
<img src="http://placehold.it/50">
</div>
</div>
</div>
.container {
display: table;
width: 90%; /* adjust as desired */
height: 100px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 25%;
background: magenta;
vertical-align: middle;
text-align: center;
}
.cell:nth-child(even){
background: yellow;
}