I have the following html
<div id="menu">
<ul class="horizMenu">
<li id="active">About</li>
<li>Archive</li>
<li>Contact</li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>
and in the css I have
.horizMenu li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
#menu
{
text-align:center;
margin-bottom:10px;
letter-spacing:7px;
}
#menu a
{
color:red;
}
#menu a:hover
{
color:blue;
font-weight:bold;
}
Everything works pretty well, except that when I mouse over the links, the color changes and it becomes bold, which is what i want, but it also causes all of the other li elements to move slightly and then move back when you mouse-off. Is there an easy way to stop this from happening?
Not sure who -1ed, but Mauro's answer is essentially correct: you can't trivially make an item with automatic width depend on what the width would have been if the font inside weren't bold.
However, a 'float: left;' rule will also be necessary as you can't set the width of an inline-display element. And 'em' would probably be a better unit, to make the required width dependent on the font size in the buttons.
Add a width to the list item elements which is bigger than the bolded width of the items, this way they wont be pushed out of line.
#menu li
{
width: 150px;
}
Alternatively you could try a monospace font, which wont be affected by the bold/unbold on hover.
try using this
menutext {
line-height: 10px; /* or whatever */
}
and also, to set the width of a inline element, use display: inline-block;
float:left might be not so friendly, if you do use it and it messes things up use clear:both
I've just had the same problem. A solution I thought of, and might use from now on, is to use text-shadow instead.
a:hover {
color:blue;
text-shadow:0px 0px 1px blue;
}
The text will look a little blur though. If you set the 3rd parameter to 0, text won't be blur but will look just a little bit bolder.
I'd say this is better than dealing with width-dynamic texts.
Related
I have a full browser width list with a background color (which changes color on hover). However I want the li text to be text-align:left, have a max-width and the left and right margins to be equal – but the background color to still be full browser width. How do I do this?
I have made a JSfiddle here.
As soon as I put a max-width on the li, the background color will obviously shrink to the max-width. Is there a way to just target the text within the list?
<div class="case_study_links">
<ul>
<li>Abbey Meadow Flowers<br>Helping to grow a sustainable florists</li>
<li>Collins Environmental<br>Differentiating ecologists from competitors</li>
<li>University of Oxford<br>Branding for research project on young migrants</li>
<li>Small Woods<br>New brand brings credibility to organisation</li>
<li>Good Energy<br>Rebranding helps double customer numbers</li>
</ul>
</div>
.case_study_links li {
list-style: none;
font-size:1.8rem;
text-align:left;
border-top:1px solid white;
}
.case_study_links a:link { color:white; display:block; padding:4.8rem 0; background-color:rgb(149,199,201);}
.case_study_links a:visited { color:white; display:block; padding:4.8rem 0; background-color:rgb(149,199,201);}
.case_study_links a:hover { color:white; display:block; padding:4.8rem 0; background-color:rgb(134,179,181);}
.case_study_links a:active { color:white; display:block; padding:4.8rem 0; background-color:rgb(134,179,181);}
wrap Your text in a <span class="myTexts"> and add css properties to it:
.myTexts
{
max-width:100px; // or anything you want
margin:auto
}
U have your CSS on wrong levels:
Define background-color on the ul (maybe width: 100%; too, didn't test)
Define borders and width: 100%; on the li
Define max-width: ; on the a, or the elements within a
As suggested, you could wrap a part of the text in a span element.
I would refrain from using "br", you could do this:
<li><p>Abbey Meadow Flowers</p><p>Helping to grow a sustainable florists</p></li>
Change the P elements accordingly for semantic HTML to H1,H2,H3,span,p, etc.
Note that span is an inline element, and will not automatically take up full width. Use display: block; in your CSS to fix this
I'm trying to make a nested unordered list and the nested ul tag has a larger font size. Here's the line of code I'm using:
<ul>
<li>myItem 1</li>
<li>myItem 2
<ul>
<li>myItem 2a</li>
</ul>
</li>
<li>myItem 3</li>
<li>myItem 4</li>
</ul>
Here's my style.css:
ul {
font-size: 1.3em;
margin-left: 80px;
margin-bottom: 20px;
}
I don't have enough reputation points to include a photo, but you can see the output of the code here:
http://crazyrogue.net/ulexample.jpg
Anyone have an idea why the nested ul font size is larger? I want the entire list to have the same size font.
What's your CSS saying is "every time I enter a <ul> tag, I should increase the font size by 1.3x". That's how your inner <ul> got bigger font size.
To fix this, add a rule that say nested <ul>s keep their parent's font size:
ul ul {
font-size:1em;
}
From your description, I think I just had the exact same problem. The trouble is that you specified the font-size as 1.3em. The em is a relative unit, and this makes the font-size of each of your nested lists relative to their parent. When you nest the the 1.3em is applied recursively, so your next list has a font-size of (1.3*1.3)em. If you have a couple of levels of nested lists then you'd get 1.3*1.3*1.3 and so on.
It's worth noting, by the way, that this won't be a problem with all browsers - my new Android phone doesn't give me any problems, but my old one does.
Anyway, something like this should fix the problem for you:
ul {
font-size: 1.3em; /*your original code*/
margin-left: 80px;
margin-bottom: 20px;
}
ul li ul {
font-size: 1.0em; /*stops nested lists scaling*/
}
That's what's worked for me. Of course, the second ul declaration inherits everything else from the first one, so hopefully that should be all you need to do.
It would be helpful if you had a link to live code instead of an image but I suspect there are some global style rules that are tripping you up. It would be good to make sure you have a reset for your css and then define the rules you need. ul and ul li ul are probably getting different rules so you could fix by defining for both :
ul, ul li ul {
font-size: 1.3em;
margin-left: 80px;
margin-bottom: 20px;
}
I know this post is a bit old, but if you want to make sure your nested lists stay the same size as the parent when using EM units, try:
ul {
font-size: 1em;
}
ul ul {
font-size: 100%;
}
This tells those nested lists to be 100% the size of the parents.
Change your font size unit from em to rem
ul {
font-size: 1.3rem;
margin-left: 80px;
margin-bottom: 20px;
}
See the example here:
https://codepen.io/Rajivsarna/pen/abEmrYr
I have been trying to figure out how to make a nav bar like this one here: navbar
but as almost an absolute beginner, I have no idea which method to use here. Is it a UL or a table, and also don't know how to set these borders between the links which should most probably be inserted there as the images.
I know it would be more helpful if I wrote my own code here to be examined first, but I don't even know whether I should go with the table or a list with this one.
So, I would really appreciate if someone could give me a suggestion on that first and then i could write a code which we could discuss further.
Thanks
Although i prefer using UL for the menu,
it seems to be easier to achieve the effect with tables.
try making a table with two rows and 5 columns.
and:
remove the bottom-border of the first row.
remove the upper-border of the second row.
the borders of the cells in the second row.
also you may have to set the height of each row.
This can be done 2 different ways. The first one will be with image of a small vertical line which will be set as a background of the navigation button.
The other way is to be an absolute positioned <span> in the <a> tag with height as this border height and set top: 0 and left:0.
HTML:
<ul>
<li><span></span>Nav 1</li>
<li><span></span>Nav 2</li>
<li><span></span>Nav 3</li>
<li><span></span>Nav 4</li>
</ul>
CSS:
ul {
float:left;
border: 1px solid #000;
}
ul li {
list-style-type: none;
float:left;
}
ul li a {
display:block;
padding: 10px;
position:relative;
}
ul li span {
border-left: 1px solid #000;
height: 10px; <!-- as long as you want -->
position:absolute;
top: 0;
left: 0;
}
You can copy and paste that in your editor and see how it looks like.
And for navigations use <ul> with <li>'s. The <table> is deprecated and is no longer good to use it for that purposes.
I am having an issue with a particular aspect of a web dev that I am doing at the moment with regards the css styling.
What I have is the following HTML:
<div id = "spaninsidea">
<ul id="spantest">
<li><a id="nav-button-one" href="javascript:return false;"><span>Link 1</span></a></li>
<li><a id="nav-button-two" href="javascript:return false;"><span>Link 2</span></a></li>
</div>
Styled with the following CSS:
#spaninsidea { background: #494949; padding: 5px 5px 5px 37px; overflow: hidden; margin: 0 0 10px 0; }
#spaninsidea li { display: inline;}
#spaninsidea li a { text-transform:uppercase; text-align:center; border-radius:5px;
display: block; margin-right:50px; width: 100px; height: 100px; background-color: green;
float: left; }
#spaninsidea li a span {background-color:orange; margin-top:50px}
What I am trying to get is the spaned text inside the link to sit in the middle of the a tag. When I try to apply the margin setting on the span it simply sits still, however if I change the font color etc it plays cricket. I cant figure why it styles but wont budge.
I will confess the front end stuff is new to me so if there are any glaring issues that you can see in general please do point them out.
Cheers
Usually you shouldn't have a span within an a. That would be the first part... I would suggest try to apply a text-align:center; to the span as well.
Update: See a working version here: http://jsfiddle.net/2eLer/ You just have to set the line-height of the span equal to or greater than the height of the a.
It's important to remember that spans are inline elements not block elements and as such, do not respond to margin and padding like you would think they do.
There is a css display property called "inline-block" that allows elements to float like spans and other inline elements do, but also makes them behave like divs with regards to margin and padding.
You shouldn't use <span> at all, but change the padding property of the link itself.
I have an html file with an unordered list. I want to show the list items horizontally but still keep the bullets. No matter what I try, whenever I set the style to inline to meet the horizontal requirement I can't get the bullets to display.
The best option I saw in other answers was to use float:left;. Unfortunately, it doesn't work in IE7 which is a requirement here* — you still lose the bullet. I'm not really keen on using a background image either.
What I'm gonna do instead (that no one else suggested, hence the self-answer) is go with manually adding • to the my html, rather than styling this. It's less than ideal, but it's the most compatible option I found.
edit: *Current readers take note of the original post date. IE7 is unlikely to be a concern anymore.
I had the same problem, but only in Internet Explorer (I tested version 7) - not in Firefox 3 or Safari 3. Using the :before selector works for me:
ul.tabs li {
list-style: none;
float: left;
}
ul.tabs li:before {
content: '\ffed';
margin-right: 0.5em;
}
I'm using a square bullet here, but a normal bullet \2022 would work the same.
You could also use a background image on the <li> elements, with a padding to keep the text from overlapping it.
li {
background-image: url(i/bullet.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}
The browser displays the bullets because the style property "display" is initially set to "list-item". Changing the display property to "inline" cancels all the special styles that list items get. You should be able to simulate it with the :before selector and the content property, but IE (at least through version 7) doesn't support them. Simulating it with a background image is probably the best cross-browser way to do it.
Keep them display blocked, give them a width and float left.
That will make them sit by side, which is like inline, and should maintain the list style.
It's actually a very simple fix. Add the following to the ul:
display:list-item;
Adding this CSS line will add the bullet points.
I was just messing around and I ran into the same issue with the same browser constraints; when I searched for an answer your post came up without the answer. This is probably too late to help you, but I thought for posterity's sake I should post it.
All I did to solve my problem was to embed another list with one item within each list item of the first list; like so...
HTML:
<div class="block-list">
<ul>
<li><ul><li>a</li></ul></li>
<li><ul><li>b</li></ul></li>
<li><ul><li>c</li></ul></li>
</ul>
</div>
CSS:
.block-list > ul > li { display: inline; float: left; }
IE7 Page:
o a o b o c
...it is a dumb solution, but it seems to work.
Did you try float: left on your <li/>? Something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
ul li {
float: left;
margin-left: 2em;
}
</style>
</head>
<body>
<ul>
<li>test</li>
<li>test2</li>
</ul>
</body>
</html>
I only tested Firefox 3.0.1, works there. The margin is set because else your bullet overlaps the previous item.
addition:
Be wary that when you float the items you remove them from the normal flow, which in turn causes the <ul/> to have no height. If you want to add a border or something, you'll get weird results.
One way to fix that is to add the following to your styles:
ul {
overflow: auto;
background: #f0f;
}
You may set <ul> as a CSS grid and <li> as cells to get similar layout to inline <li> and keep bullets easily:
ul {
display: grid;
grid-template-columns: 100px 100px 100px; /* or a smarter width setting */
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
You could use Character entities, see reference : http://dev.w3.org/html5/html-author/charref
<ul class="inline-list>
<li> • Your list item </li>
</ul>
In HTML, I added a break after each li like this:
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
And CSS:
li { float:left; }
Using float: left didn't work very well for me because it made the content box of the ul element 0 pixels high. Flexboxes worked better:
ul {
display: flex;
flex-wrap: wrap;
}
li {
margin-right: 24px;
}
You can use following code
li {
background-image: url(img.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}