I'm trying to code a design I've just made: http://www.richardhedges.co.uk/brlan/design.jpg
I'm pretty much done coding but the only thing I don't know how to do is the footer overlapping the main content. What I'd like it to do is scroll the content. (Like it is on Facebook messages)
The footer is simply a div with nothing in it:
<div class="footer"></div>
And here's the stylesheet:
div.footer {
width: 980px;
height: 114px;
float: left;
background-image: url(../images/footer.png);
background-repeat: no-repeat;
margin-bottom: 20px;
}
I need to create a new div which I'll include the content in (as shown in the design.JPG) however it must be 'behind' the PNG image in the footer. I've absolutely no idea how I'd do this - My apologies for ignorance.
div#footer {
position: absolute;
bottom: 0px;
z-index: 9001;
}
div#content {
position: relative;
}
Use absolute positioning and a higher z-index on the footer div than on the ones it'll be in front of.
Related
I made a comment section for my website and I have a button that allows you to edit your comment which reroutes you to another page. I have a margin set up so content doesn't get hidden behind my header or footer but now I can't seem to find a way to get the background color to stretch across to the very bottom of the page.
I messed around with the position in css and the background color did stretch to the bottom of the page, but then my header disappeared.
My CSS...
#headerContainer {
margin: -60px 0px 0px 0px;
background-color:#333;
height: 60px;
width: 100%;
position: fixed;
}
.editCommentBody {
margin: 60px 0px 40px 0px;
height: 100%;
text-align: center;
background-color: #ddd;
}
The editCommentBody class is everything from the header to the edit button.
you have not set a value for the fixed position in your headerContainer style .
try giving left:value and top:value for it and also , when you use positions , margins wont work sometimes , if your margin even works , it has a top:-60px which cause your header to be out of screen , try this :
#headerContainer {
margin:0px;
background-color:#333;
height: 60px;
width: 100%;
position: fixed;
left:0px;
top:0px;
}
Try adding the desired background color to the body instead, like this:
body { color: #ddd; }
Try using:
box-sizing: border-box;
I had generated multiple headers for every page of pdf will be made (dompdf)
Headers are fixed, top: 0px, width: 100%.
My problem is, on the second page and 3rd and so on, my header is over my text content instead to have a margin-bottom. If i put a margin bottom to header, nothing will happen (even if i put margin top for that text content).
What should i do?
CSS:
#header {
position: fixed;
top: 0px;
width: 100%;
margin-top: -180px;
}
#header img {
height: 175px;
width: 1000px;
float: right;
margin-top: 85px;
margin-right: 50px;
}
HTML:
<div id="header">
<img src="sd-logo.jpg"/>
</div>
Thanks.
When using fixed-position element you'll want to place it in the margins of the document to prevent overlapping the body content. You attempted to do so by specifying a negative margin, but those are not fully tested. I'd recommend using negative positioning.
CSS:
#header {
position: fixed;
top: -180px;
width: 100%;
}
#header img {
height: 175px;
width: 1000px;
float: right;
margin-top: 85px;
margin-right: 50px;
}
HTML:
<div id="header">
<img src="sd-logo.jpg"/>
</div>
Also note that, because fixed and absolutely positioned content is removed from the document flow, margins do not affect rendering of any other content.
I have these two styles that position my div in the footer of my page. What happens is that when you generate the content of the page for php, these div can override the content.
div.panel-foot {
position: absolute;
z-index: 2;
height: 30px;
width: 100%;
bottom: 0;
color: white;
background-color: #333333;
white-space: nowrap;
padding: 5px 100px;
}
div.panel-foot-information {
background-color: rgb(65, 65, 65);
position: absolute;
bottom: 30px;
max-width: none !important;
z-index: 1;
color: white;
font-size: small;
padding-top: 10px;
padding-bottom: 10px;
}
So what I do is when the content is small they stay on radapé ie with position: absolute, and when the content is longer they stay position: relative.
Anyone know a solution to resize content dynamically?
Unlike the other answers so far, I'm going to assume you have images and other things that a real website has, besides text.
I suggest using Javascript (since you've got a jQuery tag). PHP ultimately has no idea how much space the content will take up in the browser, so JS is your best option.
Have a look at my example here. If you remove some of the div content, you will see the footer color changes (because it changes the classname). all you have to do is plug in your own selectors and classnames and you're good to go.
// check the size of your conent div
// assuming it's got an id of "content"
contentHeight = $("#content").height();
// set the threshold that will determine how big is too big
threshold = 300;
// or if you want to make the threshold as big as the window...
// threshold = $(window).height();
// if the content height is greater than the threshold..
if(contentHeight > threshold){
// remove one class and add another
$("#footer").removeClass('green');
$("#footer").addClass('red');
}
// otherwise, do the opposite
else{
$("#footer").removeClass('red');
$("#footer").addClass('green');
}
Well, I have sidebar but text(in my case tables) inside sidebar are not aligned like I want.
From one .php I call another inside sidebar, like this:
<div id="sidebar2"> <?php include("tiket.php");?></div>
Here is it CSS of sidebar:
#sidebar2 {
width: 240px;
float: right;
padding: 40px;
background: #264988;
color: #e1d2c7;
margin: 5px;
text-align:justify;
}
An this is how it looks:
How to put text on the left of the sidebar?
It would help a lot if you gave us the complete source code of the sidebar, or told us where it was located.
I think that the reason why the text is not aligned to the left is because you put in text-align:justify;. Remove that line.
#sidebar2 {
width: 240px;
float: right;
padding: 40px;
background: #264988;
color: #e1d2c7;
margin: 5px;
}
What justify does is spread the text out evenly, which can be unhelpful if you don't have much text.
You can nest with CSS3
#sidebar2 table {
text-align: left;
}
you can read more about it over here
https://www.w3schools.com/css/css_combinators.asp
This is the code for my next/prev navigation found at http://ilikeyou.tk/763/ :
<div class="navigation">
<? if($nexts['id'] == ''){ ?>
<? }else{ ?>
<? } ?>
</div>
I would like to vertically center the buttons. I tried using vertical-align:middle; which didn't work. I also tried top:50%; but that didn't do the job either.
Here is my css:
.navigation {
position: relative;
float: left;
vertical-align : middle;
height: auto;
padding: 0;
margin: 0 -20px 0 -22px;
width: 636px;
z-index:1;
}
.navigation a.prev{
background: url('images/nav_left.png');
float: left;
width: 50px;
height: 50px;
margin-left:10px;
}
.navigation a.next {
background: url('images/nav_right.png');
float: right;
width: 50px;
height: 50px;
margin-right:10px;
}
Thanks!
So, I'm guessing that the content area height is not very static.
http://jsfiddle.net/aBzhu/
Trick is to have the outer element set to position: relative; float: left; and then the element you want to center as position: absolute; top: 50%; margin-top: -Half_the_height_of_this_element;
Note that this only works when the element that you want to center vertically IS static height. Should fit your usage I think.
Edit: Oh.. and I dont think this necessarily works in ie6. But does work ie7+
Edit2: Also if youre not interested in such a puny methods you should check this out Using jQuery to center a DIV on the screen
vertical-align is intended for table cell rendering, and even this is quite problematic. Why not just add a few pixels of top padding to your navigation ul? It's not real centering, but you're obviously not worried about dunamic scaling when you're using a fixed height graphic for the navigation background.
This Solution Matched me perfectly for small texts. Even if it is a link or just a text inside the div, this CSS Class could vertically align the content inside the DIV. Works for IE as well..
.verticalCenterDivText{
height: 29px;
line-height: 29px;
}
Hope this helps....
Regards, ADynaMic