I'm designing a portfolio website for a friend, using the KOKEN CMS. The supplied theme is nice but needs some changes. It places all portfolio pictures in a scrollable horizontal band of divs, preceded by a div with intro text. However the theme doesn't allow to have the intro text stay in place, and the following divs scrolling.
Please take a look at http://www.shakkei.com/klanten/hansmaes/projecten/m-r-houthalen/
So the text block
"TWEE APPARTEMENTEN
aard: nieuwbouw
plaats: Houthalen
ontwerp: 2005
realisatie: 2015"
needs to stay fixed, the pictures should scroll.
Can i have some advice on how to alter the CSS (z-index?,...) to manage this?
Many thanks!
you can take the div called "wrap" and add "positio:fix" to it and play around to get it the right top and left values; also you need to choose the highest z-index in order to overlap everything. i tried it on google chrome inspect element and these values seems to be fine "position:fixed;top:100px;left:0px;z-index:9999999999"
Used to this css
#lane.cell > .wrap{
position: fixed;
top: 102px;
z-index: 2;
left: 0;
width: 135px;
}
Related
I am building a website using Divi, and for a couple of the pages there is a requirement to have a sticky menu, along with a top title section combined as though they were one. Ideally I would like them to remain in their current position and simply scroll with the page without knocking out the formatting.
Code used so far is as follows:
.stickyheader{
position: sticky;
position: -webkit-sticky;
top: 55px;
}
#page-container{
overflow: visible !important;
}
I have tried naming both the title section and menu section with the class name 'stickyheader' in the hope that both would be lumped together. This does appear to make both elements scroll with the page, but the formatting goes out the window and they start overlapping and squashing up at the top of the screen, plus the space at the top of the title section has increased which throws the formatting out for the whole page, as everything has been adjusted to fit over the background image.
Both sections are global, for ease across all other pages as these two elements appear the same on each one.
Does anybody have any suggestions? Is there an easier way to do this?
Thanks in advance!
Sure thing, you can do that easily, making sure that you are using the latest Divi version which has the Theme Builder. With it, you can design a template which can govern a specific page and you can assign a fixed position to any element:
No need to use CSS. You can also take other approach:
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-fixed-header-with-divis-position-options
https://divilife.com/how-to-make-to-your-divi-4-0-header-fixed-or-sticky/
https://www.divithemeexamples.com/make-your-divi-4-0-header-sticky-or-fixed-with-the-theme-builder/
Ok, so I created a wireframe to elaborate on the situation: https://wireframe.cc/cQsG8D
Basically I have a page (in HAML if that makes any difference) ... in which there is a scrollable viewport whose height is set to 360px currently.
And there is a text message box underneath it ... I've tried everything to get that text message box go down to the bottom of the page, including doing the same things that twitter bootstrap does in their example: getbootstrap.com/examples/sticky-footer-navbar/
I want to be able to get rid of the height requirement of the viewport, if that's possible and to get the text message box stay at the bottom of the page.
Any advice, please? I've been noodling on this pretty much the whole day yesterday, and now, I'm crazy sick of it ...
Try absolute positioning for the footer.
.bottom-footer {
position: absolute;
bottom: 0;
}
If you wanted it to be sticky, replace position: absolute with position: fixed
Add below properties to your textbox
DEMO HERE
#txtBottom
{
position:fixed;
bottom:0px;
}
I am trying to build a web page which should appear same in both wide screen as well as in small screen monitors. I was trying to keep it fluid but in the mean time strange blank space appeared at the right side of the web page.
Strange thing is the blank space is outside the viewport but it makes horizontal screen bar to appear and once scrolled to Right most side, one can see the white space.
Code can be seen here http://jsfiddle.net/FW98q/
MY gut feeling is the problem is at:
#Navigation_Container {
background: #3399cc;
height: 50px;
//width: 960px;
//margin: 0 auto;
}
Help is much appreciated.
Also any tips on how to style the web page so that it remains consistent over screens. Comments on the design are also welcome..:)
I found the issue....Its in the class '.notice' that is in the footer...if you remove
position:absolute;
It works just fine. :) Check it out! Fiddle
I used the element inspector in firefox at saw that it was the only element that was extending beyond the page.
Also, if you need it positioned absolute on the bottom as you had it, make sure also put the left postion as well like this
position: absolute;
bottom: 0px;
left:0px;
Here is an example with the left:0px added
FIDDLE
#page_container, #Header {
width: 960px;
}
Made sure these two element are the same width as the others if you want them to be the same width.
// doesn't work in CSS and you aren't closing one of your divs. I think it's the content one. Why do you have 3 different footer divs? Your mark up is way too complicated you could combine all three of those and get the same effect.
Taking that just out of the navigation container fixes the white space, but you've done it at least one other place.
add to your css
body{margin:0;}
I'm noticing a lot of sites are recently implementing new types of scrolling effects. Here's one example:
https://banksimple.com/
When you first start scrolling the initial section stays in place (z-index of 1?) while content scrolls over top of it. It also uses fragments and dynamically highlights it's navbar depending on what area the user has scrolled to.
I've seen a few sites use similar techniques. One (which I cannot find the link to) changes the background dynamically.
Is there a common technique used for these types of sites?
The first two sections are using position:fixed.
This fixes the items to a position on the page. They don't move, even with scrolling.
The scrolling section uses position:absolute with a high z-index.
This scrolls fine and because it has a higher z-index than the fixed position elements, it scrolls over them.
There's several ways to do this, but the easiest is to simply make a div, and use the CSS
"position:fixed;"
property. This will cause the div to stick exactly where it is, relative to the browser window.
You may also want to set you z-index to a large value so that the div is certain to stay on top of the rest of the page.
For the menu and header, it's a simple CSS solution using position: fixed and z-index. Both menu and header has position: fixed, while the menu has a large z-index value and the main content has a slightly lower one:
#menu { position: fixed; top: 0; left: 0; z-index: 2000; }
#header { position: fixed; top: ??; left: 0; }
#wrapper { z-index: 10; }
As for the fragment thing, it's done using JS. W3Fools has the same thing, done using jQuery. Perhaps you can decipher the script. Looks like it hooks to the scroll event of the document, checking if the position if the element is above the position of the viewport, taking action accordingly.
One way is to combine CSS + JavaScript let's say (jQuery)
CSS:
position:fixed for the top panel.
Use jQuery offset to detect container position and after you can can apply CSS classes for the "highlights navbar".
First, a warning, I have come back from a years break of html/css and have pretty much forgotten everything, so I'm at newbie level again.
I have been trying to add background images - one at top left and one at bottom right. What I have at the moment can be seen here: http://test.nihongohub.com/Mainsite/firstsite.php as you can see if you change the width of the browser the div containing the img will hit my main part and ruin it.
I have tried a few fixes suggested on stack overflow but none of them worked. Does anybody have any suggestions how to fix this. A friend suggested that I add the img to the footer and squeeze it out, but I don't like this idea.
2 things I want this image to do, move with the browser window, and be able to go behind my main page.
Thanks for any help offered
You could try using fixed positioning and the use z-index to move it to the back, ie.
#bottom_leaf_holder {
position: fixed;
bottom: 50px;
right: 0;
z-index: -1;
}
edit: I ment fixed, changed the answer.
You could put all your content in a div, and add a css rule to that div. Something like
#main_holder {
background: transparent url('img.jpg') no-repeat bottom right;
}
The best solution for this would be to have a wrapper div just inside the body tag that contains only the background image. This will act similar to the body tag allowing you to place an image that does not interfere with the layout and will go underneath your content if the viewport is small.