I am creating these icons as an image wrapped with a CSS circle behind it. Yet, this random bit of hair looks like it is stemming from the CSS.
Any explanations why? Sorry the CSS is all inline - this is for an html email:
<div style="width: 180px; text-align: center;margin: 0 auto;">
<a href="http://pinterest.com/houseplansdan/">
<li style="list-style: none; background-color: #505050;width: 40px;height: 40px;border-radius: 20px; display: inline-block;margin-right: 10px;">
<img style="padding-top: 5px;"src="http://homeplan.com/newsletter/October/img/icons/32x32_pinterest.png" href="http://pinterest.com/houseplansdan/">
</li>
</a>
<a href="http://www.facebook.com/pages/Houseplans/91152065546">
<li style="background-color: #505050;width: 40px;height: 40px;border-radius: 20px; display: inline-block; margin-right: 10px;">
<img style="padding-top: 5px;"src="http://homeplan.com/newsletter/October/img/icons/32x32_facebook.png">
</li>
</a>
<a href="http://twitter.com/houseplans_">
<li style="list-style: none; background-color: #505050; width: 40px;height: 40px;border-radius: 20px; display: inline-block;">
<img style="padding-top: 5px;"src="http://homeplan.com/newsletter/October/img/icons/32x32_twitter.png">
</li>
</a>
</div>
Fiddle version here.
That's not hair, it's text-decoration - the default style for links. Apply this to any links you don't want to have it:
a { text-decoration:none; }
You should have no issues doing this inline for your email, although it may be tedious.
There cannot be an LI inside an A. Please correct it, if possible.
Also, this CSS will fix:
a { text-decoration: none; }
Updated Fiddle: http://jsfiddle.net/pHksF/2/
Related
I cannot seem to override a specifity, would you please help me figure it out?
I even tried to use !important as a desperate move which did't work...
Conclusion, I am missing something fundamental and my old friend google isn't helping much.
The element targeted in the full code below is :
<li id="mid-el"><a id="mid-a" href="#">Contact</a></li>
The color of all elements is set to white.
The targeted el needs to be : rgb(25,2,80) :
nav.nav-bar ul.group-one li.mid-el a#mid-a {
color: rgb(25,2,80);
}
A detailed explaination would be much appreciated.
Thank you for your time.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
nav.nav-bar {
background-color: rgb(25, 2, 80);
padding: 25px;
}
.nav-bar ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
}
li, a {
margin-top: 8px;
text-decoration: none;
color: white;
}
li:nth-child(6) {
margin: 0px 120px 0px 0px;
padding: 10px 20px;
border-radius: 20px;
background-color: white;
}
nav.nav-bar ul.group-one li#mid-el a {
color: rgb(25,2,80);
}
<body>
<header>
<nav class="nav-bar">
<ul class="group-one">
<li><a href="/">
<div>
<img class="logo-img" src="#" alt="Logo-B&D">
</div>
</a></li>
<li>Groupe</li>
<li>Expertise</li>
<li>Référence</li>
<li>Actualités</li>
<li id="mid-el"><a id="mid-a" href="#">Contact</a></li>
<li class="right-group">Rejoignez-nous</li>
<li class="right-group">Blog</li>
<li class="right-group">Finance</li>
<li class="right-group"><a href="#">
<div class="sm-icon">
<img src="" class="t-icon" alt="Twitter">
<img src="" class="i-icon" alt="Insta">
<img src="" class="f-icon" alt="Facebook">
<img src="" class="y-icon" alt="Youtube">
</div>
</a></li>
</ul>
</nav>
</header>
</body>
Change your CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.nav-bar {
background-color: rgb(25, 2, 80);
padding: 25px;
}
.group-one {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
}
li a {
margin-top: 8px;
text-decoration: none;
color: white;
}
li:nth-child(6) {
margin: 0px 120px 0px 0px;
padding: 10px 20px;
border-radius: 20px;
background-color: white;
}
.group-one #mid-el a {
color: rgb(25, 2, 80);
}
Also HTML has some ending tags problems
<nav className="nav-bar">
<ul className="group-one">
<li>
<a href="/">
<div>
<img className="logo-img" src="#" alt="Logo-B&D" />
</div>
</a>
</li>
<li>
Groupe
</li>
<li>
Expertise
</li>
<li>
Référence
</li>
<li>
Actualités
</li>
<li id="mid-el">
<a id="mid-a" href="#">
Contact
</a>
</li>
<li className="right-group">
Rejoignez-nous
</li>
<li className="right-group">
Blog
</li>
<li className="right-group">
Finance
</li>
<li className="right-group">
<a href="#">
<div className="sm-icon">
<img src="" className="t-icon" alt="Twitter" />
<img src="" className="i-icon" alt="Insta" />
<img src="" className="f-icon" alt="Facebook" />
<img src="" className="y-icon" alt="Youtube" />
</div>
</a>
</li>
</ul>
</nav>
you are not using CSS selectors right, if are using a class name in a selector than dont use the tag name with it like you wrote: nav.nav-bar and nav.nav-bar ul.group-one li.mid-el a plus you gave your <li> tag an id not a class so id in css selector is used by a # not a . thus, the css selector should be written as .group-one #mid-el a
The problem comes from your selector nav.nav-bar ul.group-one li.mid-el a#mid-a {}.
Specifically there is no li element with a class of "mid-el". Instead it has an ID of "mid-el". Simply change the period in the selector to a #.
nav.nav-bar ul.group-one li#mid-el a#mid-a {color: rgb(25,2,80); }
I am stuck at it for very long time and googling did not helped me much. I am generating ul(s) dynamically, their count may also very according to number of items found from db.
Here's what its looking like:
The code:
CSS:
#container{
align-content: center;
}
ul{
display:inline-flex;
padding: 5px;
}
pug:
div(id="container")
each item in items_list
ul
a(href=somelink)
div(class="image")
//- a(href=url)
img(src="/images.link", alt="", height="120px", width="160px", class="dp")
p(id="title") Title:- #{item.title}
p(id="stuff") stuff:- #{item.stuff}
I have tried align-content, justify content, etc. Also I am not giving a property like margin-left or something as number of uls will vary. (I want them to get displayed in a horizontal manner.)
First think you missed li tag which need to list after ul
I am not sure which you want but i guess you want this. This is simple demo code
#container {
align-content: center;
}
ul {
padding: 5px;
}
li {
list-style: none;
}
a {
float: right;
}
div {
float: left;
}
p {
float: left;
margin-left: 20px;
}
<div id="container">
<ul>
<li>
<a href="#">
<div>
<p id="title">Test Code title1</p>
<p id="stuff">Test Code stuff1</p>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<p id="title">Test Code title2</p>
<p id="stuff">Test Code stuff2</p>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<p id="title">Test Code title3</p>
<p id="stuff">Test Code stuff3</p>
</div>
</a>
</li>
</ul>
</div>
I have been asked to "fix" a client's old website which was written in 2011, by a design team that was clearly struggling to understand the then-new HTML5+CSS. There is a lot wrong with this code, and most of it I've been able to fix, stuff like using
<p> </p>
for line breaks. I'm not even kidding.
Anyway, one of the things I have been asked to do is extend the website's text container and menu, and stretch out the menu's actual text to fit the new width, which has gone fine. However, I'm having some trouble with padding out the menu text. I did a search through the forums for some advice, and tried out the style code suggested, but it seems to move the menu text out of the area of menu.jpg where it needs to be.
CSS (this is the client's, so yell at them)
#header_menu_container
/* This is verbatim from the code I am working with. I seriously have NO IDEA why this selector even exists. */
{
}
#header_menu
{
margin: 0;
display: inline-block;
list-style: none;
font-size: 15px;
}
/* header menu colour */
#header_menu li a {
color: #516a82;
}
/* menu hover colour */
#header_menu li a:hover{
color: #b55239;
text-decoration: none;
}
.no_submenu, .has_submenu
{
display: block;
float: left;
position: relative;
}
.no_submenu a, .has_submenu span{
display: block;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
}
.no_submenu a:hover, .has_submenu span:hover{
color: #b55239;
}
.has_submenu span{
cursor: pointer;
_cursor: hand;
}
.is_submenu{
position: absolute;
left: -10px;
top: 32px;
background: #dfd7c5;
margin: 0;
padding: 0;
list-style: none;
z-index: 9999;
}
.is_submenu li a{
display: block;
text-align: left;
padding-left: 10px;
width: 122px;
padding-right: 10px;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
pading-top: 10px;
padding-bottom: 10px;
line-height: 18px;
}
.is_submenu li a:hover{
color: #b55239;
}
HTML (based on client's, with a bit of my modification)
<ul id="header_menu">
<li class="no_submenu" style="width: 63px;">
<b>Home</b>
</li>
<li class="has_submenu" id="who-we-are">
<b><span style="width: 103px;">Who We Are</span></b>
<ul class="is_submenu" style="display: none;">
<li>
<b>Janyce Lastman</b>
</li>
<li>
<b>Ziny Kirshenbaum</b>
</li>
<li>
<b>Tutors</b>
</li>
</ul>
</li>
<li class="has_submenu" id="services"><span style="width: 73px;"><b>Services</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Consultant To Schools</b>
</li>
<li>
<b>Education Consulting And Case Management</b>
</li>
<li>
<b>Educational Assessments</b>
</li>
<li>
<b>School Placement Consultation</b>
</li>
<li>
<b>Seminars And Workshops</b>
</li>
<li>
<b>Test Tips Support</b>
</li>
<li>
<b>Tutoring</b>
</li>
</ul>
</li>
<li class="has_submenu" id="media-and-press">
<span style="width: 113px;"><b>Media & Press</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>In the Press</b>
</li>
<li>
<b>Book Reviews</b>
</li>
<li>
<b>Selected Articles</b>
</li>
<li>
<b>Interesting Links</b>
</li>
</ul>
</li>
<li class="no_submenu" style="width: 53px;">
<b>FAQ</b>
</li>
<li class="has_submenu" id="testimonials"><span style="width: 103px;"><b>Testimonials</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Testimonials for TTG Tutors</b>
</li>
<li>
<b>Testimonials for Janyce Lastman</b>
</li>
</ul>
</li>
<li class="has_submenu" id="contact-us">
<span style="width: 70px;"><b>Contact</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Contact Info</b>
</li>
<li>
<b>Employment Opportunities</b>
</li>
</ul>
</li>
</ul>
</div>
There's a display call inside a class selector, which is likely part of the issue, but my gut feeling tells me that this needs someone with more expertise to dissect everything wrong with it.
It's one thing to figure out what's wrong with your own code, and another to try and analyze what's wrong with someone else's. Any advice would be greatly appreciated :)
So looking back over the code again, I think I've figured out the problem.
Instead of putting padding in the CSS, the original authors put a numerical width in a style tag in the HTML for every single menu, e.g.
<span style="width: 73px;"><b>Services</b></span>
Idiots.
I'm going to try and write something similar into the stylesheet properly.
I have been seriously messing with this one thing for over an hour now. Basically I have a navigation bar, there is an icon on the far left, and the links are aligning to the bottom of the image.
I have tried messing with padding, margins, line height, vertical-align and everything else I could think of. I also tried having the image inside and before the ul. I need the ul items (will be links) to be vertically aligned to the center of the icon.
I have put all the code into one file that I will copy here. Also, when you post please explain why a solution will work, not just post code. The other posts I searched for about this before I posted here didn't explain anything, just included code that didn't help when I tried it. Unfortunately, because I have no idea what the solution is or what it relates to I am including all of the code.
body {
margin: 0;
/*background-color: #10f009;*/
font-size: 62.5%;
font-family: sans-serif;
}
img {
margin: 0 0 0 0;
max-width: 100%;
height: 50%;
}
.smallSection {
margin: 100px;
}
.paragraph {
font-size: 2em;
max-width: 500px;
}
.title {
font-size: 2.4em;
}
.list {
list-style: solid inside url("");
font-size: 2em;
}
.nav-link {
list-style-type: none;
display: inline-block;
text-align: center;
font-size: 2em;
width: 200px;
border: 1px solid red;
}
.nav-icon {
display: inline-block;
border: 1px solid red;
}
.largeSection {} #section1 {
background-image: url("../img/placeholder.jpg")
}
#nav {
border: 1px solid red;
margin: 0;
padding: 0;
align: top;
height: 100px;
line-height: 1;
}
/*temporary*/
div {
border: 1px solid red;
}
<!-- Dawn Little -->
<div id="section1" class="largeSection">
<!-- Navigation -->
<div>
<ul id="nav">
<div style="width:70px;height:70px;border: 1px solid red;display: inline-block;">
<!-- The img link is obviously broken so this is here instead. -->
</div>
<!-- <img src="img/herbfalife-icon.png" width="70px" height="70px" class="nav-icon"> -->
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do</li>
<li class="nav-link">3-Day Trial</li>
<li class="nav-link">Challenges</li>
<li class="nav-link">Become a Coach</li>
</ul>
</div>
<div class="smallSection">
<p class="paragraph">
<span class="title">Client Name<br /></span> Hi, I'm a wife, mother, and Personal Wellness Coach with Herbalife Nutrition. My super power - I change lives.
</p>
</div>
</div>
<!-- What I do -->
<div id="section2" class="largeSection">
<div class="smallSection">
<p class="paragraph">
<span class="title">What I do</span>
<ul class="list">
<li>Wellness Evaluations</li>
<li>Nutrition Coaching</li>
<li>Impact Lifestyle</li>
<li>Get Results</li>
<li>Coach Coaches</li>
</ul>
</p>
</div>
</div>
<!-- 3-day trial -->
<div id="section3" class="largeSection">
<div class="smallSection">
<p class="title">
Try Our 3-Day Trial
</p>
<p class="title">
What you get:
</p>
<ul class="list">
<li>Personal Wellness Coach</li>
<li>Wellness Evaluation</li>
<li>Meal Plan</li>
<li>Daily Support</li>
<li>Plan of Action</li>
<li>6 Meals</li>
<li>Metabolism Booster</li>
</ul>
</div>
</div>
<!-- Challenges -->
<div id="section4" class="largeSection">
<div class="smallSection">
<p class="title">
Join a Weight Loss Challenge
</p>
<p class="title">What you get:</p>
<ul class="list">
<li>Personal Wellness Evaluation</li>
<li>Personalized Program</li>
<li>Nutrition Classes</li>
<li>ommunity of Support</li>
<li>Accountability</li>
<li>Opportunity to Win Cash & Prizes</li>
</ul>
</div>
</div>
<!-- Become a coach -->
<div id="section5" class="largeSection">
<div class="smallSection">
<p class="title">
Become a Coach
</p>
<p class="title">
What you get:
</p>
<ul class="list">
<li>Opportunity to Change Lives</li>
<li>Opportunity for Personal & Financial Growth</li>
<li>Training</li>
<li>Potential to Change Lives in Over 90 Countries</li>
<li>Be Part of a Team</li>
<li>Get in the Best Shape You've Ever Been</li>
</ul>
</div>
</div>
This way that you are coding is a bit tricky to align.I will rewrite your code. However, I recommend you to use a CSS framework like bootstrap or zurb.
Firstly, you need to rewrite HTML part like
<!-- Navigation -->
<div class="header clearfix">
<div class="logo">
<!-- The img link is obviously broken so this is here instead. -->
</div>
<div class="nagivation">
<ul id="nav">
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do </li>
<li class="nav-link">3-Day Trial</li>
<li class="nav-link">Challenges</li>
<li class="nav-link">Become a Coach</li>
</ul>
</div>
</div>
I have added header and nagivation
then add these lines to your css to
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
.header{
min-height:70px;
clear:both
}
.logo{
width:20%;
float:left;
}
.nagivation{
width:80%;
float:right;
}
you need to remove #nav also in your CSS code.
based on your needs, you can change this class
.nagivation #nav{
// add needed adjustment
}
you can have an access to all codes here https://jsfiddle.net/mhadaily/7f152z3r/
The easiest way to accomplish what you want is to simply float the icon as seen in the css below and in this pen.
#nav {
border: 1px solid red;
height:100px;
line-height:1;
display:inline-block;
}
.nav-icon {
display: inline-block;
border: 1px solid red;
float:left;
}
Floats force other elements to flow around the floated element. You just want to be wary of floats because they wreak havoc on your layout if you're not vigilant (they collapse their parent containers). You can read all about it here.
I am not a UI expert. But By looking at the following tag I can asked you few question to understand? Because You are writing non-li tags within ul. Try ti wrap your code with li tag.
Just go to w3cshool link.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu
http://www.w3schools.com/html/html_lists.asp
<ul id="nav">
<div style="width:70px;height:70px;border: 1px solid red;display: inline-block;">
<!-- The img link is obviously broken so this is here instead. -->
</div>
<!-- <img src="img/herbfalife-icon.png" width="70px" height="70px" class="nav-icon"> -->
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do </li>
What about simply moving the li elements up a little bit?
.nav-link {
position: relative;
bottom: 20px;
}
First off, the only elements that should be inside a <ul> are <li>. That <div> (or link or whatever it is in reality) may cause you grief.
The real problem, however, is that you're using the wrong CSS property on the wrong element. You want vertical-align (not "align"), and it should be applied to the list-items (not the container).
Try this:
<ul>
<li class="nav-link"><!-- img here --></li>
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do</li>
<li class="nav-link">3-Day Trial</li>
<li class="nav-link">Challenges</li>
<li class="nav-link">Become a Coach</li>
</ul>
with
.nav-link { vertical-align: middle; }
i have been trying to have a drop down menu opon mouseover of the "profile" image button.
by using only css, this is what i achieve.
i also added text decoration to none but the underline still exist.
I have also tried using javascript but it doesnt work out for me.
Would any1 help enhancing this?
my html code:
<td class="header_button ">
<div id="menu">
<ul id="Ul1">
<li >
<asp:ImageButton runat="server"
ImageUrl="../img/Button/Profile.png" CssClass="profile_dropdown"
onclick="btnMyProfile_Click" />
</li>
<li class="item" >
Edit Profile
</li>
<li class="item">
My Follow
</li>
<li class="item">
My Uploads
</li>
<li class="item">
My Child Profile
</li>
</ul>
</div>
<div style="clear:both"></div>
</td>
my css code:
.profile_dropdown
{
height:75px;
weight:75px;
position:static;
}
#menu ul .item
{
display: none;
text-decoration: none;
background: #222222 85% 55% no-repeat;
font-family: 'Century Gothic';
font-size: large;
font-weight: bold;
color: #9FC54E;
white-space: nowrap;
}
#menu ul:hover .item{display:block;}
#menu{margin-top:-22px;position:fixed}
You should add
#menu li a {
text-decoration:none
}