I am trying to create a horizontal navigation menu. The menu needs to be full screen width, with a border bottom running the whole width too. I have more or less acheived this apart from I would like to have a margin of about 15px under the menu, and for this to use the background color of my menu. Also when an item is hovered, the hover color should extend under the border too if that makes sense.
Here is a fiddle of my menu so far - http://jsfiddle.net/J74eE/2/
Tried to insert my code here but the li items got converted to bullets
I have set a margin under the container nav, and I would like the border color to be used on the margin area too. I would also like to somehow have the li items hover color to extend under the border too but I have no idea how this might be acheived. If I put the margin and border on the li items the border won't run the full width of the screen.
Update
Updated my fiddle to include a mock-up of what I want to acheive - http://jsfiddle.net/J74eE/3/
I can't use padding as that pushes the border-bottom down, and I want to have a border with background-color underneath it.
Try to replace your margin by a padding.
See more at box model: http://www.w3.org/TR/CSS2/box.html
.nav-menu {
background-color:#FEFFE5;
clear:both;
float:left;
padding:0px 0px 15px 0px;
border-bottom: 1px solid #dbd7d4;
width:100%;
font-size:13px;
z-index:1000; /* This makes the dropdown menus appear above the page content below */
position:relative;
}
I hope you are looking for this: DEMO
CSS
.nav-menu:after {
background-color:#FEFFE5;
position:absolute;
content:"";
left:0;
right:0;
height:15px;
top:40px;
}
You can use after and before pseudo classes for your desired result.
Related
I'm making a to-do app following this tutorial(https://www.youtube.com/watch?v=2wCpkOk2uCg). I should separate the area between to-do task and completed task using padding. I hope the padding area of #completed moves with #completed's children, but it is always at the top of .container. How do I merge the padding and items?
The location of the padding image
As far as I've been searching about css positioning, I think, setting the position both of #todo and #completed relative is right. But it doesn't work. I also tried setting the position of #complete only like the tutorial. It also doesn't work.
This is the html code of the .container which includes #todo and #completed area.
<div class="container">
<!-- Uncompleted tasks -->
<ul class ="todo" id="todo">
</ul>
<!-- Completed tasks -->
<ul class="todo" id="completed"></ul>
</div>
This is the css code what I set the position. I didn't set the position of .container.(I modified background color and opacity for verifying of padding area.)
ul.todo#todo {
position:relative;
}
ul.todo#completed:not(:empty) {
position:relative;
padding:60px 0 0 0;
background:#000;
opacity:0.3;
}
ul.todo#completed:not(:empty):before {
content:'';
width:150px;
height:1px;
background:#fff;
position:absolute;
top:30px;
left:50%;
margin:0 0 0 -75px;
}
and this is the full css code(https://github.com/JaeraeKim/todoList/blob/master/app/resources/css/style.css)
Thank you for reading.
You should use a margin instead of padding if you are trying to add space between these elements. So a margin-bottom on #todo or a margin-top on #completed should move them apart.
Padding keeps the element the same size but "shrinks" it into its own space while margin creates space around it that is reserved as white space.
Hey this is my first ever question so I'm sorry if I get anything wrong.
I am trying to create a gallery using only HTML and CSS, so far I have got it all aligned and pretty much sorted. The problem is with the image enlarger on hover, when you hover over the enlarged image shows up on top of it's respective image but when you scroll down and hover over an image the enlarged image stays put and doesn't follow the picture.
I have tried playing about with the position property for both the image and the hovered image but I can't get it right. I still want the image to 'pop out' of the divs though.
I have the code pasted on the link below:
http://pastebin.com/fZxbKZEJ
Change the position: absolute; to position:fixed;. This will make the image popup relative to the view. Play with margin to get the alignment right.
For eg:
margin: 100px auto 0;
So,
.bigImage{
display:none;
position:fixed;
height:310px;
width:250px;
margin:100px auto 0;
border:2px solid #39F;
}
If you Just want the popup to follow the original image, do this
.bigImage{
display:none;
position:relative;
height:310px;
width:250px;
margin:-260px 0 0 -45px;
border:2px solid #39F;
}
I have this CSS menu:
http://jsfiddle.net/7JC8t/
If you hover your mouse over 'inostranstvo' you will see a dropdown open below it. What I've been trying to do but failing is to get the dropdown items to look like the items in the horizontal menu.
So when a user hovers over 'inostranstvo' the items that show up should have: the same width (width of the widest item), same height and background as the existing menu items.
The background is easy, but I can't force the height and I don't know how to align the widths. This doesn't do anything:
#nav li:hover ul li{
height:55px;
line-height:55px;
width:200px;
}
The width value is random, what's most important is the height, which I can't seem to force on the list items. On the other hand, adding a border works, but it adds it inside the red background area. I'm sure this can't be complicated, but I can't figure it out.
Have you tried to set the submenu li elements to "display-type: block"?
I have added the following css to JSFiddle and it seems to work:
#nav li:hover ul li {
display: block;
background: #DE2211;
border-bottom: 1px solid black;
}
I have a logo link that's using a background-image (css sprite). All works fine, but when I try to add a 20px padding to the top of the link (to give it more space for user to click the link), the background image is not moving down. Here is my css:
a {
background-image:url("sprite.png");
background-repeat:no-repeat;
display:block;
height:70px;
width:70px;
padding-top:20px; /* give top of the link more click space */
}
And my html:
What am I doing wrong?
Edit: I think you guys are missing the original goal. My goal is to give the logo link more clicking space. If I use margin then the element link is pushed down, which does not give more clicking space like I originally wanted.
Padding won't affect the background-image. To affect the hit-area of the link, add padding and then change the background y-offset by the same amount, i.e.:
a
{
padding-top: 10px;
background-position: 0px 10px;
}
Here's a fiddle demonstrating the behavior
Try using the margin property as so
margin-top:20px
Here is what I'm working on: www.buymaengdakratom.com
I'm trying to have the navigation bar items extend the entire width of the box shadow, so that none of the white background of the box-shadow shows.
Here is the CSS & HTML I'm using http://jsfiddle.net/Abijah/DJsKk/
Here's one way to do it. Remove the padding on the <ul> and set the display to table. Then on the list items, set their display to table-cell. Be sure to remove the float:left from the list items as well.
Added CSS:
ul {
padding:0;
display:table;
}
li {
display:table-cell;
}
jsFiddle example.
This works in all modern browsers as well as IE8+.
This worked for me:
Set the width: 970px; and padding: 0; for #appleNav.
See it here: http://jsfiddle.net/DJsKk/2/.