I have a navigation bar and an image slider under it. how can i stack them on top of each other? my goal is for the images in the slider to be the background-image of the navigation bar. Help me please. The navigation bar consists of a simple div, but the image slider (made in js) is a variable, and not a div. So basically i want to the div to be on top of the slider, i already set the div opacity to low so the images of the slider are visible. Thank you rich i will send the code now.
margin-top:0px;
put this in your css file for the nav-bar and the slider and it should move everything to the top.
Related
I'm on PrimeFaces 6.2 with JoinFaces on SpringBoot. I have a page with a single Accordion panel as the sole component. What I'm trying to achieve is not exactly a background image "for" the Accordion, but rather this:
I want to display a logo positioned at the bottom-center of the page
the logo always remains bottom-centered, no matter how the user maximizes/changes resolution of the browser.
when I expand the panels of the Accordion, it would overlap and conceal the logo in the background.
when I collapse the panels, the Accordion shrinks and the logo in the background becomes visible again.
Till now, I have neither been able to position an image at the bottom center of the screen...nor, how to do such an overlapping of the Accordion over the logo. Can somebody please advise how to achieve this?
Sorry, I badly misunderstood my problem. This has nothing to do with tweaking the Accordion. It's just about having a full page background image in HTML.
https://www.w3schools.com/howto/howto_css_full_page.asp
I want the homepage of my webpage to have a fixed background image in between the navbar and footer with a smaller carousel box in front of the background image. I've looked around and haven't found anything that looks like this. I kind of don't know where to start. Is it possible?
The tag that contains your entire main content add a CSS background to it
Below navbar
Till footer
background:url(link);
Then use your slider as you would normally
I've done this a few times on websites, but this is one of the first times I've tried making a website with a width of 100%. I'm really enjoying the way the site looks compared to being in a wrapper with a set width, but now I'm having all kinds of basic layout issues.
I'm trying to make a layout that has a slide show at the top that is 100% width. Within the slideshow I have the website logo and nav bar positioned above the slider. I pulled this off by making the slideshow absolute and the nav bar and logo relative. So far no problem. Now I want to start adding content below the slider. When I try to add the next div which is going to be the <div id="menu">, the div launches to the top of the screen behind the slideshow. I've noticed this has to do with the slideshow being absolute positioned because when I remove it, the <div id="menu"> goes back to the bottom of the screen.
How do I add more content below the slider with a background-image all inside the <div id="menu">?
JS Fiddle
Not really clear what your issue is. Are you asking how to add a background image to the div? Why do you need the slideshow to be absolutely positioned? It is hard to tell how removing the absolute positioning messes things up based on your JS Fiddle.
I currently have a web page with a fixed navigation bar at the top. Everything works fine, except an image slider I have in the content of the website overlaps the fixed navigation bar when scrolling down, contrary to the rest of the site, which underlaps the bar when scrolling. I have the position: relative style attached to the slider & position:fixed to the navigation bar. I also tried adding z-index:1; to the nav and z-index:2 to the slider, which someone recommended in another post - with no luck.
I appreciate the help!
here is the URL to my problem: http://www.kyniko.com/golf/
Change the z-index of the navigation bar to be bigger than the z-index on the image slider. I went to your site, scrolled down until the image was on top of the nav bar, changed the z-index on the nav bar to 99 and the image went under it.
I have some problems with a project and am on a thight deadline.
The problem:
For a webproject the header consists of a full-width background slider and a menu containing the logo and menu items see: (http://d.pr/i/ln6N)
The problem I have is the way it is divided, the red part acts as a slider. The logo has some space between the menu bar.
How would I go about the transparant space arround this logo?
What I have now is a 100% width div containing the list items and logo on top of it.
I can't figure out how to get the white space on the left and right of the logo while the menu bar is 100% width.
I hope the image (above) clarifies some as I just don't know how to handle this one.
Thanks in Advance,
- V
I got it fixed, dirty tho..
In the image the gray area is one big image with the center cut out so i can place the logo en menu in it so there is some transparant space left.