Sorry if this is a really stupid question, but I'm a developer and my design skills are minimal at the minute, I'm working on a personal site and I'm stuck with a minor issue.
I have a top nav with a ul and li items. These items contain link <a href... and within these tags I have a <span>.
The span only displays when the link is hover over.
CSS
div#topnav a span {display: none;}
div#topnav a:visited span {display:none;}
div#topnav a:hover span {display: block;}
The problem is, the span has quite a bit of text in, and when it displays it makes the link width large, thus pushing the rest of the top nav to the right.
Is there something I can do to tell the a tag to ignore the spans width and not change when the span is displayed but not affect the width being automatically set by the links text (non span)?
HTML
<div id="topnav">
<ul>
<li>Example<span>this is a link to google</span></li>
<li>Another EG<span>this is another link that goes to bbc!</span></li>
</ul>
</div>
It's worth noting, this text in the span appears below the nav, so I need it all to be displayed.
well, if you want you can simply remove the span out of the flow and they will stop affecting the links in any way by just giving an absolute position to the span and a relative position to the a. You also don't need the :visited I think, since I'm guessing that it will prevent the link from showing up if already visited. Like this:
div#topnav a {position:relative;}
div#topnav a span {display: none;}
div#topnav a:visited span {color:purple;}
div#topnav a:hover span {display: block;postion:absolute;bottom:-50px;}
You can change the bottom value to fit your needs, or add left/right properties to position them further. You may consider adding a width to the span as well. position:relative on the a is required so that the span will know from where to go 50 px downwards.
Edit: added the visited class, since it may help the ux to a degree by just changing the text color.
Simply set a width on the span/link so that it won't automatically determine it by the length of the content.
div#topnav a span { width: 50px; }
Note: 50px is an example, you can set it to whatever you want.
Try using div tag outside "a" tag which has fixed width so that your content doesnt go across the specified width.
Related
enter image description here
Hello im very new to this. I have created a webpage with links running horizontally across the page. When i hover over each title it has a background colour. However the hover size is a fixed size. I want to know how i can get the hover to automatically adjust depending on link length.
/* change the link color to #272727 on hover */
li a:hover
{
background-color:#272727;
max-width:200px;
}
thanks for any help
It looks to me that the "max-width: 200px;" CSS property isn't required. So try:
li a:hover
{
background-color:#272727;
}
Without specifying an explicit max width, your link elements will size to the width of their parent li. So when you set the background colour on hover, the entire word will be highlighted, without any overflow.
But if you could provide a fiddle to confirm, that'd be really helpful!
If m not wrong then i think i got your solution. You are asking that how can you give background color on hover without changing the size or might be you are facing issue with size of li while hovering so please see this fiddle
I have used padding for normal a tag and remove fix width from hover. So now m just changing the background color and it will applied automatically on text/link. Please let me know if you are facing any issue. Thank you
HTML
<div>
<ul>
<li>Home</li>
<li>About</li>
<li>RESCUES</li>
<li>Help</li>
<li>VEHICLES</li>
<li>VOLUNTEERS</li>
<div style="clear:both;"></div>
</ul>
</div>
CSS
div{background-color:teal;width:100%;}
li a:hover{background-color:#272727; color:#fff;}
li a{ padding:6px;}
ul li{list-style-type:none;float:left;padding:6px;}
li a {text-decoration:none;}
I have a CSS problem I need help solving.
I have an ul for showing a column. I've hardcoded the width of this ul to 220px. Inside it, I have li's. Each li has a text link.
Problem is, because I have hardcoded the ul width to 220px, the li are inheriting this, even though they don't need so much width. If I see the space each li text is taking, this is what I see:
How can I make each li text ONLY take as much space as it needs for the text itself ?
I want to do this because I have a picture in the background which has a map on it .. The extra space taken by li's means that the map isn't working in areas where it should work (because li's are on top of the map) ..
Use display:inline-block; Or display:inline;.
Or:
Use float:left; on each li then have a clear:both; element after each li.
You can use display:inline-block;
add float:left to your <li>s.
& put a <div style="clear:both;"></div> after each.
I'm not even sure if this is possible, but I figured it was worth asking.
It would be pointless me trying to explain, I'm rubbish at things like that, so check out this demo - http://www.deanelliott.me/braintrain/
See how the titles on the 6 images have an orange background colour? And now see how the padding is missing from the right hand side of the first, and left hand side of the second line?
Is it possible to add padding there so that the background doesn't just stop at the end/beginning of the word?
Or should I tell them it's unfeasable and they'll have to live with it?
The issue here is you can't pad at word end/start where the content wraps, so this won't be possible unless you change the display type for the links to a block-style type, e.g. "block" or "inline-block", but naturally that affects the appearance somewhat.
You can get slightly further by adding:
white-space: pre-wrap;
to the .blog-grid .grid-block h2 a, #sidebar h2 a rule; however it's not a complete solution (but it's all I can come up with).
.blog-grid .grid-block h2 a, #sidebar h2 a {
/* other css properties */
display: inline-block; /* or display: block */
}
Adding text-indent in CSS can also work
text-indent: 10px;
add some code to class "post-title tilt" - it answeirs for your titles.
write maybe padding-left:20px; or if it won't work: margin-left:20px;
can you edit the code? adding span for each line should work
span class="line1" and span class="line2"
<a href="#">
<span class="line1">a safe alternative to</span>
<span class="line2">ritalin</span>
</a>
I have a ul with the following structure
<ul>
<li> text goes here <span></span> </li>
<li> text goes here <span></span> </li>
</ul>
Now initially the span tag is empty. Im trying to add a number into the span tag using the jQuery .html() function ,Works fine however in Chrome the text gets cut off. The strange thing is when i use the web inspector and click on the li the width of the span tag increase according to the content and the li too.
Any ideas ?
The css is as follows
li{
list-style:none;
float:left;
padding: 0 5px;
}
span{
display:inline-block;
min-width:5px;
min-height:5px;
}
you can't. span is an inline element, either set it's display property to inline-block or block to set its dimensions, or use a block element instead of span.
white-space: nowrap; // will force it not to wrap around
See effect on this fiddle: http://jsfiddle.net/Abp8y/11/ [UPDATED].
Last diagnosis: text-transform bug caught in the li tag. Removing text-transform solves the problem.
The Chrome bug is also discussed here: text-transform: uppercase causes layout error on Chrome as posted by #Christoph
Use can try this and fix the width of span-
span{
word-wrap:break-word;
}
I have a simple list I am using for a horizontal menu:
<ul>
<h1>Menu</h1>
<li>
Home
</li>
<li>
Forum
</li>
</ul>
When I add a background color to the selected class, only the text gets the color, I want it to stretch the entire distance of the section.
Hope this makes sense.
The a element is an inline element, meaning it only applies to the text it encloses. If you want the background color to stretch across horizontally, apply the selected class to a block level element. Applying the class to the li element should work fine.
Alternatively, you could add this to the selected class' CSS:
display: block;
Which will make the a element display like a block element.
Everyone is correct that your problem is that anchors are inline elements, but I thought it is also worth mentioning that you have an H1 inside of your list as well. The H1 isn't allowed there and should be pulled out of the UL or placed into an LI tag.
Would something like this work?
.selected {
display: block;
width: 100%;
background: #BEBEBE;
}
Put the selected class on the <li> and not the <a>
<a> elements are inline by default. This means that they don't establish their own block, they are just part of the text. You want them to establish their own block, so you should use a { display: block; } with an appropriate context. This also enables you to add padding to the <a> elements rather than the <li> elements, making their clickable area larger, and thus easier to use.