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.
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 have an iframe fullscreen, how can I make a div that is on that iframe?
I'm trying to do something like the Netflix player, just more static WITHOUT javascript
so there is the iframe,
then there is a div with some buttons and functions in php but the div has a background cutted, on top of the iframe.
Is it doable?
LIKE THIS IMAGE CHECK PLS
Here is a possible solution :
<div class="iframe_container">
<iframe width="100%" height="700px"></iframe>
<div class="custom_functions"></div>
</div>
<style type="text/css">
div.iframe_container {position: relative; width: 100%; height: 700px; background-color: #F0F;}
div.custom_functions {position: absolute; bottom: 20px; left: 20px; right: 20px; z-index: 1; background-color: #FF0; height: 200px;}
</style>
update the values as needed and make it fit your needs
I'm trying to create an image rollover button to place within a php file. The css is below...now what php script would I use to display the button?
#quotebutton {
position: fixed;
display: block;
width: 147px;
height: 35px;
left: 830px;
top: 400px;
background-image: url ("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote.png");
background-repeat: none;
}
#quotebutton a:hover {
position: fixed;
display: block;
width: 147px;
height: 35px;
left: 830px;
top: 400px;
background-image: url("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote-over.png");
background-repeat: none;
}
Why are you attempting to place this in a PHP file?
A couple of things off the bat tho:
You don't need the quotes in your CSS url("") tag. It can just be url(http://imagehere.com/sup.png)
The hover scope does not need to have every attribute re-defined. For example, you can just do this:
#quotebutton a:hover {
background-image: url(urlhere)");
}
Edit: Nikola has a more appropriate answer for implementation. I created an example for you of what Nikola's talking about however:
http://jsfiddle.net/XAtGP/
Cheers. :)
You can use html code, or php script that outputs the html code:
<a id="quotebutton" href="#">Quote</a>
In CSS, # stands for ID of some element.
If you are planning to use more than one such button on a single page, you should change #quotebutton to .quotebutton (with dot at the beginning) and use it like this:
<a class="quotebutton" href="#">Quote</a>
where . in CSS stands for CLASS of an element.
HTML classes can be used by many elements while ID is the unique identifier of the element and can't be used 2 times on the same page.
css: if anchor tag is nested within #quotebutton
#quotebutton>a{
position: fixed;
display: block;
width: 147px;
height: 35px;
left: 830px;
top: 400px;
background-image: url ("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote.png");
background-repeat: none;
}
#quotebutton>a:hover {
background-image: url("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote-over.png");
}
html example:
<div id="quotebutton">
<a herf="#"></a>
</div>
if not and #qoutebutton is the anchor the css is a follows:
a#quotebutton {
position: fixed;
display: block;
width: 147px;
height: 35px;
left: 830px;
top: 400px;
background-image: url ("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote.png");
background-repeat: none;
}
a#quotebutton:hover {
background-image: url("http://sickwebmedia.com/wp-content/themes/gridportfolio/images/get-a-quote-over.png");
}
html example:
<a id="quotebutton" href="#">quotebutton</a>
Okay so I have tried to implement Google Maps as a background to my website. But when I try to put text over it using this code:
.content{
z-index:0;
background-color:fffff;
position: absolute; top: 0; left: 0;
width: 900;
height: auto;
margin-right: auto;
margin-left: auto;
}
And that is giving me an error with the map it is displaying it on top of the map, which is what I want but it is not working with with margins for some reason. All my code is here: http://pastebin.com/uz6wwtYZ
Can anyone help me because I want the content in the center of the webpage and the map to act as the background.
Thanks.
Try adjusting the top and left instead of margin when an item is set to an absolute position:
.content{
z-index: 100;
background-color:fffff;
position: absolute; top: 100px; left: 100px;
width: 900;
height: auto;
margin-right: auto;
margin-left: auto;
}
Hope that helps? Also might want to set a higher z-index value as I have done above.
If you want it horizontally centered with auto margin values but also absolutely positioned, I don't think you can do that.
You can try this instead by giving your content an absolute width and offsetting the left property:
.content{
width: 500px;
z-index: 100;
background-color:fffff;
position: absolute; top: 100px; left: 50%;
height: auto;
margin: auto;
margin-left: -250px; /* half the value of the width */
}
Here's a link to a JS Fiddle that uses your code: http://jsfiddle.net/4FLKt/1/ Seems to be working fine.
Mikey.
Did you try putting the content on top of the map?
#map {
z-index:1;
}
.content{
z-index:100;
}
This is because your using position: absolute; and that is not working togetter with margin:auto;.
Place a div around it with a full width over the google maps and make that absolute... then in that div you can center a other div.
Example
<div> //This div has position:absolute; and the width of the Google maps chart.
<div> //This div has margin:0 auto;
Content here
</div>
</div>
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