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.
Related
My html:
<!DOCTYPE html>
<html>
<head>
<style>
li {
font-weight: bold;
text-align: right;
}
</style>
</head>
<body>
<li>Consultation</li>
<li>Pharmacist</li>
<li>Registration No.</li>
</body>
</html>
Currently the bullet-points appear to the left of the list items ;
Can I make the dots go on the right ?
i) direction:rtl; should do the trick, since you have added text-align:right to the li, the li is right aligned. play around and you will be able to use it to suit your needs
DEMO
CSS:
li{
font-weight:bold;
text-align:right;
direction:rtl;}
ii) In case if you are looking to add "*" required symbol next to each item like the one you mentioned in the url. You can do the below.
DEMO
CSS:
li {
display:block;
list-style:none;
}
li:after {
content:"*";
}
iii) Or you can set the list-style-type:none and set background image for the bullet like in this example: Background images for bullet
Use direction: rtl; to make text and list item bullets orient right-to-left.
li {
font-weight: bold;
text-align: right;
direction: rtl;
}
https://jsfiddle.net/tyew2s8f/
More Reading
https://developer.mozilla.org/en-US/docs/Web/CSS/direction
https://www.w3.org/International/questions/qa-bidi-css-markup
You can use direction: rtl;. The direction property specifies the text direction/writing direction.
Tip: Use this property together with the unicode-bidi property to set or return whether the text should be overridden to support multiple languages in the same document.
If you want the bullet-points to the right but with text align left
li {
display:block;
list-style:none;
width: 200px;
position: relative;
}
li::after {
content: "•";
display: inline-block;
position: absolute;
right: 0;
}
<ul>
<li>Consultation</li>
<li>Pharmacist</li>
<li>Registration No.</li>
</ul>
Here's something that you could do.
`<style>
li {
list-style-type:none;
}
</style>`
^ That will get rid of the bullets
then manually add in • inside of your li tag
for example <li>Consultation •</li>
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 would like to ask anyone who could help me where is the difference between this two CSS tags.
.bmenu:hover li a{...}
VS
.bmenu li a:hover{...}
Thank you very much for help and sry for my bad english.
Edit 1: I would like to ask for explanation mainly, how do they both work, because in the first case, there is a "li a" behind the :hover. What does it mean please? Thx
To explain this, I'll use this example code:
<div class="bmenu">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
if you use .bmenu:hover you're saying you want the CSS to apply when you hover the ENTIRE .bmenu div.
When you say .bmenu li a:hover you are saying that you want to apply the CSS when you hover the a tag within a .bmenu li.
Here's a quick example I made, the top is using the .bmenu:hover method, and the bottom is using the li a:hover method. fiddle here.
In the first case an <a> will apply styles when you hover .bmenu, in the second case - when you hover the <a> itself. Take a look at these two blocks:
.bmenu1, .bmenu2 {
width: 200px;
height: 100px;
margin: 10px;
padding: 40px;
background-color: orange;
}
a {
display: block;
height: 100%;
width: 100%;
background-color: firebrick;
}
.bmenu1:hover a {
background-color: lightblue;
}
.bmenu2 a:hover {
background-color: lightblue;
}
<div class="bmenu1">
</div>
<div class="bmenu2">
</div>
I'm learning CSS and html and am stuck on retaining the look of the hover/active state after an item has been clicked. I've looked at several posts on this site and haven't been able to apply the lesson to my application. I also found a solution here http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ but it didn't work for me (I'll assume it's my fault).
Another source suggested using a span class which is what I'm currently trying. I want to have the same hover color (#fff), weight (bold), and background image in use when a menu item is selected to show the user exactly where they are (this is in the secondary sidebar nav and comes in to use on those pages where the main nav has a dropdown with multiple otions). The only characteristic that's working for me is the bold text. You can see the work in progress here:
http://www.mentalwarddesign.net/dynamec/About/index.html
I'm assuming the class I've created in the span is being overridden, but I'm at a loss as to the remedy. Any and all help would be greatly appreciated.
Following is the code for the li and then the corresponding CSS. Thanks in advance!
<ul class="nav">
<span class="chosen"><li>What We Do</li></span>
<li>How It Started</li>
<li>Who We Are</li>
<li>What We Know</li>
</ul>
.chosen {
font-weight: bold;
color: #ffffff;
background-image: url(../imgGlobal/bulletRight.jpg);
background-repeat: no-repeat;
display: block;
padding-left: -12px;
background-position: 168px;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
background-color: #fff;
}
ul.nav {
list-style: none;
}
ul.nav li {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #464646;
height: 50px;
background-color: #000;
}
ul.nav a, ul.nav a:visited {
display: block;
width: 160px;
text-decoration: none;
padding-top: 12px;
padding-right: 5px;
padding-left: 15px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #ffffff;
font-weight: bold;
height: 38px;
background-image: url(../imgGlobal/bulletRight.jpg);
background-repeat: no-repeat;
background-position: 168px;
}
Ed, the CSS selector :active means "Being activated (e.g. by being clicked on)", not "Having an href attribute that resolves to the URL of the current page". You can use server-side logic to insert a class=”chosen” or similar. E.g:
<li class="chosen">What We Do</li>
And, CSS style: ul.nav li.chosen a { }
There is another way to do it as mentioned on the tutorial link you gave, however it is not a good example.
Well first of all, you cannot wrap an li inside of a span. The only direct descendent of a ul is a li. You can put the class chosen directly on to the li and it works just fine.
<ul class="nav">
<li class="chosen">What We Do</li>
<li>How It Started</li>
<li>Who We Are</li>
<li>What We Know</li>
</ul>
Put the chosen class in the li element itself. Drop the span altogether.
EDIT:
Sorry, in the a element, i meant to say.
A span is a tag, a class is just an identifier. They don't really have anything to do with one another except a class can be used to apply a style to a span but that's true of any tag.
In your case you're trying to put a span (an inline element) around an li (a block level element). In HTML inline elements should not contain block elements.
You should be able to just do it like this: EDIT fixed based on the actual CSS
<li>What We Do</li>
I have a div element which has these css attributes :
HTML
<div class="messageContainer"></div>
CSS
.messageContainer {
margin-left: 2px;
background-color: #F7F5F2;
width: 100%;
min-height: 50px;
border: solid 1px silver;
padding-left: 5px;
margin-top: 3px;
}
When putting this html portion inside the div element :
Please do the things respectively:
<ol>
<li>
Create button control
</li>
<li>
Assign it to the main user
</li>
<li>
Let me know what happened
</li>
</ol>
This is how it shows on the page: (Please look at the numbers)
So the question is why this is happening?Why are the numbers are appearing outside of the div element.
EDIT
I used :
.messageContainer ol
{
list-style-position:inside;
margin-left:5px;
}
which worked just fine but now this is what happened :
Try this in your CSS:
.messageContainer ol
{
list-style-position: inside;
}