I have problems scaling a svg in Internet Explorer 10-11. It works in other browsers.
Html:
<ul>
<li>English <img src="https://lipis.github.io/flag-icon-css/flags/4x3/gb.svg" alt=""></li>
</ul>
CSS:
li img {
width: 19px;
height: 13px;
}
How can I scale the image so that it fits to the desired width in IE10+11?
See this fiddle.
You can put your image in a container and specify width and height on this container.
HTML
<ul>
<li>
<a href="#">
English
<div class="img-container">
<img src="https://lipis.github.io/flag-icon-css/flags/4x3/gb.svg" alt="">
</div>
</a>
</li>
</ul>
CSS
li .img-container {
width: 19px;
height: 14px;
}
li img {
max-width: 100%;
max-height: 100%;
display: block;
outline: none;
border: none;
}
https://jsfiddle.net/6e47sxhg/5/
Related
I've been working on a design with three links spanning the width of the device on mobile. I can't figure out why I can't get the spacing right. What looks off?
Here's the design :
And here's what the coded version is looking like :
Here's my CSS :
.b-nav-Wrapper {
width: 100%;
}
.b-nav {margin: 0 auto;}
.b-nav ul {
list-style: none;
}
.b-nav ul li{
display: inline-block;
width: 33.33%;
}
.b-nav ul li a{
text-decoration: none;
color: rgb(151,151,151);
}
.navNumber {
float: left;
width: 20%;
font-family: "korolev-condensed",sans-serif;
font-size: 2.5875em;
opacity: .50;
}
.navLink {
float: right;
width: 65%;
padding-top: 4px;
font-family: "mrs-eaves-xl-serif",sans-serif;
font-size: 1.2em;
line-height: 1em;
font-style: italic;
font-weight: 500;
}
*edit: here's my HTML :
<nav class="b-nav-Wrapper cf">
<div class="b-nav">
<ul>
<li class="active">
<a href="#">
<p class="navNumber active">01</p>
<p class="navLink active">Now Reading</p>
</a>
</li>
<li>
<a href="#">
<p class="navNumber">02</p>
<p class="navLink">Browse My Books</p>
</a>
</li>
<li>
<a href="#">
<p class="navNumber">03</p>
<p class="navLink">Notes & Quotes</p>
</a>
</li>
</ul>
</div>
</nav>
You didn't put your html, that makes us guessing about it. But if .b-nav ul li is referred to numbered parts, you should try width less than 33.33%. Because just 1px margin or padding of other elements cause it to break into two lines. If it doesn't solve, put your link or html.
Working on this site:
https://voyagers.wildapricot.org/
Trying to get the font awesome arrow to the right of the menu nav items (which indicates there are sub-pages) to show up immediately to the right of the text instead of with a giant space in between text and arrow.
Would appreciate any help, thank you!
Technically, this is how you would do it:
Step 1: in the following CSS rule, change the display value to inline-block.
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a {
display: inline-block;
text-decoration: none;
text-align: center;
vertical-align: top;
white-space: nowrap;
position: relative;
font: normal 18px/26px Oswald, Helvetica, sans-serif;
overflow: hidden;
}
Step 2: In the following rule, change the right-padding to 15px (the second value in the padding rule).
.WaGadgetMenuHorizontal.menuStyle004 .menuInner ul.firstLevel > li > .item > a > span {
padding: 15px 15px 15px 10px;
...
}
Step 3: In the following, change the right offset to 0 (or equivalently 0px).
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.dir > .item > a::after {
content: "\f107";
font-family: FontAwesome;
color: white;
position: absolute;
display: inline-block;
top: 15px;
right: 0px;
}
I am assuming that you have access to all the CSS stylesheets in your content management system (web builder platform).
If not, you need to add these rules to override the pre-existing rules, so you need to learn how to do that first. You may need to get help from the tech support people where you are hosting.
Note: I went to your website using Firefox and I inspected the various elements and tried out these three steps and that did the trick. Make sure
to check out the other major browsers (Chrome and IE).
Keep in mind that these changes will change the overall look of the navigation so you may have other visual side effects that may not be suitable for your design.
Aside: the HTML in questions looks like the following (I omitted a few wrapping div's):
<ul style="" class="firstLevel">
<li class="sel">
<div class="item"><span>Home</span></div>
</li>
<li class="">
<div class="item"> <span>Coop</span> </div>
</li>
<li class="dir">
<div class="item"><span>Resource Center</span>
<ul class="secondLevel">
<li class=" ">
<div class="item"><span>Home (Demo)</span></div>
</li>
</ul>
</div>
</li>
<li class="">
<div class="item"> <span>Events</span> </div>
</li>
<li class="dir">
<div class="item"> <span>About Us</span>
<ul class="secondLevel">
<li class=" ">
<div class="item"> <span>Donate</span> </div>
</li>
</ul>
</div>
</li>
<li class="last-child">
<div class="item"> <span>Volunteer</span> </div>
</li>
</ul>
i restructured so that it works but you have to adapt it to your case
.dir {
height: 40px;
width: 100%;
}
.item {
width: inherit;
height: inherit;
}
a {
background: blue;
height: 100%;
width: 100%;
position: relative;
display: block;
}
a:hover {
background: red;
cursor: pointer;
}
span {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
span:after {
content:"<";
position: absolute;
right: -20px;
}
<li class="dir">
<div class="item">
<a href="https://voyagers.wildapricot.org/Resource-Center" title="Resource Center">
<span>Resource Center</span>
</a>
</div>
</li>
<div class="nav">
<ul class="nav">
<a class="nav" href="#">
<li class="nav">item1</li>
</a>
<a class="nav" href="#">
<li class="nav">item2</li>
</a>
<a class="nav" href="#">
<li class="nav">item3</li>
</a>
</ul>
<div class="line"></div>
</div>
This is my HTML navbar
CSS:
ul.nav {
display: inline-block;
font-size: 0;
}
li.nav {
display:inline-block;
border-bottom: 2px solid gray;
padding: 15px 20px;
text-align: center;
font-size: 16px;
}
div.nav {
width: 100%;
display: inline-block;
}
How do I style the div.line so it is exactly next to the list (right), fills the rest of the page (width) and has the same height as the ul.nav/div.nav?
Thanks,
First of all, sorry about the english level!
You can do something like:
.line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: gray;
}
e.g: http://jsfiddle.net/X8fE4/
That's basically turn the div.line into an absolute alement behind your navigation. It will have the width of the parent div.nav, it's not a beautiful solution, but is well supported :)
this might help you:
preview: http://jsfiddle.net/webcarvers/7uZgW/3/embedded/result/
code: http://jsfiddle.net/webcarvers/7uZgW/3/
JS:
$(document).ready(function(){
$("div.two").css({
//-2 is for border width
"width": ($(window).width() - $("div.nav").outerWidth() - 2) + "px",
"height": ($("div.nav").height()-2) + "px"
});
});
div.nav {
display: flex;
display: ms-flex;
display: -webkit-flex;
{
Edit: You also need to add the property flex-grow to .line.
.line {
flex-grow: 1;
}
http://jsfiddle.net/eWHnU/
I have a few work thumbnail divs in a container When I hover over one specific one, it shifts the ones after it along the next row. How can I resolve this?
HTML:
<div class="blog-container">
<h1>PRINT</h1>
<div class="work_thumbs">
<li class="print">
<div><img src="../Images/Tree Top News/Thumbs/TTN2.jpg" alt="Tree Top" border="0" class="thumb">TREE TOP NEWS</div>
</li>
<li class="print">
<div><img src="../Images/Harrow Council/Thumbs/Harrow Logo.jpg" alt="Harrow Council" border="0" class="thumb">HARROW COUNCIL</div>
</li>
<li class="print">
<div><img src="../Images/Regent/Thumbs/Regent logo.jpg" alt="Regent Care" border="0" class="thumb">REGENT CARE SERVICES</div>
</li>
<li class="print">
<div><img src="../Images/NLCS/Thumbs/NLCS logo.jpg" alt="NLCS" border="0" class="thumb">NLCS</div>
</li>
<li class="print">
<div><img src="../Images/Aish/Thumbs/AHC.jpg" alt="Aish" border="0" class="thumb"> AISH</div>
</li>
<li class="print">
<div><img src="../Images/FJL/Thumbs/FJL.jpg" alt="chicago graphic design" border="0" class="thumb">FJL</div>
</li>
<li class="print">
<div><img src="../Images/Tree Top News/Thumbs/TTN.png" alt="Canons high school" border="0" class="thumb">CANONS HIGH SCHOOL</div>
</li>
</div>
</div>
CSS:
.blog-container {
height: 100%;
width: 100%;
margin-top: 37px;
background-color:
}
.work_thumbs {
width:1000px;
margin: 0px auto 0 auto;
float: left;
}
.work_thumbs li {
margin: 0px 15px 15px 0px;
list-style-type: none;
display: block;
float: left;
display: inline;
font-family: "geogtq md";
color: #FFF;
overflow: hidden;
}
.work_thumbs li a {
float: inherit;
display: block;
width: 230px;
padding-bottom: 50px;
font-family: "geogtq md";
color: #00BDE5;
height: 200px;
border: 1px solid #02BDE5;
overflow: hidden;
}
.work_thumbs li .type {
color: #01BDE6;
}
.work_thumbs li a:hover {
background-color: #ceeef6;
border-bottom: 1px solid #a2a2a2;
text-decoration: none;
margin-bottom: -1px;
color: #007789;
font-family: "geogtq md";
}
.work_thumbs li .thumb {
margin-bottom: 15px;
display:block
}
element:hover{url('pathToImg.png'); position:relative; z-index:1;}
Make z-index:1 a higher index to suit your needs, and include a height and width as well.
You are changing the dimensions of your divs upon hover, by adding the negative margin-bottom. this causes your floating divs to 'hook' upon hover, in stead of starting at the left.
Here you can see it in action: http://jsfiddle.net/P8xEN/
Please help me to solve my problem.
I need to make head menu with pictures.
Now i have:
What i need to do:
My HTML code here:
<div id="head">
<div class="site_info">
<div id="tabs">
<ul id="tabMenu">
<li class="dropdown">
<div><a class="tab1">поиск по производителю</a></div>
</li>
<li class="dropdown">
<div><a class="tab2">поиск по назначению</a></div>
</li>
<li class="dropdown">
<div>
<span id="more_search"></span>
<a class="tab4" href="/emarket/cart/">покупки</a>
</div>
</li>
<li class="dropdown">
<div><a class="tab3">сравнение</a></div>
</li>
<li class="dropdown">
<div><a class="tab3">кабинет</a></div>
</li>
</ul>
</div>
</div>
<div class="work" umi:element-id="40">
<div umi:field-name="order_info_top"></div>
</div>
</div>
CSS:
#main #head div.site_info {
padding-top: 45px;
}
#main #head div.site_info ul {
width: 50%;
margin: 0 auto;
min-width: 1024px;
}
#main #head div.site_info ul li {
display: inline;
margin-right: 18px;
}
#main #head div.site_info ul li a.tab1 a.tab2 a.tab3 a.tab4 {
float: left;
margin-left: 89px;
}
Give a height and width to the individual menu. Then add a style with your image as its background. Position the backgruond image top center.
HTML
<div>
<ul>
<li class="dropdown"><div><a class="tab1">Menu 1</a></div></li>
<li class="dropdown"><div><a class="tab2">Menu 2</a></div></li>
</li>
</ul>
</div>
CSS
li
{
list-style: none;
float: left;
width :100px;
}
.dropdown .tab1
{
background : url('http://www.indievisionmusic.com/wp-content/themes/indievisionmusic/images/at_symbol_10x10.gif') no-repeat top center;
padding-top: 10px;
}
.dropdown .tab2
{
background : url('http://www.gigabyte.us/images/icon_blue.png') no-repeat top center;
padding-top: 10px;
}
DEMO
Just change your text for <img src="images/image.jpg">
And if you want it to be a link: <img src="images/image.jpg" width="100" height="100"/>
you could just use images instead of text and add in the image using the CSS backgroundd feature
li a.tab1 { background: url(); width:XXpx; height: XXpx }
li a.tab2 { background: url(); width:XXpx; height: XXpx }
li a.tab3 { background: url(); width:XXpx; height: XXpx }