I have a code
<ul class="catven">
<li><a target="_blank" href="http://" style="color:skyblue;text-decoration:none;margin-left:10px;">Abhijit Brew Tech Pvt Ltd</a></li>
<li><img src="http://localhost:8000" alt="" class="main-cat-img"></li>
</ul>
So this code has a Link and an image i want the whole Ul to be clickable
Thanks,
You can put the entire UL inside an anchor Tag but for that you will have to remove the <a> tag inside which is there in your <li>
You cannot put another <a> tag inside an <a> tag, It will close all the <a>tags when it finds first </a>
for eg:
<a href="www.google.com">
This is before a tag of li closes
<ul class="catven">
<li><a target="_blank" href="http://" style="color:skyblue;text-decoration:none;margin-left:10px;">Abhijit Brew Tech Pvt Ltd</a></li>
<li><img src="http://localhost:8000" alt="" class="main-cat-img"></li>
</ul>
This is after a tag of li closes
</a>
This will make only he first <li> or anything thats written between first <a> of google.com and end of </li> clickable
like below:
In order to make it work you will have to remove the inside the <a> tag
<a href="www.google.com">
This is before a tag of li closes
<ul class="catven">
<li>Abhijit Brew Tech Pvt Ltd</li>
<li><img src="http://localhost:8000" alt="" class="main-cat-img"></li>
</ul>
This is after a tag of li closes
</a>
like below:
simply do add anchor tag out side the UL
like this :->
<a href="#"><ul class="catven">
<li><a target="_blank" href="http://" style="color:skyblue;text-decoration:none;margin-left:10px;">Abhijit Brew Tech Pvt Ltd</a></li>
<li><img src="http://localhost:8000" alt="" class="main-cat-img"></li>
</ul>
</a>
Related
I just started practicing HTML and some CSS,
while working on a task from the course i'm taking online I have encountered an issue with closing a div
I have created a .section3 on css
font-family: 'Handlee', cursive;
font-size: 13pt;
background-color: #fff;
padding: 15px;
margin-bottom: 10px;
border-radius: 10px;
and on the <body> i've created a span with a ul which has inside text and images along with an a href and the result looks as desired.
however, while trying to close the div I get the following error ```End tag (form) seen too early. Expected other end tag.
the code is as follows;
<div class="section2">
<h4><span>COMPLETED COURSES</span></h4>
<ul>
<li>
HTML on <strong>SoloLearn</strong> - <small>link to certificate</small>
</li>
<a href="https://www.sololearn.com/Certificate/1014-6538353/pdf/" add target="_blank">
<img src="https://www.sololearn.com/Certificate/HTML/jpg/" width="100px" height="65px" alt="">
</a>
<li>
SQL on <strong>SoloLearn and Pluralsight</strong> - <a href="https://www.sololearn.com/Certificate/1014-6538353/pdf/">
<small>link to certificate</small></a>
</li>
<a href="https://www.sololearn.com/Certificate/1014-6538353/pdf/" add target="_blank">
<img src="https://www.sololearn.com/Certificate/HTML/jpg/" width="100px" height="65px" alt=""></a>
<!--error line--> </div>
I tried everything I could, please advice.
Thank you.
You did not close your <ul> tag. You should insert </ul> tag just before your </div>.
<div class="section2">
<h4><span>COMPLETED COURSES</span></h4>
<ul>
<li>
HTML on <strong>SoloLearn</strong> -
<a href="https://www.sololearn.com/Certificate/1014-6538353/pdf/">
<small>link to certificate</small></a
>
</li>
<a
href="https://www.sololearn.com/Certificate/1014-6538353/pdf/"
add
target="_blank"
>
<img
src="https://www.sololearn.com/Certificate/HTML/jpg/"
width="100px"
height="65px"
alt=""
/>
</a>
<li>
SQL on <strong>SoloLearn and Pluralsight</strong> -
<a href="https://www.sololearn.com/Certificate/1014-6538353/pdf/">
<small>link to certificate</small></a
>
</li>
<a
href="https://www.sololearn.com/Certificate/1014-6538353/pdf/"
add
target="_blank"
>
<img
src="https://www.sololearn.com/Certificate/HTML/jpg/"
width="100px"
height="65px"
alt=""
/></a>
</ul>
<!--error line-->
</div>
First of all, inside a <ul> there can only be multiple <li> elements.
In your code your <a> elements are siblings to your <li>, try putting them inside.
Then you forgot to close your <ul> tag !
My advice for you is to keep your code indented, noticing missing tags will become easier.
Getting some off behaviour with my Bootstrap horizontal navigation, for some reason it seems to be adding an extra anchor link into the first <li><!-- here --></li> element.
Code:
<li class='submenu'>
<a href='#'>
<img src='{{ URL::asset('img/menu/performance.png') }}' /> Performance
<ul class='nav'>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
</ul>
</a>
</li>
What Chromes Inspector says:
<li class="submenu">
<a href="#">
<img src="https://xxxxxx/img/menu/performance.png"> Performance
</a>
<ul class="nav" style="display: block;"><a href="#">
</a><li><a ref="#">abc</a></li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</li>
Any one got an idea's of why this is happening? I hacky fixed it with the following CSS:
.left-nav .submenu li:nth-child(2) > a:first-child {
display:none;
}
You should not have any links inside another link.
This is not valid HTML.
If the browser encounters a link tag while already inside a link tag it will add
the closing tag for the first link.
I was using links within links, causing this to happen. I have moved the secondary <ul> outside of the anchor tab and its now working.
This is the a litle piece from a menu:
<li>Some Text
Now I want that after SOME TEXT to be 1 2 3 and when I click 1 2 3 to link me to another link, it has to be inside the >Some Text </a>.
Some ideas?
I'm not sure if that's what you are searching for:
<ul id="mega-menu-1" class="mega-menu">
<li>Products
<ul>
<li>Vehicles
<ul>
<li><a id="in_a_row" href="#">Coupe
<div class="cars">
<a class="car" href="#">1</a>
<a class="car" href="#">2</a>
<a class="car" href="#">3</a>
</div>
</a></li>
</ul>
</li>
</ul>
</li>
</ul>
For styling of the elements you can use this CSS code:
.cars,
.car,
#in_a_row
{
display: inline !important;
}
Use !important to overwrite styles which have been defined by the plugins CSS file.
Here you can grab the source code. Just replace the index.html of the plugin with that code.
This is my first "phonegap" application project, so done with the listview in html based on the requirement but listview is not properly formatted (ie one below the other), how to make the items to display one below the other. please help me.
here's my code for listview
<div>
<ul data-role="listview" data-inset="true">
<li><a href="#">
<img src="images/c3.jpeg" align="left">
<h3>CONGRATULATIONS</h3>
</a>
</li>
<li><a href="#">
<img src="images/c2.jpeg" align="left">
<h3>HOLYDAY</h3>
</a>
</li>
<li><a href="#">
<img src="images/card1.jpeg" align="left">
<h3> I'M SORRY </h3>
</a>
</li>
<li><a href="#">
<img src="images/c4.jpg" align="left">
<h3> HAPPY BIRTHDAY </h3>
</a>
</li>
<li><a href="#">
<img src="images/c5.jpg" align="left">
<h3> MISSING U</h3>
</a>
</li>
<li><a href="#">
<img src="images/images.jpg" align="left">
<h3> ENGAGEMENT</h3>
</a>
</li>
![device output][1]
First of all you cannot use <br /> as direct ul child and secondly am sure you are using float: left; for the images which are inside li tag and thus it is spoiling the layout. Inorder to fix it, use the CSS property block below
ul.class_name li {
overflow: hidden;
/* Other styles goes here */
}
Just assign a class to ul element, replace the .class_name in CSS with the class you assigned to the ul element in your HTML.
Also, you can use the below declaration to self clear the parent element like
.clear:after {
display: table;
content: "";
clear: both;
}
This will self clear the parent element just like overflow: hidden; does, but in a better way.
This line displays my logo:
<li><img class="logo" src="selector/logo.png" alt="" /></li>
How can I add a clickable link to this image?
Try this here:
<li>
<a href="target.html">
<img class="logo" src="selector/logo.png" alt="" />
</a>
</li>
You want properly also to remove the border around the image. To fix that use this CSS:
.logo {
border: 0;
}
Are you just asking how to make the image a hyperlink to itself? Like this?:
<li>
<a href="selector/logo.png">
<img class="logo" src="selector/logo.png" alt="" />
</a>
</li>