Couldn't think of a good way to word my question.
Here is the design in question
I want it so that the social media banners at the top right move down when you hover over each one of them. I'm using margin-top to do that and each banner is a list item.
When I hover over one of the images, all of the other ones drop down too!
My question is: how can I make it so that the one that the cursor on is the only one that moves down?
HTML:
<ul id="social-media">
<li><img></li>
<li><img></li>
<li><img></li>
</ul>
CSS:
#social-media {
float: right;
margin: 0px;
margin-left: 80%;
position: absolute;
}
#social-media li { display: inline-block; margin-top: -15px; }
#social-media li:hover { margin-top: 0; }
Thanks in advance!
Add vertical-align:top to the li elements. This ensures that the elements are aligned properly, otherwise it uses the baseline and produces the effect you see.
Related
I've made a class in CSS:
.nav{
display: block;
background-color: #5271ff;
position: fixed;
height: 160px;
width: 100%;
padding:0;
.nav li{
float: left;
padding-top: 130px;
padding-left: 10px;
}
My HTML code is
<div class="nav">
<ul>
<li>
<img src="logo.png" alt = "logo" width="160" height="160">
</li>
<li>Home</li>
<li><li>News</li>
</ul>
</div>
Is it possible NOT to apply the property to the image which is part of the list?
The outcome is always pushing the image out of the block that I've made, my idea is that the block is gonna have the color of the logo and they will mix together and I want the "Home" and "News" on the bottom of the block, not on top of it. I'm fairly new to HTML and css.
Have you tried nav li:not(:first-child)
instead of nav li
It will leave the first li and apply the style to the others. You can actually use a class but I think the not function is handy in this case that how I would have done it myself #cheers
Give a common class to the elements of the list you want to have common properties. You can then specify an ID for the items you want to give different properties to.
There are several ways you could achieve this.
If the image is always going to be in the first li you could apply the below css:
.nav li:first-child ~ li {
float: left;
padding-top: 130px;
padding-left: 10px;
}
or you could apply a class to all the elements you want the styles to effect:
.nav .item {
float: left;
padding-top: 130px;
padding-left: 10px;
}
or you could apply a class to the image li and use :not
.nav li:not(.image) {
float: left;
padding-top: 130px;
padding-left: 10px;
}
The above are all viable solutions, and CSS usually has several ways to achieve the same result. It all depends on the approach you want, if you have direct access to the HTML and how scalable you want the CSS and markup to be.
I'm doing a work for school and I'm trying to align on center and middle both image and a menu. Here is my code on jsfiddle: LINK I'll post the code here too
HTML
<header>
<img id="logo" src="https://i.vimeocdn.com/portrait/58832_300x300.jpg">
<ul id="menutop1">
<li>Loja</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
CSS
body{
margin: 0;
}
header{
background-color: #171A21;
width: 100%;
height: 200px;
text-align: center;
}
#logo{
width: 250px;
height: 172px;
}
#menutop1 {
list-style-type: none;
overflow: hidden;
}
#menutop1 li {
float: left;
}
#menutop1 li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#menutop1 li a:hover:not(.active) {
background-color: #ddd;
}
The problem is the menu that does under the image and stays on left of the page.
I already tried everything I know and I didn't find a solution, please someone can help me? I realy can't find anything.
Thanks for the help and sorry for my english.
UPDATE
Thanks to the Kamila O the menu is next to the image and now I want center on middle, I added this code:
vertical-align: middle; height: 100%;
on the menu but don't think it is the best soluction becouse when I set a background color on the menu just to test I see this:
LINK
the menu get out of the div. Someone know a better soluction?
If you want to center your menu, you can change #menutop1 li to
#menutop1 li {
position: relative;
display: inline-table;
}
This is because you have added a float: left on the individual list items in the menu.
If you remove that float, make the list items inline-block and add a center text-align to #menutop1, it will align properly.
#menutop1 {
list-style-type: none;
overflow: hidden;
text-align: center;
}
#menutop1 li {
display: inline-block;
}
Updated jsfidle: https://jsfiddle.net/mebxcjwx/4/
I wrote quickly something along the lines of this. I just created containers for your logo + navigation, as this allows for you to control elements a bit better. As well as adding tha tag around your ul element.
<header>
<div class="logo">
<img src="https://i.vimeocdn.com/portrait/58832_300x300.jpg">
</div>
<nav class="main_nav">
<ul>
<li>Home </li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</header>
https://jsfiddle.net/mebxcjwx/9/
Because they take up the full width of the header by default (If you want you can set this as display: block or width 100%) they will stack under each other, and since they are text elements all that was needed was a simple text align center to get the desired effect.
Im not sure if you wanted the navigation in the black space, if not you could simple remove the padding on the header, and give that navigation a white background or something along those lines to get the effect you desired!
Please look at the following jsFiddle and alter appropriately. I basically want the text to be perfectly in the middle of the images height.
http://jsfiddle.net/e7AV9/1/
You could set it as a background image and center it there and then add a bit of left padding like this http://jsfiddle.net/e7AV9/5/
I'm partial to absolute positioning.
CSS
* {
font-family: Verdana;
font-size: 10px;
}
nav > ul li:nth-child(2) a:before {
position: absolute;
top: 9px;
left: -2px;
content: url(http://s2.postimage.org/1waex5o10/9j41t1.png) " ";
}
nav a {
color: #626262;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
width: 150px;
display: inline-block;
}
nav ul li {
position: relative;
display: inline-block;
list-style: none;
}
HTML
<nav>
<ul>
<li>Home</li>
<li>Community</li>
</ul>
</nav>
You could also put the image directly in the HTML and style it that way: http://jsfiddle.net/e7AV9/10/
Here's the problem with CSS:content:
I feel that we shouldn't use the content declaration at all. It adds
content to the page, and CSS is meant for adding presentation to the
page, and not content. Therefore I feel that you should use JavaScript
if you want to dynamically generate content. CSS is the wrong tool for
this job.
Another solution can be just to add vertical-align: top such as this example: http://jsfiddle.net/Vh6wP/.
Also here's a link on vertical-align: http://css-tricks.com/what-is-vertical-align/ for other values.
I have a simple UL navigation menu with width of 1000px:
<ul class="menu">
<li class="first">google</li>
<li>google</li>
<li>google</li>
</ul>
So, how can I set the first element to fit the entire UL width and push the other list items on the right (all LIs should be on the same line - horisontal menu)?
I know I could float:left the first and float:right the rest, but this will reverse the order of the right - floated elements.
I need a quick, CSS only solution, working even in IE6.
Thanks in advance!
UPDATE: To clarify, the first element is a logo, the final result is like the header of 9gag.com except the logo should be on the left and all links to the right.
Logo usually should not be a part of navigation menu. It's more appropriate to mark-up it as header (H1 on home page, and H3 on rest pages).
<h3>MyBrand</h3>
<ul>
<li>Products</li>
<li>About</li>
<li>Contact</li>
</ul>
You can use then float: right for your UL list itself to align menu to the right.
See this example, i don't know your menu is dynamic, but if you have a 'width' for other's li's, is more easier
Demo: http://jsfiddle.net/e6SWD/12/
.menu {
margin-left: 84px; /* width others 2 li's */
width: 1000px
}
.menu li {
display: inline;
}
.menu li.first {
display: block;
float: left;
margin-left: -84px; /* width others 2 li's */
width: 100%
}
Now with more clarification:
http://jsfiddle.net/6DkVx/2/
ul {
width: 1000px;
position: relative;
text-align: right;
}
li {
display: inline-block;
}
.first {
position: absolute;
top: 0; left: 0;
}
Just use this CSS
.menu li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
As stated before separate the logo from the main navigation. Do something like this instead.
<div id="header>
<div id="logo">Logo here</div>
<ul><li>Rest of links here</li></ul>
</div>
The header div is the wrapping div. You could change this to <header></header> if you want to do HTML5 (this will work in all browsers even old ones).
Then set the width of the logo, you can use a link there aswell. And float the ul and logo to the left.
I've got a horizontal navigation bar on my page which is pushed down a few pixels to overlap with the content of the div below. I want to have some of the links placed behind the background of the content div, but I can't figure out a way to keep some of the links (such as the link to the current page) in front. Here is what I have:
<div id="header">
<ul id="nav">
<li>index</li>
<li>project[]</li>
<li>contact</li>
<li>about</li>
</ul>
</div>
<div id="content">
</div>
Relevant CSS:
div#content {
background:#444;
border-radius:15px;
padding:40px 30px 30px 30px;
clear:left
}
div#header {
position: relative;
margin-left:20px;
top: 13px;
}
ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
ul#nav li {
display:inline;
}
ul#nav a {
text-decoration:none;
color: #444;
font-size: 30px;
}
I'm using the class of each link to determine if it points to the current page, so I'd like that link to stick out. The problem is that the stacking context for each of these is inside the div or ul.
Try this fiddle: http://jsfiddle.net/PNC7g/ : I tried it on IE7+ and Firefox 9.
The idea is to set position: relative; z-index: 1 to the #content and to every link and the content has the property top: -13px defined. Even if they share the same z-index order position, #content is defined after the list of links (inside the markup), so it will overlap the navigation menu.
But if you later set z-index: 2 to a link (with a special class, like .current), the selected item will be able to overlap the div.