I want to build an android like main navigation that fits into a Susy Grid. It looks like this:
The code goes here:
HTML:
<div class="container">
<nav>
<ul class="horizontal-list">
<li>
One
</li>
<li>
Two
</li>
<li>
Three
</li>
<li>
Four
</li>
</ul>
</nav>
</div>
SASS:
header.main {
height: $headerHeight;
background: url('images/headerBackground.gif');
.container {
#include container;
#include susy-grid-background;
nav {
#include span-columns(8);
ul.horizontal-list {
#include horizontal-list;
overflow: visible;
li {
#include isolate-grid(2, 8);
padding: 0;
display: table;
a {
// vertical alignment
display: table-cell;
height: $headerHeight / 2;
padding-bottom: 2px;
vertical-align: bottom;
// appearance
color: $greyLight;
font-size: 18px;
text: {
transform: uppercase;
decoration: none;
}
// hover
position: relative;
&:before {
content: '';
display: block;
width: $headerUnderlineGap;
background: $black;
height: $headerHeight;
position: absolute;
top: 0;
margin-left: -$headerUnderlineGap + 1;
}
&:hover {
color: $white;
&:after {
content: '';
display: block;
background: $cyanLight;
width: 114%; // TODO check why space(2, 8) does not work
height: 4px;
position: absolute;
margin: -1px 0 0 1px;
}
}
}
}
}
}
}
}
I feel it's a bit hacky to set the width of the &:after element to 114% and not to space(2, 8). Can anyone tell me, how to set up a horizontal navigation with a Susy grid and an continuous underline, that hovers all the way to the next li element.
Thanks in advance!
space(2,8) doesn't work in that case because 8 is not actually the context: 2 is. You just need space(2,2).
Related
Is it possible to make this 2 circles always on the right and left of the bottom of the image? They need to be always one on the bottom left, the second on the bottom right of an image- when I resize the image. (they should always stick to the bottom corners of an image) How to position them like that?
enter code here
Codepen:
https://codepen.io/anami90/pen/KeEqRw?editors=1100
according to your quesrion the circles should appear on the outer column isnot it?
hope this helps:
div {
height: 100vh;
}
.col-3 {
background: lightgreen;
}
.col-6 {
background: pink;
padding: 0;
display: flex;
align-items: center;
position: relative;
}
.circle-left {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: yellow;
position: absolute;
left: 0;
bottom: 0;
}
.circle-right {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
img {
width: 100%;
height: auto;
vertical-align: middle;
}
<div class="row">
<div class="col-3">col-3</div>
<div class="circle-left"></div>
<div class="col-6">
<img src="https://www.w3schools.com/w3css/img_lights.jpg"/>
</div>
<div class="col-3">col-3</div>
<div class="circle-right"></div>
</div>
https://codepen.io/anon/pen/zabLoq?editors=1100
I would like to position this 2 circles as it is on this picture below:
enter image description here
The below flexbox code doesn't work in firefox. It's a horizontal nav list that stretches across the browser width. In all other browsers the li's space out equally, but in firefox they don't. Any ideas? Thanks in advance.
.wrapper {
position: fixed;
padding: 0;
width: 100%;
top: 0em;
}
.flex-container-top {
padding: 1em;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.flex-item {
font-family: sans-serif;
font-size: 1em;
color: #fff;
text-align: center;
}
<div class="wrapper">
<ul class="flex-container-top">
<li class="flex-item">Link 1
</li>
<li class="flex-item">Link 2
</li>
<li class="flex-item">Link 3
</li>
<li class="flex-item">Link 4
</li>
</ul>
</div>
Your example didn't work in Chrome, either.
You need to add flex: 1 to .flex-item. Then it will work:
.flex-item {
flex: 1; /* add this line */
font-family: sans-serif;
font-size: 1em;
color: #fff;
text-align: center;
}
i'm creating this base structure :
<ul>
<li>
<a>
blabla
</a>
</li>
</ul>
with css :
ul{
height: 100%;
list-style: none outside none;
margin: 0;
padding: 0;
}
ul li{
height: 25%;
text-align: right;
width: 100%;
}
a{
display: block;
float: right;
height: 75%;
padding-right: 2%;
position: relative;
width: 98%;
padding-top:25%;
}
i can't manage to simply put the a at the bottom...
i thought giving the A a height of 25% and a padding of 75% would work but it takes 75% of the UL and not 75% of the LI.
anyone has an idea how come?
thanks a lot
What exactly are you trying to achieve?
If I am assuming correctly you want an <li> that is 25% the height of its container and the <a> to sit at the bottom-right of the <li>
If that is the case you could use this css
updated RE comment In this case we could use a <span> inside the <a> to position the text and set the <a> to fill the <li>
ul {
height: 100%;
list-style: none outside none;
margin: 0;
padding: 0;
background-color: red;
}
li {
height: 25%;
text-align: right;
width: 100%;
}
a {
display: block;
position: relative;
height: 100%;
width: 100%;
background-color: blue;
}
span {
display: block;
position: absolute;
bottom: 0;
padding: 2%;
width: 96%;
background-color: green;
}
and the html
<ul>
<li><span>blabla</span></li>
</ul>
Fiddle here
Please note that for this to work you need to set html, body { height:100%; } or have a container with an explicit height set. i.e. ul { height: 200px; } or div.container { height: 200px; }
I would also recommend applying the styles via classes.
I am trying to use the background-size property in IE8 with this promising solution: https://github.com/louisremi/background-size-polyfill
But I am getting this error: SCRIPT65535: Unexpected call to method or property access.
Any ideas or alternatives to set the image size of a background-image in IE8?
It might be worth noting that the polyfill isn't designed to work with specific pixel sizes, i.e. background-size: 32px 64px
I know this doesn't answer your question, but for IE 8, I've just been removing non-important backgrounds with this CSS hack (instead of trying to figure out how to size them)
background: none\9;
try this css code, ie8 working dropshadow
body {
margin: 0;
background: url(images/algeria.jpg) center no-repeat;
-ms-behavior: url(backgroundsize.min.htc);
}
.bgsCover {
background-size: cover;
}
.bgsContain {
background-size: contain;
}
/* this allows to use a second background in all browsers and IE8 */
body:after {
content: "";
background: url(images/pattern.png) repeat;
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* responsive carousel FTW */
#carousel {
height: 45%;
width: 50%;
margin: 0 auto;
background: #0F0808;
border-radius: 3px;
}
#carousel ul {
height: 100%;
padding: 0;
margin: 0;
list-style: none;
}
#carousel li {
display: none;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
-ms-behavior: url(backgroundsize.min.htc);
}
#carousel .active {
display: block;
}
/* less interesting stuff below */
html, body {
height: 100%;
font-family: "Arial", "Liberation Sans", sans-serif;
color: #FEE;
}
h1 {
font-family: 'Great Vibes', sans-serif;
text-align: center;
margin: 0 0 40px;
text-shadow: 0 0 2px #222;
font-size: 1.7em;
font-weight: normal;
position: relative;
top: 20px;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#222222, direction=90);
}
h1 i {
font-size: 1.3em;
display: block;
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
filter: progid:DXImageTransform.Microsoft.Shadow(color=#222222, direction=90);
}
p {
text-align: center;
font-size: 1.5em;
text-shadow: 0 0 2px #222;
/* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(color=#222222, direction=90);
/* For IE 5.5 - 7 */
zoom: 1;
color: #CCC
}
.button {
color: #0F0808;
text-decoration: none;
background: #FEE;
border-radius: 3px;
text-shadow: none;
padding: 4px 8px;
}
Your HTML Source code
<body class="bgsCover">
<h1><i>background-size</i> polyfill</h1>
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub">
<div id="carousel">
<ul>
<li id="img1" class="active" style="background-image: url(images/algerian1.jpg);">
<li id="img2" style="background-image: url(images/jar1.jpg);">
<li id="img3" style="background-image: url(images/algerian2.jpg);">
<li id="img4" style="background-image: url(images/jar2.jpg);">
</ul>
</div>
<p>Stretch background image using CSS3 <code>background-size: cover;</code> and <code>background-size: contain;</code>, in IE8 too.<br/>
Reacts to resize events for responsive backgrounds and galeries!</p>
<p><a class="button" href="https://github.com/louisremi/background-size-polyfill#readme">Instructions</a> - <a class="button" href="https://github.com/louisremi/background-size-polyfill/downloads">Downloads</a></p>
<script>
/*var images = [
'algeria.jpg',
'parthenon.jpg',
'propylaea.jpg'
],
curImg = 0;
document.getElementById("switchImage").onclick = function() {
curImg = ( curImg + 1 ) % images.length;
document.body.style.backgroundImage = "url(images/" + images[ curImg ] + ")";
};
var sizes = [
"Cover",
"Contain",
"Auto"
],
curSize = 0;
document.getElementById("switchSize").onclick = function() {
curSize = ( curSize + 1 ) % sizes.length;
document.body.className = "bgs" + sizes[ curSize ];
};*/
var items = document.querySelectorAll("#carousel li"),
curItem = 0;
setInterval(function() {
items[ curItem ].className = "";
curItem = ( curItem + 1 ) % items.length;
items[ curItem ].className = "active";
}, 3000);
</script>
</body>
i got the same issue on IE8. When i copied ".htaccess" in root folder. It works perfectly.
The Polyfill did not work for me either. My solution was to use the original "deprecated" version.
<!--[if lt IE 9]>
<script
src="//louisremi.github.io/jquery.backgroundSize.js/jquery.backgroundSize.js">
</script>
<script>
$('.logo').css( "background-size", "cover" );
</script>
<![endif]-->
Actually the deprecated version is not necesary.
For me it worked when I used behavior instead of -ms-behavior
I'm trying to make a centered, 100% high layout that has NO FIXED width (argh). Everything seems to be ok with the solution below, apart from the img that I need to scale to height: 100%, that doesn't scale inside table-cell (outside of the div everything's ok).
EDIT: I am able to set fixed height like 100px or so, both in css and tag. Why doesn't this work with %?
<div id="center">
<div id="tcontainer">
<div id="tleft">a</div>
<div id="tright"><img id="bgright" src="images/bgright1.jpg" height="100px" /></div>
</div>
</div>
And styles:
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
#bgrepeat { /* unnecessary ATM */
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
}
#bgright { /* HERE THE PROBLEM */
height: 100%;
}
img { border: 0; /*float: left;*/ }
#center {
text-align: center;
height: 100%;
}
#tcontainer {
text-align: left; /* POTRZEBNE ? */
background: red;
height: 100%;
display: table;
margin: 0 auto;
}
#tleft {
display: table-cell;
}
#tright {
background: pink;
display: table-cell;
}
OK, so the problem has been baldy formulated. I've had just forgotten to pass "height: 100%" in consecutive children. It didn't have anything to do with display: table nor images.