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.
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;}
so I am running WordPress, with a premium theme.
I wish to change the navigation bar size, and so I added
li
{
float:left;
}
a
{
display:block;
width:60px;
}
When I add this, the navigation bar changes size, and becomes as I want to. HOWEVER, also the posttitles changes layout, and becomes really ugly.
I am looking for some input
If you're targeting li elements globally, it may be affecting more than just the nav area. Try adding more specificity to your rule.
i.e. ".nav li" (.nav being whatever the class or id of your nav is) instead of just "li"
sounds like float is affecting other elements. Using clear:both should fix this.
<ul>
<li>....</li>
</ul>
<div class="clearfix"></div>
and .css
.clearfix{
clear:both;
}
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.
Here's a live demo for your convenience: http://jsfiddle.net/Lr6NQ/2/
On ul#navigation ul, if there is an explicit width, the links appear on their own "line" as intended. However, as the links have varying widths, I'd rather leave it as "auto" so the <ul> isn't really wide for lists with short content.
How can I prevent the link from line breaking, without setting an explicit width. If the link is one word, I get the desired effect, but with multiple words, the <ul> is only as wide as the longest word.
ul#navigation li {
white-space:nowrap; /* <-- ADDED */
float:left;
width:auto;
padding:10px;
margin-right:10px;
position:relative;
}
If you want to shorten long lines add a <br /> in the anchor.
You can use non-breaking spaces. Instead of spaces in the link, use .
Is there a way to prevent a line break after a div with css?
For example I have
<div class="label">My Label:</div>
<div class="text">My text</div>
and want it to display like:
My Label: My text
display:inline;
OR
float:left;
OR
display:inline-block; -- Might not work on all browsers.
What is the purpose of using a div here? I'd suggest a span, as it is an inline-level element, whereas a div is a block-level element.
Do note that each option above will work differently.
display:inline; will turn the div into the equivalent of a span. It will be unaffected by margin-top, margin-bottom, padding-top, padding-bottom, height, etc.
float:left; keeps the div as a block-level element. It will still take up space as if it were a block, however the width will be fitted to the content (assuming width:auto;). It can require a clear:left; for certain effects.
display:inline-block; is the "best of both worlds" option. The div is treated as a block element. It responds to all of the margin, padding, and height rules as expected for a block element. However, it is treated as an inline element for the purpose of placement within other elements.
Read this for more information.
.label, .text {display: inline}
Although if you use that, you might as well change the div's to span's.
A DIV is by default a BLOCK display element, meaning it sits on its own line. If you add the CSS property display:inline it will behave the way you want. But perhaps you should be considering a SPAN instead?
<span class="label">My Label:</span>
<span class="text">My text</span>
try this (in CSS) for preventing line breaks in div texts:
white-space: nowrap;
The div elements are block elements, so by default they take upp the full available width.
One way is to turn them into inline elements:
.label, .text { display: inline; }
This will have the same effect as using span elements instead of div elements.
Another way is to float the elements:
.label, .text { float: left; }
This will change how the width of the elements is decided, so that thwy will only be as wide as their content. It will also make the elements float beside each other, similar to how images flow beside each other.
You can also consider changing the elements. The div element is intended for document divisions, I usually use a label and a span element for a construct like this:
<label>My Label:</label>
<span>My text</span>
div's are used to give structure to a website or to contain a lot of text or elements, but you seem to use them as label, you should use span, it will put both text next to eachother automatically and you won't need to wright css code for it.
And even if other people tell you to float the elements it's best that you just change the tags.
I don't think I've seen this version:
<div class="label">My Label:<span class="text">My text</span></div>
<div id="hassaan">
<div class="label">My Label:</div>
<div class="text">My text</div>
</div>
CSS:
#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}
Try applying the clear:none css attribute to the label.
.label {
clear:none;
}
use this code for normal div
display: inline;
use this code if u use it in table
display: inline-table;
better than table
try float your div's in css
.label {
float:left;
width:200px;
}
.text {
float:left;
}
I have many times succeeded to get div's without line breaks after them, by playing around with the float css attribute and the width css attribute.
Of course after working out the solution you have to test it in all browsers, and in each browser you have to re-size the windows to make sure that it works in all circumstances.
display: inline-block worked for me