I have multiple li-a tags with varying size of text inside it. How can I display this line wise. As of now all the li -a tags are squeezing in one line and I want it in seperate lines. Should be able to handle single line and multiple line of text..
<ul>
<li><a>AAAA </a></li>
<li><a>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB </a></li>
<li><a>CCCCCCCCCCCCCCCCCCCCCCC</a></li>
<li><a>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</a></li>
</ul>
Display should be:
AAAA
BBBBBBBBBBBBBBBBBBBBBBB
CCCCCCCCCCCCCCC
DDDDDDDDDDDDDDDDDDDD
As of now it is:
AAAAAABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
BBBBCCCCCCCCCCCCCCCCCCCCCCCCCDDDDDDDDDDDDDDD
CSS
ul li a{
line-height: 45px;
border: 1px solid #ff0000;
margin-left:10px
}
li is block element it has to work by default. But somewhere you have changed to line that why it didnt work, so reset adding block as given below
Add display:block to li element
ul li{
display:block;
}
Related
Firstly, happy new year to you all! :)
Ok let's get to it. I have 5 items in my menu, and i would like to color "+" part of the word to red, choosing 2nd,3rd and 4th item of menu.
This is what menu looks like right now.
This is how the menu should look like, when its done.
I might have given a bad picture, but i think you can see the red "+" on 2nd,3rd and 4th item of menu.
This is what i've tried so far, but i can't seem to figure out the nth-child method.
#menu li:nth-child(2):first-letter a{color:red;}
Also tried this, but it colors every first letter in all 5 elements :S
#menu .nav > li > a:first-letter{color:red;}
Any help will be appreciated!
Thank you all!
I've managed to find the solution. Not sure if it's the best one, but im posting it below, so that any1 in the future can use it too, if no other solution is found
#menu .nav > li:nth-child(2) > a:first-letter
{
color:red;
}
#menu .nav > li:nth-child(3) > a:first-letter
{
color:red;
}
#menu .nav > li:nth-child(4) > a:first-letter
{
color:red;
}
Use the :not() selector to have all but one selected like this:
#menu{
background: rgb(83,83,83);
width: 100vw;
height: 40px;
}
ul{
text-align: center;
line-height: 40px;
vertical-align: central;
}
ul li{
display: inline-block;
color: white;
list-style: none;
margin-left: 25px;
}
a{
color: white;
display: block;
}
#menu ul li:not(:first-child):not(:last-child) a::first-letter{
color: red;
}
<div id="menu">
<ul>
<li>+option</li>
<li>+option</li>
<li>+option</li>
<li>+option</li>
<li>+option</li>
</ul>
</div>
I know this question already has an accepted answer, but I think there is a semantically better way of doing this. Instead of having the + symbol inside the link's markup, why not add it as a pseudo :before element? Easier to style and not dependent on your markup.
<nav>
<ul>
<li>Domov</li>
<li class="with-symbol">Naravni kamen</li>
<li class="with-symbol">Dekorativni kamen</li>
<li class="with-symbol">Keramika</li>
<li>Kontakt</li>
</ul>
</nav>
And the respective CSS:
.with-symbol:before {
content: '+';
color: red;
}
Then position it with either position: absolute; or negative left margin.
From the docs (https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Afirst-letter): A first line has meaning only in a block-container box, therefore the ::first-letter pseudo-element has an effect only on elements with a display value of block, inline-block, table-cell, list-item or table-caption. In all other cases, ::first-letter has no effect. So you will need to add display: block to your anchor tags.
I would also change the selector to:
ul li a:first-letter {
color:red;
}
as you need to select the first letter of the anchor tag, not the list item.
As a side note, it might be a better solution to use a span as suggested above or pseudo elements to insert the plus character and use a class to determine if it should be displayed or no.
I'm working on a psd to html and I have an image like so:
So meaning I have a tag with Image. My problem now is how can I design the link in there? Do I need to have a <br /> after the text or what?
<ul id="steps-nav">
<li>
<img src="img/building-details.png" alt="Building Details"/>
STEP 1: ENTER YOUR BUILDING DETAILS
</li>
<li>
<img src="img/electricity-details.png" alt="Electricity Details"/>
<a href="#">STEP 2: ENTER YOUR
ELECTRICITY DETAILS</a>
</li>
</ul>
Here's my CSS:
#steps-container{
background-color:#0a0806;
opacity: 0.7;
margin-top: 43px;
border-bottom: solid 10px #abd038;
}
#steps-container .steps{
width:960px;
margin:auto;
height:50px;
}
#steps-container .steps ul li{
float:left;
}
#steps-container .steps ul li a{
text-decoration: none;
color:#ffffff;
border:solid 1px;
}
#steps-container .steps ul li a:after{
content:"\A"; white-space:pre;
}
Problem 1: You want the image to be clickable with the link.
Solution: Wrap the a anchor around the image and the text, not just the text.
Problem 2: You want the text to be on multiple lines next to it.
Solutions:
a. You could go in the general direction you were trying, directly attaching the image and putting text next to it.
b. You could set the image as a background with padding. The image itself would not be accessible via the alt attribute, but the label does provide that extra information.
http://jsfiddle.net/D4vyM/
This will make the list items in the same line:
#steps-nav li {
display: inline-block;
}
Make the anchor fill up the box created by the list item and make space for the image:
.some-step {
padding-left: 50px;
display:block;
width: 100%;
height: 100%;
}
And we will add styling to the text being focused on, which is also brought to the new line:
.step-focus {
font-weight: bold;
display: block;
}
Use the display property to specifies the type of box used for an element. A simple example of how to make a new line without using br in css.
Example :
a {
display: block;
}
Put <a> tag inside <div> tag. Should do the trick. <div> tags are acceptable inside the li
If you can't use div then use:
a:after { content:"\A"; white-space:pre; }
EDIT
Just use <br /> tag.
Whats the difference of use CSS like this:
.mainHeader nav ul li {.....
compared with just this:
.mainHeader li {.....
It works fine with just the latter alternative. Since I don't have any other nav or ul in the mainHeader, I guess it's ok to just use the latter one?
What if you have HTML like this?
<div class="mainHeader">
<nav>
<ul>
<li>Menu item</li>
<li>Menu item
<ul><li>With submenu</li></ul>
</li>
</ul>
</nav>
</div>
Now, if you wanted to only style a "Menu item" and submenu items separately, the only way to do so specifically is with the following selectors:
.mainHeader nav>ul>li { /* menu item */ }
.mainHeader li>ul>li { /* submenu item */ }
Using the > combinator is important here, to ensure you are styling the right element. .mainHeader li alone will not do.
As long as you will never include any other matching elements, it's okay (where okay means "it will work"). A good approach is to add a class to your ul and select it that way:
ul.my-menu li {
/* CSS styles */
}
And - by the way - I guess mainHeader is not the tag name. If it is an identifier, you must use #mainHeader and .mainHeader if it is a class. (You changed it)
<div id="mainHeader">
<ul><li>facebook</li><li>twiiter</li></ul>
<div id="nav">
<ul><li>Home</li><li>About</li><li>Information</li><li>Contact</li></ul>
</div>
</div>
So #mainHeader li{....} will do all li in div
and #mainHeader nav ul li {....} will overwrite for the nav bar
Adding a class to each ul or adding > will make the code stronger when it is edited in future like suggested above.
The difference is only one thing, you can list any type of element next to .mainHeader for example, #mainHeader a p code div nav span ul li. This will give all of these elements with an ID of mainHeader the CSS you place in the { } for that element.
I'll give you an example.
HTML:
<div class="mainHeader">This text is black because "mainHeader".</div>
<a class="mainHeader" href="#">This text is black because "mainHeader".</a>
<p class="mainHeader">This text is black because "mainHeader".</p>
<nav class="mainHeader">This text is black because "mainHeader".</nav>
<span class="mainHeader">This text is black because "mainHeader".</span>
CSS:
.mainHeader div a p nav span {
color: #000;
}
Update(1): Please understand that doing this is recommended if you are going to give multiple elements the same aspect for a specific thing. An example of this usage, say you want div a p to have the same color, you would achieve this by div a p { color: #000; /* color your wanted */ }
I am working with a nested menu and have the same class appear on two levels of the tree, but I need to format said differently in the lower level. Any ideas how I can do this? I've searched for some time and tried many different solutions to no avail. Here's my HTML and most recent attempt:
<ul class="topnav">
<li><h3 class="toggle_action"> Meetings</h3>
<ul class="div_toggle">
<li><h3>Home</h3></li>
<li><h3 class="toggle_action"> Attend</h3> // <-- same div as line 2 but needs different formatting
<ul class="div_toggle"> etc...
and attempted CSS fix:
.toggle_action { /// the top-level format for the div with blue text
color:#5376c5;
}
ul.topnav ul li { /// the general <ul> formatting for the secondary level
color: #999;
}
.toggle_action ul ul li { /// my attempt to make the div appear in gray on second level
color:#999;
}
any tips would be greatly appreciated!
Your last CSS style never exists in the HTML; the <h3 class="toggle_action"> has no children.
I think you meant this:
.toggle_action {
color:#5376c5;
}
ul.topnav ul li {
color: #999;
}
ul ul li .toggle_action {
color: #999;
}
i have a ul, with three li inside it. the first li text is "opptakskrav" and the last li element is "ja". Anyone know why the text on my second li doesnt use the whole width and why it starts a new line halfway?
<ul class="admission infoUl">
<li class="head">Opptakskrav</li>
<li>Kravet for opptak til bachelorgraden er normalt generell studiekompetanse.</li>
<li> ja</li>
</ul>
this is the only css:
.infoUl {
padding-left:35px;
}
.infoUl li.head {
font-weight:bold;
}
It looks like there is a width set on the ul or li. Maybe a style is being inherited from a different stylesheet. Is there another set of styles that is making the text sans-serif with a grey background?