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>
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>
I am trying to redesign the look of the mobile menu on my Wordpress theme. I have most of the css done but I would like to have a border-bottom appear when you hover over the menu. I have tried to add this to the <a> tag but it underlines the whole div rather than just the text. Using the inspect tool, I see I need to target the <font> tag that is within the <a> tag but how do I apply the hover attribute to it?
Here is a basic example to explain the structure of the theme's menu.
<div id="menu-wrap">
<ul id ="menu">
<li class="menu-item>
<a class="menu-link" href="www.website.com/link">
<font style> Link Name </font>
</a>
</li>
</ul>
</div>
The font element is deprecated obsolete. See more at MDN's site here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font
I would suggest using a span tag and targeting the span, e.g. .menu-link:hover span.
you can use :hover to create hover underline effect
<div id="menu-wrap">
<ul id ="menu">
<li class="menu-item">
<a class="menu-link" href="www.website.com/link">
<font style> Link Name </font>
</a>
</li>
</ul>
</div>
<style>
.menu-link{text-decoration:none;}
.menu-link:hover{text-decoration:underline;}
</style>
a font:hover{}
if there is only font tag in the a tag in that case u can use above format
or particular that font tag u can use .menu-link font:hover{}
You are missing a " in your menu-item class, this could potentially break the render of the border.
For the font bottom border on hover, you can do this :
.menu-link font:hover {
border-bottom: aqua solid ;
}
// Or
a font:hover {
border-bottom: aqua solid ;
}
<div id="menu-wrap">
<ul id ="menu">
<li class="menu-item">
<a class="menu-link" href="www.website.com/link">
<font style> Link Name </font>
</a>
</li>
</ul>
</div>
Also, you should not use the font tag since it's depreciated / not supported in HTML5.
I have a <ul> with a couple of <li>. In my css with li { display: inline; } I put the li elements in a horizontal order. The li elements contain a picutre and text. But now the picture and the text are also in horizontal order, but I want them to be under neeth each other. How can I do that?
<ul>
<li>
<img src="img/a.png" />
A
</li>
<li>
<img src="img/b.png" />
B
</li>
<li>
<img src="img/c.png"/>
C
</li>
</ul>
You will need to change your CSS as follows:
li {
display: inline-block;
}
li img {
display: block;
}
Here is a quick demo: http://codepen.io/anon/pen/VLLoEZ
This is not a bug but a normal behaviour. <img> tag is by default inline. You could solve this non-issue by either wrapping either your image or, better, your text into a block element. For example, a <p>tag for your text :
<ul>
<li>
<img src="http://placehold.it/140x100" />
<p>Your text here</p>
</li>
<li>
<img src="http://placehold.it/140x100" />
<p>Your text here</p>
</li>
<li>
<img src="http://placehold.it/140x100" />
<p>Your text here</p>
</li>
</ul>
jsFiddle
Note I use display:inline-block on li elements, taking advantage of both inline (putting things side-by-side, alignment,...) and block (fixed size, top/bottom margins) properties. Although it has a strange but easilly fixed "feature/issue", this is most of the time the best way to put elements side-by-side. display: inline or floating elements are also used but come with some other issues sometimes a bit trickier to be fixed.
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.
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!