Having a brain freeze...
I want to do this :
<li>
<a>
<p>text</p>
<p class="x">text</p>
</a>
</li>
I know I can't. So how do I ? (No JS/jQuery etc)
Change <p> to some inline element (e.g. <span>) and give li a span a style of display: block;, I guess.
<li>
<a>
<span>text</span>
<span class="x">text</span>
</a>
</li>
You could do that in HTML(5). But support in some browsers (Firefox) is flakey. See: http://html5doctor.com/block-level-links-in-html-5/
The best way is to use naturally inline elements such as <span>s instead of block level elements inside the anchor.
This validates as XHTML 1.1:
<li>
<p>text</p>
<p class="x">text</p>
</li>
I'm assuming what you're getting at is you want the entire block of text in the list item, and maybe the entire list item, to be clickable?
First, a paragraph tag is a block level item, but an anchor tag is inherently an inline element. You can't place that inside an anchor tag, it's not semantically correct and it won't validate. Do something like this instead:
<ul class="myList">
<li>
<a href="#">
<strong>This is the title</strong>
<span>This is the link text</span>
</a>
</li>
</ul>
Assuming you want the entire area of the list item to be clickable, you can apply display:block; to the anchor tag using css. Note that if you've assigned a different height to the list item and want everything to be clickable, you'll need to set the height on the tag as well.
.myList a { display:block; }
And if you want the strong tag to break a line (your "main text" in the link)...
.myList a strong { display:block;}
Hope that helps!
Related
whicth tag are allowed inside the li tag?
div?
img?
span?
a (href)?
I think div is not allowed. But img, span and a are allowed. Am I right?
Every tag is allowed. I tested in Firefox: img, span, a, even the div.
You actually can put pretty much any of them inside a li. But different person has different opinion. Some will disagree with putting a div inside a list item, but according to the W3C validator you actually can do that. But still, if you need to check or need to use nested elements, you can use W3C validator or any other tools available online.
<ul>
<li>
<span>Some text</span>
</li>
<li>
<p>link</p>
</li>
<li>
<img width="150" height="150" src="https://images.unsplash.com/photo-1633114127451-558041183c3b?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" alt="alt" />
</li>
<li>
<div>
<input type = "text" />
</div>
</li>
</ul>
So, when I make hyperlinks by default it starts a new line. I have tried the li tag, I have also tried the div tag. Here is my code
<h1>Home</h1>
<h1>Staff</h1>
Give your links a display of "inline-block" and they will appear next to each other. You can then add some padding or margin to give them some space.
You can achieve the same result by using the li tag and giving them the display:inline-block style.
<ul>
<li style="display:inline-block;">
<h1>Home</h1>
</li>
<li style="display:inline-block;">
<h1>Staff</h1>
</li>
</ul>
By the way, you should not be using two or more "h1" headings in the same page and you should avoid using inline styles. Keep them in an external CSS file.
Here's your original code using the display:inline-block style and with some spacing:
<h1>Home</h1>
<h1>Staff</h1>
According to this baller resource, the <span> tag is used to group inline-elements in a document: http://www.w3schools.com/tags/tag_span.asp
<span>
<a href="index.html" style="text-decoration : none; color : #00FFFF;">
<h1>Home</h1>
</a>
<a href="staff.html" style="text-decoration : none; color : #00FFFF;">
<h1>Staff</h1>
</a>
</span>
This really freaky thing has been happening. I have a code:
<p class="desc"><img class="portrait" src="../images/albums/pxal_prism.jpg" />
<ul class="song_list">
<li>Prism</li>
<li>Other Song</li>
<li>Some other song</li>
<li>you know...</li>
<li>getting ridiculous</li>
</ul>
</p>
And when I do inspect element it appears like this:
<p class="desc"><img class="portrait" src="../images/albums/pxal_prism.jpg" /></p>
<ul class="song_list">
<li>Prism</li>
<li>Other Song</li>
<li>Some other song</li>
<li>you know...</li>
<li>getting ridiculous</li>
</ul>
<p></p>
Because of this my ul is not at the right position (beside the pic). Please help.
<p> expects inline content, but you specified a <ul> tag which is a block element. It is not allowed there, so the browser closes the <p> element automatically before the start of <ul>.
Think about the semantics for a second: <p> is called a paragraph. A paragraph can not contain lists. Instead of a paragraph, you should use a <diV> which expects flow content, so the <ul> tag is allowed.
According to http://www.w3.org/TR/html401/struct/text.html#h-9.3.1, P element "cannot contain block-level elements (including P itself)."
<!ELEMENT P - O (%inline;)* -- paragraph -->
It means P element can only have the inline elements inside it.
As per your html, you are using:
<p> --block element
<img..../> -- inline element which is allowed
**<ul>...</ul>** -- block element which is not allowed
</p>
Instead of P you can use the div element.
Remove p tag, you can use div tag.
Use CSS property (float: left) to img tag and ul so they will come beside each other.
So, I have this list contained within a specific id. I only want to manipulate the link colors for this specific id, which is #icon-header. So here is the problem:
I want the whole li element to be the link, but instead of having the background color change on hover, I want all of the text elements to to the color #2BA6CB. And no matter where the user clicks, I want the whole li element to be the link.
So, I was wondering if there was something wrong with where I am putting the a tag, and also what your suggestions were for the css of it all.
The i tag is a webfont. I need that to change with the h4 and the p tag all at the same time when the user hovers over the li.
Any help would be amazing. Here is the html:
<div class="row hide-for-small" id="icon-header" align="center">
<ul class="large-block-grid-6 small-block-grid-1 medium-block-grid-6">
<li></li>
<li>
<a href="#">
<i class="fi-male size-60"></i>
<h4>Ready</h4>
<p>Create a personal health and fitness profile.</p>
</a>
</li>
<li>
<a href="#">
<i class="fi-checkbox size-60"></i>
<h4>Set</h4>
<p>Set goals and chart your progress.</p>
</a>
</li>
<li>
<a href="#">
<i class="fi-upload-cloud size-60"></i>
<h4>Go</h4>
<p>Upload your exercise data from anywhere.</p>
</a>
</li>
<li>
<a href="#">
<i class="fi-graph-bar size-60"></i>
<h4>Learn</h4>
<p>View real results and develop healthy patterns.</p>
</a>
</li>
<li></li>
</ul>
</div>
You need to give the a-tag the dimensions (width & height) of the li Element instead of styling the li Element. Then you will have the effect, that you can click the whole highlighted area instead of only the link.
To give an inline element like ´a´-Tag a width and height you need to give it ´display:block;`.
Make the 'a' tag display: block in the css. Note that wrapping an anchor tag around block level elements is only allowed in html5. Older specs explicitly disallow it.
What CSS makes <a> tags show on a single line, rather than under each other?
Maybe have a link in <li> tag?
I believe you want:
a {
display: block;
}
edit
Anchors by default show inline, but the related CSS is:
a {
display: inline;
}
You could also use inline-block which gives you a bit more functionality (although some older browsers support it poorly).
If you want a link in a <li> tag:
<ul>
<li>
Link here.
</li>
</ul>
CSS:
li {
display:inline-block;
}
Example here
I created an example for you which answers your second question.
<p id="top">This is the top of the file</p>
<ul> Favourite sports
<li>Football</li>
<li>Tennis</li>
<li>Rugby</li>
</ul>
<p>This link goes to the top</p>
The tag li refers to list item. Links are written the same way in ordered and unordered lists.