i am using opencart i installed a custom footer as it preview my Facebook page and so on .. the problem is that i am using Arabic language so it is an RTL format so my icon in the title is not correct as it is in English it is suppose to be in the right of the text but it is not ...
i tried background-position: 100% 0; but it put the image below the text ...
so any ideas
my website is : www.egy-smoke.com
Update your custom style sheet, so this:
footer #custom-footer > div > div > div h3.facebook {
padding-left: 34px;
background: url(../img/icon-facebook.png) 0px 9px no-repeat;
}
becomes like this:
footer #custom-footer > div > div > div h3.facebook {
padding-right: 34px;
background: url(../img/icon-facebook.png) 100% 9px no-repeat;
}
Repeat the above for other custom items like 'اتصل بنا' and 'احنا مين'
Related
I have basic code with bootstrap and a svg sprit in a header / menu.. and there is a thin gray background line in the icons.
http://codepen.io/anon/pen/dpzKoQ?editors=1100
can you please help. I have tried setting
border-* etc to 0 - and I can fix. I set the colors / background - but some place I am missing something.
some place it is getting the below value from normalize.less
border-image-width: 1 ;
code: please see codepen.
.icon {
display: inline-block;
background-repeat: no-repeat;
background-image: url(https://cdn.rawgit.com/srisitar/test/master/sprite.svg);
}
.icon-facebook {
width: 96px;
height: 96px;
background-position: 0 0;
}
.icon-twitter {
width: 96px;
height: 96px;
background-position: -128px 0;
}
<
div id="home">
<a href=" ">
<img class="icon icon-twitter"></a>
</div>
how do remove the gray line.
thanks
It's because you are using an img tag with no src attribute. Chrome is essentially indicating the size of the container with nothing in it.
If you don't want to place an image between the anchor tags, then don't use an image tag. It's not necessary to place anything between the tags.
Demo here.
You can use div tag with background-image in css instead of using img tag.
I want the navbar to be at the top of the page. (Blogger, Simple Template).
As you can see, I switched the Blogger navbar to "Off".
Add this css code to blogger, either from Layout > template designer > Advanced > Add CSS
or
add directly to Template > edit HTML > b:skin just before ]]>
.navbar {
height: 0;
border: 0;
}
body .navbar{
height: 0;
}
Fix by html (add style="height:0")
<div class="navbar section" id="navbar" **style="height:0"**>
Fix by css:
body .navbar {
height: 0;
padding: 0;
margin: 0;
}
CSS-only fix
You have a div with an ID of navbar (<div class="navbar section" id="navbar">) that is empty and is taking up that space.
If you remove the div or set display: none; on the #navbar div, that space will be removed. Example:
#navbar {
display: none;
}
You will also need to change the margin of .content-outer, as that will create space too (the !important will enable this style to override any others applied to the element). Example:
.content-outer {
margin-top: 0 !important;
}
HTML-only fix (for .navbar)
(Now that the template screenshot has been posted), you can just remove the following code from the template as shown in the screenshot:
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>...</b:widget>
</b:section>
I have a header in my webpage which i need to fix it so that the user can see it from every position of the webpage but have tried to put position:fixed but its not working in my case.
Here is my HTML for the header.Inside this HTML tag i have putted Header Menus.
<div class="header-wrapper">
//Menu item HTML
</div>
Here is the css for the Header div..
.header-wrapper {
position:fixed;
top: 0px;
left:0px;
background: url("../img/new_images/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
z-index: 10000;
width: 100%;
height: 77px;
}
I have posted the basic HTML and Css involved .If anything else is need for more clarity of the post.Please let me know it.
Please help me.
If your other content is behind the header you can solve it like this:
body { padding-top: 77px; }
This adds 77px to the top <body>, the rest of your content is lower but your header is still at its original position. Alternatively you can lower the next element 77px lower using:
#next.element.selector { position:relative; top:77px; } /* OR */
#next.element.selector { margin-top:77px; } /* OR */
#next.element.selector { padding-top:77px; }
If you want to know more about the box model and positioning, you can read about it here and here
Sorry if this question seems trivial, this is the 1st time I've used an svg file, and was unable to resolve the issue with existing Q and A on stack.
I have a logo which is an svg file. I want to make the logo 'clickable' and work as a link to the home page. I initially did this with a jpeg and all worked as expected, but once I switched to an svg the logo does not display (however I verify if I click in that general area the link works). Does anyone have any recommendation on what I need to change so the image displays?
I'm beginning to think this may have to with Azure (while the svg opens locally it does not open through the project, while other image files do.
SVG file was created using inkscape and renders correctly on a browser when opened as a standalone.
JavaScript loads header onto each page:
//Header for Main pages, with Logo
function getHeader()
{
var header='<ul id="hlogob">'+
'<li>Home</li>'+
'</ul>'+
'<h1 > Big Hat</h1>'
document.getElementById("header").innerHTML=header;
}
CSS Styles the header, and link with a background image (want it to be my svg)
/*Header styling and Logo*/
.header
{
background-color:#FAFAEB;
text-align:center;
font-family: Algerian;
color: #37342a;
height:100px;
padding-bottom:10px;
/*border-bottom:5px inset #DCDCDC;*/
margin:0px;
line-height:20%
}
ul#hlogob li
{
display: inline;
list-style: none;
}
ul#hlogob li a
{
color: #999;
text-decoration: none;
}
a.hlogo
{
display: inline-block;
background: url("../Images/bighat4.svg") no-repeat;
background-position: center;
background-size: 100px 70px;
width: 100px;
height: 70px;
text-indent: -9999px;
text-align: center;
margin: 0;
}
a.hlogo:hover
{
border: none;
}
Header is loaded by js onto each page
<header class="header" id="header">
<!--Loaded by Script-->
</header>
<script type="text/javascript">
getHeader();
</script>
The issue as it turns out is not with the code, but with the default settings on azure which do not have mime type for svg. See Use SVG in Windows Azure Websites
I would like the top half of this image to display by default, and then use some CSS to make the image shift upward so that the bottom half shows when the mouse hovers over it. Here is the code and what I've tried, but it is not working. Can anyone help me make this code work?
HTML:
<div id="next">
<img src="images/next3.png" alt="next page">
</div>
CSS:
#next a:hover{background: url('images/next3.png') 0 -45px;}
EDIT:
HTML:
<div id="next">
</div>
CSS:
#next {
height:40px;
width:160px;
background-image:url('images/next3.png');
}
#next:hover{background-position: 100% 100%;}
I think you need to use background-position attribute to achieve this.
CSS
div
{
height:40px;
width:160px;
background-image:url('http://i.stack.imgur.com/OOGtn.png');
}
div:hover
{
background-position:100% 100%;
}
JS Fiddle Example
You can also look into CSS Sprites.
You need to use it as a background in the first place. The <img> is covering the background.
Get rid of the image HTML and just use some CSS like this
a {
display: inline-block;
height: 40px;
width: 160px;
background: transparent url(img.jpg) 0 0 no-repeat;
}
a:hover {
background-position: 0 40px;
}
In this case you will need to remove your <img> tag and consistently use the CSS background attribute for both cases. Also define your height and width width of your a tag with CSS too.