Is possible to scale SVG using CSS? I use <img> to insert an SVG icon in HTML. Here is my code: http://jsfiddle.net/kw5fuw7L/.
nav {
width: 100%;
background: #202125;
box-shadow: 0px 1px 0px 0px #2C2E32;
padding: 0;
overflow: hidden;
}
nav ul {
list-style: none;
overflow: hidden;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
padding: 20px 0;
width: 120px;
text-align: center;
}
nav ul li.active {
background: #F5A623;
}
svg path {
fill: #fff !important;
}
nav ul li .svg-container {
width: 20px;
height: 10px;
margin: 0 auto;
padding: 0 auto;
}
nav ul li img {
display: block;
margin: 0 auto;
padding: 0 auto;
width: 100%;
}
nav ul li span {
display: inline-block;
color: #fff;
padding-top: 10px;
}
nav ul li a {
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 120px;
text-indent: -5000em;
}
Unfortunately, I have to use this code too: http://jsfiddle.net/praveenscience/wuSF7/, to give them color. It works okay before I put there this script.
I would be grateful if someone have idea how to scale an SVG icons.
Related
I'm sorry to ask this question because it has been largely posted, but I checked a lot of links and didn't solve it yet. I have a navbar with 2 elements and I cannot center it in the middle of the nav.
#menu {
background: #000000;
background: linear-gradient(to bottom, #973F8E, #DC4069);
color: #FFF;
height: 52px;
width: 500px;
padding-left: 18px;
border-radius: 50px;
border: 1px solid #000000;
margin: auto;
display:block;
text-align:center !important;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
list-style: none;
display: block;
text-align: center;
}
#menu ul {
width: 100%;
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu a {
display: block;
line-height: 50px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #000000;
background: #FFA6AF;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 52px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 50px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
<nav id="menu">
<input type='checkbox' id='responsive-menu' onclick='updatemenu()'><label></label>
<ul>
<li><a href='/'>DASHBOARD</a></li>
<li><a href='/model'>MODEL</a></li>
</ul>
</nav>
Probably in the large number of css elements I'm not able to see where the code is not working.
I posted the code here:
codepen
You should remove the left padding from the main #menu element, set the ul's display to inline-block and the width to auto (just remove the width property).
This will work because the #menu element has text-align: center. the ul will be centered since its width is not 100% (because width is set to auto and the display to inline-block).
#menu {
background: #000000;
background: linear-gradient(to bottom, #973F8E, #DC4069);
color: #FFF;
height: 52px;
width: 500px;
padding-left: 0; // remove this
border-radius: 50px;
border: 1px solid #000000;
margin: auto;
display:block;
text-align:center !important;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
list-style: none;
display: block;
text-align: center;
}
#menu ul {
display: inline-block; // and set this
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu a {
display: block;
line-height: 50px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #000000;
background: #FFA6AF;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 52px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 50px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
You can use flex positions.
Use property justify-content : center to center all children div inside a parent div. It's useful to distribute the space between or around the elements.
This will also make your CSS code lighter. The more CSS, the more difficult it is.
It's also good for responsive design.
I have also removed some CSS property. This code can be further improved and reduced. Good luck !
#menu {
background: #000000;
background: linear-gradient(to bottom, #973F8E, #DC4069);
color: #FFF;
height: 52px;
width: 500px;
// padding-left: 18px;
border-radius: 50px;
border: 1px solid #000000;
margin: auto;
// display:block;
// text-align:center !important;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
// list-style: none;
// display: block;
text-align: center;
}
#menu ul {
width: 100%;
display: flex;
justify-content: center;
}
#menu li {
// float: left;
margin : 0px;
display: inline;
// position: relative;
}
#menu a {
display: block;
line-height: 51px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #000000;
background: #FFA6AF;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 52px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 50px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
<nav id="menu">
<input type='checkbox' id='responsive-menu' onclick='updatemenu()'><label></label>
<ul>
<li><a href='/'>DASHBOARD</a></li>
<li><a href='/model'>MODEL</a></li>
</ul>
</nav>
I have the following nav element in my html:
<nav>
<ul>
<li>Unternehmen<div class="navunderline"></div></li>
<li>Leistungen<div class="navunderline"></div></li>
<li>Referenzen<div class="navunderline"></div></li>
<li>News<div class="navunderline"></div></li>
<li>Kontakt<div class="navunderline"></div></li>
</ul>
</nav>
My CSS design for the normal size of the homepage looks like this:
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: 100px;
}
nav ul {
position: absolute;
bottom: 0;
width: 70%;
list-style: none;
padding: 0 15%;
display: flex;
margin: 0;
}
nav li {
width: 125px;
text-align: center;
}
.navunderline {
width: 125px;
height: 0;
margin: 5px 0 0 0;
background-color: #DAD9D7;
transition: 500ms;
}
nav a {
color: #DAD9D7;
}
nav a:hover {
text-decoration: none;
}
nav li:hover .navunderline {
height: 5px;
margin: 0;
}
This works perfectly fine. However, for smaller displays, I want to display the navigation items vertically, so I have the following CSS code:
#media screen and (max-width: 1000px) {
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: auto;
overflow: visible;
padding: 0;
margin: 0;
}
nav ul {
height: auto;
bottom: 0;
width: 100%;
list-style: none;
flex-direction: column;
padding: 0;
}
nav li {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}
.navunderline {
display: none;
}
nav li:hover {
background-color: #8b131f;
}
}
Here is the problem: The height of my nav element in this case is set to auto. If I set a fixed value, it displays correctly. However, I want to adjust it automatically to the size of the content. Problem is, that with height set to auto, the nav element completely vanishes to zero height. How can I set it, so it's height is adjusted by the elements it contains?
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: 100px;
}
nav ul {
position: absolute;
bottom: 0;
width: 70%;
list-style: none;
padding: 0 15%;
display: flex;
margin: 0;
}
nav li {
width: 125px;
text-align: center;
}
.navunderline {
width: 125px;
height: 0;
margin: 5px 0 0 0;
background-color: #DAD9D7;
transition: 500ms;
}
nav a {
color: #DAD9D7;
}
nav a:hover {
text-decoration: none;
}
nav li:hover .navunderline {
height: 5px;
margin: 0;
}
#media screen and (max-width: 1000px) {
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: auto;
overflow: visible;
padding: 0;
margin: 0;
}
nav ul {
height: auto;
bottom: 0;
width: 100%;
list-style: none;
flex-direction: column;
padding: 0;
}
nav li {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}
.navunderline {
display: none;
}
nav li:hover {
background-color: #8b131f;
}
}
<nav>
<ul>
<li>Unternehmen<div class="navunderline"></div></li>
<li>Leistungen<div class="navunderline"></div></li>
<li>Referenzen<div class="navunderline"></div></li>
<li>News<div class="navunderline"></div></li>
<li>Kontakt<div class="navunderline"></div></li>
</ul>
</nav>
Problem is, that with height set to auto, the nav element completely vanishes to zero height. How can I set it, so its height is adjusted by the elements it contains?
This problem is occurring because your ul element has position: absolute. Because of this property, your ul element is no longer "living" in the same space of the normal document layout.
To fix this, you can add this to your media query:
#media screen and (max-width: 1000px) {
nav ul {
position: relative;
/* ... */
}
}
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: 100px;
}
nav ul {
position: absolute;
bottom: 0;
width: 70%;
list-style: none;
padding: 0 15%;
display: flex;
margin: 0;
}
nav li {
width: 125px;
text-align: center;
}
.navunderline {
width: 125px;
height: 0;
margin: 5px 0 0 0;
background-color: #DAD9D7;
transition: 500ms;
}
nav a {
color: #DAD9D7;
}
nav a:hover {
text-decoration: none;
}
nav li:hover .navunderline {
height: 5px;
margin: 0;
}
#media screen and (max-width: 1000px) {
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: auto;
overflow: visible;
padding: 0;
margin: 0;
}
nav ul {
position: relative; /* Add this */
height: auto;
bottom: 0;
width: 100%;
list-style: none;
flex-direction: column;
padding: 0;
}
nav li {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}
.navunderline {
display: none;
}
nav li:hover {
background-color: #8b131f;
}
}
<nav>
<ul>
<li>
Unternehmen
<div class="navunderline"></div>
</li>
<li>
Leistungen
<div class="navunderline"></div>
</li>
<li>
Referenzen
<div class="navunderline"></div>
</li>
<li>
News
<div class="navunderline"></div>
</li>
<li>
Kontakt
<div class="navunderline"></div>
</li>
</ul>
</nav>
I am trying to implement a responsive top navigation bar into my website. After several trials it's still not working properly and I can't understand where I went wrong.
Could you please tell me if there are any mistakes ?
I attached below the script for the top navigation bar and the script for responsive.
Thank you very much for your help.
Turo
#main_nav {
background-color: #FFFFFF;
position: sticky;
top: 0;
position: -webkit-sticky;
margin: collapse;
border-bottom: 0.2em solid #F8FBF9;
z-index: 10;
box-shadow: 0.2em 0.3em 0.8em #E5E4E3;
}
#main_nav ul {
padding: 0;
margin: 0;
text-align: center;
}
#main_nav ul li {
display: inline-block;
width: 19.7%;
}
#main_nav ul li a{
color: #FF0D90;
padding: 1em 0;
font-family: Monaco, monospace;
font-weight: lighter;
font-size: 1.2em;
text-decoration: none;
text-align: center;
display: inline-block;
width: 100%;
}
#main_nav ul li a:hover {
color: #5CA3F9;
background-color: #F8FBF9;
}
.sel_nav{
background-color: #FAFCFB;
}
#media screen and (max-width: 480px) { /* CSS Rules */
body {
width: 100%;
padding: 0;
margin-right: 0;
margin-left: 0;
overflow: scroll;
}
#main_nav {
position: relative;
margin-right: 0;
margin-left: 0;
width: 100%;
height: 100%;
text-align: center;
}
#main_nav ul {
width: 19%;
padding: 1%;
text-align: center;
margin: 0;
}
#main_nav ul li {
display: block;
width: 100%;
vertical-align: middle;
text-align: center;
margin: 0 auto;
margin-left: 120%;
}
#main_nav ul li a {
display: block;
text-align: center;
vertical-align: middle;
padding: 0.5em 3em 0.2em 1.5em;
}
Try the below code, it should work. You had some unnecessary width and padding in your code and you don't need to use display: inline-block; for each and every elements. Here's a cleaner code:
#main_nav {
display: inline-block;
overflow: hidden;
background-color: #FFFFFF;
top: 0;
position: sticky;
position: -webkit-sticky;
margin: collapse;
border-bottom: 0.2em solid #F8FBF9;
box-shadow: 0.2em 0.3em 0.8em #E5E4E3;
width: 100%;
}
#main_nav ul {
list-style-type: none;
text-align: center;
display: flex;
justify-content: space-around;
padding: 0;
}
#main_nav ul li {
display: inline-block;
}
#main_nav ul li a {
color: #FF0D90;
text-decoration: none;
font-family: Monaco, monospace;
font-weight: lighter;
font-size: 1.2em;
padding: 1.5em 1.5em;
}
#main_nav ul li a:hover {
color: #5CA3F9;
background-color: #F8FBF9;
}
#media screen and (max-width: 480px) {
#main_nav {
display: block;
}
#main_nav ul {
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#main_nav ul li {
display: block;
}
#main_nav ul li a {
display: inline-block;
padding: 0.5em 3em;
}
}
<nav id="main_nav">
<ul>
<li>HOME</li>
<li>NATURA</li>
<li>CITTA'</li>
<li>IMMAGINI</li>
<li>CONTATTI</li>
</ul>
</nav>
To test responsiveness, test it out at JSFiddle.
I've built a CSS navbar on the bottom. For some reason, there is this little buffer on the left side, and nothing seems to eliminate it. This prevents my links from centering correctly.
I've tried padding-left: -10px, but it doesn't move left, even when padding-left: 10px DOES move it to the right.
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
footer {
position: fixed;
bottom: 0;
left: 0;
height: 35px;
width: 100%;
font-size: 12px;
background-color: black;
padding-bottom: 25px;
padding-left: 0;
list-style-type: none;
text-decoration: none;
text-align:center;
letter-spacing:2px;
float: none;
}
ul li {
display: inline;
background:url('images/sep.svg') no-repeat top left;
padding-left: 10px
}
a {
text-decoration: none;
list-style-type: none;
color: #DFC184;
a:visited: blue;
}
http://jsfiddle.net/EHXxS/
http://jsfiddle.net/EHXxS/embedded/result/
#nav {
padding:0;
}
seems to fix it. jsFiddle example
I'm having problems aligning two elements. I wish to align the pagination in the middle of the navigational arrows for my two mini content sliders.
Design example of what I require:
http://www.garyrevell.co.uk/student-i/PastedGraphic-8.png
The current WIP in progress live site - http://www.garyrevell.co.uk/student-i/index.html
The CSS
#slider1 { height: 1%; overflow:hidden; padding: 0 0 0 0; }
#slider1 .viewport { float: left; width: 240px; min-height: 190px; overflow: hidden; position: relative; }
#slider1 .buttons { background:url("../images/buttons.png") no-repeat scroll 0 0 transparent; display: inline-block; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 24px; overflow: hidden; position: relative; }
#slider1 .previous { background-position: 0 0; margin-left:5px; }
#slider1 .next { background-position: 0 0; left: 130px }
#slider1 .disable { visibility: hidden; }
#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; width: 230px;}
/* Tiny Carousel - Slider Bullets */
#slider1 .pager, #slider2 .pager { overflow:hidden; list-style: none; clear: top; margin: 0 0 0 45px; }
/*Normal Style*/
#slider1 .pager li, #slider2 .pager li{ float: left; display: block;
}
#slider1 .pager a, #slider2 .pager a { width: 15px;
height: 12px;
width: 12px;
background:url(../images/bullet-norm.png); background-position: left top; background-repeat:no-repeat;
float: left;
text-indent: -4000px;
position: relative;
margin-left: 3px;
color: transparent;
display:inline-block;
cursor: pointer;
}
#slider1 .pager a:hover{
background-position: 0 50%;
}
#slider1 .pager .active {
color: #fff; background-image: url(../images/bullet-selected.png); } /*CURRENT IMAGE HERE*/
#slider1 .overview { list-style: none; position: absolute; width: 240px; left: 0 top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; width: 236px;
}
a.pagenum {margin-top: 12px;}
ul{border:0; margin:0; padding:0;}
Any help would be greatly appreciated.
set
ul.pager{
margin: 0 auto;
display: table; (ife the first line above alone did not work...)
}
Place this code after any of your other .pager referenced code
Also, remove any padding on the .pager class
Please update your css with mine css you will achieve your desired result :-
CSS
#slider1 .pager, #slider2 .pager {
list-style: none outside none;
margin: 0 0 0 45px;
overflow: hidden;
position: relative;
top: -23px;
}
Float left & right respectively the navigational arrows and remove left: 130px; from the second one.
Set equal left & right margin on ul.pager, set text-align: center on it and give its li display:inline-block
You can even align the pagination to be centered
CSS:
.pager-wrapper{
padding: 5px;
height: 23px;
width: something;
float: left;
text-align: center;
}
a {
padding: 10px;
margin: 4px;
border: 1px solid black;
text-decoration: none;
font-size: 1px;
}
a:hover {
background: red;
color: white;
}
.selected {
background: red;
color: white;
}
HTML:
<div class="pager-wrapper" >
<a class="selected" href="#">1</a>234
</div>