How do I get my navigation bar to not overlap onto the picture, and when it does it goes underneath it, so you are still able to read the picture and use the navigation?
Here is a link to my code.
CSS
.navigation{
list-style-type: none;
position: absolute;
vertical-align: middle;
}
.navigation ul{
list-style-type: none;
padding: 0;
text-align: right;
float: right;
vertical-align: middle;
}
.navigation li{
display: inline;
padding-left: 10px;
vertical-align: middle;
font-size: 24px;
}
.header .navigation{
position: absolute;
top: 0;
right: 20px;
}
HTML
<div class="navigation">
<ul>
<li><a class="live" href="index.html">Home</a></li>
<li>Unit 1</li>
<li>Unit 2</li>
<li>Unit 3</li>
</ul>
</div>
If the question didn't make sense, make the result window fairly large and then zoom in and you'll see what I mean.
Here is what you are looking for:
DEMO
It seems you had your picture floating to the left, represented by this CSS:
float: left;
which would mean that all of your content would be to the right of the photo no matter what, so I just took that line of code out, and made the picture text-align:center; which means the photo would stay centered no matter what (giving you that nice responsive movement).
Just do me a favor, stay away from the position effects (relative, absolute, fixed) unless you absolutely need it... floats are better to use because they respond much better than positioning effects do. Plus, absolute positioning can definitely give you a headache after a while!
Hope this helped :)
Use the z-index property
css
.header h1 a{
display: inline-block;
color: white;
width: 135px;
height: 50px;
background: url(http://www.gpccolorado.com/wp-content/uploads/2013/10/Square-head.jpg);
text-indent: -9999px;
background-size: cover;
z-index:500;
position:relative;
}
Working Demo
Related
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!
I've spent hours going through a lot of code online trying to center this dropdown menu, but no luck. I feel like I've changed everything in my code twice and I'm at the end of this particular rope.
As you can see, there's space between the right side of the dropdown list and the unordered list that contains it.
I also can't get any transitions to work with the dropdown, so if you feel like sharing some information about that as well it would be appreciated.
Here's the trouble-maker.
<li class="nav">PORTFOLIO
<ul id="portfolio_menu">
<li>PAINTINGS</li>
<li>DRAWINGS</li>
<li>CARTOONS</li>
</ul>
</li><!--portfolio-->
JSFiddle
There is margin right in your list because you have it in your css. Remove the margin-right:4px;. As I can see the text was center. Please explain it more.
ul#navbar_ul li{ width: 125px;
text-align: center;
display: inline;
float: right;
margin-right: 4px; /*REMOVE THIS*/
position: relative;
}
In your code the following code will target all the li elemnts. If you want to apply only first level of child then use >. This will resolve your space issue.
ul#navbar_ul li {
width: 125px;
text-align: center;
display: inline;
float: right;
margin-right: 4px;
position: relative;
}
Change it to like below.
ul#navbar_ul > li {
width: 125px;
text-align: center;
display: inline;
float: right;
margin-right: 4px;
position: relative;
}
DEMO
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.
Trying to put menu text right in the middle. No luck so far, and people here proved to be very helpful. :) text align center usually helps with most of the questions that came up here. Didn't help me though. What am i doing wrong?
<header>
<div id="navmenu">
<ul>
<li>Home</li>
<li>Contact Us</li>
</ul>
</div>
</header>
#navmenu {
margin-left:auto;
margin-right:auto;
height:60px;
width:836px;
}
#navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#navmenu li {
display: inline-block;
margin-left:1px;
background-color:#3D3D3D;
width:49%;
height:40px;
color:#FFF
font-size: 15px;
font-weight: bold;
text-align: center;
vertical-align: middle;
text-decoration: none;
}
If the text will always be on a single line, you can vertically align the text by making the line-height the same height as the container.
Add line-height: 40px to your li:
#navmenu li {
...
line-height: 40px;
}
Did you try by giving table-cell (instead of inline-block) for display property for #navmenu li ?
I believe that will work.
I quickly grabbed this snippet out of one of my css files.
This was used to create a top right corner nav bar.
ul {
position: absolute;
top: 20px;
right: 35px;
}
ul li {
display: inline;
text-transform: lowercase;
text-align: right;
padding-left: 10px;
}
Hope that helps
If you want to center the whole menu container, use position:relative, and than apply the margin:auto property. If you need to center the individual links, i hope giving width and text-align center will surely work, as it is a block. If not, you can always use padding-left and padding-right to achieve that. But the width of the menu items will be scaled according to it's content. One more thing, try giving pixels instead of percentage and check. Hope this helps you.
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.