I'm trying to make a navbar on my site that contains 5 links, but one of them is an image that is in the middle of the group. You can look at the JSFiddle of what I have here: http://jsfiddle.net/kylerm42/fgtLv/4/. I have my header set at 40px tall and am trying to get all the text links centered vertically within the div. The image is taller than the div and should be at the top, with the bottom hanging over.
I've tried vertical-align, line-height set to the height of the div, display: flex; align-items: center;, and anything else I could find online, but nothing works. I've also tried taking the image out of the rest of the header div, and then move it up 40px using position: relative, and that made it look correct visually, but the image's div was covering up the rest of the links, making them unclickable. Any idea how to get this working like it should? Thanks!
You've tried everything but not position: absolute; which is an appropriate way to go for.. In the snippet below, I used left: 50%; to first position the logo in the center but still it isn't centered, so I negated 1/2 the size of the image which is 75px in width so I used -38px
Demo
img#logo-nav {
max-width: 75px;
position: absolute;
left: 50%;
margin-left: -38px;
}
Related
On the bottom of the image below, the background-color doesn't reach all the way. I've tried setting it to 100vh and 100% but the outcomes are the same where it only covers up to a 100 view height, and anything scrolled pass down the 100vh. isnt covered by my background color. How can i fix this?
&__container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba($color: #13182c, $alpha: 0.7);
height: 100vh;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
You should post your full code.
But your posted image looks like that page is scrolled down a bit (the nav items behind the overlay are cut off). You are using position: absolute, which moves along with the next higher relatively positioned element, or - if there is none - with the body. This would explain the problem. Body is scrolled , overlay moves along, but is only as high as the window, but since the body is higher, there's some space below the overlay...
To fix that, try to use position: fixed instead of position: absolute. In that case the overlay position will relate to the viewport itself (i.e. the window).
You can try position: relative, once you want full cover. Also you can can set background-size = cover. Just tweak width.
I have this layout:
Code here: http://m6000225.ferozo.com/test/
I need the blue and brown image to lay below the main content div, and both be aligned regardless of the window width, both centered horizontally.
I implemented a css tip I read on this site, which is having a div with absolute position and left: 50% and an img inside with relative position and left: -50%.
It works fine, except for the fact that it pushes the page width to the right, as you can see in the screenshot, the scrollbar can be seen.
3rd party lib solutions like jQuery are welcome, but I'd prefer plain CSS.
PS: I also need something similar below the footer, but I guess using the same solution with a negative bottom value should work, right?
PS2: Extending the blue-brown strip to both borders of the window is no problem as I already used another div with absolute position and background-repeat: repeat-x.
The scroll bar is appearing because of the left: 50%; on the class .header-image. You should drop that altogether. Since that tag has a width set, when you push it over 50% it falls outside the window forcing the scroll bar to appear.
After you drop the left call, you should then set the width of that div to the width of the window, not a specific value in pixels. Use Width: 100%. So, that tag should look like:
.header-image {
height: 245px;
position: absolute;
top: 40px;
width: 100%;
z-index: -1;
}
After that, you'll need to re-center the image contained within the div. To do that, instead of using positions (which rely on set boundaries), give the element auto margins. Use :
.header-image img {
display: block;
margin-left: auto;
margin-right: auto;
}
That will recenter the image. Please let me know if this is what you were looking for!
Per Paulie_D's suggestion:
.header-image {
position:absolute;
z-index: -1;
top: 40px;
width: 100%;
height: 245px;
background-image: url('header.png');
background-position: center;
background-repeat: no-repeat;
}
That did it.
I'm trying to move a div from the top of the page down to the bottom, but it's not working.
Here's the div and its CSS:
<div class="slides">
<?php include 'slides.php'; ?>
</div>
.slides {
width: 990px;
height: 390px;
margin-bottom: 15px;
}
I've got the code (some of it, anyway) over on jfiddle:
http://jsfiddle.net/jerU7/
You can see the original page here:
http://www.autotrafficinfo.com/
I need to move the rotating banner at the top down to the bottom just above the footer. I moved the div (class="slides") down to the bottom of the html, but it's staying at the top. I realize you can make divs do things that aren't apparent, but I'm not sure how to make this one move down.
In the code on jfiddle, you can see that the text ("Real time traffic for 1.6 million...") is up at the top. The rotating images are, in fact, appearing towards the bottom (although all three are appearing there, instead of one at a time and rotating, because the java script isn't hooked up). The text and banners should all be at the bottom.
How do I scoot the div (class="slides") down so that it's just above the footer?
Your code needs a bit of restructuring.
Wrap all the divs from #greenSmall to #green in a new .content div.
Remove the css property float:left from #green
Move the .slides div to below the .content div and above the footer div.
css:
.slides{
top:97%; // Or designate the px location if you so desire
width: 990px;
height: 390px;
margin-bottom: 15px;
}
The code on the above answer is almost correct but it misses an element. For the 'top' and 'bottom' to work, the element must be positioned absolutely. So, the above code will become
.slides{
position: absolute;
top:97%; // Or designate the px location if you so desire
width: 990px;
height: 390px;
margin-bottom: 15px;
}
I want to upgrade my website's template.
I want the content to be in a fixed width centered div. This is not a problem and there are many examples on the web.
Since I have already content with text & tables, I want to make sure that the div will not cut the content of some pages.
I don't want to use Javascript to adjust the width.
Is there a way to do this with a div or should I use table instead?
Not getting your question right, centered as in vertically too? If you want it vertically centered than you need to use position: absolute; and if you want it horizontally centered you just need to use margin: auto;, as simple as that...
/* Totally center fixed width content */
.center {
position: absolute;
top: 50%;
left: 50%;
margin-top: /* Half of the total height of the container div */
margin-left: /* Half of the total width of the container div */
}
If you need the content horizontally centered, you need to use
.horizontal {
margin: auto;
}
Content won't be cropped unless and until you use a fixed width div and overflow: hidden; at the same time
Please see this UI sketch image, I have this div in sidebar (black box) on a certain site and as I scroll down or scroll up, I don't want it to hide...I want it to move itself down as I scroll down and move itself up as I scroll back up so that it never hides out. Can you recommend me some jQuery that can get this done? or something else. Please help, thanks.
Don't use jQuery for this please; it's pure CSS.
#MyDiv
{
position: fixed;
top: 10px;
left: 10px;
}
Adjust the exact position to your liking by adjusting top and left. Maybe you want it centered vertically like in the image (if the sketch is accurate in that aspect), in which case you have to deal with all the fun tricks necessary for vertical centering; hopefully in your case something like this would work:
#MyDiv
{
position: fixed;
top: 50%; /* This places the _top_ of the div in the middle of the page. */
left: 10px;
height: 500px;
margin-top: -250px; /* This moves the div upward by half of its height,
thus aligning the middle of the div with the middle
of the page. */
}