Help get the Search Bar and Menu in the foreground. I tried the Z-index and that has not worked. I have a negative margin on the search bar to put it in the top part of the website. It's hidden behind the solar system image.
http://wearethenewmedia.com/indextrial.html
Also, see original at WeAreTheNewMedia.com
It's too much code to post in here.
Thanks!!
We're also trying to implement this Sidebar with our Menu button.
Link: http://wearethenewmedia.com/menu/index.html
Without seeing your code it's hard to evaluate or make any suggestions. You should be able to use position: fixed; on whatever container the nav is in to attach it to the top. This will put it on the top of the solar system image. If you don't want it to appear until after, just use jquery to make it fade in once you pass the solar system image.
Related
Introduction to clearify the task
I have a Navbar on the left side of my page. It has two levels for Items. When it's displayed in a small device, only the icons of the first level are shown. If you hover over it a dropdown of sub-items wil be shown on the right side of the bar. So far so good.
When the user uses a normal device the first-level-items should be displayed as dropdown-headers and the sub-items should expand under their parent-items on click. So I planned to set the sub-items-container under the main-items with height: 0px; and exband it with javascript-onclick and a css transition.
But as you can see the sub-items are hovering over the main item.
Question
How can i ensure that the subitemlist is between the main-items and not over it?
Additionally the solution shouldn't destroy the responsivness.
Note: I really want to make my own navbar, so using Bootstrap is not an option. Also i'm sorry if the code is not the best, it's the first try.
Code
I have put the whole thing in a jsfiddle
you cant put it in sidebaritem you have to put it below it
I think that this is a really simple question but I can´t get a solution by myself.
I have a fixed navigation bar in Bootstrap 3 and when I click in one of the nav items it scrolls down to the section with the proper ID. However, it goes all the way until the very beginning of the text. I would like to give it a little bit of space (padding) on top of the text, so i tis easier to read.
This is an example of what I am saying.
However, I would like it to scroll down until the start of the section, including the padding space I have. Like this:
So basically if I could set the menu to navigate to around 20 or 30px on top of the section that would be perfect, because I don´t want to add more padding or margins since that would put too much white space in the site when you are manually scrolling.
I think the section with the proper ID has margin-top: x, change it on padding-top: x. It should work.
I use a jQuery plugin to handle this offsetting of position. Check out Animated Scroll on github.
I don't have all the code to hand, but I use this to kick it off:
$('.btn--scroll-down').click(function () {
$(this).parents('.jsScrollPoint').next('.jsScrollPoint').animatescroll();
});
If you read the docs, you'll notice an option for padding - that's your offset.
I'm having trouble with my code with my CSS stylesheet and HTML index coding. I only have one problem and that is my CSS stylesheet isn't letting me place a div class into it. I'm using the free Brackets software which includes syntax highlighting and it's coming up red which is an error. Here is a picture of it:
http://i58.tinypic.com/ju97cl.png
As you can see in that picture, I've boxed around the place where it's disallowing me to place the div class into the stylsheet in white. I've given a working example with the blue box so I'm confused to why it's doing this.
My main question for you today is how do I create buttons directly in the center on the side of my page with CSS or however possible and how to edit these buttons like adding hover animations, visual looks etc? (I'm new to this by the way) Also, I want to lock the scrolling of my page in a certain area like in the picture described:
http://i62.tinypic.com/wmbyw.png
Lastly, I wish to ask how to make my content on the white area transition by sliding to the side for when I click a button to go onto the next page. However possible I would really appreciate if somebody gives me the time for this. Sadly I can't give another image because I don't have 10 reputation. so I hope you can make out what I'm trying to say.
I will be so grateful to anyone who helps me with this.
First off you need to close your .right-menu class with a }.
For effects and animations check out w3schools:
http://www.w3schools.com/css/css3_transitions.asp - transistion property
http://www.w3schools.com/css/css3_animations.asp - animations
Centering in CSS can be done with text-align: center or margin-left:auto; margin-right: auto.
To prevent scrolling of the body do body {overflow:hidden}
For sliding page content refer to my links above or checkout jQuery
http://www.w3schools.com/jquery/jquery_slide.asp
I would like to be able to have a logo overhang from a header, see this link for a visual example. From what I've searched, most of the results are about making this happen with WordPress rather than just in terms of HTML/CSS (including the provided link). I'm using RoR alongside Twitter Bootstrap in order to create some quick styling of the page including the header (possibly pertinent information).
I'm guessing the answer to this question really is HTML/CSS-centric, so, if I had a header <div> that included a logo to the left as well as a set of navigation links to the right, how could I go about making that logo overhang into the rest of the page below?
Also, bonus points if the ability to add a slight shadow to the part that overhangs is included :)
You can use the z-index property (CSS) to set your logo image so that it is always in front, then you can position the image in your header and it will look like it's hanging. The slight shadow should be part of the image itself.
Try using css code with
position: absolute;
This will ensure your logo floats on top of wherever you want it. Then adjust how you want to place your logo image with:
margin-top: 100px;
using whatever px you want.
I am building a website with a banner and a search bar at the top of the page. The bottom of the banner, by design, is supposed to go behind the search bar. I did this by using z-indexes (The banner is 0, the search bar is 1). I also want the banner to serve as a link to the home page from anywhere on the site.
My problem is that, due to the z-indexing, the banner is unclickable. When I place banner in front of the search bar, the banner is clickable and fine; but when placed behind, it is as if the tag "followed" it and is now unusable.
Is there a way to make my banner z-index to 0, my link z-index to 1, and my search bar z-index to 2? I have tried to assign a z-index to the link (the ) separately from the image using the "style" parameter, but it does not seem to work.
Does the entire banner need to be clickable, or just the area not behind the search bar? If the entire thing doesn't need to be, you could always add a transparent layer over that portion of the banner (though this isn't really something I'd suggest and seems like a hack).
From my understanding, a negative z-index always results in an unclickable link, but that doesn't seem to be your issue. Any chance you could post some source code so we could examine it?
I figured it out. All elements that use the z-index parameter must also be positioned with the position parameter in CSS. My search bar was not positioned.
Source: http://www.w3schools.com/jsref/prop_style_zindex.asp