Below is my code:
#sam_ul li {
height: 41px;
border-bottom: 1pt solid #DEDEDE;
background-color: #F8F8F8;
}
#sam_ul li {
list-style-type: none;
}
#u_l_add:before {
content: '\0FBF';
}
<ul id="sam_ul" style="margin:0px;">
<li>
<a href="#">
<span id="u_l_add" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Add</div>
</a>
</li>
<li>
<a href="#">
<span id="u_l_sear" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Search Artifact</div>
</a>
</li>
</ul>
The content pseudo element is displayed differently in both IE and mozilla. By different I mean in IE it is displaying correctly while in mozilla it is adding some extra padding and displaying the content.
check the difference between the first li element and the second li element.
Can anyone help me with this?
Add padding:0 to unordered list
#sam_ul{
padding:0
}
#sam_ul li {
height: 41px;
border-bottom: 1pt solid #DEDEDE;
background-color: #F8F8F8;
list-style-type: none;
}
#u_l_add:before {
content: '\0FBF'; }
#u_l_sear:before {
content: '\0FBF'; }
<body>
<ul id="sam_ul" style="margin:0px;">
<li>
<a href="#">
<span id="u_l_add" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Add</div>
</a>
</li>
<li>
<a href="#">
<span id="u_l_sear" style="font-size:36px;line-height:20px;"></span>
<div style="width:130px;position:relative;top:-20px;left:40px;">Search Artifact</div>
</a>
</li>
</ul>
</body>
Try to normalize everything. HTML and body has default margin and padding for every browser that could ruin your design. Almost all block elements has that.
Try:
html,body{
margin: 0;
padding:0;
}
Or download and add normalize.css
Related
hello i have this in vuejs
<ul class="new-list">
<div v-for="cat in catss">
<div>
<a :href="link(cat)">
<li class="single-new">
<p class="title">{{cat.title}}</p>
</li>
</a>
</div>
</div>
</ul>
and i have this style
.single-new {
text-align:center;
width:100%;
border-bottom: 1px dotted black;
}
.single-new:last-child {
border:none;
}
but .sing-new:last-child overrid all items and remove border of all
how can i fix this
:last-child always confused, MDN explains it
The :last-child CSS pseudo-class represents the last element among a group of sibling elements.
In your example, what you want is the border of the last item in the list is none.
So, you should do this
.new-list > div:last-child .single-new {
border: none;
}
Every li you have is a last-child of an a tag.
try i like this
<ul class="new-list">
<div v-for="cat in catss" class="single-new">
<div>
<a :href="link(cat)">
<li>
<p class="title">{{cat.title}}</p>
</li>
</a>
</div>
</div>
</ul>
.single-new li {
text-align:center;
width:100%;
border-bottom: 1px dotted black;
}
.single-new:last-child li {
border:none;
}
You should remove all the div, a before the li. directly under an ul are supposed to be li.
You also should not put p (block) inside an a (inline). Use span instead.
Here is a link about the inline/block nature of html elements: Link
I guessed this is what you want
<ul class="new-list">
<div v-for="cat in catss" class="cat">
<div>
<a :href="link(cat)">
<li class="single-new">
<p class="title">{{cat.title}}</p>
</li>
</a>
</div>
</div>
</ul>
CSS
.cat {
.single-new {
text-align:center;
width:100%;
border-bottom: 1px dotted black;
}
}
.cat:last-child {
.single-new {
border:none;
}
}
This question already has an answer here:
Why doesn't nth-of-type/nth-child work on nested elements?
(1 answer)
Closed 3 years ago.
I've been trying to remove the last tab's border-right property... but both the nth-child property or the last-child property isn't working...
plus when i use nth-child(1) it selects all the children and doesn't work for other values
<!-- HTML Markup -->
<ul>
<a href="#">
<li>Solutions</li>
</a>
<a href="#">
<li>Industries</li>
</a>
<a href="#">
<li>Resources</li>
</a>
<a href="#">
<li>Partners</li>
</a>
<a href="#">
<li>About</li>
</a>
<a href="#" class="button">
<li>Enterprise</li>
</a>
</ul>
/* CSS Code */
ul:after{
content: "";
display: block;
clear: both;
}
li {
float: left;
padding: 10px 15px;
/* border-right: 1px solid #a5a5a5; */
color: #1F222B;
}
li {
border-right: 1px solid #ff0000;
}
li:nth-of-type(1) {
border-right: 1px solid #00b2ff;
}
li:hover {
border-right: 1px solid #F3EFF2;
background: #1F222B;
color: #F3EFF2;
}
Kindly help with the solution and the cause?
And is it possible to achieve the solution with 'li' tags inside the 'a' tag
but with the floating 'li' tags?
You can add this CSS to remove the border from the last tab
a:last-child li {
border-right: none;
}
CodePen is here: http://codepen.io/anon/pen/BKVMoY
ul {
width: 40%;
border: 1px solid black;
list-style: none;
padding: 0;
}
span:last-of-type {
float: right;
}
<ul>
<li>
<a href="#">
<span>New York</span>
<span>$489</span>
</a>
</li>
<li>
<a href="#">
<span>New York</span>
<span>$489</span>
</a>
</li>
<li>
<span>New York</span>
<span>$489</span>
</li>
<li>
<span>New York</span>
<span>$489</span>
</li>
</ul>
Why isn't the floated element underlined?
How can I make it clickable for space between the spans?
Why isn't the floated element underlined?
16.3.1 Underlining, overlining, striking, and blinking: the 'text-decoration' property
Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
To fix that, you can set text-decoration: inherit on the floated span.
span:last-of-type {
float: right;
text-decoration: inherit;
}
How can I make it clickable for space between the spans?
You can set the <a> to display:block, it will the occupies the entire width available.
a {
display: block;
}
ul {
width: 40%;
border: 1px solid black;
list-style: none;
padding: 0;
}
a {
display: block;
}
span:last-of-type {
float: right;
text-decoration: inherit;
}
<ul>
<li>
<a href="#">
<span>New York</span>
<span>$489</span>
</a>
</li>
<li>
<a href="#">
<span>New York</span>
<span>$489</span>
</a>
</li>
<li>
<span>New York</span>
<span>$489</span>
</li>
<li>
<span>New York</span>
<span>$489</span>
</li>
</ul>
I think you can just add display: block; to the anchor tags in order to make the entire row clickable. I'm not exactly sure why the floated element removes the underline.
<ul class="whole-row-link">
<li>
<span>New York</span>
<span>$489</span>
</li>
<li>
<span>New York</span>
<span>$489</span>
</li>
</ul>
ul.whole-row-link li {
position: relative;
}
ul.whole-row-link li a {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}
I was able to make the space between the link clickable but it stillls looks weird when you dont have underline.
I used the flexbox to acheive the effect of the clickable.
`http://codepen.io/Ebeldev/pen/BKVMwP`
I have a weird problem where my links work fine on one page or fail to do so on another. Here is my code for the non-working page:
<div id="wrapper">
<a href="frontPage.html"><header>
<img src="img/MOBILAX-LOGO.png" height="100" alt="logo">
<h1>MOBI & LAX</h1>
<p>CELLULAR REPAIR CENTER</p>
</header></a>
<nav>
<ul>
<li>
ABOUT US
</li>
<li>
SERVICES
</li>
<li>
IPHONE REPAIR
</li>
<li>
BLOG
</li>
<li>
CONTACTS
</li>
</ul>
</nav>
And the code for the working page:
<div id="wrapper">
<a href="frontPage.html"><header>
<img src="img/MOBILAX-LOGO.png" height="100" alt="logo">
<h1>MOBI & LAX</h1>
<p>CELLULAR REPAIR CENTER</p>
</header></a>
<nav>
<ul>
<li>
<a class="activeLink" href="side2.html">ABOUT US</a>
</li>
<li>
SERVICES
</li>
<li>
IPHONE REPAIR
</li>
<li>
BLOG
</li>
<li>
CONTACTS
</li>
</ul>
</nav>
I am able to see the links fine, but they are not clickable.
Here is the CSS for the nav, ul and wrapper:
nav {
background-color: #2a2a2a;
width: 50%;
height: 200px;
float: left;
}
nav ul {
list-style: none;
height: 200px;
}
nav ul li {
float: left;
margin-top: 86px;
margin-left: 25px;
}
nav a {
text-decoration: none;
color: white;
font-weight: bold;
}
nav a:hover {
color: #f25e44;
}
.activeLink {
color: #f25e44;
}
#wrapper {
width: 1400px;
/*border: 1px solid black;*/
margin-left: auto;
margin-right: auto;
box-shadow: 10px 5px 5px 10px #888888;
}
EDIT: I figured out the issue. I had a div overlapping my ul.
FIDDLE
The # would normally reference an anchor on your page and scroll there. Since you are just using the # it links to itself, so the page wouldn't reload, and would stay in the same place.
Your CSS also specifies not to decorate (underline) the hyperlinks, giving the impression that the link does nothing.
Edit: http://jsfiddle.net/2L3hL7w6/
I've added some CSS to highlight in red if a link has been visited - you'll see if you click on one of your links on the page it changes to red, showing the link does in fact work.
nav a:visited {
color: #ff0000;
}
All the links are the same in your example code. So when you once clicked one link....nothing more will happen since you are already there.
I have basically this html code:
<ul class="unordered-list">
<li class="list-item">
<div class="list-item-block">
Sometimes a wrapped link to Google
<p class="list-item-link-description">Short description of the link above</p>
</div>
</li>
</ul>
Is there a way to expand the clickable area of the link to the size of the li element by keeping the links position and the description nicely below the link?
I tried to use absolute positioning for both the link and the description but this fails if for example the link text has a line break. As you can see in this jsFiddle: http://jsfiddle.net/xgcjngvs/3/
I would love to find a solution for this problem without javascript.
EDIT: I should have mentioned that the link tag should only contain the plain text and not any other html code.
Given your new requirement there is another way that this can be achieved without changes to your existing HTML structure:
Remove the absolute positioning from .list-item-link and .list-item-link-description, position: absolute; takes the elements out of the document flow and these two need to be aware of how much space each of them take up
Add a pseudo element to .list-item-link using .list-item-link:after, make this position: absolute; and set the height and width to take up the dimensions of the container.
.unordered-list {
list-style: none;
padding-left: 0;
}
.list-item {
min-height: 50px;
position: relative;
}
.list-item-link {
width: 100%;
}
.list-item-link:after {
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.list-item-link-description {
margin: 0;
}
<ul class="unordered-list">
<li class="list-item">
<div class="list-item-block">
Sometimes a wrapped link to Google
<p class="list-item-link-description">Short description of the link above</p>
</div>
</li>
<li class="list-item">
<div class="list-item-block">
Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break.
<p class="list-item-link-description">Short description of the link above</p>
</div>
</li>
</ul>
JS Fiddle: http://jsfiddle.net/5s44c95q/
This is possible with a few changes to your markup and css:
Change list-item-block into the a element and set it as display: block;
Change list-item-link and list-item-link-description into span elements as only inline elements are valid in a elements
Style list-item-link to look like the link
Style list-item-link-description to look like the paragraph
.unordered-list {
padding-left: 0;
list-style: none;
}
.list-item {
position: relative;
height: 50px;
}
.list-item-block {
display: block;
min-height: 100%;
text-decoration: none;
}
.list-item-link {
text-decoration: underline;
}
.list-item-link-description {
color: #000000;
display: block;
text-decoration: none;
}
<ul class="unordered-list">
<li class="list-item">
<a href="www.google.com" class="list-item-block">
<span class="list-item-link">Sometimes a wrapped link to Google</span>
<span class="list-item-link-description">Short description of the link above</span>
</a>
</li>
<li class="list-item">
<a href="www.google.com" class="list-item-block">
<span class="list-item-link">Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break.</span>
<span class="list-item-link-description">Short description of the link above</span>
</a>
</li>
</ul>
If your short description will be on 1 line, you can add padding-bottom to the list-item-link and then move the description up by the same amount and also set a negative margin-bottom for the block as a whole. If you do the padding in ems, it should take care of different font sizes.
To make the short description clickable, you need to make the z-index of the link higher than the description.
.unordered-list {
padding-left: 0;
list-style: none;
}
.list-item {
margin-top:10px;
margin-bottom:-2em;
position:relative;
}
.list-item-link {
display:block;
position:relative;
border:1px #000 solid; /*to show link area */
padding-bottom:2em;
z-index:1;
}
.list-item-link-description {
position:relative;
top:-2em;
}
<ul class="unordered-list">
<li class="list-item">
<div class="list-item-block">
Sometimes a wrapped link to Google
<p class="list-item-link-description">Short description of the link above</p>
</div>
</li>
<li class="list-item">
<div class="list-item-block">
Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break.
<p class="list-item-link-description">Short description of the link above 2</p>
</div>
</li>
</ul>
EDIT: I removed the paragraph tags as you have requested but I can not get it to work any other way without the span, so the span would have to stay in place.
<ul class="unordered-list">
<li class="list-item">
<div class="list-item-block">
<span class='anchor-control'><a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google</span>
Short description of the link above
</a>
</div>
</li>
<li class="list-item">
<div class="list-item-block">
<span class='anchor-control'><a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break This needs to be a longer link then .</span>
Short description of the link above
</a>
</div>
</li>
</ul>
And here's your CSS.
EDIT: New styles to match the top, it's pretty straight forward stuff
a{
text-decoration: none;
color: #000;
}
.anchor-control a{
text-decoration: underline;
width: 100%;
float: left;
color: #00f;
}
.unordered-list {
padding-left: 0;
list-style: none;
}
.list-item {
position: relative;
padding; 0;
margin: 0;
}
.list-item-link {
position: relative;
}
a .list-item-link-description {
position: relative;
color: #000;
margin: 0;
margin-bottom: 10px;
}
EDIT: This should be what you're after.
http://jsfiddle.net/xgcjngvs/9/
css
a{
text-decoration: none;
}
.anchor-control{
text-decoration: underline;
}
.unordered-list {
padding-left: 0;
list-style: none;
}
.list-item {
position: relative;
padding; 0;
margin: 0;
}
.list-item-link {
position: relative;
}
#content {
display: none;
}
#show:target #content {
display: inline-block;
}
#show:target #open {
display: none;
}
.btn-open:after,.btn-close:after{
position:absolute;
right:280px;
top:0;
}
.btn-open:after{
content: "\25BC";
}
.btn-close:after{
content: "\25B2";
}
<ul class="unordered-list">
<li class="list-item">
<span class='anchor-control'>Sometimes a wrapped link to Google</span>
<div id="show">
<div id="content">
Short description of the link above
</div>
</div>
</li>
</ul>
try this JSFIDDLE