that's the code
list-style-image: url("https://www.boylesoftware.com/blog/wp-content/uploads/2015/04/checkmark.png") ;
I was expecting it be of small size like that of a actual bullet but it turned out too big
You can fix that problem applying the below style:
li {
margin: 0;
padding: 0 0 0 20px;
list-style: none;
background-image: url("https://www.boylesoftware.com/blog/wp-content/uploads/2015/04/checkmark.png");
background-repeat: no-repeat;
background-position: left center;
background-size: 15px;
}
<h1>The list-style-image Property</h1>
<p>The list-style-image property replaces the list-item marker with an image:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<style>
.check{
width: 25px;
height: 25px;
}
</style>
<p>Unordered List <img class="check" src="https://www.boylesoftware.com/blog/wp-content/uploads/2015/04/checkmark.png" alt="Alternate Text" />Step 1</p>
Related
I have a header with two background images (one at each side). This way:
HTML:
<header>
...
</header>
CSS:
header {
...
background-image: url(http://placehold.it/50x50), url(http://placehold.it/50x50);
background-position: top left, top right;
background-repeat: no-repeat, no-repeat;
}
...
See jsfiddle.
For now I use two pictures and, as both pictures are identical but flipped horizontally, I want to use only one picture and use CSS to flip the other picture. To save some bandwidth...
On the web I found that I can use transform: scaleX(-1); to do the flip. But how to apply it at only one background image?
demo - http://jsfiddle.net/q1rf735s/1/
instead use pseudo element :before and :after
header {
width: 500px;
height: 50px;
display: inline-block;
}
header:before,
header:after {
content: url(http://placehold.it/50x50), url(http://placehold.it/50x50);
display: block;
float: left;
}
header:after {
transform: scaleX(-1);
}
header ul {
margin: 0 50px;
padding: 0;
list-style: none;
}
header li {
float: left;
}
header a {
width: 100px;
height: 33px;
padding-top: 17px;
display: block;
text-align: center;
text-decoration: none;
color: #333;
}
<header>
<nav>
<ul>
<li>Foo
</li>
<li>Bar
</li>
<li>Foz
</li>
<li>Baz
</li>
</ul>
</nav>
</header>
I tried to make a banner for my website I'm creating, but when I add it to my website, it turns out really bad with the text. I'm wondering if I can add text to my banner using HTML5 and / or CSS.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
display: block;
width: 100%;
}
.banner_h img{
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
I'm trying to center / centre my text on the banner, with a white coloured font (font can be varied). What do I have to do to make this happen? Thanks!
It depends on the kind of text you will be adding to the banner. If you want to add text that will be static (as in, it will never or rarely change) and want to add custom fonts, you should probably edit the image in Photoshop.
On the other hand, if the content in the banner will change constantly, then I would suggest adding the image as a background. Your banner h class would look something like this:
.banner_h{
display: block;
width: *actual pixel size of the banner*;
height: *actual pixel size of the banner*;
background: url('*location of file*') no-repeat;
}
If you leave the width to a percentage what will happen is that the div will not have anything inside of it and thus will not show the banner, so you need to figure out what the actual width and height of the banner is and put it in this CSS declaration so that it shows the banner.
Once you have done this, delete the image from the tag and replace it with the content you wish to add.
Is it possible to have more space between the list items "exhibition" and "current" and less space between the list items "current" and "previous"? changing the padding-right in #mainmenu2 li changes the space of each one equally.
jsfiddle: http://jsfiddle.net/zuVu7/9/
css
#charset "UTF-8";
/* CSS Document */
.bg {
background-attachment:fixed;
background-repeat: no-repeat;
-moz-background-size: cover;
background-size: cover;
}
#mainmenu2
{
position:relative;
left: 72px;
padding-top: 60px;
}
#mainmenu2 li
{
display: inline;
list-style-type: none;
padding-right: 32px;
}
and the html is:
<body class="bg">
<div id="navcontainer">
<ul id="mainmenu2">
<li><span class="secondarytextcolour">EXHIBITION</span></li>
<li>CURRENT</li>
<li>PREVIOUS</li>
</ul>
</div>
<div>
<img src="line.jpg" align="top" width="100%" height="1" />
</div>
<br />
Try this
#mainmenu2 li
{
display: inline;
list-style-type: none;
padding-right: 15px;
}
#mainmenu2 li span
{
margin-right:15px;
}
Add this to the bottom of your CSS, and adjust padding-right as needed:
#mainmenu2 li:first-child {
padding-right: 50px;
}
Yes, give the li a class or ID and reference it. Fiddle with the margin or padding as per your requirements.
http://www.wedevents.com.au/index.asp
No problem in FF but in IE there are some unwanted white margins appearing around the images in the top and bottom menu.
Any ideas on how to remove the unwanted margin?
HTML:
<ul class="topnav">
<li>
<a href="http://www.wedevents.com.au/index.asp">
<img src="/images/menu_home.gif" name="home" onMouseOver="over(0)" onMouseOut="out(0)" alt="Home" /></a>
</li>
<li>
<a href="http://www.wedevents.com.au/about.asp">
<img src="/images/menu_about.gif" name="about" onMouseOver="over(1)" onMouseOut="out(1)" alt="About" /></a>
</li>
CSS:
ul.topnav {
list-style: none;
padding: 0 85px;
margin: 0 auto;
width: 630px;
height: 36px;
background: #b09a27;
font-size: medium;
text-align: left;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0;
position: relative;
}
ul.topnav li a{
padding: 0;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
There is no margin or padding on the image. The user agent style is defaulting to putting a border around the image. Set border: 0; on the image. Also see the other answer for reset.css to prevent this sort of thing in the future.
Try using a reset.css Here's one I like http://meyerweb.com/eric/tools/css/reset/
I have a list like this:
<html>
<head>
<link type="text/css" rel="stylesheet" href="testli.css">
</head>
<body>
<ul id='grok'>
<li>
<img src='na' class='cimg' />
<div class='cinner'>
<p>Title, max two lines.</p>
<p>Some longish text, max two lines, causes problems when too long.</p>
</div>
<div style='clear:both'></div>
</li>
<li>
<img src='na' class='cimg' />
<div class='cinner'>
<p>Title</p>
<p>Some longish text here which may wrap some and cause problems..</p>
</div>
<div style='clear:both'></div>
</li>
</ul>
</body>
</html>
// testli.css
* {
margin:0;
padding:0;
}
#grok {
list-style-type: none;
width: 200px;
}
#grok li {
background-color: lightgreen;
margin: 5px;
padding: 5px;
text-align: left;
}
.cimg {
width:70px;
height:44px;
float:left;
}
.cinner {
float: left;
margin: 0px;
padding: 0px;
margin-left: 10px;
font:14px;
}
when the text in the p elements is short, the layout behaves as I want - the thumbnail and the text should appear as if they're in two separate columns. I'm basically looking to recreate the thumbnails youtube has for recommended items - thumbnail on the left, some text in another column to the right of it. Title and text each allowed two lines of text each.
If the text is too long, the cinner div gets placed below the thumbnail. What's the right way to force it to always be to the right?
Thanks
You could do it by setting a min-height on the <li> and then absolutely positioning the image to the left of the title and description:
#grok {
list-style-type: none;
width: 200px;
}
#grok li {
position: relative;
margin: 5px;
padding: 5px;
min-height: 44px;
/* min-height fix for IE6. Ideally this would be in an IE6 only stylesheet */
height: auto !important;
height: 44px;
background-color: lightgreen;
}
.cimg {
position: absolute;
left: 0;
top: 0;
width: 70px;
height: 44px;
}
.cinner {
padding: 0 0 0 80px; /* Makes room for the image so it doesn't overlap text */
font: 14px;
}
Add max-width to .cinner (if I don't mistaken - max-width: 110px).