I have a fixed navigation(header on the homepage. I am using wordpress therefore this fixed header is in the header.php I do not want the fixed header to also work on the other pages. How can I do that:
This is the style I am applying:
#header, #footer{
position:fixed;
display:block;
width: 100%;
background: #05556d;
z-index:9;
text-align:center;
color: #f2f2f2;
}
#header{
top:0px;
}
#footer{
bottom:0px;
padding:10px 0px;
font-size:12px;
}
What Can I do to fix this ?
Look at the classes added on the body element. Multiple classes are there and differ with the template used, the current page etc caetera.
Use one of these to condition the position css property on your header.
#header, #footer{
display:block;
width: 100%;
background: #05556d;
text-align:center;
color: #f2f2f2;
}
#footer{
padding:10px 0px;
font-size:12px;
}
.homeClass #header, .homeClass #footer{
position:fixed;
z-index:9;
}
.homeClass #header{
top:0px;
}
.homeClass #footer{
bottom:0px;
}
If you can't see a different class you can add one conditionnaly in functions.php:
add_filter('body_class','custom_body_class');
function custom_body_class($classes) {
if(YOUR_ISHOMEPAGE_CONDITION) $classes[] = 'homeClass';
return $classes;
}
[EDIT]
Looking at the staging version I see you theme adds no class to the body whatsoever. Look at header.php and find the opening body tag. If it has no class attribute, then add
<body <?php body_class(); ?>>
Also
The code in page-js.js invokes the jQuery fullPage plugin on every page. You should edit it so it checks the body class before calling fullPage like so:
if(!$('body').hasClass('home')){
$('#fullpage').fullpage({...});
}
With CSS
The body class should be .home on the home page. So you can make the header fixed on the home page and not the other pages by prepending .home to your styles:
.home #header, .home #footer{
position:fixed;
...
}
Or as #Armel answered, perhaps the class differs depending on the template/theme. You should be able to look into it with a browser developer tool and replace .home with whatever class it ends up being.
Might need to do the opposite and declare that all other #header and #footer elements are set to position: static, and it might be required to declare that it's important to override other styles: position: static !important.
With WordPress PHP function
Alternatively, you could make your own class in header.php by using WordPress's is_front_page() function. Add a class or even just add the styling conditionally.
Related
http://jsfiddle.net/AmKHx/
Hello all,
I linked my code on the top. My main problem is that I have my header, content and footer perfectly set that works with all websites. It does not have a scrolling feature or anything. Everytime I try to add the Intel Logo to the screen. It does what it is up there. I move it around and tweek it and then it works for one browser and not the other... It keeps changing. I want the logo to stick to the left perfectly along with the header I made with CSS. Also I want the Mobility Group Text at that height right next to the logo, but for some reason it always messes up my header content and footer as well when I paly with it. So pretty much I want The Logo on first then Mobility Group Right next to itand make it very smooth!
Also I have just learned html css and php and if you guys see something in my code that could be done smarter please let me know. I need critical feedback so that I can progress in learning these new languages better so that I can succeed in this field of programming!
Thank you in advance for all the input and advice!!
HTML CODE:
<div id="page">
<div id="header">
<h1><img src="http://wireless.fm.intel.com/test/logo2.png">
<h2>Mobility Group</h2>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
CSS CODE:
Html, body
{
Padding:0;
Margin:0;
Height:100%;
}
#page
{
Min-height:100%;
position:relative;
height:100%;
}
#header
{
background-color:#115EA2;
height:100px;
width:97.5;
}
#main
{
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:87%;
height:auto;
height:87%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer
{
Position:fixed;
Width:100%;
Bottom:0;
Height:50px;
background-color: #115EA2;
}
#header h1
{
position:absolute;
text-align:left;
left:0px;
top:0px;
}
#header h2
{
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
}
I'm still not sure I understood the question, but here's what can you do to make it more natural looking. Close the h1 tag, don't make it absolutely positioned, but rather make it float left. The same thing goes to the h2 element. And since the original image is missing, I've put another one, and fixed its height to 60px.
It's basically this:
#header h1 {
text-align:left;
left:0px;
top:0px;
float: left;
}
#header h1 img {
height: 60px;
}
#header h2 {
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
float:left;
}
See the results here: http://jsfiddle.net/AmKHx/1/ It should look the same in every modern browser.
Also, try not to use capital letters for CSS attributes - it's a standard to use lower case, and even some browsers might not like it.
Do you have a reset sheet?
Copy this to a new css file, call it reset.css and then load it in your page before you load your main css.
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
legend{color:#000}
I am developing a tab strip. I want the selected tab has to overlap 1px on the container div so that it will have look as it is part of the container...Here is the jsfiddle.
I dont want to make it using script. I would like to prefer CSS style first.If you say that it can't be done using pure CSS, then only can go for script.
It should look as follow:
see the demo
Add this style to your fiddle
.vUiTsContainers {
z-index: 1;
top: -3px;
position: relative;
}
.irmNText {
z-index: 10;
position: relative;
}
Hi now define some css in your css as like this
.vUiTsTabs > ul{
overflow:hidden; // remove this line
}
or add this css
.vUiTsTabs > ul:after{
content:'';
overflow:hidden;
display:block;
clear:both;
}
.vUiTsTab.vUiTsTabSel{
position:relative;
}
.vUiTsTab.vUiTsTabSel:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:-3px;
height:3px;
background:#F3F3F3;
}
Live demo
I also created a live demo but was beaten to it due to the awfully slow computer I'm using
What I am trying to do is to stack an 'a' tag on top of a 'p' tag using the z-index property. So my html goes like this
<div id="personalText" >
edit
<p id="descText">{{profile.desc}}</p>
</div>
and my CSS goes like this
#editButton
{
position:relative;
z-index:2;
}
#descText
{
position:relative;
margin-top: 5px;
margin-bottom:5px;
z-index:1;
}
I believe this should stack the a on top of the p tag but that is not happening. Can anybody please explain what is that I am doing wrongly?
position: relative doesn't detach the element from the layout, so by default the element still takes up the same spot it would otherwise. relative has two purposes: to offset an element relative to its "real" position in the layout (which would require setting top, left, etc), and to serve as a non-static value so that child elements with position: absolute would position themselves relative to it.
With all that said, what you probably want in order to do what you're trying to do, is to set position: relative on the parent, and position: absolute on the edit link (at least). But that'd probably be quite ugly, as the text would likely overlap and be unreadable.
You have to also put
#personalText
{
position:relative;
}
#editButton
{
position:absolute; /* change */
top:0; /* new */
left:0; /* new */
z-index:2;
}
As Mihalis Bagos states, you need to push your #descText element upwards.
Here's the resulting CSS:
#editButton
{
position:relative;
z-index:2;
}
#descText
{
position:relative;
margin-top: 5px;
margin-bottom:5px;
bottom:25px;
z-index:1;
}
Here's the jsFiddle resulting from it.
This is a perfect use for JavaScript:
CSS
.hidden { display: none; }
jQuery
$('#descText').hover(function() {
$(this).find('a').removeClass('hidden');
}, function() {
$(this).find('a').addClass('hidden');
});
DEMO
Here's how you can put the <a> tag on top of the <p> tag: http://jsfiddle.net/gSWJB/1/
The example shows one possible use case: putting the link on top of the description, where the link might only be shown when the user hovers over it.
I want to add a footer to an HTML page that will be repeated across all pages WHEN PRINTING. I have managed to achieve this through this code:
#media print {
p.note {
bottom: 0; position: fixed;
}
}
But now I have a problem with this paragraph going on top of the rest of the copy
According this Mirosoft article, this should work for me:
#page :first {
margin-bottom: 4in;
}
But it doesn't, it doesn't change anything... any ideas?
Here's the solution that worked, CSS is this:
#media print {
p.note {
display:block;
bottom:0;
position:fixed;
font-size:11px;
}
}
And everything needs to be contained in a separate div with this CSS
#wrapper {
position:relative;
bottom:1in;
margin-top:1in;
width:974px;
margin:0 auto;
}
This worked perfectly!
How about adding some z-index ? It seems that the footer overrides the last paragraph
Also try to use
#media print {
p.note {
bottom: 0; position: fixed;
margin-top:10px;
}
}
Make sure that the container for the main content makes room for the footer. For instance, if your markup looks something like this:
<div id="content"><p>Lorem Ipsum Latin et cetera</p></div>
<p class="note">Footer</p>
You'd want some css like this:
#content {margin-bottom:4in}
To create room for your footer text you can use a table with tfoot. Use tfoot>tr to create a spacer. Place your footer text inside a div container that has position:fixed; to bottom:0;.
CSS
table {width:100%;}
#media print {
tfoot>tr {height:20mm;}
tfoot div {position:fixed;bottom:0;}
}
HTML
<body>
<table>
<thead><tr><td>Page header</td></tr></thead>
<tbody><tr><td>
<p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
</td></tr></tbody>
<tfoot><tr><td><div>Page footer</div></td></tr></tfoot>
</table>
</body>
I'm new to web designing.
I started to designing a sample page but I have some challenges.
I have photoshop template like below image.
to convert it to HTML and CSS I fallowed these steps :
I separated background image with logo then I putted to background of body
I created main DIV as page container with relative position.
now I want to put texts to page ( OH BOY WE'RE LOST !) and ( THE RESOURCE YOU ARE LOOKING FOR MIGHT HAVE BEEN REMOVED, HAD ITS NAME CHANGED OR
TEMPORARILY UNAVAILABLE.)
I have some questions here :
How do I put them on Page ? both of them in one DIV ? or each one in separated DIV ?
How should I position them to having same position in picture and web site ? is there any specific technique exist ? or should I do i with test and try ?
Please explain me.
Fix the width width:100% of the page div. and give <h1> tag for "OH BOY WE'RE LOST!" with specified width and margin: 0 auto;.
and <p> tag for remaining text that "HE RESOURCE YOU ARE LOOKING FOR MIGHT HAVE BEEN REMOVED, HAD ITS NAME CHANGED OR TEMPORARILY UNAVAILABLE."
<div class="page">
<h1>OH BOY WE'RE LOST!</h1>
<p>HE RESOURCE YOU ARE LOOKING FOR MIGHT HAVE BEEN REMOVED, HAD ITS NAME CHANGED OR TEMPORARILY UNAVAILABLE.</p>
</div>
css :
.page {
position:relative;
width:100%;
height:auto;
}
.page h1 {
position:absolute;
top:0px;
left:0px;
font-size: /*your font size*/
font-family: /*your font family*/
width:100px; /*you can change the width as per your need*/
margin:0 auto;
}
.page p {
width:98%;
margin:0 auto;
}
How do I put them on Page ? both of them in one DIV ? or each one in separated DIV ?
Both of them in seperate div and enclosing them in the background image div. I personally prefer span than div because it is plain text.
<div class="backGroundImag">
<span class="text1"> Text goes here </span>
<span class="text2"> Text goes here </span>
</div>
You need to keep in mind the web is not a pixel perfect medium as there are so many variables in play: different browsers, operating systems, screen resolutions etc.
If you are new to web designing, start with something a little more simple. What you have there is a great design that may not immediately translate easily to the web (your search box for a start would provide some interesting implementation challenges).
Don't aim too high early on. Read, practice, repeat. Here is a good article on centered design techniques to get you started:
http://www.webdesignforidiots.net/2009/03/fixed-width-centered-website/
Marked as CW because this is advice and not an answer!
body { margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; }
.wrapper { width:600px; margin:0px auto; background:url(images/bg.jpg) no-repeat; min-height:437px; }
.header { width:144px; margin:0px auto; padding: 25px 0 20px 0; height:130px; } /*If you want logo Seperatly use this step*/
.header h1 { margin:0px; padding:0px; } /*For Seo prupose*/
.content { margin:0px auto; padding:0px; width:480px; }
.content h1 { text-align:center; text-transform:uppercase; font-size:16px; margin:0px; padding:0px;}
.content h2 { font-size:12px; }
HTML
<div class="wrapper">
<div class="header"><h1><!--<img src="images/logo.png" alt="logo" />-->Logo</h1></div>
<div class="content">
<h1>OH BOY WE'RE LOST !</h1>
<h2>THE RESOURCE YOU ARE LOOKING FOR MIGHT HAVE BEEN REMOVED, HAD ITS NAME CHANGED OR TEMPORARILY UNAVAILABLE.</h2>
</div>
</div>