i have some problems with styling an UL as navigation bar (sorry for this question, but iam a developer, not designer..)
The Problem occours in Safari on Mac (FF is working fine) See first picture (FF)
Css:
.multiPoint {
list-style-image:url(../images/punkte.jpg); }
.directionRight{
direction:rtl;
padding-right:3em;
margin-right:0.5em;
}
#navigation {
text-align: left;
}
HTML:
<div id="navigation" class="span-6 directionRight">
<ul>
<li class="multiPoint">Sie</li>
</ul>
</div>
If the bullet image is directional (like in the example above), the rtl approach may have the unintended side-effect that the image is mirrored in some browsers, resulting in an arrow pointing from right to left instead of left to right.
A background image does not show this behavior in IE9 and it maintains the correct orientation.
list-style: none;
background: url(images/bullet.gif) no-repeat center right;
padding-right: 10px;
Try updating your multiPoint class style as follows:
.multiPoint {
list-style-image:url(../images/punkte.jpg);
list-style-position: inside;
}
That will tell the browser to position your bullet images inside the list instead of outside.
Related
I have an unordered list within a body and the body tag is aligned to the center, the text for the ul list goes to the middle but the gif image stays to the left side of the page. How do I fix this?
http://www.student.nvcc.edu/home/kosindi/test/ul.html
That is a link to my website which has an example of my problem.
Please explain your logic, thank you.
as per your HTML code you gave in link just few change will do.
in css
body {
padding-left: 45%; // add this css
text-align: left; // change this css
}
You have two variants, choose one:
1.Use this CSS and it will work:
li { list-style-position: inside; }
2.If you want the basket balls to appear one under another then use this CSS:
body { text-align: left; }
ul { width: 200px; margin: 0 auto; }
I am creating a CSS centered horizontal list for our team's site. It's unfinished, but here is a demo of how it looks so far: http://marbleblastultra.tk/welcomeguest.htm
In Firefox, the list looks how I intend it to look.
In IE, it's not perfect, but it's nothing that I can't fix later on.
However, in Chrome, the longer text is overflowing outside of the
items... until I right click on them...
or until I uncheck float-right in Chrome's inspector, then check it
again.
Such a weird, strange behavior. Right clicking? Why? Google searching reveals nothing. Searching this forum reveals nothing about the phenomenon either.
I am using Chrome 40 for Windows, but it might happen on different versions too.
What makes this list so complicated and unique is each item's background image. I want the text for each item to be centered both vertically and horizontally inside the background image. Easy enough, but the background images have transparent corners, and I need to use padding to push the text into the middle.
The above image shows how each item should look in the centered horizontal list, with the text centered within the blue area, never on top of the transparent corners (highlighted in green).
The above image, however, shows what I see instead in Chrome right now. The text incorrectly overflows outside of the box. Here is a cleaned up code sample from the test page.
CSS:
ul.welcomeguest li {
min-width:150px;
min-height:50px;
vertical-align:middle;
line-height:50px;
white-space:nowrap;
display:inline-block;
background:url(images/button_d.png) no-repeat center;
background-size:100% 100%;
}
ul.welcomeguest li div {
display:inline-block;
padding-left:10%;
padding-right:10%;
}
HTML:
<div style="width:100%" align="center">
<ul class="welcomeguest">
<li><div>Homepage</div></li><!--
--><li><div>Login/Register</div></li><!--
--><li><div>Download Game</div></li><!--
--><li><div>Download Levels</div></li><!--
--><li><div>View Leaderboards</div></li><!--
--><li><div>Info/Tutorials</div></li><!--
--><li><div>Contact Locations/About</div></li>
</ul>
</div>
How may I reliably add padding-right to a display:inline-block'd element in Chrome, if at all?
JSFiddle? http://jsfiddle.net/mh70zn34/3/
ul.welcomeguest li:last-child{
min-width: inherit;
}
I'm sorry :D, Please check it
HMLT : you need remove tag div in
<div style="width:100%" align="center">
<ul class="welcomeguest">
<li>Homepage</li>
<li>Login/Register</li>
<li>Download Game</li>
<li>Download Levels</li>
<li>View Leaderboards</li>
<li>Info/Tutorials </li>
<li>Contact Locations/About</li>
</ul>
</div>
and css:
body {
background-color:#EEEEEE;
}
ul.welcomeguest li a {
min-width:150px;
min-height:50px;
vertical-align:middle;
line-height:50px;
white-space:nowrap;
float:left;
background:url(http://marbleblastultra.tk/images/button_d.png) no-repeat center;
background-size:100% 100%;
padding:0 20px;
}
.welcomeguest li {
display: inline-block;
list-style: outside none none;
overflow:hidden;
}
http://jsfiddle.net/mh70zn34/11/
Note: Can't use padding with percent value in your layout.
I want to create an unordered list with list items that have images and the bullets beside them. If I create a background image as the way to achieve this the image is appearing behind the text. If I set the image as a list-style-image, it's not lining up with the text and it's taking away the bullet that I want. Here is my code for the list-style image and I was going to attach an image, but I don't have enough points yet since I'm new to achieve this. Any help would be appreciated!
Thanks!
.ul1
{
margin-left: 25px;
list-style-image: url('Images/Air Icon copy.png');
}
<div>
<ul id="Ul1">
<li class="ul1">Clean air: Our emissions are 250 percent lower.</li>
</ul>
</div>
This is what I used for the same problem you had:
list-style: none;
background: url('something.png') 0 0 no-repeat;
padding: 0 0 0 30px;
height: 30px;
Instead of using an image that wouldn't align properly i decided to use it as a background and just don't repeat it. Play around with the padding and height untill it fits how you want!
Jsfiddle if you're interested
EDIT: Just read that you wanted to keep the bullet. Take away the list-style: none and you're good to go.
Here is the another way to show the image and as well bullets.
.ul1
{
left:12px;
/* list-style-type:none;*/
}
li{position:relative;}
li.ul1:before {
content: "";
content: url(http://lorempixel.com/20/20/);
margin:10px 0;
}
Check the DEMO.
I have a list that resembles:
<ol>
<li class="node">1</li>
<li class="node">2</li>
<li class="node">3</li>
<li class="node">4</li>
<li class="node_end">5</li>
</ol>
I am using images to replace their default bullet points in CSS. Separate images are used for the end node as well as another image for all other bullet points. The images display, however as soon as I add these images a 4 pixel padding is somehow added to the top and bottom of each list item. This extra spacing changes the height from 26 pixels high to 34 pixels high. This gap provides about an 8 pixel separation between the different bullet point images which were meant to have a 0px separation as per my design.
The CSS I made:
li {
margin: 0;
padding: 0;
border: 0;
}
li.node {
list-style-image: url('../imgs/nodes/udr.png');
}
li.node_end {
list-style-image: url('../imgs/nodes/ur.png');
}
Is there any way to remove this spacing? I have tried removing all things padding/spacing/border related to all li's, but nothing so far.
EDIT:
I do not think I am making my question clear enough, so I am posting the image of what it looks like on my end.
The joining bars as you see in the image above are supposed to be connected (as if one continuous image). Removing the special CSS images for bullet points reduces the height of each item to the height of the CSS bullet point image (as I have tested using Google Chrome's element inspecting tool).
EDIT 2:
A close example to show my problem can be found here: http://jsfiddle.net/EyVRF/1/
Garry Cairns might be onto something. I tested your code and borrowed a list style image from a website that was a good size and i see no padding that would be an issue, or at least not the type you're seeing.
http://jsfiddle.net/BYQQV/
list-style-image: url('http://www.globalindustrial.com/site/img/bullet_homecat.gif');
You may also want to consider not having to create a whole new class for the last list item. Try instead
li:last-child { list-style-image:.... }
Althouth IE is not happy with that. But for future reference.
lack of .css and html unable me to answer you.
About : Is there any way to remove this spacing? YES there is.
try this :
ol, li{list-style-position:outside;margin:0;padding:0}
or
ol, li{list-style-position:inside;margin:0;padding:0}
Let me guess ? You didn't reset your .css ?? (margin:0;padding:0)
Ok, i can see what you want .. and sadly, you wont be able to achieve what you want this way becose the 'padding in between the bullet and first character is 'browser-specific' and unmanagable through css.
You will have to use another technique : background image.
<ul>
<li class="node">1</li>
<li class="node">2</li>
<li class="node">3</li>
<li class="node">4</li>
<li class="node_end">5</li>
</ul>
ul, li {
margin: 0;
padding: 0;
}
li {
font-size:16px;
line-height:16px;
list-style-type:none;
background:red url('http://placehold.it/16x16') no-repeat scroll 0 0;
padding-left:16px;
border-bottom:1px solid blue;
}
li.node_end {
background:blue url('http://placehold.it/16x16') no-repeat scroll 0 0;
}
http://jsfiddle.net/2RtB7/1/
Carry on
PS, try to search a little more before asking for help --> CSS: Control space between bullet and <li>
I am trying to build a website and have encountered a tricky issue with li having display: inline-block; property.
My website is: http://www.gypsytours.in/
If you visit this site, on homepage, I have a horizontal list under the heading "Himalayan Packages by Gypsy Tours".
In this list, I have a block element A with display: block; property.
Here are my simplified codes:
HTML:
<div id="menu-board">
<ul>
<li>Elephant Safari Packages in Jim Corbett Park, India</li>
<li>Chopta Tungnath Trekking Package</li>
<li>River Rafting Packages in Rishikesh</li>
</ul>
</div>
CSS:
#menu-board
{
text-align: center;
}
#menu-board ul
{
}
#menu-board ul li
{
float: none;
display: inline-block;
}
#menu-board ul li a
{
display: block;
width: 180px;
height: 130px;
background-color: #C50000;
text-align: center;
overflow: hidden;
}
Now, the issues is: My link-text in 2nd box, is not longer than two lines, unlike the other two boxes where link-text spreads in three lines. This boxes look perfectly fine in IE and FireFox but when I open the site in Google Chrome or Safari, the box in the center (with relatively shorter text) pops down. If I make the text long enough to span in three lines, it comes back to original position. I am not able to figure out how to fix this. My apologies for not being able to put across my issue in simple and short manner. I am relatively inexperienced with web-designing. I will really appreciate if you guys can help me out. Thanks in advance.
Ok, after more digging, I found out that it was a computed float issue.
I believe that adding:
#splash-list ul li a {
float:left;
}
will solve the problem. It may compute very slightly differently on other browsers, but at least they'll be in the proper line.
Hope this helps!
Mason