<div id="navigation>
<ul class="navlist">
<li><img src="images/btn1.gif"/></li>
<li><img src="images/btn2.gif"/></li>
<li><img src="images/btn3.gif"/></li>
</ul>
</div>
How would I be able to give these "buttons" within the list rollover states without using JS? I'm totally drawing a blank...
These links must be images.
If you're supporting newer browsers (browsers that support the :hover selector on all elements, which is basically everything except IE6, see here) you can do this with CSS provided you change your HTML. You will need to remove the img tags, and instead use background images.
CSS (this is the simple example with 2 images, you'll need to set the height + width. If you have many different images, you'll need a css class for each of them):
<style type="text/css">
.navlist li { width: 32px; height: 32px; background-repeat: no-repeat; background-image: url('images/image1.gif'); }
.navlist li:hover { background-image: url('images/image2.gif'); }
</style>
HTML:
<div id="navigation">
<ul class="navlist">
<li></li>
<li></li>
<li></li>
</ul>
</div>
There's a lot of ways to do this. Basically, move one image off the screen when you hover. Or you could change the z-index of two images on top of each other when you hover, or you could do it with background images, or with the display option.
I prefer using the display option, since the CSS is quite simpple.
Since it's done with classes you can just add as many buttons as you want.
Here's the code for a page that contains the HTML and CSS together.
The DOCTYPE declaration is necessary to make it work in IE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/\xhtml1/DTD/xhtml1-strict.dtd">
<head>
<style type="text/css">
a img {
border:none;
}
ul {
list-style-type: none;
}
img.defaultSt {
display: inline;
}
img.hoverSt {
display: none;
}
li:hover img.defaultSt {
display: none;
}
li:hover img.hoverSt {
display: inline;
}
</style>
</head>
<body>
<div id="navigation">
<ul class="navlist">
<li>
<img class="defaultSt" src="http://mrg.bz/vh60HV" />
<img class="hoverSt" src="http://mrg.bz/CcDOmL" />
</li>
</ul>
</div>
</body>
</html>
You could try using a transparent image as the link primary and then use css to alter the background
<style type="text/css">
a.img1, a.img1:link { background-image: url(images/btn1.gif); }
a.img1:hover { background-image: url(images/btn1_over.gif); }
a.img2, a.img2:link { background-image: url(images/btn2.gif); }
a.img2:hover { background-image: url(images/btn2_over.gif); }
a.img3, a.img3:link { background-image: url(images/btn3.gif); }
a.img3:hover { background-image: url(images/btn3_over.gif); }
</style>
<div id="navigation>
<ul class="navlist">
<li><a class="img1" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
<li><a class="img2" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
<li><a class="img3" href=""><img src="images/transparent_image.gif" width="x" height="y"/></a></li>
</ul>
</div>
You just have to keep in mind the size of the images in question.
Related
I am making an image slider with jquery and for that purpose I am trying to align images in one line with li tag using css but it's not happening the way I want.
I want to slide from left to right when the first image reach in the middle then the second image comes in, this Image shows exactly what I want.
<div id="divFrame">
<ul id="ulId">
<li class="service-list"><img src="images/a.jpe"></img></li>
<li class="service-list"><img src="images/b.jpe"></img></li>
</ul>
</div>
css
#divFrame
{
width: 311px;
height: 333px;
background-color: gray;
position: relative;
margin-left: 20%;
overflow: hidden;
}
img{
float: left;
}
.liClass {
list-style-type: none;
margin-left:0px;
padding-left:0px;
display: inline-block;
}
if I remove the overflow hidden property from divFrame and decrease the divFrame then it shows images like below, and why It's creating weird gap on left and top.
if I increase the divFrame size more then these two images then it shows like that
<html>
<head>
<script src="jquery.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<html>
<body>
<div id="divFrame">
<ul id="ulId">
<li class="service-list"><img src="http://placehold.it/200x200" />
</li>
<li class="service-list"><img src="http://placehold.it/200x200" />
</li>
</ul>
</div>
</body>
</html>
Correct your markup.
there's no such thing as an </img> tag. IMG tags are self-closing. The proper way to close an img tag is to use <img src="" />.
Your CSS targets a class titled .liClass, but that class is nowhere in your posted HTML.
With cleanup, and correction, removing the CSS for the images and actually targeting the li items via a class, display: inline-block; should correct this issue. Note that I also added white-space: nowrap; to the ul CSS.
jsFiddle example
(with corrections)
The layout I want to achieve is the following, one large image with a gallery of four thumbnails below it:
I'm using a Javascript gallery to actually display a full screen gallery, activated when clicking on this element.
The problem is that the gallery script expects the images as direct children in an unordered list, all of them including the one that is the big image in my layout:
<ul>
<li data-src="img1.jpg">
<img src="thumb1.jpg" />
</li>
<li data-src="img2.jpg">
<img src="thumb2.jpg" />
</li>
</ul>
The first <li> is the big image, all the others are small thumbnails.
Is there a way to achive my desired layout while still having all the images in the unordered list? If I could break up the list this would be easy, but that wouldn't be recognized by the gallery script anymore.
Is it possible to achive this layout without changing the underlying structure of the list?
I suggest using float: left and display: block on li, and float: none on li:first-child:
ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
li
{
margin: 2px 5px;
display: block;
float: left;
}
li:first-child
{
float: none;
}
<ul>
<li>
<img src="http://lorempixel.com/g/430/430/" />
</li>
<li>
<img src="http://lorempixel.com/g/100/100/" />
</li>
<li>
<img src="http://lorempixel.com/g/100/100/" />
</li>
<li>
<img src="http://lorempixel.com/g/100/100/" />
</li>
<li>
<img src="http://lorempixel.com/g/100/100/" />
</li>
</ul>
Simple and clean, no JS involved.
This is my attempt based on flexbox. The skewed images are a side effect of taking random cat images from the web, and constraining them to a certain width and height (fiddle).
The CSS:
ul {
padding: 0;
margin: 0;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
li {
/** add box-sizing: border-box; if you include padding or borders **/
}
li:first-child {
width: 100%;
height: 500px;
}
li:not(:first-child) {
/** add box-sizing: border-box; if you include padding or borders **/
width: 25%; /** use calc if you include margins **/
height: 100px; /** whatever height you want **/
}
li > img { /** demo only - because of image sizes **/
width: 100%;
height: 100%;
}
The HTML:
<ul>
<li data-src="whatever">
<img src="http://www.gordonrigg.com/the-hub/wp-content/uploads/2015/06/little_cute_cat_1920x1080.jpg" />
</li>
<li data-src="whatever">
<img src="http://rufflifechicago.com/wp-content/uploads/cat-treats.jpg" />
</li>
<li data-src="whatever">
<img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" />
</li>
<li data-src="whatever">
<img src="http://animalia-life.com/data_images/cat/cat8.jpg" />
</li>
<li data-src="whatever">
<img src="http://www.catprotection.com.au/wp-content/uploads/2014/11/5507692-cat-m.jpg" />
</li>
</ul>
You are looking for some simple CSS, there are multiple ways to approach this, the easiest is likely:
<style type="text/css">
ul.thumbs li{
float:right;
}
</style>
<ul class="thumbs">
<li data-src="img1.jpg">
<img src="thumb1.jpg" />
</li>
<li data-src="img2.jpg">
<img src="thumb2.jpg" />
</li>
</ul>
you could also set the ul to display:table-row and the lis to display:table-cell which would allow them to evenly spread and fill the space allowed in the ul
Based on your edit you will need something a little more complicated, without knowing which plugin you are using, or how it works, you can try this approach (uses a little jQuery):
$(document).ready(function(){
$('li').click(function(){
$(this).parent().find('.selected').removeClass('selected');
$(this).addClass('selected');
});
});
ul{
padding-top:405px;
position:relative;
}
li{
height:100px;
width:100px;
float:left;
background:blue;
}
li.selected{
background: red;
position: absolute;
top: 0;
height: 400px;
width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul>
<li class="selected">test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
<li>test 5</li>
</ul>
i am a newbie of html and css.now i want to know other gurus how to layout the above image with html and less css. thank you.
my way:
at first,slice eight small images and one white small background image(the rounded corner image).
the html：
<div id="top" style="width=500px">
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
</div>
<div id="bottom" style="width=500px">
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
<img src="..."><h3>LATEST NEWS</h3>
</div>
ps:what's the difference of when using those images as background image instead of in img tag . which is better? why?
Use ul with appropriate width and float its li's to the left for example (in case this is a navigation), divs inside a div or divs directly in the body.
This should make it more understandable:
style.css (CSS in the same directory, otherwise in link href should point the path):
ul { margin: 0; padding: 0; width: 500px; }
li { float: left; /* width: 100px - if your images are different size. */ }
HTML:
<!DOCTYPE ...>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en-US" />
<!-- ... -->
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="some js file"></script>
</head>
<body>
<!-- .... -->
<ul>
<li><img alt="Latest News" src="..." /></li>
<li><img alt="Latest News" src="..." /></li>
<!-- .. -->
</ul>
<!-- .... -->
</body>
</html>
Here you go:
http://jsfiddle.net/Wrd7F/
HTML:
<ul>
<li class="link1">Lipsum</li>
<li class="link2">Lipsum</li>
</ul>
CSS:
ul { width: 600px; float: left; }
ul li {
background-image: url("http://i.stack.imgur.com/l2qJt.png");
background-repeat: no-repeat;
width: 137px;
height: 46px;
float: left;
margin: 20px;
}
ul li a {
padding-left: 57px; /* Note: substract this amount from the width */
width: 80px; /* Original width 137px - Substract the amount of padding you want to use on right */
height: 46px;
line-height: 46px; /* Should be same as height if you want text to stay in the middle */
text-align: left;
float: left;
text-decoration: none;
color: #222222;
}
.link1 { background-position: -13px -19px; }
.link2 { background-position: -200px -19px; }
Note that the background positions you do have to put in manually but its not that hard. Firebug helps with this if your image positions in the image document are messy..
You should follow specific style with placing the images in one image document.
Like, all the images horizontally side by side and if you have hover images you put them under those side by side. After youve established vertical or horizontal positioning to the first item for hover and normal states you only have to change one of these values as the other one doesnt change from that point on.
Why to use css backgrounds over <img>:
In a lot of cases its more flexible ( size, padding, style )
Easier to edit ( no need to open photoshop and change the text )
:Hover state ( if you want to define :hover state ( .link1:hover {
background-position: 0px 0px; } ) you dont have to resort to JS. )
Edit: In the CSS i meant to comment: "Substract the amount of padding you want to use on the left"
Edit2: Also note that This may be sort of a bear trap in this case as Limited width and text might get tricky. With rounded borders and all, this would require some trickery to make it more flexible.
first: use these as background image instead of in img tag & it's better if you use sprites for this .
second: use list style for this & give float:left to it
<ul>
<li>wew</li>
<li>er</li>
<li>rer</li>
</ul>
css:
li{
float:left:
margin:5px;
}
Here is an example where the icons also stick out of the white boxes like in your screenshot
http://jsfiddle.net/RYAZp/
CSS
ul li {
border: 1px solid #333;
background: #FFF;
border-radius: 10px;
display: inline-block;
padding: 10px 10px 10px 45px;
overflow: visible;
font-size: 15px;
height: 1em;
position: relative;
margin-bottom: 1em;
}
ul li img {
position: absolute;
top: -0.5em;
left: 5px;
}
HTML
<ul>
<li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
<li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
<li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
<li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
<li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
<li><img src="http://www.wilhelminakerk.nl/uploads/images/navigatie/RSS_Icon.png" alt=""/>Latest News</li>
</ul>
I'm stuck. I created an image and want it to be a background image accessed through CSS for the navigation menu with text placed over it in HTML.
Here is my CSS:
.menu_item {
background:url(../images/menu_normal.png) no-repeat;
}
Here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Quotation Form</title>
<link href="css/menu.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li class = "menu_item"><a href="#">About</li>
<li class = "menu_item">Services</li>
<li class = "menu_item">For Translators</li>
<li class = "menu_item">Free Quotation</li>
</ul>
<img src = "images/menu_normal.png">
</body>
</html>
Here is the result: http://eximi.dreamhosters.com/turbolingvo/menu.html
I want the image to be displayed behind the menu items just like it is displayed in the <img src...> below it.
What am I doing wrong?
Thank you!
You'll need something like:
.menu_item {
background: url("../images/menu_normal.png") no-repeat scroll 0 0 transparent;
float: left;
height: 53px;
line-height: 53px;
list-style: none;
text-align: center;
width: 227px;
}
You have to style your li element to adjust look
for example
.menuitem{
background:url(../images/menu_normal.png) no-repeat;
display: block;
height: 33px;
padding: 10px;
width: 207px;
}
this is just example, you can style it however you like as per requirement
Change the background to be on ul element and give the ul element the class menu.
CSS
.menu {background:url(../images/menu_normal.png) no-repeat; }
HTML
<ul class='menu'>
<li><a href="#">About</li>
<li>Services</li>
<li>For Translators</li>
<li>Free Quotation</li>
</ul>
I'm trying to create a unordered list, with each li element having it's own background image (no text, just image), but I'm having trouble (in Firefox at least, it works in Safari) getting the link to work. In Firefox, the image changes on hover, but doesn't let you click. How do I get it to work in Firefox? I've tried the A tag within and outside the li tag.
Here's the CSS...
#menu {
width:107px;
height:200px;
}
#menu-1, #menu-1-active, #menu-2, #menu-2-active, #menu-3, #menu-3-active, #menu-4, #menu-4-active, #menu-5, #menu-5-active, #menu-6, #menu-6-active {
width:107px;
height:29px;
padding-bottom:5px;
background-repeat: no-repeat;
display:block;
text-indent: -999px;
}
#menu-1 {
background-image: url(menu1.png);
}
#menu-1:hover {
background-image: url(menu1on.png);
}
#menu-1-active {
background-image: url(menu1on.png);
}
#menu-2 {
background-image: url(menu2.png);
}
#menu-2:hover {
background-image: url(menu2on.png);
}
#menu-2-active {
background-image: url(menu2on.png);
}
etc
And here's the HTML...
<div id="menu">
<ul>
<a href="1"><li id="menu-1-active">
One
</li></a>
<a href="2"><li id="menu-2">
Two
</li></a>
<a href="3"><li id="menu-3">
Three
</li></a>
<a href="4"><li id="menu-4">
Four
</li></a>
<a href="5"><li id="menu-5">
Five
</li></a>
<a href="6"><li id="menu-6">
Six
</li></a>
</ul>
</div>
The link needs to be inside the <li>, for a start, as a <li> is a block-level element whereas an <a> is inline.
Also, setting :hover on elements other than <a> - while supported in the likes of FF, etc - is in my experience a bit spotty at working right and doesn't work at all in older IEs.
Personally, if it were me writing the HTML, it would look something like this:
<ul id="menu">
<li id="menu-1-active">One</li>
<li id="menu-2">Two</li>
<li id="menu-3">Three</li>
<li id="menu-4">Four</li>
<li id="menu-5">Five</li>
<li id="menu-6">Six</li>
</ul>
And the CSS would be something like the following:
#menu{
width:107px;
height:200px;
}
#menu li{
padding: 0, 0, 5px;
}
#menu li a{
display: block;
text-indent: -999px;
height: 29px;
background: transparent, none, center, center, no-repeat;
}
#menu-1 a:link, #menu-1 a:visited { background-image: url(menu1.png); }
#menu-1 a:hover, #menu-1 a:active, #menu-1-active { background-image: url(menu1on.png); }
/** Continue on with your other links here... **/
You need to put the a tag inside the li tag. And then set the a tag to display: block; This will cause the a tag to fill up all the space inside the li tag and make the whole area clickable.
For example:
<style type="text/css" media="screen">
a {
display: block;
}
</style>
<ul>
<li id="menu-1-active">One</li>
<li id="menu-2-active">One</li>
</ul>