I have a WP blog with fluid layout, the main content is in a centered div, about 1000px wide.
Now I want to put an ad banner area on each side, and I want to use fixed on the position so that these ad:s stay when user scrolls down the blog.
I have seen blogs with similar ad's but they don't have the fluid layout but instead can use the position: fixed and width:Ypx left:-Ypx which make their ad fixed nicely on the left side always.
It seems that this is not possible though with a fluid layout?
This is the effect I am trying to mimic, see how both sides don't scroll down...
http://radarmagazine.se WRONG SITE
--- update ---------
I put the wrong sample site.. this is the one with fixed positions:
THIS IS THE SAMPLE SITE:
http://freshnet.com
This is possible without JS. Here's my approach.
Basically, you'd want to setup your containing div, then clone it and set it within a div dedicated to position: fixed; that way the cloned container within the fixed div will share the same styles as your actual containing div and scale accordingly.
<div class="ads"> <!-- Dedicated position: fixed; -->
<div class="wrap"> <!-- Cloned container for positioning of Ads -->
<img src="http://placehold.it/100x750&text=Ad1" />
<img src="http://placehold.it/100x750&text=Ad2" />
</div>
</div>
<div class="wrap"> <!-- Main container with a z-index of 1 -->
<img class="main" src="http://placehold.it/960x300" />
</div>
Once that's in place, you can position your "ads" accordingly within the fixed div, and position them outside of the responsive / fixed container so they adhere to it - giving the illusion that they're adhering to your actual wrapper. And after your max-width is reached the fixed ads will be pushed out of the viewport.
http://jsfiddle.net/m0v3vqcp/ - Fiddle
Full Screen /
With Their Ads
It's possible using some JavaScript, fetching the width of the content on the window.resize event and then updating your Ads position on the x-axis based on that value. I made a JSFiddle to illustrate how this could be achieved.
http://jsfiddle.net/r86r6j1f/
You can use padding on the body to make room for the banners, a quick example:
http://jsfiddle.net/dpcd3c1b/
I don't believe you need Javascript for it. You should be able to do it with a couple of relative positioned floats and positioned fixed.
http://jsfiddle.net/9ov32nkd/1/
body, html {
margin: 0;
padding: 0;
}
#wrapper {
min-width: 960px;
position: relative;
margin: 0 auto;
}
#inner {
position: absolute;
width: 960px;
left: 50%;
margin-left: -480px;
}
.content {
width: 720px;
padding: 20px;
background-color: #CCC;
margin: 0 auto;
float: left;
}
.banner {
width: 100px;
height: 100px;
position: relative;
}
.banner1 {
float: left;
}
.banner1 .inner,
.banner2 .inner {
background-color: #EFEFEF;
height: 300px;
width: 100px;
position: fixed;
top: 0;
}
.banner2 {
float: right;
}
Related
I need to make a page without scrolling in landscape version.
The height of the page to be 100%.
I've tried everything.
In Safari, I always get to scroll the lower region.
And I get a hidden area.
I can not hide the bottom bar.
And I can not reduce the height. I can not make it smaller than 320.
The browser creates an additional white area at the bottom of the page.
(Also, i can't use JS)
I will be grateful to anyone reply.
P.S. In the screenshots is not my site, only to show an effect
There are a few ways you can accomplish this. First, you may be able to simply use a table that fills the entire viewport so that each element is then spaced evenly when switching orientations. You could also solve this using simple CSS so you will have more control and have the ability to take advantage of media queries.
See this working fiddle
First you want to wrap all of your content in a single parent container that fills the entire view. This will prevent content from existing outside of the view.
HTML
<div class="wrapper">
<div class="menu">
The Menu
</div>
<div class="hero">
The Hero
</div>
<div class="head">
Text
</div>
<div class="content">
This is content.
</div>
</div>
CSS
.wrapper {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
}
From here you can then set each element to take up a certain percentage of the parent container so that rescaling recalculates the elements proportions instead of forcing a scroll.
.menu, .hero, .head, .content {
position: absolute;
left: 0;
width: 100%;
}
.menu {
top: 0;
height: 10%;
background: #eee;
}
.hero {
top: 10%;
height: 20%;
background: #aee;
}
.head {
top: 30%;
height: 10%;
background: #eae;
}
.content {
top: 40%;
height: 60%;
background: #eea;
}
Implementing it this way will allow you to have a bit more control of the behavior of each element as the view size changes.
Problem: When you make a certain div's position fixed (often used as a side bar, or side menu kind of stuff), and if you continue scrolling down, the div overlaps with the footer.
body {
margin: 0;
}
#header {
width: 100%;
height: 290px;
background-color: #07CB6F;
}
#body {
width: 100%;
height: 3450px;
background-color: #2FA3F7;
}
#body_inner {
width: 1280px;
height: 3450px;
margin: 0 auto;
}
#side_menu {
width: 220px;
height: 270px;
position: fixed;
background-color: #ffffff;
}
#footer {
width: 100%;
height: 200px;
background-color: #FF00AB;
}
<div id="header">
</div>
<div id="body">
<div id="body_inner">
<div id="side_menu"></div>
</div>
</div>
<div id="footer">
</div>
I did not use any jquery this time. With the codes given above, since the #side_menu is set as height: 270px, it seems to be okay with the overlapping, however, it still overlaps with the footer if you zoom up the browser (and sometimes depending on the types of browsers and computers).
I would like to know why it happens, and how can it be solved (or prevented).
Thanks in advance :)
Here's a fiddle with the solution
https://jsfiddle.net/stc0ogy2/1/
you need to start using the z-index, it works like the photoshop layers though the z-index will not work without the position so you have to add a position like absolute, relative and so on.
UPDATE
As #AndreiGheorghiu mentioned you should use some javascript for a better solution, choose one of the libraries from the list he gave you.
UPDATE 2
I found this easy-to-use library that I believe will help you with the fixed side menu, it's called tether. Hope it helps.
Your footer is looking to take up 100% of the width space at the bottom and a side bar that wants to take up 220px of the width. On a small screen your menu and footer are fighting for space because its not mathematically possible for one item to take up 100% of space and another item to sit next to it.
You won't notice a problem full screen on most desktops because your menu is too heightwise to be noticeable.
Ideally when declaring your width for the menu and footer you want to use calc() to enable resizing without causing overlap.
https://jsfiddle.net/nu8av25m/ a quick example I put together to demonstrate how it works.
<body>
<div class="navigation">menu</div>
<div class="main">main body</div>
<footer>footer</div>
</body>
.navigation {
Width:50px;
Height:100%;
Background-color: red;
Float:left
}
.main{
Width: calc(100% - 200px);
Height: calc(100% - 100px);
Background-color: blue;
Right:0;
}
Footer{
Width: calc(100% - 100px);
Height: 50px;
Background-color:green;
Bottom: 0
}
I'm trying to create a sticky searchbox so that it's always at the top of the page when you scroll.
However, I'd like it to take up 100% of the container, not the window.
Here's an HTML markup example:
<div class="container">
<div class="searchbox">
Search Box
</div>
</div>
and the CSS:
.container {
background-color: blue;
width: 300px;
padding: 20px;
height: 40px;
overflow-x: hidden;
}
.searchbox {
background-color: red;
position: fixed;
width: 100%;
}
Here's a fiddle with what's currently happening: http://jsfiddle.net/09ynr879/
I'd like it to be indented on the right side by the same amount it already is on the left. Any way to fix this? I'd like to be evenly in the center with the same margins on the left and on the right.
Thanks in advance.
Here's a screenshot of the actual site where we're having the problem:
http://s2.postimg.org/dlj47yqix/Screen_Shot_2014_10_06_at_11_08_24_AM.png
Notice how the searchbox starts at the right place but ends at the end of the page, not at the end of the container. We're using Bootstrap 3.2
Elements that are position: fixed have no relative parents. They are always going to be fixed relative to the page.
If it's no problem to you, remove position: fixed; from .searchbox and add it to .container
It's not possible, the fixed position get's out of the flow.
But an alternative solution:
.container {
background-color: blue;
width: 300px;
padding: 20px;
height: 40px;
position: fixed;
}
.searchbox {
background-color: red;
width: 100%;
}
http://jsfiddle.net/09ynr879/4/
Position fixed is always of the entire window. If you want to do it for just a container, you need JavaScript.
I think what you are looking for is either:
StickyMojo or jQuery Stickem
Bootstrap has a similar thing, called Affix.
I'm working on a website that fits perfectly in the browser window. Below is a basic blueprint of the website layout:
So far, the Red area is just display:block. The Green area is also display:block with margin-right:200px. The Blue areas(nested in a div) is float:right.
So I've got the width sorted. It's the height I need advice on. The Red and Dark Blue areas are a set height, but I need the Green and Light Blue areas to fit the height of the browser window view.
I'm trying to use box-sizing, but it exceeds the height of the window view because it's extending to the max height of the window. Sorry for my poor explanation. Any advice if would be excellent. Thank you!
For green div set height: calc(100%-{red-div-height}); and for the light blue div set height: calc(100%-{dark-blue-div-height}-{red-div-height});
This is kinda the legacy version of C-Link's answer.
jsFiddle and fullscreen
This has the limitation of any content falling below one page-full falling outside of its container (you can see if you scroll down in the fiddle, but not on the fullscreen).
Make sure our page stretches to its full height.
body, html { height: 100%; width: 100%; margin: 0; padding: 0;}
Set a static-height header.
header {
height: 101px;
background: red;
}
Create a box for everything under the header. You were on the right track with the box-sizing. We can add padding to it, in the same amount as our header. Then percentages inside it work nicely.
.content {
position: absolute;
box-sizing: border-box;
padding-top: 111px;
padding-bottom: 10px;
top: 0; left: 0;
height: 100%; width: 100%;
}
We float our aside (may or may not be the correct element, depending on contents) and set some styles on it.
aside {
float: right;
width: 20%;
height: 100%;
padding-bottom: 111px;
box-sizing: border-box;
}
.top {
height: 100px;
background: blue;
}
.bottom {
margin-top: 10px;
height: 100%;
background: skyblue;
}
This is our main, large, content area, which we float to the left. The width could be specified exactly if we wanted exact padding at the cost of additional HTML.
[role="main"] {
width: 78%;
background: limegreen;
height: 100%;
float: left;
box-sizing: border-box;
}
You can also set overflow-y: auto on our main or aside elements, to have them scroll when they run out of space. There should also be mobile styles for this page that remove the floating, absolute positioning, absolute styling, and widths should be nearly 100%.
you can always set the green box height to the window height minus the red box height.
accordingly the light box height to the window height minus the (red box height + the dark blue box height)
Edit 1: I haven't mentioned that has to be done with javascript.
Edit 2: Consider any paddings and margins too.
Could you not just give the divs a max or min height depending on their purpose?
I use a main container or wrapper div that the others would be contained in, that div is then my effective page or screen area.
<div id="wrapper">
<div id="content">
<div id="sidebar">
</div>
</div>
</div>
#wrapper{
min-height: Whatever value you want here;
max-height: Whatever value you want here;
}
It might be a good idea to set up your page using main container divs, hot only for the content but for the header and footer as well.
As an example, I have a main wrapper that is the whole page, within that is the header div, the content div, the nav div and the footer div. These are the main ones. Everything else can then be contained within them.
So, you can set the layout out using percentages so you have a fluid design that'll react to each browser size. The other elements will then 'fit' inside the main divs and be constrained to them. You may need to look into positioning etc but this is certainly the direction you should head towards.
<div id="wrapper">
<div id="header">Header Here including any divs to be contained within this space</div>
<div id="content">All content etc here</div>
<div id="nav">This is your sidebar</div>
<div id="footer">Footer, as per header</div>
</div>
Then use the css to re deisgn the above layout focusing only on those main divs. Use % instead of px to maintain fluidity.
#wrapper{
width: 100%;
height: 100%
}
#header{
width: 100%;
height: 20%
}
#content{
width: 70%;
height: 60%;
float:left;
}
#nav{
width: 30%;
height: 60%;
float:left;
}
#footer{
width: 100%;
height: 20%
}
A pretty common trick is to give the green (and light blue) box absolute positioning, a padding AND a negative margin. Because 100% width is relative to the containing box (could be a parent div, or just the window itself) this is not suitable. When the header was a relative height, say 10%, it would've been easy. The padding makes sure the content will not disappear behind the header, the negative margin puts the box back in place. Don't forget the z-index (otherwise the content (green part) will overlap the header).
The css looks like this:
.header { position: absolute; width: 100%; height: 100px; background: red; z-index: 1; }
.content { position: absolute; width: 100%; height: 100%; padding: 100px 0 0; margin-top: -100px; background: green; z-index: 0; }
The fiddle looks like this: http://jsfiddle.net/2L7VU/
Okay, so I'm having rather annoying problems with what should be simple code, I've searched for duplicates but it appears to be different in a slight way. Here's my basic layout:
html:
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
css:
html,body,#wrapper {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
position: relative;
}
#header {
position: fixed;
top: 0px;
height: 40px;
width: 100%;
color: white;
background-color: #000000;
}
#content {
position: fixed;
padding-bottom: 50px; /* to match the footer height*/
top: 40px;
bottom: 50px;
height: 100%;
width: 100%;
overflow: auto;
}
#footer {
position: fixed;
bottom: 0px;
height: 49px;
width: 100%;
border-top: 1px solid #000000;
background-color: skyblue;
font-weight: bold;
}
The idea is that the 3 divs inside the wrapper take up 100% of the page - in other words: all them are always in view. Header up top, footer on the bottom and content in the middle respectively.
The footer and header can be fixed size (be it pixels or % of page height), the content I want to automatically take up the rest of the page.
The problem is that the page can be of many different resolutions(so content can't be of fixed height, unless I use javasript). Another thing is that the content div can have variable amount of elements, meaning it has to allow the scrolling of the content while keeping both header and footer in view. The main part is: the scroll-wheel must be inside the content div, not page-wide.
I almost have what I want with this css, but some of the content can't be scrolled to when they overflows content div (I'm talking vertical overflows - there will be no horizontal ones). I would really appreciate some help, but this is not as easy/simple as it seems, if possible at all as I think you need a fixed height for overflow: auto.
I want a pure css solution, if possible, so don't mention JqueryMobile to me (or ever).
Here's how it looks right now, notice the scroll-wheel problem on the content div:
I hate when this happens...I found the solution just after I posted, decided to try one more thing: I've set the #content height to 'auto' and that did it (since once I drew my own attention to the scroll-wheel, it became apparent the problem is with the div height)! Just need to test and make sure that's the case with all/most browsers!
Maybe it will be helpful to someone else though!