I have an unordered list with different bullet images and i'm trying to align the words for each list item as vertically centered. While I can do this in Chrome and Safari, the effect for vertical-align:top is not getting properly displayed in Firefox.
I have done a JS Fiddle right here. How can I amend the css so that the words appear vertically in the middle of each bullets in Firefox?
I'm replicating the JS Fiddle html codes here:
<ul>
<li>Here is line one</li>
<li>Here is line number two</li>
<li>three with link</li>
</ul>
I'm replicating the JS Fiddle css codes here:
ul li a {
line-height: 40px;
vertical-align: top;
}
ul li {
font-family: Arial,"MS Trebuchet",sans-serif;
font-size: 12px;
line-height: 40px;
margin-left: 60px;
margin-top: 20px;
vertical-align: top;
}
ul li:first-child {
list-style-image: url("http://chinee.heroku.com/assets/venue.png");
}
ul li:nth-child(2){
list-style-image: url("http://chinee.heroku.com/assets/airport.png");
}
ul li:nth-child(3){
list-style-image: url("http://chinee.heroku.com/assets/hotel.png");
}
The only way of getting consistent results across browsers is applying the list images as background images, so instead of list-style-image: url("hotel.png"); you use background-image: url("http://chinee.heroku.com/assets/hotel.png"); and position from there.
Here is an example:
http://jsfiddle.net/dC7xr/
Related
So I have an unordered list with custom bullet images. They are triangles pointing to the right at the list. I would like the point to be aligned with the vertical center of the first line of text in the list item. How can I achieve this?
This is what I am currently viewing:
<ul>
<li>Photography for events and portraits</li>
<li>Image editing and restoration</li>
<li>Video and audio production</li>
</ul>
main ul {
list-style-image: url(../img/bullet.png);
margin-top: 25px;
}
main ul li {
line-height: 35px;
}
The line-height doesn't seem to do anything.
you can use pseudo-element before \ after instead, take a look at this example below:
main ul {
margin-top: 25px;
}
main ul li {
list-style: none;
}
main ul li:before {
content: url("http://www.milksmarter.co.nz/images/basement_platform/grey_triangle_bullet_point_large.png");
position: relative;
top: 10px;
left: -10px
}
<main>
<ul>
<li>Photography for events and portraits</li>
<li>Image editing and restoration</li>
<li>Video and audio production</li>
</ul>
</main>
It's really hard to actually provide you with finalized code without access to your image, but try merging the following code with your own. The first Padding value (currently 3px) should be the item you need to update.
li {
background: url(images/bullet.gif) no-repeat left top;
padding: 3px 0px 3px 10px;
/* reset styles (optional): */
list-style: none;
margin: 0;
}
src: Adjust list style image position?
I am using a custom font for the list bullets and normal font for the list content, but since the bullet has a larger font, they items do not align horizontally. I would love any suggestions.
#font-face {font-family: altus_extras; src: url('http://localhost:8888/azaleamountain.org/wp-content/fonts/altus_extras.otf');}
.altus li::before { font-family: altus_extras !important; font-size: 6em; content: "/"; }
ul li {list-style-type: none !important;}
<ul class="altus">
<li> Is this a nice bullet?</li>
<li> Is this another nice bullet?</li>
</ul>
Try something like this. Using line-height that equals the the font-size or the height of the parent element and also vertical-align: middle, will help center the asterisk vertically.
li {
list-style-type: none;
position: relative;
padding-left: 20px;/* space enough to accommodate asterisk size */
font-weight: 24px;
}
li:after {
content: '*';
position: absolute;
line-height: 24px;
vertical-align: middle;
left: 0;
font-weight: bold;
font-family: altus_extras; /* Your custom font */
font-size: 2em;
}
<ul class="altus">
<li> Is this a nice bullet?</li>
<li> Is this another nice bullet?</li>
</ul>
There are 3-4 ways of achieving the task:
Put position:absolute and then adjust top,left positions for it and put padding-left on li to put space for bullet and position:relative on li to align ::before with it.
Put only position:relative on ::before and then put top:5px or 7px as required.
Put transform: translate(0px, 7px) on ::before
Play with line-height and font size
I have worked on a new menu for my site, but I cannot seem to arrange for space between the links vertically (I want more white space between links) Any advice?
html
<ul class="menu">
<li>ABOUT</li>
<li>CONTACT</li>
<li>SERVICES</li>
</ul>
css
ul.menu
{
list-style-type:none;
list-style-position: inside;
margin:0;
padding:0;
padding-bottom: 1cm;
}
.menu li a, .menu li a:visited
{
padding:12px 0 0 0px;
font-family: 'Roboto Condensed', sans-serif;font-size:20px;font-weight:700;
color:#FFFFFF;
background-color:#09F;
text-align:center;
padding:3px;
text-decoration:none;
}
.menu li a:hover, menu li a:active {
background-color:#666;
}
As you can see I have attempted the gaps with a piece of css: {padding:12px 0 0 0px;} but no luck.... everything else works fine - see fiddle # http://jsfiddle.net/DCxvy/
Anchors are by default inline elements. To add certain padding values, you need to render them as inline block-level elements. Add display: block to your anchor styles:
.menu li a { display: inline-block }
Also, you should note that your .menu li a style has two entries for padding. The latter one (setting padding to 3px on all sides) is overriding your earlier definition.
Here's a jsFiddle demo.
If I'm not wrong, you want to insert space vertically between links.
For that, all you have to do is:
.menu li {
margin-bottom: 10px;
}
fiddle with the margin solution.
On the other hand, if you want the background of your menu to remain the shade of blue it is and have the colour change on hover then here is the fiddle for that.
I have also refactored your css to arrange rules in a more intuitive manner.
fiddle with the menu background as a solid colour without white line breaks.
I have a menu:
<div class="headerMenu">
<ul>
<li>Home <span>Home Page<span></li>
<li>About <span>About My Website<span></li>
<li>Contact <span>Get in touch<span></a></li>
</ul>
</div>
My current CSS is as follow:
.headerMenu{
width: 100%;
}
.headerMenu ul{
margin: 0;
padding: 0;
float: left;
}
.headerMenu ul li{
display: inline;
}
.headerMenu ul li a{
float: left;
color: white;
padding-top:25px;
padding-left:50px;
font-size:24pt;
}
.headerMenu ul li a:visited{
color: white;
}
.headerMenu ul li a:hover, .menu ul li .current{
color: #fff;
background: url(../../Content/Images/menu-selector.png) repeat-x; /* 25x10 arrow/*
}
And now for the question:
How can i get the content in the span tag to be below the Main text.
When i hover over the anchor, How do i add the hover image as shown in screen shot
The Mockup i created in Photoshop looks like this:
I know this would be easily achievable by making use of images, but my solution requires that menu to be created dynamically.
1) How can i get the content in the span tag to be below the Main text.
You need to use display: block on the span to have it appear on a new line:
.headerMenu ul li a span {
display: block;
}
2) When i hover over the anchor, How do i add the hover image as shown in screen shot
Try to center the arrow to the top. This might work:
.headerMenu ul li a:hover, .menu ul li .current {
color: #fff;
background: url(../../Content/Images/menu-selector.png) no-repeat center top;
display:block;
/* also make sure that you use display block with correct height
so that you can positionate the arrow on the correct place... */
}
Add the following code for problem 1:
.headerMenu ul li a span {
display: block;
}
This sets the <span> to display as a block level element, therefore occupying the full parent container width by default.
For problem 2, there are multiple ways to do this. However, my suggestion would be to add the array to the <li> and use the :hover pseudo class. Note: that this will only work in IE for 7+.
.menu ul li:hover{
background: url(../../Content/Images/menu-selector.png) repeat-x;
}
See it in action - http://jsfiddle.net/kxqx8/1/ (I changed the colors to help display)
What css styles to be applied to make the clickable area of button to the exact shape of the button.Could you please tell me
If you use HTML you have to use a somewhat obsolete technique - Image maps - to get a clickable area that's not in the shape of a square. If you use Flash, you have more options. This reply addresses HTML/XHTML up to version 4, I haven't read the the specs for HTML 5 wich may have more ways of solving this (probably in combination with Javascript).
If I wish to style links in a menu I use an unordered list. You need to use display:block to make the whole list item click-able. I have included example css and html below.
In my stylesheet:
#menu {
width: 800px;
height: 40px;
}
#menu ul {
list-style-type: none;
margin:0;
padding:0;
}
#menu li {
display: inline;
margin-right: 10px;
float: left;
background-color: #FC0;
}
#menu a {
text-decoration: none;
font-size: 1.2em;
color: #006;
display:block;
padding: 5px 10px 5px 10px;
}
#menu a:hover,
#menu a:active {
color: #009;
background-color: #F90;
}
In my html:
<div id="menu">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Articles</li>
</ul>
</div>
This will give you a horizontal menu of three yellow boxes/buttons which will change to orange on hover. The a is displayed as a block and so the hover affect takes affect when the mouse hovers anywhere within the yellow box, rather than just over the text.
Hope this helps :o)