This problem is related to how i can show div with absolute position regarding the div, Not the page.
I have div#Div_Report, Which has multiple page div#page1, div#page2,..., And each page div has content with same css.
My problem is if i give absolute position to page's div.Div_ClientName, Then div#page2 data is overlapping to div#page1.
I know this can easily fix by relative position, But due to some reason i cant use relative position.
So how we can set page content with in page div with absolute position?
Here is my HTML:-
<div id="Div_Report">
<div id="page1">
<div class="Div_ClientName">Childrens Network - Hendry Glades</div>
</div>
<div id="page2">
<div class="Div_ClientName">Childrens Network - Hendry Glades</div>
</div>
</div>
CSS:-
.Div_ClientName{
top:180px;
}
.Div_ClientName{
position:absolute;
}
.Div_ClientName{
left: 175px;
}
#page2{
margin-top:200px
}
Fiddle Link
Try this CSS:
#page1, #page2 {
position:relative;
float:left;
}
... it isn’t, by any means, a nice solution ... but it solves the problem with things overlapping.
Related
I'm trying to move some images but I can't move them. I moved other images just fine but these ones won't move?
HTML: (it's a little larger with more images but i can't even move one)
<main>
<p class="window1"> Window 1 </p>
<img class="uparrow1" src="images/up.png" alt="Up">
</main>
CSS:
.uparrow1 {
position: absolute;
top: 300px;
left: 100px;
}
It doesn't response at any command.
Be sure to set the containing div to position: relative, in this case .main.
You can't move your child elements positioned in absolute if you don't set your parent element in relative.
Ex.
CSS
.parent{
position:relative;
}
.child{
position:absolute;
left:100px;
}
HTML code
<div class="parent">
<div class="child">Move me</div>
</div>
Resources for more info: http://www.w3schools.com/css/css_positioning.asp
I want to have a div with fixed position inside a div with overflow-y:scroll, meaning I want the div to stay in place while the rest of the content scrolls normally.
And I can't figure out what is wrong, could anyone help? thanks in advance...
.foo {
position:relative;
display:block;
width:100%;
height:300px;
overflow-y:scroll;
}
.bar {
position:fixed;
top:0;
right:0;
}
And here is the HTML
<div class="foo">
<div class="bar"><div><!-- end of div that should be fixed -->
<div class="someOther">...</div>
<div class="someOther">...</div>
<div class="someOther">...</div>
<div class="someOther">...</div>
</div><!-- end of container -->
When you apply position:fixed to an element, you are positioning it in relation to the window itself, not its parent element. You'll want to use position:absolute to position a child in relation to its parent, as long as the parent has a position other than position:static, the default position.
As you correctly did in your example, apply position:relative to the parent .foo and then apply position:absolute to the child .bar. Normally, this would achieve the desired result of snapping the .bar to the top of the parent, but since there is an overflow of child content in the parent div, and overflow-y:scroll scrolls all the child content, .bar has to scroll as well. See the top example in my Fiddle here.
To fix that, wrap the content you want to scroll in another container with overflow-y:scroll on and remove overflow-y:scroll on .foo to prevent .bar from scrolling.
To see the working example that you can adapt, see the bottom example in my Fiddle here.
A fixed elements position is relative to the entire document you are viewing, not whatever the parent element is. If you want that to work, you'd need something like this:
CSS
.foo {
height : 300px;
position : relative;
width : 100%;
}
.bar {
border-bottom : 1px solid #000;
height : 50px;
}
.scollable_content {
height : 250px;
overflow-y : auto;
}
HTML
<div class="foo">
<div class="bar"></div>
<div class="scrollable_content">
<div class="someOther">...</div>
<div class="someOther">...</div>
<div class="someOther">...</div>
<div class="someOther">...</div>
</div>
</div>
Here, I created a fiddle for you.
I don't know if this is possible with only html and css, but I have an absolute div inside a relative container and want to have a regular div under the container.
HTML:
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
CSS:
#container{
position:relative;
overflow:auto;
}
#content{
position:absolute;
width:955px;
z-index:1000;
}
The goal is to prevent the "content" div from overlapping into the footer. It worked with overflow:auto, but I got another vertical scrollbar appearing for the container div.
Any other ways to get around this?
So, how about hiding only vertical scrollbar:
#container {
position: relative;
overflow: auto;
overflow-y: hidden;
}
?
If you're looking for something more fancy to hide scrollbars then you could use JavaScript mousescroll event to do it.
http://viralpatel.net/blogs/2009/08/javascript-mouse-scroll-event-down-example.html
Or you could use some jquery plugin to handle scrollbars, there are plenty of them, jScrollpane, Scrollable...
It is possible to do this with only HTML and CSS. You may find the setup of the HTML and CSS code from http://www.cssstickyfooter.com/ useful since it is using the same layout as your code and it trying to achieve a similar goal.
I have combined the code used to create a sticky footer with your code in the Fiddle below:
http://jsfiddle.net/bPybY/1/
You'll have to change the layout differently since element with absolute position doesn't have a layout space. Like this:
<html>
<head>
<style>
#container{
position:relative;
}
#absoluteContent{
position:absolute;
width:955px;
z-index:1000;
}
</style>
</head>
<body>
<div id="container">
<div id="absoluteContent">
<div id="content">content
</div>
<div id="footer">footer
</div>
</div>
</div>
</body>
</html>
Could someone please help me position my footer correctly in my webpage?
I have the following layout:
This is how I want the footer to behave:
The footer should be positioned at the bottom of the page when the content is empty.
The footer should be 'pushed' down when the content exceeds the height of the page.
here is my HTML:
<html>
<head>
<title>#ViewBag.Title</title>
</head>
<body>
/* This is outside of the container as I want the background
to stretch across the top of the webpage */
<div id="menu">
<div>
/* This contains an unordered list which is restyled as a series of links.
The reason it is contained in inside the menu div is because I want this
content to be centred. /*
</div>
</div>
<div id="page-container">
<div id="header">
<h1>Website title</h1>
</div>
/* This is floated to the left of the content area. */
<div id="content">
#RenderBody()
</div>
/* This is floated to the right of the content area. */
<div id="sidebar">
#RenderSection("sidebar", false)
</div>
</div>
<div id="footer">
My footer content goes here.
</div>
Please note the following:
The content and header is contained in a 'Div' called 'page-container'.
The content is made up of two Divs which are floated to the left and right of the content area.
The menu is outside of the page-container div. This is because I want the menu background to stretch across the top of the page (like the Stackoverflow menu)
I am aware that there are many similar questions on Stackoverflow and that a Google search will return a large amount of results.
The thing I have noticed whilst trying to adapt the samples I have found is that they usually depend on a very specific html structure (E.G. everything but the footer is in a container) that does not match mine. No matter what I try I end up with something that doesn't work (E.G. the footer is positioned below the screen bounds when the content is empty or is not moved down when the content exceeds the page).
Update
I can get my footer to stick to the bottom of the page but it is not pushed down when my content expands. I think this is because my content is made up of two floating elements.
Most people seem to be pointing me to tutorials they have found on Google (as already stated I have read most of these and already attempted to adapt them).
I have come to the conclusion that I am going to have to restructure my HTML to get this to work; the point of my question was how do I do this with the HTML I already have? So much for separation of concerns!
A quick google search gave me a few links that you'll find useful.
http://www.cssstickyfooter.com/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I would stick to with the first one, but either should do what you want.
I made a fiddle: http://jsfiddle.net/karlroos/ZVkYC/ (sorry for the badly organized CSS)
Take a look. You'll have to make some workaround for the min-height: 100%; in older versions of IE, presumably with JavaScript.
As mentioned in the edit to my post, I ended up having to alter my HTML slightly:
<body>
<div id="page-container" >
<div id="menu">
<div>
</div>
</div>
<div id="layout-container">
<div id="header">
<h1>Website title</h1>
</div>
<div id="content">
#RenderBody()
</div>
<div id="sidebar">
#RenderSection("sidebar", false)
</div>
</div>
</div>
<div id="footer">
</div>
My CSS is based on CSS found here (This same link was posted by a couple of people but I was already using this anyway!)
The solution is about 99% effective. My footer sticks to the bottom of my page when the content area is empty and is also pushed down when the content grows larger than the screen but I now have a permanent scrollbar as my page height seems to be off (moving the mouse-wheel scrolls the page up and down by a single pixel).
I have so far been unable to get rid of this so I am begrudgingly accepting this as a complete solution unless anyone else can point me in the right direction.
Update
It seems the 1 pixel offset was caused by my footer having a 1 pixel top border. I simply adjusted my CSS to account for this and the scrollbar disappears when the content does not completely fill the screen.
#footer {
margin-top: -151px;
height: 150px;
}
Try editing your CSS to include something like the following:
#footer {
width: 710px;
height: 50px;
margin: 0 auto;
padding: 40px 0 0 0;
}
#footer p {
margin: 0;
text-align: center;
font-size: 77%;
}
#footer a {
text-decoration: underline;
}
#footer a:hover {
text-decoration: none;
}
Then call it in your footer.
Wrap your div-s in a wrapper:
#wrapper {
width:100%;
height:500px;
background:#ccc;
margin:auto;
position:relative;
}
and use the following CSS for your footer:
#footer {
width: 100%;
height: 80px;
background-color: #ccc;
position:absolute;
bottom: 0;
}
Have you tried setting the body to position:relative and the footer to position:absolute with bottom:0 ?
I am creating a website that has a jquery image slideshow as the background, and on top of the slideshow is a navigation bar, a blank area in the middle of the page so that the image shows through, and at the bottom underneath the slideshow is some content and a footer. Similar to Need Supply's current website (http://needsupply.com/).
My main difficulty, is that I'd like to have the images in the slideshow clickable but since the slideshow is behind all of the divs (z-index: -1), it cannot catch any clicks since it's being covered by my main content divs (page, header, footer).
I tried replacing the slideshow with a simple linked image but it still cannot be clicked, so I know it is not anything to do with the slideshow code.
Here is the basic structure of my site:
<body>
<div id="slideshow">
....
</div>
<div id="page">
<div id="header">My Header</div>
<div id="content">Some Content</div>
<div id="footer">My Footer</div>
</div>
</body>
css:
#slideshow{
width:100%;
height: 620px;
position: absolute;
top:0;
left:0;
z-index:0;
}
#page{
width: 980px;
margin: 0 auto 2px auto;
}
Any help would be greatly appreciated. Let me know if you need any more information on my end.
You just need to remove the #page wrapper and position #content and #footer absolutely at the bottom. That way there would be no div covering the main area of the images (#slideshow) and so you would be able to click it. The #page, #content and #footer divs would remain unclickable.