I have a black rectangle I wish to extend the full left to right horizontal viewpoint. Problem is, I have a DIV container (980px) I can't change (long story - basically restriction of the software I'm using).
style="position:fixed; left:0%; width:100%; height:300px"
This works, but I'm left with a fixed rectangle I don't want. Absolute positioning extends to a maximum of 980px (governing DIV container). Any suggestions? JS?
Any information you can provide would be extremely appreciated.
Within your stylesheet you will need to change the parent div ( the 980px div ) to have position: static
#parentDiv{
width:960px;
position:static;
}
#fullWidth{
position:absolute;
width:100%;
height:300px;
background: #000;
left:0;
}
Related
Like other pages, the main div is always a way in which occupies the entire screen seen by the User, and when he scroll down he can see another div: example1 , example2
No matter if you resize the screen, the main div will always occupy the total space seen by the User.
To test It I try this code below:
<div style="background:yellow; position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; z-index:-1; float:left;">
This is my Section!
</div>
With him I can see a large yellow background with a text occupying the entire area of my browser. Assuming I would like to add another div below this, how could I do that? Is possible with css or I will need javascript?
You can do it without javascript with only pure CSS.
With vh units, you can specify a margin-top on the next container like this :
#content { margin-top: 100vh;}
The advantage of this method is that it is fully responsive, no matter how you resize it (height or width).
See it here
If you check your div more correctly, this code:
top: 0; bottom: 0; right: 0;
Is what causes your div to occupy the whole screen because there isn't any space between the div since you set all of them at 0.
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'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).
I have a div that slide from the left 100% once you press a button. In that div it will display my menu for the site. The issue I am having is when on a small browser size the content gets covered and you are unable to see the rest of the links.
My div #slidingMenu has a fixed positioning and I gave the div an overflow-y:scroll. Once I added that code I did have the ability to scroll. But the problem was #slidingMenu now slides out displaying a white bar (scrollbar). Is there a way to have the main scrollbar of the browser control my menu in #slidingMenu when I scroll?
Here is the css and the file http://jsfiddle.net/bC5zh/6/
#footer{
background-color:#999;
width:100%;
height:50px;
position:absolute;
top:100%;
margin-top:-50px;
line-height:50px;
}
#toggle{
color:#FFF;
margin-left:50px;
cursor:pointer;
}
#slidingMenu{
position:fixed;
background-color:#999;
width:100%;
height:100%;
top:0;
left:-100%;
overflow-y:scroll;
}
You would use
overflow-y:auto;
To remove the scrollbar but allow for scrolling when inner content is overflowing, updated fiddle
For a smoother scroll on WebKit mobile devices you can use
-webkit-overflow-scrolling: touch;
Which mimics default iOS scrolling reference
Try adding in your css
#slidingMenu::-webkit-scrollbar {
display: none;
}
this will hide the scrollbar giving you the ability to still scroll on the site.
I want to keep my footer at the bottom of the page while keeping there position absolute , the have the following page structure :
<div id="head"> </div> //want to keep its size auto and always on the top (position absolute)
<div id="body"> </div> //the children of #body have position absolute (keep size auto)
<div id="foot"> </div> //want to keep this at the bottom (just below body , if body size
changes then footer will also change (position absolute)
How can i do this?
Edit
I think i was not clear to my question, sorry for that but my actual problem is that in #main ( height : auto ) the contents are absolute so those contents are not included in the height of main ( i am just guessing this ) thats why the height of main was 0 because of this the footer comes up. This is my actual problem.
Use bottom:0:
#foot {
position:absolute; /* your requirement, you can also use fixed though */
bottom:0;
/* your other possible styles */
}
Just keep in mind that for bottom to work, you got to specify the position as you said :)
If you use position:fixed, the footer will still be available on bottom of the page when you scroll but it is up to your requirements.
If i understand correctly you need position:fixed and not absolute..
#head {
position:fixed;
height:30px;
top:0;
left:0;
right:0;
}
#foot{
position:fixed;
height:40px;
bottom:0;
left:0;
right:0;
}
#body{
padding-top:30px; /* the same as the #head height*/
padding-bottom:40px; /* the same as the #foot height*/
}
Demo at http://jsfiddle.net/ZXMTR/