I've a problem with inserting an image after every element in my list. I used ":after" and it shows me the image but instead of after every element, the images are with a new linebreak under every element:
Should be (|=image):
Site1 | Site2 | Site...
Reality:
Site1 Site2 Site3
| | |
Following my css code, maybe someone can help:
/* Navigation */
#nav {
position:relative;
height:70px;
background:#191919;
position:relative;
}
/* The main menu */
.menu{
list-style: none;
position: relative;
float: left;
display: block;
left: 50%;
padding-top:20px;
}
/* First level of navigation */
.menu li{
position: relative;
float: left;
display: inline;
right: 50%;
padding-right:15px;
}
.menu li a{
display:inline;
width:auto;
word-wrap: break-word;
text-shadow: none;
color:#FFF;
text-decoration:none;
font-size:14px;
font-weight:normal;
}
.menu li:after {
display: block;
content: "";
width: 5px;
height: 50px;
background: transparent url('../images/nav_bar_line.png') no-repeat;
}
You can use absolute position for this. Write like this:
.menu li:after {
display: block;
content: "";
position:absolute;
top:0;
right:-5px;
width: 5px;
height: 50px;
background: transparent url('../images/nav_bar_line.png') no-repeat;
}
Related
What I am trying to do is to get the hover effect that puts the anchor link a bit down, but somehow it affects all the links. Can somebody point out what I did wrong here?
nav {
width: 100%;
height: 5rem;
background: red;
}
ul {
margin: 0 auto;
font-size: 0;
}
ul li {
display: inline-block;
line-height: 4.8rem;
position: relative;
}
ul li > a {
text-decoration: none;
color: #FFF;
font-family: "Verdana";
padding: .1rem 1.5rem;
font-size: 1.3rem;
display: block;
overflow: hidden;
position: relative;
transition: 300ms all;
height: 100%;
margin: 0;
}
ul li > a::before, ul li > a::after {
content: '';
width: 100%;
position: absolute;
left: 0;
transition: 200ms all;
}
ul li > a::before {
background: #FFF;
height: .5rem;
top: 0;
transform: translateY(-100%);
}
ul li > a::after {
background: #000;
height: .4rem;
bottom: 0;
transform: translateY(100%);
}
ul li::before {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #CCC;
position: absolute;
opacity: 0;
}
ul li:hover > a {
padding-top: 0.6rem;
padding-bottom: 0.1rem;
}
ul li:hover > a::before, ul li:hover > a::after {
transform: translateY(0);
}
ul li:hover::before {
opacity: 0.3;
}
<nav>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</nav>
Why li:hover > a is affecting all list items?
The problem is not your :hover selector, it's the display-block on the lis. inline-blockelements align on the baseline, this means that when you add a padding-topto one of them, all the others move down as well. To fix it float the elements to the left to keep them on one line and aligned to the top:
Demo: https://jsfiddle.net/403zexop/
nav {
width:100%;
height:5rem;
background:red;
}
ul {
margin:0 auto;
font-size:0;
overflow: hidden;
li {
display:block;
line-height:4.8rem;
position:relative;
float: left;
>a{
text-decoration:none;
color:#FFF;
font-family:"Verdana";
padding:.1rem 1.5rem;
font-size:1.3rem;
display:block;
overflow:hidden;
position:relative;
transition:300ms all;
height:100%;
margin:0;
&::before,&::after{
content:'';
width:100%;
position:absolute;
left:0;
transition:200ms all;
}
&::before{
background:#FFF;
height:.5rem;
top:0;
transform:translateY(-100%);
}
&::after{
background:#000;
height:.4rem;
bottom:0;
transform:translateY(100%);
}
}
&::before{
content:'';
width:100%;
height:100%;
top:0;
left:0;
background:#CCC;
position:absolute;
opacity:0;
}
&:hover{
>a{
padding-top:0.6rem;
padding-bottom:0.1rem;
&::before,&::after{
transform:translateY(0);
}
}
&::before{
opacity:0.3;
}
}
}
}
Note: I cleared the floats by adding overflow: hidden; to the ul
"li:hover > a" is correct!
The problem is, that with changing the padding you alter the height of the element, and the parent container has to adapt and as well all other childs.
You can see it when you do not change the padding, but just the background-color of the hovered a. You will see, it is just altering the current element.
Novice here! I'm looking to adjust some code for this site: http://www.lakeofstars.org
The footer area at the base of each page contains a series of logos. The ideal is to ensure that the logo images in the footer display correctly on mobile (if they are too large, some of the logos drop down below the designated footer background), but also to get them to center correctly on desktop - as you'll see, they are currently nudged to the left.
Here's the code as it stands:
#footer {
position:absolute;
bottom:0;
width:100%;
height:140px; /* Height of the footer */
background:#ffffff;
border-top: solid 3px #ffc600;
background-image:url(img/global/footer.gif);
background-repeat: repeat-x;
background-position:bottom;
}
#footer .structure {
height: 140px;
width: 94%;
}
#footer .structure li {
display: inline-block;
margin: 10px 10px 0 0;
float: left;
}
#footer .structure li img {
height: 65px;
width: auto;
}
You need to remove float: left; from #footer .structure li.
Try to use line-height and vertical-align: middle; for vertical aligment and text-align: center; for horizontal:
#footer .structure {
text-align: center;
}
#footer .structure ul {
line-height: 140px;
vertical-align: middle;
}
#footer .structure li {
display: inline-block;
}
Or you can use flexbox technique
#footer {
position:absolute;
bottom:0;
width:100%;
height:140px;
background:#ffffff;
border-top: solid 3px #ffc600;
background-image:url(img/global/footer.gif) scroll 50% 50%;
background-repeat: repeat-x;
background-position:bottom;
}
add for #footer .structure ul - text-align: center;
remove for #footer .structure li - float: left
#footer .structure ul {
text-align: center; < -- add
}
#footer .structure li {
display: inline-block;
vertical-align: middle;
margin: 10px 10px 0 0;
/* float: left;*/ <-- remove
}
Remove width:auto ... give values in percentage....
#footer .structure li img
I am trying to center an a within a li in a navigation menu. IT is not working. Here is my relevant css:
#access ul li ul {
position: absolute;
background-color: #fff;
border-top: 4px solid #2980b9;
top: 55px;
left: 0px;
width: 190px;
}
#access li:hover
{
background: #2980b9;
}
#access a {
display: block;
margin-left: auto;
margin-right: auto;
}
Any thoughts on this?
For the HTML see the nag bar in http://phasetransfercatalysis.com
You need the element to be explicitly sized for that trick to work.
a{
dispaly:block;
margin-left:auto;
margin-right:auto;
width:40px;
}
http://jsfiddle.net/Zyw6y/2/
You have two options at least.
First option, set a width to your a like so
#access a {
width: 60%;
}
Second option, you can rework your code and set text-align: center on the parent which is the li, and make the a inline-block so that it follows the orders from li to be aligned centered.
#access li {
text-align: center;
}
#access a {
display: inline-block;
}
For some reason the social media icons on top of the left sidebar on www.hungryrunnergirl.com prevent the directly below archive widget from being clicked. I don't have this problem when I make each button position absolute (with the container remaining relative) but when I do that, The buttons appear in different places depending on which browser you are viewing from. Does anyone have any insight into why this could be happening (either the inconsistent positioning when using absolute or the un-clickable areas when using relative CSS positioning)?
Here's the code that I'm currently using to style the menu:
/* Menu Container */
.custom .sidebar .menu {
list-style: none;
padding: 0;
margin: 0 0 0 10px;
width: 190px;
height: 190px;
position: relative;
}
/* Facebook */
.custom #menu-item-15470 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 0px;
top: 0px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px 0px;
}
.custom #menu-item-15470 a:hover {
background-position:0px 0;
}
/* Pinterest */
.custom #menu-item-15471 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-left:10px;
position: relative;
left: 81px;
top: -81px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px -82px;
}
.custom #menu-item-15471 a:hover {
background-position:0px -82px;
}
/* Instagram */
.custom #menu-item-15472 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-top:10px;
position: relative;
left: 0px;
top: -81px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px -165px;
}
.custom #menu-item-15472 a:hover {
background-position:0px -165px;
}
/* Twitter */
.custom #menu-item-15475 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-left:10px;
margin-top:10px;
position: relative;
left: 81px;
top: -172px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px -248px;
}
.custom #menu-item-15475 a:hover {
background-position:0px -248px;
}
Thank you so much for your help.
Add the following to li.widget (line 191):
position: relative;
z-index: 100;
I want to make an ul li menu and I want to place each li element over previous one.
I don't know if I can explain with words what I mean, so I've made an image showing desired effect:
How can I do this using plain CSS? Is it possible, or I must use javascript?
This is what I've tried so far:
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
position: relative;
}
li a {
display: block;
position: absolute;
top: -30px;
z-index: 1;
width: 225px;
height: 115px;
}
but each li appears on the same place over previous one.
You can use a negative margin-top to "lift" the li elements.
http://jsfiddle.net/tomprogramming/mbe9W/
relevant CSS
li { padding:10px; border:1px solid #000; margin-top:-10px; }
li:first-of-type {
margin-top:0;
}
I think this is close:
<ul>
<li><a class="a" href="#">A</a></li>
<li><a class="b" href="#">B</a></li>
<li><a class="c" href="#">C</a></li>
</ul>
CSS:
ul {
margin: 0;
padding: 0;
list-style: none;
padding-top:30px;
}
li {
position: relative;
height:50px;
}
li a {
display: block;
position: absolute;
height:20px;
top: -30px;
left:0;
width:225px;
height:115px;
}
.a {
border:1px solid #ff0000
}
.b {
border:1px solid #00ff00
}
.c {
border:1px solid #ffff00
}