I have a header that uses position:fixed to stay at the top of the page, it starts as 50px high, however, if a larger/smaller logo is added it's height changes meaning it can then overlap the DIV container beneath it. Is there a way to move the DIV container based on the height of the header. This is the CSS I am using;
<style>
#header {
position:fixed;
top:0px;
height:50px;
width:100%;
}
.container {
margin-top: 50px;
width: 100%;
height: 250px;
}
</style>
This is the HTML I am using, its really quite basic.
<div id="header">
... Menu ...
</div>
<div class="container">
... Content ...
</div>
I have looked into using javascript but I understand this is client side so would not help. Is there a way around this?
You can use jquery to read the height of the container and then use this to set the value for margin-top of container .
Try this code:
$(document).ready(function(){
var h=$("#header").css("height");
$(".container").css("margin-top",h);
});
Related
im trying to make my footer sticky on the bottom of the page (at the end of the page content, even if the content is bigger than the screen) i tried many things, maybe something is conflicting with the code, because it seems to be simple.
here's the basic code im trying:
<body>
<div id="main">
- a lot of divs and content, pictures, etc -
<div id="footer1">
- footer content -
</div>
</div>
</body>
on css:
body
{
height:100%;
position:relative;
}
#main
{
height:100%;
position:absolute;
}
#footer1
{
position:absolute;
width:100%;
height:150px;
bottom:0px;
left:0px;
background-color:#5B5B5B;
}
please, note that i already tried removing the div "main", also tried to use:
<footer>
after the body tag instead of div "footer1", nothing works, except if i put the body height manually to a number instead of 100%, like 1200px, then the footer go to position 1200px, dont know why it doesn't recognize the 100%, i also tried:
<div style="clear:both"></div>
after the footer div
also, i dont want a fixed screen footer "position:fixed"
Thank you for the answer, the problem is that i was not setting a "min-height:1000px) (the approximate px of my content) now its working fine.
The height of your <body> is zero because the height of the parent <html> tag is undefined. Set the height of your the parent to 100% if you want to have the footer positioned absolute rather than fixed to your screen.
html {
height: 100%;
}
body {
height: 100%;
position: relative;
}
#main {
height: 100%;
position: absolute;
}
#footer1 {
position: absolute;
width: 100%;
height: 150px;
bottom: 0px;
left: 0px;
background-color: #5B5B5B;
}
<html>
<body>
<div id="main">
- a lot of divs and content, pictures, etc -
<div id="footer1">
- footer content -
</div>
</div>
</body>
</html>
I need a way of defining a css highlight colour as a php value and then using that as a class in my stylesheets.
I know that someone people do this as inline styles but I just have far too many elements using the class to put it inline. Ideally I need a way to echo the variable in the stylesheet (SASS?)
I can't find this anywhere, which seems odd!
At the moment you have 2 viable options.
Using Javascript
The first option is using some javascript inside your HTML file, in a script tag.
Define a variable with PHP and use it to target the desired elements.
var myVariable = "dodgerblue";
$(".el").css("background-color", myVariable);
body {
counter-reset: example;
display: flex;
justify-content: space-around;
height: 100vh;
margin: 0;
}
div {
flex: 0 0 10%;
counter-increment: example;
}
div::after {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
content: counter(example);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
Another option is like #cale_b suggests.
Using an internal stylesheet.
In your output (ideally in the section of your page), at some
point after your stylesheet is referenced, cause PHP to do something
like this: echo <style>.highlight_color {color: #ffff00;}</style>.
Using CSS is not possible at the moment.
Sadly there is not a CSS solution for this, yet.
Hopefully some day browsers will support the use of attr() CSS function in all property values, not just content.
div {
background-color: attr(data-myvariable);
}
div::after {
content: attr(data-myvariable);
}
<div data-myvariable="red">
Example
</div>
I have a little problem with my footer on a new website I am building.
I tried the technique from Ryan Fait (http://ryanfait.com/sticky-footer/), but somehow it just won't work out. maybe you can help me and tell me why?
The link to my page is aev.martenzander.com
I only tried it on the index.php, so dont get confused when visiting subpages.
CODE:
HTML
<!-- FOOTER -->
<div class="stickyfooter"></div>
<div class="footer">
<footer>
<?php
include("includes/footer.php"); ?>
</footer>
</div>
CSS
.footer{
height: 111px;
margin: 0 auto;
position: relative;
}
.stickyfooter{
min-height: 100%;
height: auto !important;
margin: 0 auto -111px;
}
So the way it works is you have a mainWrapper class with a set negative margin, then you have a push class which forces that margin to stay clear always, then you have a footer class that occupies that margin.
Right now you have no push class, and your footer class is defined within the wrapper. It needs to be outside the wrapper.
Here's a link with an easy solution:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
The HTML:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
The CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
I know how to set image map for foreground image.But this time I want set image map for a portion of the image,which is set as the background image of a div.How can I do this.I have searched a lot in the web,couldn't got a solution.Please help.For example,
html
<div class="header full" style="background:url('/hdr.jpg';?>) no-repeat; height:492px">
The entire image is set as background image,I want to click the Nestle oval portion and will get redirected to some url.
Please try following code
Use your image and rename as test.jpg
please put all are in same folder for testing and change code for your needs (this is just an example)
**CSS** (style.css)
.image{
background: url("test.jpg") repeat scroll 0 0 transparent;
height: 185px;
width: 266px;
border: 1px solid;
}
.link{
padding-left: 26px;
padding-top: 23px;
position: absolute;
}
.link a{
padding-left: 0;
display: block;
height: 48px;
width: 67px;
}
.container{
position: relative;
}
HTML
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="link"> </div>
<div class="image">
</div>
</div>
Here's an example with explanation: http://quackit.com/html/tutorial/html_image_maps.cfm
okay
you put image as background
because of their is now no such element in the div to click
If you only need the "rectangle" shape for the links in the image map, you could use css defined link positions instead. This is accomplished by specifying the position and setting the background-color to transparent. Here is an example
I'm a little stuck, it's due to my inexperience with html/css and iframes.
Basically, I've got a LH column, which is my menu. and a RH column which house's my content. the RH column is a iframe.
The problem is i can't get the height of the iframe to equal 100%, it's constrained by the height of the LH column.
See below;
http://www.therussianfrostfarmers.com/
it's driving me nuts, its seems so simple to fix.
Here's a portion of the relevant html;
<div id='wrapper'>
<div id='header'>
<img src="images/titleBart.gif" alt="rff"/>
</div>
<div id='menu'>
<div class='container'>
<%obj_itop%>
<plug:front_index />
<%obj_ibot%>
</div>
</div>
<div id='content'>
<!-- text and image -->
<plug:front_exhibit />
<!-- end text and image -->
</div>
<div class='clear-both'>
<!-- -->
</div>
</div>
and the corrosponding CSS;
#wrapper {
margin: 0 auto;
width:950px;
text-align: left;
background: #fff;
height:100% !important;
}
.clear-both { clear: both; }
#content {
width: 760px;
margin: 20px 0 0 190px;
padding:0;
height: 100% !important;
overflow: auto;
}
#menu {
width: 170px;
position:absolute;
margin:0;
padding:0;
overflow: auto;
}
.container {
margin:0;
padding:0;
}
Any help would be much appreciated,
thanks cam
I'm not 100% sure on this, but I'm fairly certain that there is no way to do this without using JavaScript to dynamically size the iFrame. And if there is, it probably isn't easy.
It's happening because '100%' in CSS terms only takes up as much space as it can of what is already on the page. Since you have a left-hand column already, 100% will only go to the size of that column.
The iFrame will need to resized using javascript - you can do it fairly easily using something like the below:
<body onload="resizeFrame(document.getElementById('myframe'))">
<iframe id="myframe" src="http://www.example.com/foo.html" />
<script type=”text/javascript”>
function resizeFrame(f)
{
// Get height of iframe once it has loaded content and then
// use this for the iframe height in parent doc
f.style.height = f.contentWindow.document.body.scrollHeight + “px”;
}
</script>
The above will evaluate the height of the rendered content in the iframe, take that height and then use it as the height of the iframe container.
Note, the above will work if your iframed content is on the same domain as the containing page. If it isn't, you'll run into security restrictions due to the same origin policy, which is a little trickier to get around!
ok, i believe the iframe has already got this sort of JS function applied to it;
<script type='text/javascript'>
function iframer()
{
// get width of #content
frame_x = $('#content').width();
// get height of #menu
frame_y = $('#menu').height();
// apply height and width
$('#iframed').css('width', frame_x);
$('#iframed').css('height', frame_y);
}
$(document).ready( function() { iframer(); } );
$(window).resize( function() { iframer(); } );
</script>
<iframe src='$url' frameborder='0' id='iframed'></iframe>
EOH;
return $iframe;
if i change the #menu height to 50% and grey the BG then its easier to see how the #menu div is effecting the height of the #content div.
http://www.therussianfrostfarmers.com/