I am stuck with a problem for quite a while now.I have googled and have tried almost all the responses and none of them has worked..
I have a PHP page which has following layout
<div id="wrapper">
<div id="header"/>
<div id="content"/>
<div id=footer/>
</div>
Now the contents of the content div comes from Db and usually takes up much more height than browsers window size.
Here is the CSS that I have used
#footer {
color: #707070;
clear: both;
min-height: 100px;
}
#content {
width: 100%;
min-height: 400px;
margin-bottom: 25px;
}
But when the size of that div increase the footer does not move below it rather the footer is shown in the middle of the content div but 1 layer below it.
Can anyone help me?
First thing I see is that you have no quotes around name of the ID, you need that.
Second thing is that, if everything you gave us is correct, I need to see your PHP to tell you what is wrong, and at least a screenshot of actual problem to be certain, but I think taht part of your php is loading before the footer and part after so it appears that footer is in the middle.
Related
I've been attempting to create a hero header in my Laravel 5.4 project. However, one certain thing doesn't seem to be working the way it's supposed to.
(If you're not familiar with what a hero header is; it's basically an image stretching over the entire screen used as a background upon first loading the website, usually with some text and a call to action on top of it.)
This is the way I've structured my code, based on research I've been doing:
home.blade.php:
#extends('layouts.app')
#section('content')
<div class="container">
#include('partials.hero')
</div>
#endsection
hero.blade.php:
<div class="hero-image">
<div class="hero-text">
<h1>Hero header</h1>
<p>Hero text</p>
<button id="hero-prim" class="button-primary">Action!</button>
<button id="hero-sec" class="button-secondary">Info</button>
</div>
and finally the css:
.hero-image{
background-image: url(/images/hero-image.png);
width: 100%;
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
The strange thing about this is that the text and the buttons are loaded with the page, but there's no sign of the image. Even if I exclude any other elements and try to only show the image, it gives me nothing.
This makes me think the issue must be in how I'm setting the background-image in my CSS, but I've no idea how I'd have to do it differently.
Any help or advice is greatly appreciated!
EDIT:
The image now displays properly, but doesn't stretch across the entire width of the screen, instead I think it only stretches across the section.
In any case, I'm not sure exactly which change in code made this happen, but after trying out some Bootstrap classes on it and defining the height of html and body as 100% (courtesy of VegaPunk), things have been better.
I'm sorry I can't define a more clear answer, but it's still a mystery to me, since yesterday none of these solutions seemed to work on their own.
I face the same problem and solved it just now. My css code was background: url(images/banner.jpg); and the error was Failed to load resource: the server responded with a status of 404 (Not Found). The solution is adding two dot '.' and a single slash '/' before images background: url(../images/banner.jpg);, Now the image has been appeared. My images and css folder in my project public folder and banner.jpg is in the images folder.
Your image should be located in your public folder. So create a folder in public called 'Images' with a capital I and place the hero-image.png inside the created folder.
Heights are really tricky in CSS. I suggest you use a framework like Bootstrap or Foundation.
It doesnt know 50% of what, you need to declare
html, body { height: 100%;}
So i'm at the point where I feel like quitting, because of all the trouble this problem has given me. So if anyone could help me out that'd be great :D!
So on my website what I want to do is have a div box to the left of the website, where there will be a "Learn more" link that will take you to another page explaining what my website is about, I would also like there to be a video right below it (It will be of me explaining my website)
On the other div box I want there to be a "Sign Up form" a basic sign up form for users to sign up for my website
Now my problem isn't getting the boxes or sign up sheet aligned side by side.
Right now my problem is the alignment of the top of the boxes. When I put "float:left;" it aligned them side by side(exactly Like I wanted)
However one of the top borders of the box is higher up then the other
For example this is my website so far http://www.shoportrade.org/
As you can see the boxes don't align perfectly from the top of the border, one is lower then the other
I want it to look sorta like this http://www1.picturepush.com/photo/a/12506959/640/12506959.png
Could anyone help me? I've hit a wall and I really wanna figure this problem out.
I don't know why you have all the break tags, but this is what your syntax needs to be like:
<div id="header">
</div>
<div id="container">
<div class="ex">
</div>
<div class="myform">
</div>
<div class="clear"></div>
</div>
Your header would stay the same way. Your container needs to wrap both boxes. Usually this is center aligned on the page with this CSS:
.container { width:980px; margin: 0 auto; }
Your .ex class would stay the same (float: left;) and your .myform class would also stay the same (float: left;).
The .clear class takes care of helping the browser calculate the final display height and usually looks like:
.clear { clear: both; height: 1px; }
This is because you have <br>'s after your <div id="myform">.
first of all, there is some mistakes in your coding. Like
<div id='header'></a href='http://www.shoportrade.org/'><img src='mylogo1.png'></img></a>
should be
<div id='header'><a href='http://www.shoportrade.org/'><img src='mylogo1.png' /></a></div>
I believe you are declaring class myform in <style>, but I saw in your code you're trying to implement this <div id="myform">, which is totally wrong. It should be <div class="myform">. If you're actually want to implement different style for that div then I think you should use different id name like <div id='boxstyle'></div>
Here is a method without using floats. The heights of the two boxes will change depending on the container height.
If you want the heights of the boxes to be different, change their "bottom" value.
http://jsfiddle.net/Calum/m783T/
CSS
#container {
height: 500px;
width: 800px;
position: relative;
background-color: green;
}
#box, #box2 {
position: absolute;
top: 50px;
width: 200px;
}
#box {
background-color: blue;
left: 50px;
bottom: 50px;
}
#box2 {
background-color: red;
right: 50px;
bottom: 50px;
}
HTML
<div id="container">
<div id="box">
<p>This is box 1</p>
</div>
<div id="box2">
<p>This is box 2</p>
</div>
</div>
I have a widget that is comprised of quite a few divs. I then use javascript to bring the widget to life and do what it is supposed to do.
It is positioned on the page above the main content.
The client feels having all the widget html above the keyword rich content is bad for rankings, yet visually this is how we want the page set up.
What are some options here to keep the widget positioned as we want, yet not clutter up the top of the page as it is crawled?
current setup:
-javascript file is called in head
-widget html, which is several divs, text, images, etc.
-other page content divs
You could include the widget at the bottom of the page, then use css to position it at the top. Make sure your main content has a top-margin equivalent to the size of the widget. As mentioned in your comment, you'd also need to position the widget sufficiently far down the page to avoid the header content. This relies on your header and widget having specified heights. Your html would be something like this:
<body>
<div class="header">The header</div>
<div class="main-content">The main content</div>
<div class="widget">widget</div>
</body>
Then your css could be something like this:
.header, .main-content, .widget {
height: 40px;
}
.header {
background-color: red;
}
.main-content {
background-color: blue;
margin-top: 40px; /* height of widget */
}
.widget {
background-color: yellow;
position: absolute;
top: 40px; /* height of header */
}
You can see this in action here: http://jsfiddle.net/W3RzU/
As bardiir pointed out, putting the widget code in the correct place would be much simpler and would have minimal (if any) impact on seo.
I am looking for a solution to deliver a "wallpaper" banner with the adserver "openx". A wallpaper consists of a leaderboard banner (728x90 px) and a vertical skyscraper. I cant find any option in OpenX itself, so I guess there must be some kind of dirty methods to get it done.
Anyone here having experiences with it? I'm thinking of delivering just an leaderboard banner and then attaching a html snipped to the banner - which contains the markup to my skyscraper-banner... :-/
greg0ire > You can see an example of a "wallpaper" banner on this site (you might experience an overlay banner before, make sure you disable ad blocking extensions): http://www.allocine.fr/ Some days it is in flash, other days it is just a background-image css property set on the body element. I'd like to achieve the second option.
Thanks!
I got wallpapers ads to work through openx using this method.
First I created a div below the content wrapper of my site (using wordpress, header.php file).
<div id="adbg" style=" margin: 0pt auto; height: 1000px; width: 100%; position: fixed; cursor:pointer; ">
Then I created a div block with the wallpaper image in the CSS and added it to OpenX as a TEXT BANNER
<div OnClick="location.href='#';" style="background: url('image.jpg') no-repeat scroll center top #026eb4; height: 100%; width: 100%; margin: 0pt auto; cursor:pointer; "></div>
Finally, I took the openx embed code and place it within the ADBG div I pasted above.
This technique worked well for me on all browsers.
You can of course take the CSS in the adbg div and store it in your CSS file.
For the moment, I ended up doing this, but I'd like to see better solutions:
<div class="openx_<?php echo $_block->getBlockParameter('css_class');?> openx_background hidden">
<?php echo str_replace('INSERT_RANDOM_NUMBER_HERE', rand(0, 9000), $_block->getBlockParameter('html', ESC_RAW));?>
<?php echo javascript_tag()?>
var checkImg = window.setInterval(function(){
if (jQuery('.openx_background img').length)
{
jQuery("body").css('background', 'url("' + jQuery('.openx_background img').attr('src') + '") no-repeat');
window.clearInterval(checkImg);
}
}, 1000);
//give up 3 s later
setTimeout(function(){
if (jQuery('.openx_background img').length == 0)
{
clearInterval(checkImg);
}
}, 3001);
<?php echo end_javascript_tag()?>
</div>
$_block->getBlockParameter('html', ESC_RAW) contains the openx javascript invocation code.
Not sure if this is still of interest, but there's a setting in openX for that called "Companion positioning". Have a look at the OpenX reference guide under point 4.6:
http://opensourceusers.com/sites/default/files/openx_reference_guide.pdf
It's a method to make sure that a skyscraper is delivered every time a certain leaderboard is delivered. You can then use the prepend/append functionality to color the background to turn this "hockey stick" into a full blown wallpaper.
I've been trying many techniques.. but none helped.
I tried "margin-bottom: 1em", "bottom: 2em", etc. but the element stays nearly invisible.
See the bottom of the page.. there is a sentence, which is used to be shown..
Here's the URI: http://Sulayman.org/
Can anyone help me? - Thanks!
Sure, increase the margin on the h1. You'll probably want to remove your inline styles and move them into classes and ID's.
<h1 style="font-size: 2.3em; text-align: center; margin-bottom: 0.5em;" class="title">
into
<h1 style="font-size: 2.3em; text-align: center; margin-bottom: 2.5em;" class="title">
"The Pixel Developer" is correct; you need to change the value of margin-bottom to 2.5em to move the footer farther down. I'm not sure why you are using inline styles instead of putting them in your stylesheet, but that is irrelevant to the problem. I changed your code in my browser and it works as you requested.