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 ...
I have this tooltip code that run's a tooltip when i mousehover the entire image. But I want to do the same process but with several imagemap inside an image.
Any ideas?
thank you.
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:10px; margin-left:28px;
width:300px; line-height:16px;
}
a.tooltip:hover span{
display:inline; position:absolute; color:#111;
border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
/*CSS3 extras*/
a.tooltip span
{
border-radius:4px;
box-shadow: 5px 5px 8px #CCC;
}
<a href="#" class="tooltip">
<img src="http://www.invasao.com.br/wp-content/uploads/2011/05/google.jpg" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="poly" coords="22,46" href="#" />
</map>
<span>
<img class="callout" src="http://www.menucool.com/tooltip/cssttp/callout.gif" />
<img src="/tooltip/src/tooltips-cd2.jpg" style="float:right;" />
<strong>CSS only Tooltip</strong><br />
Pure CSS popup tooltips with clean semantic XHTML.
</span>
</a>
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 noticed in the inspector my text-align:center; is crossed out for "span#artlink" --it works on all my other links but not this one, I was curious if anyone can figure out why this is the case.
Thank you
HTML
<body>
<div id="wrapper">
<header>
<div id="mainnav">
<span id="home">MARK LOVATO</span>
<span id="vidlink">VIDEOS</span>
<span id="artlink">ART</span>
<span id="motionlink">MOTION</span>
<span id="reellink">REEL</span>
<span id="aboutlink">ABOUT</span>
</div>
</header>
</div>
</body>
CSS
a:link {text-decoration:none;}
span#home{width:100%; height:50px; float:left; clear:both;}
span#home,span#home a{color:#ffffff; background-color:#000000;
font- family:helvetica; font-weight:600;font-size:43px; letter-spacing:2px;
text-align:center; font-stretch:semi-condensed;}
span#home:hover, span#home:hover a{color:; background-color:;}
span#vidlink{width:65%; height:50px; float:left;}
span#vidlink,
span#vidlink a{ color:#000000; background-color:#ffffff;text-align:center;
font-weight:350; font-size:43px; letter-spacing:10px;}
span#vidlink:hover, span#vidlink:hover a{color:#ffffff; background-color:#000000;}
span#artlink{width:35%; height:50px; float:right;}
span#artlink,span#artlink a{color:#acacac; background-color:#555555;
text-align:center; font-weight:200; font-size:42px; letter-spacing:15px;}
span#artlink:hover,span#artlink:hover a{color:#ff7dbd; background-color:#d60a70;}
I'm trying to make a website compatibile to >IE8 (including IE). It turns out that hover effect is not working in any of IE versions. Here's my website CLICK
When you navigate to page "Plan" there's a map of a flat. When you hover on one of two rooms it displays blue boxes on it (in every browser but not in IE). What is the problem?
This is HTML I'm using:
<div id="slide3" class="slide">
<h1>Wybierz swój lokal</h1>
<div class="floor-nav">
<ul>
<li>0</li>
<li>+1</li>
</ul>
</div>
<div id="floor-0" class="floor">
<img src="img/floor-0.png" />
<a href="#" target="_blank" id="flat-1" class="flat">
<span class="flat-desc">Lokal <span class="bold">45m²</span></span>
</a>
<a href="#" target="_blank" id="flat-2" class="flat">
<span class="flat-desc">Lokal <span class="bold">25m²</span></span>
</a>
</div>
</div>
And some css:
.flat{
background:none;
position:absolute;
display:block;
color:#ffffff;
text-align:center;
font-size:30px;
text-decoration:none;
z-index:900;
}
.flat .flat-desc{
display:none;
padding-left:38px;
background:url(../img/plus-sign-white.png) left top no-repeat;
line-height:20px;
}
.flat:hover{
background:url(../img/flat-hover-bg.png);
}
.flat:hover .flat-desc{
display:inline;
}
Do you have any ideas why is this happening?
I couldn't be able to find the issue for this. But I found a fix that works with me. Try
.flat{
position:absolute;
display:block;
color:#ffffff;
text-align:center;
font-size:30px;
text-decoration:none;
z-index:900;
background-image: url( add url to a transparent pixel.png or a transparent pixel.gif );
}
Working LIVE PREVIEW
New code:
.flat{
position:absolute;
display:block;
color:#ffffff;
text-align:center;
font-size:30px;
text-decoration:none;
z-index:900;
background-image: url(../img/flat-bg.png);
}