I'm trying to move a div from the top of the page down to the bottom, but it's not working.
Here's the div and its CSS:
<div class="slides">
<?php include 'slides.php'; ?>
</div>
.slides {
width: 990px;
height: 390px;
margin-bottom: 15px;
}
I've got the code (some of it, anyway) over on jfiddle:
http://jsfiddle.net/jerU7/
You can see the original page here:
http://www.autotrafficinfo.com/
I need to move the rotating banner at the top down to the bottom just above the footer. I moved the div (class="slides") down to the bottom of the html, but it's staying at the top. I realize you can make divs do things that aren't apparent, but I'm not sure how to make this one move down.
In the code on jfiddle, you can see that the text ("Real time traffic for 1.6 million...") is up at the top. The rotating images are, in fact, appearing towards the bottom (although all three are appearing there, instead of one at a time and rotating, because the java script isn't hooked up). The text and banners should all be at the bottom.
How do I scoot the div (class="slides") down so that it's just above the footer?
Your code needs a bit of restructuring.
Wrap all the divs from #greenSmall to #green in a new .content div.
Remove the css property float:left from #green
Move the .slides div to below the .content div and above the footer div.
css:
.slides{
top:97%; // Or designate the px location if you so desire
width: 990px;
height: 390px;
margin-bottom: 15px;
}
The code on the above answer is almost correct but it misses an element. For the 'top' and 'bottom' to work, the element must be positioned absolutely. So, the above code will become
.slides{
position: absolute;
top:97%; // Or designate the px location if you so desire
width: 990px;
height: 390px;
margin-bottom: 15px;
}
Related
I've been trying to make a joomla template with on the left and on the right a bar with fixed width. the main div should be responsive.
I managed to create the layout what i want here:
http://dennybeulen.nl/rena/nl/over-ons.html
The only thing what is not working is the menu on the left side. When i change the css the menu works, but the layout is not right anymore.
the menu is working if i make these changes (just removed the '-' in front of 130):
div.fluid{
margin-left: 130px;
}
hope somebody can give me some hints.
Looks like div.fluid is covering your left column.
Try making div.left absolutely positioned and setting your div.fluid to having no left margin:
div.fluid{
float: left;
width: 100%;
margin-right: -290px;
margin-left: 0px;
}
div.left{
position: absolute;
width: 130px;
min-height: 1px;
padding-top: 10px;
}
Keep in mind, div.left will no longer affect elements floating against it.
#gaynorvader is right in that your middle container lays on top of the menu. Instead of positioning it absolute, you could also just leave everything as is, and only add position:relative;z-index:1 for div.left.
I working on a page with a footer. The footer's positioning is like it should, but I have an problem when i resize the browser from bottom to top. For details, you can see the image below :
Here it's my css footer code :
.footer_page {
color: #fff;
text-align: center;
bottom: 30px;
width:100%;
position:absolute;
}
Someone have an suggestions ?
Thanks.
The bottom 30px signifies bottom of the window. Calculate the distance from top you need your footer to have and give
top:500px
A better way is to give a large div id="page" around your entire page with required height, say 1000 px, and then footer with bottom 30px.
#page{position:absolute;height:1000px}
#page #footer{position:absolute;bottom:30px}
If this seems too much or height of page is variable, let footer be part of flow of the document.In such cases it is better not to use absolute positioning.
You can also do this with some javascript magic.
What I am saying is, suppose total height of your page is 1000px. Put a wrapper around entire page with id page, give absolute positioning and height 1000px, then put footer in the end.
If you mean that the footer doesn't stay fixed to the bottom, try
.footer_page, .push {
clear: both;
color: #fff;
text-align: center;
bottom: 30px;
width:100%;
position:absolute;
}
so adding .push and clear:both.
I am building a blog and have a large header image with the goal of filling the top of the screen (unless on monitor larger than 1500px)- however the scroll bar goes far beyond the header content and displays white space.
When viewed on an Ipad it zooms out and shows the extra space on the side of the content. Why is the width significantly larger than the image?
Here is the site: http://beautyintheweeds.com/
Here is the HTML and CSS:
<?php wp_head(); ?>
</head>
<div id="container" class="group">
<div class="outer"><div class="inner"><img src="http://theshalomimaginative.com/weeds/wp- content/themes/journalist/images/longtop.jpg"/></div></div>
div.inner img { position: relative; left:-50%; }
div.outer {width: 900px; margin: 0 auto; overflow: visible;}
div.inner {display: inline-block; position:relative; right: -50%;}
This code worked to center the header beyond the container and my hope was that it would always fill the top of the screen unless the monitor was too large. Any ideas why it is creating extra scroll space beyond the image?
Thanks.
It's the element with class="inner" that takes up the space. It gets its size from the image inside it, but then you use relative positioning to display the image to the left of the element.
If you want to use that method to center the elements, put a div around it all, that has overflow: hidden; and no width set so that it uses the default width: auto which will make it take up all the available width.
Try this
#container {
width: 911px;
margin: 0 auto;
position: relative;
padding: 0 0 0 140px;
overflow: hidden;
}
I would pull them out of the container. Move div.outer above div.container in the markup, remove all css for div.outer, div.inner then add a text-align: center; to div.outer and remove div.inner completely.
http://jsfiddle.net/pWDrD/
You will see if you increase the width of the fiddle box then the image automatically increases width without having any scroll bar. Do you understand how i did that? Let me know. If not i will explain. Simply put, when you want an image to go to 100% of the monitor then you need to put it into a container with width as 100% and margin auto, not fixed width and no position at all.
Live example of background issue: http://webid3.feckcorp.com/
As you can see the gray stripped background image flows over the bottom of the footer and leaves about 115 extra pixels below the footer. The div that contains the background image is <div id="home_page_back"> and is contained within the body element, both of which are set at a height of 100%.
I want the background image to hit the footer and then stop … not go any further past it. Can someone please advise?
Also - I do not want to place the image as a background of the body.
Cheers!
Copy of the CSS:
body {
margin: 0px;
padding: 0px;
height:100%;
background-color: #f3f3f3;
font-family: Arial;
font-size: 12px;
color: #333333;
}
#home_page_back {
background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
display: block;
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}
I think it's the way you structured your markup, actually. Place the content below
<div id="home_page_back" style="display: block;"></div>
inside of it, remove the 100% height rule and replace it with overflow:hidden. The content will expand that div out to see the background image. As it stands now, you've made it a separate, absolutely positioned div and given it 100% height, which makes it at big as the background image you have inside it, and it expands beyond any of the content coming after it because that content now ignores it in the layout (because it's positioned absolutely.) At least that's the theory I'm going with :)
If you want the height 100% to work like that, give the body element 100% height, and the html element also 100% height.
Add overflow: hidden; to your body css.
And please, try validating your html before doing anything else and before looking for help.
#feck; may you have want an sticky footer check this answer .
Use:
#home_page_back {
background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
padding-bottom: 30px;
}
Wrap "home_page_back" div around "content" div in the html instead.
Remove margin-top from #footer css.
Then, if you want it, you can add the space after the footer.
I have three divs with the following css:
div#container {
width: 780px;
}
div#photos {
width: 780px;
height: 300px;
}
div#content {
position: relative;
top: -106px;
width: 780px;
}
<div id="container">
<div id="photos">photos are here</div>
<div id="content">content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer</div>
</div>
My problem is that because I've set the content layer to be top:-106px there's a big gap underneith, when I wanted the "container" div to end immediately after the "content" div. I tried setting margin-bottom: -106px on the "container" div but that didn't change the height of the "container" div..
The "content" div will have varied height as it's obviously for text, etc. Is there any way of making this work?
Thanks in advance :)
I suggest different approach, absolutly position your image and then push the content down with top margin (or padding if you need the background) on container.
div#container {
width: 780px;
margin-top:106px;
}
div#photos {
width: 780px;
height: 300px;
position:absolute;
top:0;
z-index:50;
}
div#content {
position: relative;
width: 780px;
z-index:100;
}
Set your height on your container div to 100% might help. The other thing you can try is setting the overflow property on your container div. Overflow: hidden or overflow: auto both will make your container div 'wrap' your other divs better at times.
Keep in mind your mileage will vary between browsers.
The reason for the gap is relative positioning does not remove the space originally created for that element even though you move it. Try changing it to 'absolute' and see if that does what you want.
Try changing your CSS to
div#container {
width: 780px;
position:relative; <---------------
}
div#photos {
width: 780px;
height: 300px;
background: #aaaaaa;
}
div#content {
position:absolute; <------------
top: 106px; <------------
width: 780px;
}
Instead of using position: relative and setting top, you can achieve the same effect without the space by setting a negative margin-top:
div#content {
margin-top: -106px;
width: 780px;
}