Can someone help me find the error when I tried to display the list in one line but it didn't do it.
#main-nav ul ul li { display: inline; }
But the text is not displaying line. Please take a look jsfiddle.net/EZJwM
I changed the
display: inline
to
float:left
and got this http://jsfiddle.net/EZJwM/5/
The menu isn't centered but they display in one line.
solution to your problem js fiddle demo
i change display:block to display:inline to get it on one line but you have
to work it out considering you style design i think for main-nav you should use css classes
to avoid intersection on what you exactly want otherwise you will get all so fuzzy
change 1
#main-nav ul li{ display: inline; }
change2
#main-nav a:after {
color: #aeaeae;
content: attr(data-description);
font-size: 11px;
font-style: italic;
font-weight: 400;
display: inline;
line-height: 0;
margin: 3px 0 -3px;
text-transform: lowercase;
}
change 3
#main-nav ul ul a {
border: 0;
border-bottom: 1px solid #252525;
border-top: 1px solid #4c4c4c;
color: #fff;
display: inline;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: 11px;
letter-spacing: 0;
font-weight: 400;
padding: 8px 20px !important;
text-align: left;
text-transform: none;
}
Related
.list li::after{
content:" ";
width:100%;
display: block;
position: absolute;
height: 2px;
background-color: green;
}
ul li a{
display: inline-block;
padding: 10px 20px;
line-height: 1.5;
font-size: 0.9em;
color: white;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
margin: 0 2.5px;
}
HTML
<ul>
<li>contact</li>
</ul>
When i get over mouse li tag, I want to have liner after it, but this liner should be the same width as his li. Also I don't know how to active ::after, after `:hover.
Use a simple gradient:
ul li a {
display: inline-block;
padding: 10px 20px;
line-height: 1.5;
font-size: 0.9em;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
margin: 0 2.5px;
background-image:linear-gradient(green,green);
background-size:0% 2px;
background-position:bottom left;
background-repeat:no-repeat;
transition:1s all;
}
a:hover {
background-size:100% 2px;
}
<ul>
<li>contact</li>
</ul>
What I would recommend is to make use of border-bottom on the <a> element. You can control how far away this underline is from the text with padding-bottom.
This avoids the need for ::after completely, and can be seen in the following:
body {
background: black;
}
ul li a {
display: inline-block;
/*padding: 10px 20px;*/
line-height: 1.5;
font-size: 0.9em;
color: white;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
margin: 0 2.5px;
padding-bottom: 10px;
border-bottom: 1px solid green;
}
<ul>
<li>contact</li>
</ul>
Note that the width of the line (the border) is controlled by the amount of horizontal padding on the element. I've commented this padding out in the above example to show the line at the exact same width as the link.
I am having difficulties getting my footer nav to display inline with my footer title. Here is a fiddle showing what I have done... https://jsfiddle.net/nkzsufov/
I have tried making this absolute/relative
.footerNav {
margin-top: 35px;
font-size: 1.5em;
font-family: Oswald;
float: left;
position: absolute;
}
I have added float: left; to both the footerNav and footerNav li.
What am I doing wrong?
#footer_menu ul {
/* margin: 0px 30px; */
padding: 10px 30px;
list-style-type: none;
text-decoration: none;
display: inline;
}
#footer_menu ul li {
margin: 0 0;
padding: 5px 0;
display: inline-block;
color: white;
clear: both;
}
hope this will solve it
I modified two css classes from your JSFiddle and I guess I achieved what you wanted. I only added float:left and removed position attribute.
.footerTitle {
font-size: 2.2em;
font-family: Oswald;
font-weight: bold;
margin-top: 33px;
float:left;
}
.footerNav {
margin-top: 35px;
font-size: 1.5em;
font-family: Oswald;
float: left;
}
I have a problem with the css for my web page. Basically, I want to make it so when you hover over one of the links in the navigation bar, it puts a border around it. So, this is what I made:
a
{
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
postion: absolute;
}
a:visited
{
font-weight: bold;
color: #4096ee;
text-decoration: none;
}
a:hover
{
font-weight: bold;
border-radius: 5px;
color: #4096ee;
padding: 4px;
border: solid 2px;
border-color: #303030;
text-decoration: none;
}
a:active
{
font-weight: bold;
color: white;
text-decoration: none;
}
And then I have 4 links on the same line with 4 &emsp in between them. Now, whenever I hover over a link, the border appears, but it kind of nudges the other links over to make space for the border. Is there any way I can stop this from happening?
why dont you put a border on the items and make it the same color as your background and simply change color on hover
try adding box-sizing : border-box to your css. This would make the border to go inside the element.
Change your CSS like this:
a
{
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
postion: absolute;
border-radius: 5px;
padding: 4px;
border-color: transparent;
}
This way there will be no nudging.
You can just add a padding to the regular links. The hover state will override the regular padding and add the border.
a {
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
padding: 6px;
postion: absolute;
}
http://jsfiddle.net/5dQL5/
a{
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
postion: absolute;
border: 2px solid transparent;
}
Just add a border with the same width (in your case 2px) but make it transparent and that's all.
Add default 2px border to anchor tag, but make it tranparent. So it will not visible at first time when page is loaded. Then when you hover any anchor tag, change the border-color to #303030
Try this code
a{
border: 2px solid transparent;
}
a:hover{
border-color: #303030;
}
I have a CSS button for my site which used to be full with the text in the very middle of it, but now the text is at the bottom and the button is smaller. Other people have had access to my root folder to make amendments and i dont know what they've done.
.button
{
display: inline;
margin-top: 2em;
padding: 1em 2em 1em 2em;
background: #8dc63f;
letter-spacing: 0.20em;
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
font-size: 0.90em;
color: #FFF;
}
.button:before
{
}
try: display: inline-block
That should sort it.
Add display: block; and text-align:center;
.button{
display: block;
text-align:center;
margin-top: 2em;
padding: 1em;
background: #8dc63f;
letter-spacing: 0.20em;
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
font-size: 0.90em;
color: #FFF;
}
DEMO
You can try this :-
text-align: center;
display:table-cell;
vertical-align:middle;
Hope it will help you.
So I got the following code.
HTML
<div id="container">
<p class="title"> Social Media </p>
<ul>
<li>Twitter</li>
<li>Deviantart</li>
<li>Skype</li>
</ul>
</div>
CSS
#container {
background-color: #FFF;
background-image: url(images/footer.jpg);
height: 250px;
margin-top: 40px;
border-top: 3px solid #C6C6C6;
border-bottom: 3px solid #C6C6C6;
}
p.title {
color: #FFF;
font-family: "Open Sans", Helvetica, sans-serif;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 24px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}
#container ul {
text-align: center;
word-spacing: 150px;
margin: 0;
padding: 0;
}
#container ul li {
display: inline;
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
#container > ul > li > a {
text-decoration: none;
color: #FFF;
letter-spacing: 5px;
text-transform: uppercase;
line-height: 3;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}
Now, the problem is that the 3 links "TWITTER DEVIANTART SKYPE" wont align exactly as the text above saying "SOCIAL MEDIA" even though it's both aligned to center.
I don't know why though, I want the three links to be centered exactly as the SOCIAL MEDIA text above but it just isn't. Any ideas?
Here's a JSFiddle showing the issue:
http://jsfiddle.net/cuLgC/
Here's an updated fiddle with a fix: JSFiddle
The changes are noted below:
#container ul {
/* text-align: center; moved to li */
/* word-spacing: 150px; removed, this was causing issue as some words are longer */
width: 100%;
display: table; /* added */
table-layout: fixed; /* added */
margin: 0;
padding: 0;
}
#container ul li {
display: table-cell; /* added */
width: auto; /* added */
text-align: center; /* moved */
/* display: inline; removed */
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
The misalignment was being caused by: word-spacing: 150px; and the fact that the menu options are all different widths. If you used the same word 3 times they would align but different length words are spread according to their width.
Not the nicest way but I put <br> after two of the list elements and that drops them down.
http://jsfiddle.net/cuLgC/7/
Change
container ul li{
display: inline
}
To
container ul li{
display: block
}
http://jsfiddle.net/cuLgC/6/
Display inline puts them on one line block puts them on separate lines, hope this helps it works in the fiddle.
just add <br> tag to the list.... here is the fiddle for that..[jsfiddle][1]
[1]: http://jsfiddle.net/hh54D/7/ hope this is right...
If I understand correctly:
#container {
background-color: #FFF;
background-image: url(images/footer.jpg);
height: 250px;
margin-top: 40px;
border-top: 3px solid #C6C6C6;
border-bottom: 3px solid #C6C6C6;
}
p.title {
color: #FFF;
font-family: "Open Sans", Helvetica, sans-serif;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 24px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}
#container ul {
text-align: center;
word-spacing: 150px;
margin: 0;
padding: 0;
}
#container ul li {
/*display: inline;*/
float: left;
list-style: none;
width: 33.3%;
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
#container > ul > li > a {
text-decoration: none;
color: #FFF;
letter-spacing: 5px;
text-transform: uppercase;
line-height: 3;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}
FIDDLE