<div id="nav_banner">
<br>
<a class="smoothScroll" href="#home">Home</a>
<a class="smoothScroll" href="#contactme">Email</a>
<br>
<div id="nav_banner2">
<a class="smoothScroll" href="https://twitter.com" target="_blank" title="Twitter">Twitter</a>
<a class="smoothScroll" href="https://facebook.com" target="_blank" title="fb">facebook</a>
</div>
</div>
I am trying to add a background image inside the nav_bannner section of the html page..
here is my css code to do that:
#nav_banner
{
width:100%;
position:fixed;
bottom:0px;
background:white;
left:0px;
right:0px;
height:100px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
font-size:30px;
word-spacing: 50px;
text-align: center;
font-family: Copperplate,Copperplate Gothic Light,fantasy;
background-image:url('images/shsf.png');
}
But when i load the page.. the image is not showing up... the nav banner simply has white background.
Can anyone tell me what is the issue with the code above?
First of all, check the path. The code works well for Chromium (Version 39.0.2171.65 Ubuntu 14.04).
Second, if you have a small image you can embed it directly to css by data-uri https://css-tricks.com/data-uris/
Related
My code is:
<span style="text-align:center; width:80px; display:inline-block;">
<a href="#" target="_blank" style="text-decoration:none;">
img here
<span style="font-size: 13px; color: #301985; display:block; top:5px; position:relative;">content</span>
</a>
</span>
<span style="text-align:center; width:80px; display:inline-block;">
<a href="#" target="_blank" style="text-decoration:none;">
img here
<span style="font-size: 13px; color: #301985; display:block; top:5px; position:relative;">content</span>
</a>
</span>
Problem is:
It is working good in all mail. In outlook 2007 it displayed like this image.
I want content is displayed the below the image. But it is not working in outlook 2007.
I found this url https://www.campaignmonitor.com/css/
Display, float property are not working on outlook 2007. Any other solution to acheive my design?
use <div> in place of <span> I hope it will help...
We are developing application on our iOS,
Inside our html page, there is "Email Results" button. when I click on the button the screen scrolls up immediately.
HTML:
<div class="result-button-wrapper">
<a target="_blank" href="" class="button button-email"><span class="icon"></span>Email Results</a>
</div>
CSS:
.button {
display:inline-block;
padding:12px;
position:relative;
margin:12px;
cursor:pointer;
color:#fff !important;
font-size:16px;
font-weight:bold;
text-decoration:none;
text-shadow:0px 1px 2px #222222;
text-align:center;}
.button.button-email {
display:block;
width:130px;
padding-left:28px;
margin:10px auto 10px auto;}
if I removed the "button" from the class like:
<a target="_blank" href="" class="button-email"><span class="icon"></span>Email Results</a>
, the button works and I can click it
Where is the issue in my CSS.
I notice the class .button does not have a closing bracket. You may want to fix this.
Toggle with the presences of # in the href value. That is href="#". Do not remove "button" from the class when doing this.
EDITED
Using JavaScript, apply javascript:void(0) as the href value.
Example
<div class="result-button-wrapper">
<a target="_blank" href="javascript:void(0)" class="button button-email">
<span class="icon"></span>Email Results
</a>
</div>
Alternatively, you can use jQuery
$('a.button-email').click(function (event) {
event.preventDefault();
});
I suspect I'm doing something stupid but I have some hyperlinks styled as images with css but they don't work as links.
Experimental page is at http://cotswoldplayhouse.co.uk/jm3/index.php/what-s-on
and it's the 'Read more' and 'buy tickets' buttons.
The page is built by php but the html looks like this...
<td>
<div class="sg-read-more">
Find out more
</div>
<div class="sg-book-ticket">
Book Ticket
</div>
</td>
The CSS is this....
div.sg-book-ticket {
display:block;
position:absolute;
background:url(images/buy-ticket.png) no-repeat 0 0;
right:15px;
bottom:2px;
width:80px;
height:40px;
text-indent:-9999px;
}
div.sg-book-ticket:hover {
background-position:0 -40px;
}
The images display correctly and the rollover works, but they aren't links.
What have I missed?
I personally would style the link as opposed to the div
div.sg-book-ticket{
position:absolute;
right:15px;
bottom:2px;
}
div.sg-book-ticket > a{
display:block;
background:url(images/buy-ticket.png) no-repeat 0 0;
width:80px;
height:40px;
text-indent:-9999px;
}
div.sg-book-ticket a:hover{
background-position:0 -40px;
}
if you want the whole div to be clickable, use this :
<td>
<a href="#">
<span class="sg-read-more">
</span>
</a>
<a href="http://www.ticketsource.co.uk/event/70577" target="_blank">
<span class="sg-book-ticket">
</span>
</a>
</td>
Can you try the following?:
<a href="<a href="http://www.ticketsource.co.uk/event/70577" target="_blank" alt="book ticket" />
<img src="images/buy-ticket.png" />
</a>
instead of putting the image in the css?
Please firstly visit my webpage tristans.ml/.. and make your browser window less that 1000px wide, then open the menu and there you have my issue.
I don't know a good way to solve this problem. The code is as follows:
First the media queries in css:
#media all and (max-width:1000px){
#nav_holder{
width:100%;
height:54px;
z-index:2;
}
nav{
}
.first_menu{
display:none;
background:#161619;
}
.logo_b{
top:0;
float:right;
display:block;
}
#logo{
padding:0;
}
#ttrgovina{
width: 200px;
}
#container{
margin-top:54px;
}
}
Then there is the html code (sorry if it's a mess):
<div id="nav_holder">
<div id="logo">
<span class="logo_b" id="nav_button"><img width="55" height="55" src="style/images/menu.png" alt="Menu"></span>
<span class="logo_b" id="cart_button"><img width="55" height="55" src="style/images/cart.png" alt="Cart"></span>
</div>
<nav>
<span id="ttrgovina">Tshop</span>
<ul class="first_menu">
<li>
<a id="menu_1" href="javascript:void();">Komponente</a>
<ul class="second_menu"></ul>
</li>
</ul>
</nav>
</div>
NOTE: the code has been shortened. just li elements removed.
Would you please help me with this issue cause I am hanging on it for quite some time now. I tried also creating 2 menus, but I think this is a waste of time. If you need more data or anything else, just comment the post.
I am developing a website having a sidebar nested lists. Parent li has children li structure. On first display 4 li (list items) are displayed and above 4 item should be hidden with a link to "Show All" option.
html codes:
<div id="sideMenuBox">
<div class="header">
<h2 class="cufon">KATEGORİLER</h2>
<a class="moreLink" href="#" title="">Tümü</a>
</div>
<div class="body"> <!-- menubox body -->
<ul id="sideMenu">
<li>
<span><img src="images/icon-1.png" alt="icon" width="32" height="19" /></span>
Alışveriş Merkezleri
<ul>
<li>Online Alışveriş Siteleri</li>
<li>Kuyumcular</li>
<li>Hediyelik Eşya</li>
<li>Çiçek Sektörü</li>
<div class="sbSubMenu" style="border:black 1px solid">
<li>Kuyumcular</li>
<li>Kuyumcular</li>
<li>Kuyumcular</li>
<li>Kuyumcular</li>
</div> <!--// sidebar submenu -->
<li><a class="showAll" href="javascript:" title="" onclick="javascript:showMenu(this);">show all</a></li>
</ul>
<br class="clearFix" />
</li>
</ul>
</div> <!-- // menubox body -->
<div class="bottom"></div>
</div> <!-- // sideMenuBox -->
and CSS codes are:
#sideMenu {
width:200px; height:auto;
margin:10px auto;
}
#sideMenu li{
list-style-type:none;
min-height:25px;
line-height:18px;
height:auto;
border:blue 1px solid;
}
#sideMenu hr { width:100%; height:1px; color:#e69000; background:#e69000; margin:10px auto 5px; border:0;}
#sideMenu li span { width:40px; float:left;}
#sideMenu li a{
color:#003a69;
text-decoration:none;
font-size:16px;
font-weight:bold;
margin:0; padding:0;
}
#sideMenu li li {
margin-left:50px;
display:inline-block;
line-height:20px;
border:red 1px solid;
}
#sideMenu li li a { font-size:13px; height:1px;}
#sideMenu li li a.showAll,
#sideMenu li li a.showLess{
color:006aa6;
text-decoration:underline;
font-size:12px;
font-weight:normal;
margin:10px 0;
padding-right:15px;
background:url(../images/arrow-down-blue.png) right center no-repeat;
}
#sideMenu li li a.showLess{ background:url(../images/arrow-up-blue.png) right center no-repeat;}
#sideMenu .sbSubMenu {
width:100%; height:auto;
}
These codes are working fine in Firefox, Chrome, and IE8 but in IE7 is included in li. and lis included in are rendering out of div that is breaking the layout. If I remove the from the codes then its working fine but to meet the requirements of the project i have to hide list items after four thats why i have enclosed the list items in a div to be hidden by default.
I have setup a online demo page to resolve this problem and to get the experts advise. You can see this page live demo page: http://tinyurl.com/7pqo5ob
Note: I have added some borders to understand how list items and divs are rendering in IE. Its working fine in other browsers but not good in IE7. I have tried many options but in vain.
Please advise.
Thanks in advance.
Thank you very much for being concerned. I tried many tricks and finally i got it. Actual problem was in nested unordered list and list items structure. In the inner structure of "LI" i placed a "DIV" tag to be hidden by default. This was the point where IE 7 start breaking the layout. If i remove the "DIV" tag then it was okay but in project requirements the "DIV" should be there for hiding the "LI"s.
After many hours of frustration, I tried to change the "DIV" to "LI" and its working fine in IE7 and in other browsers too.
Final codes are:
<ul id="sideMenu">
<li>
<span><img src="images/icon-1.png" alt="icon" width="32" height="19" /></span>
Alışveriş Merkezleri
<ul>
<li>Online Alışveriş Siteleri</li>
<li>Kuyumcular</li>
<li>Hediyelik Eşya</li>
<li>Çiçek Sektörü</li>
<li class="sbSubMenu"> <!-- hidden list items -->
<ul>
<li class="innerList">Kuyumcular</li>
<li class="innerList">Kuyumcular</li>
<li class="innerList">Kuyumcular</li>
<li class="innerList">Kuyumcular</li>
</ul>
</li> <!-- // sidebar submenu -->
<li class="Link"><a class="showAll" href="javascript:" title="" onclick="javascript:showMenu(this);">show all</a></li>
</ul>
</li> <!-- // main List Item --->
</ul>
and you can check this page live working fine with IE7.
Link: http://www.designforce.us/demo/kktc/index.html
Thanks