I am trying to apply specific css styles to two separate Wordpress pages. I have a header.php and header-int.php for my index page and interior pages.
I need the css on my home page to have
html, body {
overflow: hidden;
margin:0;
padding:0;
}
and the interior page css to be
html, body {
overflow: auto;
margin:0;
padding:0;
I can only seem to apply it to the body tag, either in the css sheet or hard coded, but can't seem to apply it to the html as well. Not sure the proper way to target the html general tag
}
Each wordpress page will have unique page-class in body tag.
You can target from that.
For Example:
Homepage:
<body class="home page page-id-5 page-template-default single-author">
.....
</body>
You can target the home page body like
body.page-id-5 {
overflow: hidden;
margin:0;
padding:0;
}
Related
I am simply adding a header navbar to an html page.But the problem is its not aligned exactly to the top.There is a small gap between the browser and the navbar.I found a solution as setting margin:0;,but the issue I have is it will only work if I code it as by selecting the whole div... like
*{ margin:0;}
why is that so ?
I found this solution in another stackoverflow question but I cant comment and ask because I have low repuation.He is stating its because of SASS.But how is my code becoming sass because I was using normal simple procedure for CSS coding.
Linked soultion question.(Please check the comments in correct selected question)
Header not touching top of screen
My code :
<html>
<head>
<style>
* {
margin:0;
}
.new {
width:100%;
background-color: blue;
}
</style>
</head>
<body>
<div class="new">New Website</div>
</body>
</html>
Some browser have set user agent stylesheet at "body" tag
For Chrome: body have margin: 8; on body tag, so you will get a small gap between navbar.
You can set
body{
margin: 0;
}
Will solve your problem.
http://jsbin.com/luqoruqewa/edit?html,output
Don't put the margin: 0; on the div. Put it on the body or html tag. Like so:
body{
margin: 0;
}
Don't forget that you can style the html and body tags too! Making them height: 100%; might be of use in the future.
* is the universal selector. It targets all elements. When you state:
* {margin: 0}
You're removing the margin from every element on the page. That works in this case, but it will have side effects that you probably won't want on a page with more content.
Your browser is adding some padding to the body element. As amoyer pointed out, set the body margin to zero and you should be fine.
Contents of my webpage(be it header,menu etc.,) are not fitting into browser window.Below is the HTML & CSS code i have used
HTML
<div id="header">
</div>
CSS
#header {
height:150px;
width:100%;
position: relative;
background-image: url("top_frame.png");
And here is the output I get:
Add the following:
body {
margin: 0;
}
in the CSS.
Here is the fiddle.
I replaced background-image with background : red; for testing purpose as I didn't have the image
Please use Normalize.css before your custom css.
I'm a beginner and I'm trying to fit my header on the top but it's not fitting. Here is screenshot:
Here is my source code:
<header style="height: 50px;background-color: rgb(26, 26, 26);">
<div class="container"></div>
</header>
Can you please let me know, What's wrong here? Help would be appreciated.
You need to add the following style in your css. There is default styles of browser which needs to overridden, in order to achieve the requirement.
html, body {
margin : 0;
padding : 0;
}
All Browsers have default inbuilt CSS implemented, due to which the page appear misalligned. You need to add reset.css http://cssreset.com/
or else add css code to disable browser default behaviour for example:
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
I am redesigning a wordpress blog.There are 5 different pages and i want to use different background images on each of them. Is there any way to do this?
And,i don't want to change the background element. I want to change the background image of the #main element in my css..
I already have a css file so will overwriting the same elements using php affect anything?
Any help will be appreciated...Thanks
Each page or post will have a different class on the body, ie.
page-id-1234
post-id-4567
You can use this to your leverage inside your CSS file:
body {
background: url('home.jpg');
}
body.page-id-1234 {
background: url('page-1234.jpg');
}
body.post-id-4567 {
background: url('page-4567.jpg');
}
You could give each div#main (I assume it's a div) another class. So
<div id="main" class="pageOneBackground">...
<div id="main" class="pageTwoBackground">...
etc...
Then remove the background-img from the div#main and apply individual background-imgs to each new class.
This won't affect the php.
You can change the background with CSS/URL of image to apply to only the background of the post, only on the background of the home/main page, or both pages. http://wordpress.org/plugins/custom-post-background/screenshots/
If only only need to do it for 5 pages, set the main items of the body in your main CSS, for example:
body {
background-repeat:none;
background-position: center top;
etc...
Then on each page just add:
<style type="text/css">
body {
background-image:url(/images/background1.png);
}
</style>
You can also see this on the source of this page.
I am having trouble with the CSS when I load a page into div.
Firefox loads CSS perfectly, but in Chrome, it does not load the CSS styles of the loaded page.
It only works when I apply style with the element, for example
<table style="left:100px;top:50%;position:fixed">
Only this way does it work in Chrome.
But this doesn't work:
<style type="text/css">
.mystyle {
left:100px;
top:50%;
position:
fixed;
}
</style>
<table class="mystyle">
Is there a way to fix this?
I'm guessing the page you are loading via AJAX has its own styles in the head of that page. While that could/should work, I suggest putting all the styles for your site in one or more external style sheets and load them at every page. When you then load HTML content in a div via AJAX, the styles will already be there and will be applied to the new content.
Putting styles in an external stylesheet is, in most cases, the best practice for a number of reasons.
Did you forget a ; on the end of fixed?
<table style="left:100px;top:50%;position:fixed;">
I would be curious to see if this:
<style type="text/css">
.mystyle {
left:100px;
top:50%;
position:
fixed;
}
</style>
would work if it were to be formated as:
<style type="text/css">
.mystyle
{
left: 100px;
top: 50%;
position: fixed;
}
</style>
<table class="mystyle">
BUT, as others suggest, I would prefer to see it in an external style sheet file and linked in that way.