I've got to (unfortunately) put our ads onto our website. They're positioned down the right hand side of the page, outside of the content area.
When the screen width gets smaller, because it's positioned outside of the content they get cut off by the browser. I can offset everything by putting left: -someValuepx, which moves everything over.
Rather than having to put in lots and lots of media queries to keep slightly moving it over, is this something I can do in Javascript, to automatically keep them in the view? Ideally I'd like a function that I can run on page load, and then on the window resize event.
Here's a jsfiddle of the CSS at the moment. Edit the #container left attr to move the content.
And here's the code (as I believe it's required if you link to jsfiddle?)
HTML
<div id="container">
<div id="ads">
</div>
<div id="content">
</div>
</div>
CSS
#container {
width:500px;
min-height:100px;
background-color: firebrick;
margin:0px auto;
position:relative;
left:-50px;
}
#ads {
background-color:red;
position:absolute;
top:0;
right:-170px;
width:160px;
min-height:100px;
}
#content {
width:100%;
background-color:green;
min-height:100px;
}
I have a pure css solution, if you change your div structure to the following:
<div id="container">
<div class="padding">
<div id="ads"></div>
<div id="content"></div>
</div>
</div>
You are able to use the following styles:
#container {
width:670px;
min-height:100px;
margin:0px auto;
position:relative;
}
#container > .padding {
margin-right:170px;
background-color: firebrick;
}
#ads {
background-color:red;
position:absolute;
top:0;
right:0;
width:160px;
min-height:100px;
}
#content {
width:100%;
background-color:green;
min-height:100px;
}
#media (max-width:670px) /*this is the width of the container*/
{
#container {float:right;}
}
And this will keep your adds in view when the viewport is resized
Example
What you can do, is to create a function in JS that gets executed one time when the document is loaded and also when you resize.
This function should add a class (ie: hidden) to the the ads. you want to hide, and with CSS, give the right properties. Just addClass and removeClass, depending on the situation, should make the trick.
Example:
#ads { // normal values that makes the content of the ads visible }
#ads .hide { // offset values to hide the ads }
This way, you keep behavior & presentation separated.
Hope it helps !
In your html markup, you have both content and the ads inside a container. The problem is that the content takes all space of the container, and the ads are positioned outside of it.
Just make the container wide enaugh to hold both content and the ads, then position them appropriately. Make one break point on the width of content+ads (660px), where you would position the ads below the content, and give the container its current width (500px).
Related
I have a position: fixed div that loads a dynamic image from an external source, the image height changes every time it loads.
Now I need to position the next div immediately from where the first div ends.
Have tried by getting the height during runtime but sometimes it takes time to load and the height sent is not proper.
Is there any CSS solution to it.
Theres many ways to do it, the most optimal would be to use floats (float:left;)
div{
float:left;
}
.img{
background-color:red;
width:100px;
height:100px;
}
.div{
background-color:lime;
width:100px;
height:100px;
}
<div class="img">Dynamic Image</div>
<div class="div">Div next to it</div>
I'm trying to make a fullscreen site, also responsive, but on smaller screens the elements in the container overflow making it not 100% it varies depending on how many items are in it. Using:
top:100%;
position:relative;
width:100%;
height:100%
works, only if the screen is a certain size, on mobile devices using that it doest work, and appears half on the previous container.
Is there a way to position from the bottom of the element rather than top?
http://jsfiddle.net/q8tvwm2k/2/
Update:
Never minds found a pretty bad but working solution.
I'm pretty sure you really want a position:absolute to have another div relative to it. You just didn't word the question correctly. position:relative sets the point to which its children can be position:absolute, which is where you want to use top and the like. This is the structure you need to see:
HTML
<div class='surround'>
<div class='inside'>
<div class='outer'>
<div class='inner'>
</div>
</div>
</div>
</div>
CSS
.surround{
position:relative;
}
.inside{
height:100px; width:100px; position:absolute; top:100px; left:100px;
}
.outer{
height:100px; width:100px; position:relative;
}
.inner{
position:absolute; top:30px; left:10px;
}
I am adding footer section to a simple web page since page has only few items on the page show white space at the bottom of the footer if i keep footer height at 150px. When i keep height:100% to take the rest of the space at bottom of the page, Rather it adds 3 - 4 times more to the footer section which show vertical scrollbar.
Is their a way i can only add that much height to footer section so that scrollbar wont be added. even using jQuery.
Example : http://jsfiddle.net/57fBK/10/
In the above mention fiddle example your will notice footer height than usual. To me it seems it by default always take height of HTML elements defined above the footer section.
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
background-color:red;
height:100%;
}
.footer
{
margin-top:50px;
text-align:center;
}
The problem here is that giving height:100% to .fullWidth makes it 100% of the viewport height...which means, if there's any content above it that pushes it down, .fullWidth is going to extend that much below the bottom of the viewport, creating a scrollbar. If you're only looking to visually have the footer appear to fill the remaining space (between the content and the bottom of the viewport), here's a way I've used once to fake it.
Simply make the entire body the same background colour as the footer, and place the rest of the content in a wrapper with the main background colour. For example, your HTML might become:
<div class="main">
(Content from before goes in here.)
</div>
<div class="row">
<div class="large-12 columns footer">footer</div>
</div>
And some altered/added CSS (it should be noted that .fullWidth is rendered completely unnecessary by this approach, so you can remove it from your HTML/CSS):
body{
background-color:red; /* Footer background colour */
}
.main{
background-color:#FFF; /* Main background colour */
}
.footer {
background-color:red;
margin-top:50px;
text-align:center;
}
Here's a JSFiddle demonstrating how this looks. Now, if there's extra space below the footer, it won't be perceivable unless you start inspecting elements. If this isn't what you wanted, you may want to look into sticky footers, as others have suggested.
Hope this helps! Let me know if you have any questions.
try this:
.fullWidth {
width: 100%;
margin:0 auto;
max-width: initial;
background-color:red;
height:100%;
}
also you need to set height for footer:
.footer
{
margin-top:50px;
text-align:center;
height: 50px;
}
I am trying to inject a banner div
<div id='banner'></div>
on top of an existing webpage in such a manner so that when a person scrolls the webpage the banner remains on top. Also the webpage should be pushed down by the banner so that every part of the page remains accessible.
Here is my CSS:
#banner {
position:fixed;
display:block;
top:0px;
background-color:#FFFFFF;
width:100%; height:250px;
border:2px solid;
}
Here is my jquery:
$("body").prepend("<div id='banner'></div>");
I tried using jquery to find all divs that were fixed and changing them to relative before executing the above line but still the banner does not work. The error is shown in the following picture https://drive.google.com/file/d/0B0sCu8aj8zu2akhtcEdtajJJZEU/edit?usp=sharing
Please Help.
And I am not looking for ad revenue here this is just a practice task.
Here is a jsFiddle I have created. The banner div is at the top of the page.
It stays at the top while scrolling.
The HTML:
<div class="page">
</div>
The css:
.oldBody
{
width:100%;
height: 3000px;
background-color: navy;
margin-top:250px;
}
#banner
{
position:fixed;
top:0px;
background-color:#FFFFFF;
width:100%;
height:250px;
border:2px solid;
z-index:10000;
}
The JS:
$("body").wrapAll("<div class='oldBody'></div>");
$("body").prepend("<div id='banner'></div>");
Please maintain z-index of banner div.Z-index should be grater then other div on that page.
#banner {
position:fixed;
display:block;
top:0px;
background-color:#FFFFFF;
width:100%; height:250px;
border:2px solid;
z-index : 99999
}
i'd just like to present a different way to create the element:
var $banner = $('<div/>', { 'id' : 'banner' });
$('body').prepend($banner);
this technique for creating elements with jquery comes in handy when you have several different element to create. as a note, you can also create the element like so:
var $banner = $('<div/>').attr('id', 'banner');
I think the best way is first keep your ad on top in relative position when a person scroll page your function check the page-scroll .scrollTop() and then add fixed position on banner ad container just like freeze header, if you need further help in this regard let me know, I will provide you code. thanks I hope this technique will help you
I am trying to make a parallax scrolling website and its template is as follows:
HTML
<div id="content">
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
</div>
CSS
#content {
height:auto
}
#container1, #container2, #container3 {
position:relative;
height:100%;
width:100%;
background-size:cover;
overflow:hidden;
}
#container1 {
background-color:#FF0000;
}
#container2 {
background-color:#000;
}
#container3 {
background-color:#363636;
}
Problem: If you scroll down to either #container2 or #container3 and resize the browser, the website appears to scroll.
I suspect that the height:100%; is causing issue. In particular, resizing causes all three containers to resize, creating a weird offset.
Things I have tried:
Binding the resize event and dynamically changing the height of the divs
Adding a min-height property so that the resize locks after resizing
Hiding the div that is no longer in the view
Is there any simple way of fixing this? The last attempt fixes it, but I feel like there should be a better way rather cluttering my JS file with several .hide() and .show() events.