Is there a way in CSS to get elements to behave like the picture on the right? The order of the elements isn't that important, but the tiles need to occupy the space from the bottom-up rather than top-down as the person resizes the page.
NORMAL DESIRED
|---------| |---------|
| A B C D | | I |
| E F G H | | E F G H |
| I | | A B C D |
|---------| |---------|
Sample code:
<html>
<head>
<style>
.container {
margin:10px;
border:1px solid black;
float:left;
}
.tile {
width:100px;
height:100px;
border:1px solid black;
margin:5px;
float:left;
font-size: 50px;
text-align: center;
line-height: 100px;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="container-1" class="container">
<span class="tile">1</span>
<span class="tile">2</span>
<span class="tile">3</span>
<span class="tile">4</span>
<span class="tile">5</span>
<span class="tile">6</span>
<span class="tile">7</span>
<span class="tile">8</span>
<span class="tile">9</span>
</div>
</body>
</html>
Think outside the box:
.container, .tile {
transform:rotate(180deg); /* Moz and IE10+ */
-ms-transform:rotate(180deg); /* IE9 */
-webkit-transform:rotate(180deg); /* Opera/Chrome/Safari */
}
Yes, this really works:
.container {
margin:10px;
border:1px solid black;
float:left;
transform:rotate(180deg);
}
.tile {
width:100px;
height:64px;
border:1px solid black;
margin:5px;
float:right;
font-size: 40px;
text-align: center;
line-height: 64px;
vertical-align: middle;
transform:rotate(180deg);
}
<div id="container-1" class="container">
<span class="tile">1</span>
<span class="tile">2</span>
<span class="tile">3</span>
<span class="tile">4</span>
<span class="tile">5</span>
<span class="tile">6</span>
<span class="tile">7</span>
<span class="tile">8</span>
<span class="tile">9</span>
</div>
First the container is rotated 180deg to get the desired layout, then float:right flips their left/right order, and then the tiles are rotated 180deg again to look as intended.
There's another way to do this. You can use CSS3's flex-wrap property to achieve the output you're looking for.
.container{
display: flex;
flex-wrap: wrap-reverse;
}
Example
The best solution I can think of using just CSS would be to employ media queries at specific breakpoints, and to devise 2-4 (depending on how many break points you want, it could be even more) desirable configurations.
Think of the desirable configurations, then you can give your content tiles specific id's to change their styles/widths at each breakpoint. E.g.,
<head>
<style>
.container {
margin:10px;
border:1px solid black;
float:left;
}
.tile {
width:100px;
height:100px;
border:1px solid black;
margin:5px;
float:left;
font-size: 50px;
text-align: center;
line-height: 100px;
vertical-align: middle;
}
#media all and (max-width: 699px) and (min-width: 520px) {
#tileOne {
width: 100%;
}
#tileTwo {
width: 50%;
}
}
</style>
</head>
<body>
<div id="container-1" class="container">
<span class="tile" id="tileOne">1</span>
<span class="tile" id="tileTwo">2</span>
<span class="tile">3</span>
<span class="tile">4</span>
<span class="tile">5</span>
<span class="tile">6</span>
<span class="tile">7</span>
<span class="tile">8</span>
<span class="tile">9</span>
</div>
</body>
This technique would be fully manual, so might not work well for dynamic content unless you also wanted to leverage css-child-selectors, which for backwards compatibility might best be done using jQuery. But because, it's fully manual, it also gives you complete control over the progression.
As with Niels' solution, as presented, this wouldn't work below IE9 because media-query isn't supported.
Related
I have a container with some spans which have the CSS property float:left, the items have some space between them, my problem is that the whitespace collapses when the container is too small to show it, as demonstrated in the example below
.root {
display:inline-block;
background-color:lightgray;
width:200px;
margin:50px;
}
body>div:nth-of-type(2){
width:180px;
}
.item {
float:left;
border:1px solid gray;
padding:2px 5px;
background-color:white;
white-space:nowrap;
}
.spc {
float:left;
display:inline-block;
width:20px;
height:1px;
background-color:blue;
}
<div class=root>
<span class=item>item a1</span>
<span class=item>item a2</span>
<span class=spc></span>
<span class=item>item b1</span>
</div>
<div class=root>
<span class=item>item a1</span>
<span class=item>item a2</span>
<span class=spc></span>
<span class=item>item b1</span>
</div>
Also, what's with the weird alignment of the third item?
I have slightly elaborated my example:
var rainbow=['red','orange','yellow','green','blue','indigo','violet'];
var $=v=>document.querySelector(v);
var root=$('#root');
var item=$('.item');
item.remove();
var spc=$('.spc');
spc.remove();
var data ={
a:2,b:1,c:1
};
update();
function update(){
Object.keys(data).forEach((key,i)=>{
for(var j=0;j<data[key];j++){
var nitem=item.cloneNode();
nitem.textContent='item '+key+j;
root.append(nitem);
}
var nspc=spc.cloneNode(true);
let col=rainbow[i];
nspc.style.backgroundColor=col;
nspc.onclick=e=>alert(`i hope you have a ${col} day`);
root.append(nspc);
});
}
#root {
display:inline-block;
background-color:lightgray;
width:250px;
margin:50px;
vertical-align:top;
padding:5px;
}
.item {
float:left;
border:1px solid gray;
padding:2px 5px;
background-color:white;
white-space:nowrap;
margin:2px;
}
.spc {
float:left;
display:inline-block;
width:20px;
background-color:lightblue;
border:1px solid transparent;
padding:2px 5px;
margin:2px;
cursor:pointer;
}
<div id=root>
<span class=item>item a1</span>
<span class=spc> </span>
</div>
I work primarily on single page applications where the ui requirements often push the boundaries of standard layout guides.
I provide a link to a codepen - empty elements which extends the above idea further by allowing the root container to be resized, this shows that there is room for improvement in this model.
This all leads to potentially new features of css, one namely a margin that should always appear between two elements, either horizontally or vertically.
In my current working example i dont as yet have need to style or add events to the 'spaces', but undoubtedly version 99 in 2050 will do, for instance to select some sub group of items
Going down the margin route, I could if it existed, have used some sort of css selector
.itemX:last-of-type {
margin-right:20px;
}
The trouble with this approach is that I am forced to create different classes for every type of item.
It's better to use diplay: flex and create space with CSS, not with HTML element, This is my example:
.root {
display:flex;
background-color:lightgray;
width:200px;
margin:50px;
flex-direction: row;
gap: 5%;
}
body>div:nth-of-type(2){
width:120px;
}
.item {
border:1px solid gray;
padding:2px 5px;
background-color:white;
white-space:nowrap;
}
<div class=root>
<span class=item>item 1</span>
<span class=item>item 2</span>
</div>
<div class=root>
<span class=item>item 1</span>
<span class=item>item 2</span>
</div>
well a solution to this problem as hinted to by #adam above is
.root {
display:inline-block;
background-color:lightgray;
width:250px;
margin:50px;
vertical-align:top;
}
body>div:nth-of-type(2){
width:180px;
}
.item {
float:left;
border:1px solid gray;
padding:2px 5px;
background-color:white;
white-space:nowrap;
}
.spc {
float:left;
display:inline-block;
width:20px;
background-color:lightblue;
border:1px solid transparent;
padding:2px 5px;
}
<div class=root>
<span class=item>item a1</span>
<span class=item>item a2</span>
<span class=spc> </span>
<span class=item>item b1</span>
</div>
<div class=root>
<span class=item>item a1</span>
<span class=item>item a2</span>
<span class=spc> </span>
<span class=item>item b1</span>
</div>
i had to apply the same padding and border to the 'space'/empty element so the alignments worked
the trouble is always a trade off between simplifying the problem and including enough information so the answers are relevant
as for using elements to create spaces/empty elements etc, i agree to use margin, padding etc when applicable, in this instance i dont feel the 'space' was accurately represented by such a construct and the closer our models are to what is actually going on the better they perform and the easier they are to maintain
i am open to a flex solution to this problem, i am primarily a javascript person, i really should sit down and go through the various css layouts, so little time ...
So I'm not that great at programming sorry, but I use stack overflow and other sources to add site functionality and learn a little more each time. I'm using a Flexible Grid System to display my main content, specifically to re-arrange navigational buttons on the page.
This works great for me, but I've been using an ancient onMouseOver effect to display text when the user moves over an image button link and I'm not happy with the way it looks, and using flex creates issues with text legibility when the sizing gets small.
Ideally, I'd like to use a css overlay on my buttons so I can replace the image with text and format it to my liking. I've tried MANY different overlay solutions, but they all seem to use grid layouts and I can't get them to work with my flex layout for some reason.
Either the images get cropped, or the text can't completely cover the image due to layering issues, or (If I use the grid layout) I lose the flexible resizing capabilities that I really like on the site.
I'm hoping that this is a really simple fix. I'm assuming I need to add a container to my flex layout to place the content over the top of the image, but a hint to where to start would be really appreciated.
Here's a link to the buttons in the flex layout with no overlay:
https://megaauctions.net/megaflextest.htm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MEGA Main Flex Buttons</title>
<link rel="stylesheet" href="css/test-code-buttons-no-action-compact.css" type="text/css"/>
</head>
<body>
<div class="buttoncontainer">
<buttonhomea class="buttonhomea column grad-yellow">
<a href=#><img src="http://www.megaauctions.net/images/btn-auctions.gif" /></a>
</buttonhomea>
<buttonhomeb class="buttonhomeb column grad-babyblue">
<img src="http://www.megaauctions.net/images/btn-buying.gif" />
</buttonhomeb>
<buttonhomec class="buttonhomec column grad-salmon">
<img src="http://www.megaauctions.net/images/btn-selling.gif" />
</buttonhomec>
</div>
</body>
</html>
and the CSS...
.buttoncontainer {
margin: 0 auto;
top: 0px;
display: flex;
position: relative;
flex-wrap: wrap;
justify-content: space-evenly;
text-align: center;
background: url('http://www.megaauctions.net/images/bkg-subs-deep.gif');
}
.column {
--columns: 12; /* number of columns in the grid system */
--width: var(--width-mobile, 0); /* width of the element */
padding: 0px;
margin: 9px 1px 2px 1px;
flex-basis: calc(var(--width) / var(--columns) * 94%);
}
/****** VIEWPORTS START ******/
#media (min-width: 350px) {
.column {
--width-mobile: var(--width-mobile);
--width: var(--width-mobile);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:157px;
}
}
#media (min-width: 512px) {
.column {
--width-tabletp: var(--width-tablet);
--width: var(--width-tabletp);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:157px;
}
}
#media (min-width: 650px) {
.column {
--width-tablet: var(--width-mobile);
--width: var(--width-tablet);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:300px;
}
}
#media (min-width: 900px) {
.column {
--width-desktop: var(--width-tablet);
--width: var(--width-desktop);
}
.buttonhomea img, .buttonhomeb img, .buttonhomec img {
width:100%;
max-width:315px;
}
}
/****** VIEWPORTS END ******/
.buttonhomea, .buttonhomeb, .buttonhomec {
--width-mobile: 12;
--width-tabletp: 4;
--width-tablet: 4;
--width-desktop: 4;
height: 100%;
}
.grad-yellow {
background-color:#f3d250;
background-image:linear-gradient(140deg,#f3d250,#EEA315);
}
.grad-babyblue {
background-color:#90CCF4;
background-image:linear-gradient(140deg,#90CCF4,#578FEE);
}
.grad-salmon {
background-color:#F78888;
background-image:linear-gradient(140deg,#F78888,#E7298C);
}
code in fiddle:
https://jsfiddle.net/mattcomps/gfb7k43h/
...and an overlay example of what I'm trying to achieve:
https://megaauctions.net/megaflextestbuttonaction.htm
<html>
<head>
<title>CSS Grid Cards</title>
<link rel="stylesheet" href="css/test-code-buttons-working-grid-compact.css" type="text/css"/>
</head>
<body>
<div class="container">
<section class="cards">
<a href="#" class="card grad-yellow">
<div class="card__overlay grad-yellow">
<div class="card__title">Auctions</div>
<div class="card__description">
Description goes here.
</div>
</div>
<div class="card__image" style="background-image:url('http://www.megaauctions.net/images/btn-auctions.gif')"></div>
<div class="card__content">
</div>
</a>
<a href="#" class="card grad-babyblue">
<div class="card__overlay grad-babyblue">
<div class="card__title">Buying</div>
<div class="card__description">
Description goes here.
</div>
</div>
<div class="card__image" style="background-image:url('http://www.megaauctions.net/images/btn-buying.gif')"></div>
<div class="card__content">
</div>
</a>
<a href="#" class="card grad-salmon">
<div class="card__overlay grad-salmon">
<div class="card__title">Selling</div>
<div class="card__description">
Description goes here.
</div>
</div>
<div class="card__image" style="background-image:url('http://www.megaauctions.net/images/btn-selling.gif')"></div>
<div class="card__content">
</div>
</a>
</section>
</div>
</body>
</html>
and the CSS...
.container{
background-image:url(http://www.megaauctions.net/images/bkg-subs-deep.gif)
}
.cards{
display:grid;
gap:1rem;
margin:0 auto;
padding:1rem;
}
#media (min-width:59em){
.cards{
grid-template-columns:repeat(2,1fr)
}
}
.card{
display:grid;
grid-template-columns:repeat(2,1fr);
grid-template-rows:300px 1fr auto;
color:#fff;
}
#media (min-width:31.25em){
.card{
grid-template-columns:160px (2,1fr);
grid-template-rows:1fr auto
}
}
#media (min-width:50em){
.card{
grid-template-columns:300px (2,1fr)
}
}
#media (min-width:59em){
.card{
grid-template-columns:160px(2,1fr)
}
}
.card__overlay{
min-height:300px;
display:none
}
#media (min-width:59em){
.card__overlay{
position:relative;
opacity:0;
display:grid;
justify-items:center;
align-items:center;
grid-column:1/4;
grid-row:1/3;
transition:opacity .3s ease-in-out}
}
.card:hover .card__overlay{
min-height:300px;
opacity:1
}
.card__content span{
display:inline-block;
border:2px solid #fff;
padding:1rem 3rem;
color:#fff;
}
.card__image{
grid-column:1/3;
grid-row:1/2;
min-height:157px;
background:no-repeat
}
#media (min-width:31.25em){
.card__image{
grid-column:1/4;
grid-row:1/3
}
}
.card__content{
grid-column:1/3;
grid-row:2/3;
padding:1.5rem}
#media (min-width:31.25em){
.card__content{
grid-column:2/4;
grid-row:1/2}
}
.grad-yellow {
background-color:#f3d250;
background-image:linear-gradient(140deg,#f3d250,#EEA315);
}
.grad-babyblue {
background-color:#90CCF4;
background-image:linear-gradient(140deg,#90CCF4,#578FEE);
}
.grad-salmon {
background-color:#F78888;
background-image:linear-gradient(140deg,#F78888,#E7298C);
}
code in fiddle:
https://jsfiddle.net/mattcomps/2eLzkwts/
Thanks!
Hope this answers your query
JSFIDDLE
what i have done is giving relative style to the parent buttonhomea .
then on hover showing the hidden div.
.card__overlay{
position: absolute;
width: 100%;
height: 100%;
top: 0;
opactity:0;
z-index:-1;
}
.buttonhomea{
position:relative;
}
.buttonhomea:hover .card__overlay{
opacity:1;
z-index:1;
}
and added html
<div class="card__overlay grad-yellow">
<div class="card__title">Auctions</div>
<div class="card__description">
Description goes here.
</div>
</div>
under each buttonhomea class
I've got the following markup. It's being delivered dynamically, I'm limited in what changes can be made to it.
Markup:
<div id="container">
<div class="stage">
<span class="stageText">Hello World</span>
<span class="icon">|</span>
</div>
<div class="stage">
<span class="stageText">Hello</span>
<span class="icon">|</span>
</div>
<div class="stage">
<span class="stageText">Hi There</span>
<span class="icon">|</span>
</div>
</div>
CSS (not quite doing as required/described)
#container {
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
display:table;
width:445px;
}
.stage {
display:table-cell;
width:33.33333%;
}
.icon {
width:3px;
margin-left:auto;
margin-right:auto;
}
I need to position the <span class="icon">|</span>'s midway between the end of the <span class="stageText">'s and the right boundary of the parent element. Here's a jsfiddle demonstrating the situation: http://jsfiddle.net/jralston/vc6pzawk/
Any help or pointers very much appreciated.
Thank You
John
I create this solution using pseudo-element :after:
#container {
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
display:table;
width:445px;
}
.stage {
display:table-cell;
width:33.33333%;
}
.stage:after {
content: "|";
position: relative;
left: 25%;
}
<div id="container">
<div class="stage">
<span class="stageText">Hello World</span>
</div>
<div class="stage">
<span class="stageText">Hello</span>
</div>
<div class="stage">
<span class="stageText">Hi There</span>
</div>
</div>
Read the comments for changes. Advantage of this technique is that you do not need to use javascript or change the html, just css.
JSFiddle
#container {
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
display:table;
width:445px;
}
.stage {
display:inline-block;/*instead of table-cell*/
text-align: center;/*centers text*/
float: left;/*float */
width:33.33333%;
}
.icon {
float: right;/*put icons left or right from text*/
width:3px;
}
I'm not sure if there's an easy to do this in CSS but you can do it relatively easy through JS & jQuery:
$('.icon').each(function () {
var $el = $(this),
containerWidth = $el.parent().width(),
contentWidth = $el.prev().width();
$el.css('left', (contentWidth) + ((containerWidth - contentWidth) / 2));
});
http://jsfiddle.net/vc6pzawk/3/
I need it to look like this:
Here is the markup:
<div class="hni_vaBreadcrumbContainer">
<progress class="hni_vaBreadcrumbProgress" value="0" max="100"></progress>
<span class="hni_vaBreadcrumbContent">0%</span>
</div>
Here are a couple jfiddles I tried but couldn't get working:
http://jsfiddle.net/x4wLf/, http://jsfiddle.net/cogent/6A5Lb/
I could just use a background image for the percentage text but prefer all CSS.
thanks!
I think I actually figured it out with very little markup/css.
http://jsfiddle.net/o22b4uyz/2/
Markup
<div class='wrapper'>
<div class='concave'><span class="percent">20%</span></div>
</div>
CSS
div.wrapper {
background:blue;
width:80px;
height:20px;
position:relative;
border-radius: 50px;
}
div.concave {
position:absolute;
background:white;
width:20px;
height:20px;
border-radius:50px;
left:-3px;
}
span.percent {
padding-left: 40px;
color: #fff;
}
I have a top nav that extends across the page
Within that top nav I have various elements
two that must align left
one that must align right
The nav is fluid the elements are fixed widths
Do not want the elements to wrap when the browser window is minimized
Needs to work in IE6 on up due to high Chinese audience.
See example here:
http://jsfiddle.net/4SUwg/
<div id="header">
<div id="headerContent">
<div class="search-list"> Search List </div>
<div class="social-buttons"> Social </div>
<div class="signin"> Login Drop Down </div>
</div>
</div>
I would like the div elements within the nav to not wrap. I searched around on stack and could find answers that come close but nothing that completely addressed the issue. My need to have the div element aligned right complicates matters. Must work in all browsers, especially IE's.
Thanks all for your help in advance!!!
Use SPAN .. It's INLINE and not BLOCK ??
<div id="header">
<div id="headerContent">
<span class="search-list"> Search List </span>
<span class="social-buttons"> Social </span>
<span class="signin"> Login Drop Down </span>
</div>
</div>
And your CSS, remove floats
<style>
body {
margin:0;
padding:0;
}
#header {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
overflow-x:auto; overflow-y:hidden;
}
#headerContent {
height: 32px;
border:1px dashed #fff;
}
.search-list {
width:150px;
background:#039;
}
.social-buttons {
width:150px;
background:#060;
}
.signin {
width:200px;
background:#F00;
}
You want a fluid layout but the most important rule of a fluid layout is not to set a definite width of elements but you have set the width.
The CSS have a <style> tag, which is not required, probably you put it by mistake.
I have set the width of divs inside headerContent in percentage value. The CSS is
body {
margin:0;
padding:0;
}
#header {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
overflow-x:auto; overflow-y:hidden;
}
#headerContent {
height: 32px;
border:1px dashed #fff;
}
.search-list {
width:28%;
float:left;
background:#039;
}
.social-buttons {
width:28%;
float:left;
background:#060;
}
.signin {
width:28%;
float:right;
background:#F00;
}
Just changed the width value and on my browser it looked fine, better than the before version. Here's a fiddle http://jsfiddle.net/DeepakKamat/s52Hn/8/
I found a solution that works in all browsers, specifically IE6 on up since that was a requirement for this project. If you have something better that accomplishes the same thing please post! My sincere thanks to everyone who answered/helped.
<div id="header2">
<table id="headerContent2">
<tr>
<td id="left" valign="top">
<div id="leftWrapper">
<div class="search-list2">Search List</div>
<div class="social-buttons2">Social Buttons</div>
</div>
</td>
<td id="middle"> </td>
<td id="right" valign="top">
<div class="signin2">Login Drop Down</div>
</td>
</tr>
</table>
</div>
<style>
#header2 {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
}
#headerContent2 {
width:100%;
}
#headerContent2 td {
height: 32px;
padding:0;
margin:0;
}
.search-list2 {
width:150px;
float:left;
background:#039;
}
.social-buttons2 {
width:200px;
float:left;
background:#060;
}
.signin2 {
background:#F00;
float:right;
width:400px;
}
#leftWrapper {
width:400px;
}
#middle {
width:100%;
}
</style>
See Demo of it working here. Copy the code and try it out in all the IE's since JSfiddle does not work in all IE's.
http://jsfiddle.net/GtXKE/