I have applied ie PNG from here: http://www.twinhelix.com/css/iepngfix/
So I can use transparent PNG background images in my CSS. It works on divs but the problem is when I give a transparent background to unordered list (ul) it doesn't work.
Here is the markup:
<div id="footer">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<p>© 2009 Your Name</p>
</div>
And here are relevant parts of the stylesheet:
/* IE PNG fix */
img, div, ul { behavior: url('/css/iepngfix/iepngfix.htc') }
#footer {
width: 876px;
margin: 0 auto;
background: none;
text-align: center;
line-height: 1.5em;
font-size: .8em;
}
#footer ul {
padding: 40px 0 13px;
background: url('wrapper-bottom.png') center top no-repeat;
}
#footer p {
padding-bottom: 15px;
}
I also tried adding background: transparent; to the #footer div but with no success. Other PNG images applied to divs work but under the wrapper-bottom.png there is a grey background (#333) which is a background of most website content areas but I specifically declared background: none; for the #footer so there should be none :(
EDIT: Actually when I don't specify height for the #footer div, the whole footer has grey background...
EDIT: I actuallly managed to solve this myself few minutes after I posted this. I used a very ugly hack though:
#footer {
height: 0;
}
#footer ul {
height: 30px;
}
This seems to work in all IE versions.
Try using Unitpng Fix.
Its easy to implement and works with background png too...
Check out this link
Related
I've been reading online and have come across numerous blogs and 'Professionals' that say you should not set heights and you should allow your content to fill the element instead. First of all.. why?
And also how can i allow my background colour to show on my header if i don't specify a height without using absolute or fixed position with top:0.
Here is my code:
HTML:
<header>
<div class="row-std">
<div class="logo">
<img src="images/logo.png">
</div>
<nav>
<ul id="navbar">
<li class="nav-item">LINK 1</li>
<li class="nav-item">LINK 2</li>
<li class="nav-item">LINK 3</li>
<li class="nav-item">LINK 4</li>
<li class="nav-item">LINK 5</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
width: 100%;
background: #2f3842;
position: absolute;
top: 0;
}
header div.logo img {
float: left;
width: 20em;
margin-top: 1.5em;
margin-left: 1em;
}
header nav {
float: right;
}
header nav ul#navbar a {
text-decoration: none;
list-style-type: none;
color: #ebebeb;
border: 0;
transition-duration: .25s;
-webkit-transition-duration: .25s;
}
header nav ul#navbar a:visited {
color: #ebebeb;
}
header nav ul#navbar a:hover, header nav ul#navbar a:active {
color: #16a085;
}
header nav ul#navbar .nav-item {
display: inline-block;
padding: 0.3125em 0.3125em;
margin: 2.5em 1em;
font-size: 0.84em;
font-weight: 600;
}
As you can see the header currently has the absolute position with a top property value of '0'. This works for allowing the header to show the background colour and allow the element to be filled in terms of its height by its content but if i was to display an another element beneath this i cannot really do so as it will be displayed under it unless i use a margin-top of 5.5em perhaps to push the element down into its correct position which works fine, but this feels tacky. Is there a better way of doing this.
Having unnecessary heights on elements in responsive designs can result in overflowing content on different screen resolutions and it's generally a good idea to not specify heights and let your content dictate the height of an element.
That being said, there are always circumstances where you need to manually specify heights of elements (usually these circumstances are where elements have no intrinsic height, like when specifying background images on elements with no other content, but other cases do exist).
Exceptions prove the rule. Bottom line when developing responsive sites, don't specify heights...unless you have to :).
How can I add an icon in front of a specific list item?
<ul class="rightNav2">
<li id="homeLnk">Home</li>
</ul>
I have the following style for the list items already and I want to add a specific icon in front of one of the items. The image however does not appear.
.rightNav2 li {
display: inline;
padding-right: 6px;
padding-left: 6px;
color: white;
}
.rightNav2 #homeLnk {
list-style-image: url('/images/homeIcon.png');
}
There are several methods to add an image to a list item.
Here is one using a background image. http://jsfiddle.net/p05g14zm/
rightNav2 li {
display: inline;
padding-right: 6px;
padding-left: 20px;
color: white;
}
.rightNav2 #homeLnk {
background-image: url('http://i.stack.imgur.com/vQ4nM.jpg?s=32&g=1');
background-repeat: no-repeat;
background-size: contain;
}
Try
.rightNav2 #homeLnk:before {
content: url('/images/homeIcon.png');
}
Also you might want to make sure that the image path is correct.
Please check out my codepen... I believe this may help you:
http://codepen.io/anon/pen/myRWmZ
html:
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
<ul>
<li>Link 1</li>
<li class="home">Link 2</li>
<li>Link 3</li>
</ul>
CSS:
ul {
list-style-type: none;
}
li.home::before {
font-family: FontAwesome;
content: "\f015";
margin-right: 3px;
}
li.home {
margin-left: -18px;
}
So what I did was place an icon using the :before selector. The margin adjustments are meant to ensure that each of the list items still align properly.
The css below would add an icon to the left of the home li element.
.rightNav2{
list-style:none;
padding:0;
margin:0;
}
.rightNav2 li{
padding:0;
margin:0;
}
.rightNav2 #homeLnk {
padding-left: 35px;
/* padding-left above is the width of the icon plus any whitespace between text */
min-height:10px;
/* min-height above is the height of the icon */
background-image: url('/images/homeIcon.png') no-repeat center left;
}
I would as in the answer above recommend considering icon fonts if this a responsive site.
Background images on zoom can become very grainy.
Problem
The list-style-image property determines whether the list marker is
set with an image, and accepts a value of "none" or a URL that points
to the image: ~css tricks
This means that, rather than applying this styling to the li, you're meant to apply it to the parent ul. Something like:
ul {
list-style-image: url(images/bullet.png);
}
So you can't place it on a single element using just this syntax (unless you wanted to use the :first-child selector (not tested))
My Solution
This solution may or may not be of use to you, but it's using pseudo effects (meaning no real 'extra' elements need to be added). The pseudo element would also be clickable, too (with no need of worrying about image sizing, as this would do it for you):
.rightNav2 li {
display: inline;
padding-right: 6px;
padding-left: 6px;
position: relative;
display: block;
/*only for demo*/
}
.rightNav2 #homeLnk a:before {
content: "";
height: 100%;
width: 20px;
left: -20px;
top:0;
position: absolute;
background: url(http://placekitten.com/g/20/20);
}
<ul class="rightNav2">
<li id="homeLnk">Home
</li>
<li>another link
</li>
<li>and another link
</li>
</ul>
Sorry, I'm really new to HTML5 and CSS3 and my searches haven't turned up anything to what I'm sure is a really basic thing. What I'm trying to do is create a row of clickable images / links for my website. Much like how stack overflow has there questions, tags users links above.
So far my css looks like the following:
a#header {
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url('img url') no-repeat bottom;
width: 50px;
height: 100px;
}
But this isn't doing what I'm after. It's only placing the image in the centre of the screen. Could someone please help me? Also, is there a best practise for doing something like this?
The margin:0 auto is what is putting it in the center of the screen. You will probably want to drop this, or put it on the container element rather than the individual boxes.
What you probably want for putting several boxes in a line is either float:left or display:inline-block. Either of these will work; they work differently, and there are things you need to know about both of them in order to get the layout working the way you want it, but I'll leave those extra details for you to do further research on.
It's worth noting that none of the code you quoted is specific to HTML5 or CSS3 -- it's all basic HTML/CSS syntax that has been around for a long time.
Since you didn't provide any markup, I'll use the stackoverflow example you cited:
<div class="nav mainnavs ">
<ul>
<li class="youarehere">Questions</li>
<li>Tags</li>
<li>Users</li>
<li>Badges</li>
<li>Unanswered</li>
</ul>
</div>
While you could use your own divs to do this markup, this is the most semantic and concise way of representing a navigation list.
To style this list the way you want, you only need to apply the following styles:
.nav ul {
list-style-type: none;
}
.nav li {
display: block;
float: left;
}
.nav a {
display: block;
padding: 6px 12px;
/* Any other styles to disable text decoration, etc. */
}
Then just position the .nav container where ever you want on the page.
If you're lazy like me, you can put a few <a> tags in a <header> or <nav>, and use display: inline-block.
http://jsbin.com/ivevey/3/edit
HTML
<header>
<a href></a>
<a href></a>
<a href></a>
<a href></a>
<a href></a>
</header>
CSS
header {
text-align: center;
}
header > a { /* assuming a <header> contains your <a> tags */
display: inline-block; /* make sure every image/link is treated like text, ltr */
width: 15px; /* width/height or padding. either works */
height: 15px;
background-color: red; /* This should work for a 15px x 15px image instead */
}
Just be careful of the space between the links. Those are whitespace characters. I generally use header {font-size: 0;} to clear that up.
Ideally, I'd have a structure where there's a <ul> in a <nav>, since it is a list of navigation links, after all.
Maybe something like this?
http://jsfiddle.net/MRayW/6/
<nav>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
</nav>
a[id^='header_'] {
border: none;
background: url('xxx.jpg') no-repeat bottom;
width: 50px;
height: 50px;
text-align:center;
color:red;
list-style:none;
float:left;
margin:5px;
}
ul {
padding:0px;
margin:0px;
background-color:#EDEDED;
list-style:none;
background: none repeat scroll 0 0 red;
height: 60px;
margin: auto;
width: 420px;
}
nav {
margin:0 auto
width:500px;
}
I haven't really ever done a background navigation rollover, I usually just change the colour of the text once it's been rolled over. However I'm try to do this now but can't seem to get it right.
I'm trying to do it all with CSS as I believe there is a way however I do see a lot of others using sprites and image rollovers. Which way is the best? I might end up having a lot of images on my website so I'm trying to stay away from them so I myself, am thinking strictly CSS. There is a way right?
This is my website
CSS
#main-navigation { width: 100%; height: 100px; background: url(../img/NAV-BG.jpg) top center no-repeat; text-transform: uppercase; font-size: 1em; letter-spacing: 1px; line-height: 90px; /*border: 1px solid #000;*/ }
#main-navigation ul { width: 860px; list-style: none; margin: 0 auto; text-align: center;}
#main-navigation li { float: left ;margin-left: 30px; }
#main-navigation li a { display: block; text-decoration: none; color: #000; }
#main-navigation li a:hover { color: #c7bd89; background-color: #900; width: 120%; height: 30px; -moz-border-radius: 5px; border-radius: 5px; margin: 0 auto; margin-top: 20px;}
HTML
<nav id="main-navigation">
<ul id="main-nav-left">
<li class="current">Home</li>
<li>About</li>
<li>Current Season</li>
<li>Past Seasons</li>
<li>Contact</li>
<li>Partners/Sponsors</li>
</ul>
</nav>
But I want it to look like this
What am I missing?
Use this
#main-navigation li a:hover {
color: #c7bd89;
background-color: #900;
width: 120%;
line-height: 30px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: 30px;
}
All the problem is that you're defining a height ... You should define a line-height instead and it will work flawlessly ... But I still can find a space for improvement in terms of padding and margin.
see the fiddle for code and demo
fiddle: http://jsfiddle.net/quR4E/3/
demo: http://jsfiddle.net/quR4E/3/embedded/result/
screen shot:
Try changing your #main-navigation li a to this:
#main-navigation li a {
/*display: block;*/
text-decoration: none;
color: black;
padding: 5px;
}
Using display block was pushing the text outside the box. Adding the padding will give you some spacing around the text.
Sprites are definitely better than using multiple images but in the end they are essentially going to be the same thing. If you can create your images small enough (for bandwidth performance) it won't affect your site that much. Sprites are nice to group images. Using background colors and borders around text is also a very efficient way to go.
Have a look at what I did here: http://torontobanfffilmfest.com/splash
Each of the eight blocks has a single image in two versions, one light and one dark, attached side-by-side. In the top-left corner, for example, is an image, splash_buy_tickets_m.png, that is 582 pixels wide. But the space in which it's displayed is 291 pixels wide. We only see half the full image, and WHICH half depends on :hover.
The CSS that makes the image change on rollover is pretty simple:
#b1:hover, #b2:hover, #b3:hover, #b4:hover, #b5:hover, etc. {
background-position: -291px 0;
}
If each of the buttons in your button bar consists of an "active" and an "inactive" version, then you can just change the image position within the DIV in which it's shown, shifting horizontally or vertically.
I have made a website that uses unordered lists. These lists use an image (ticks on some ul's, crosses on the others) that use the list-style-image attribute in CSS. It works fine in all the browsers, except for IE7.
When the page is viewed in IE7 the lists are displayed as they should be, but it doesn't display the image, which is strange as all the other browsers (IE8, IE9, Chrome, Firefox, even Safari) pick it up and display it.
Here's the CSS:
#carousel ul.benefits {
float: right;
width: 573px;
margin-right: 18px;
margin: 0px;
margin-top: 10px;
padding: 0px;
padding-left: 30px;
}
#carousel ul.benefits li {
font-family: "OpenSansRegular",Tahoma,sans-serif;
font-size: 1.8em;
font-weight: normal;
color: #bdbdbd;
list-style-image:url('images/white-tick.png');
float: left;
width: 100%;
}
The HTML:
<ul class="benefits">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
It's a strange issue and one I've never come across before.
There is a known bug in IE7 regarding this. A floated list-item will not display any list marker image.
You could probably achieve the same thing using a background image and some padding, though.
Update
Here is a sitepoint reference link : http://reference.sitepoint.com/css/list-style-image#compatibilitysection
As Leo said, you'll have to use a background image:
#carousel ul.benefits li {
background: url("images/white-tick.png") no-repeat 2px 5px transparent; /*adjust 2px & 5px until it looks correct */
display: block;
padding: 2px 4px 2px 20px; /*adjust until you have enough left padding to account for your bullet */
}