I have used CSS below to remove the title and some padding but there is still padding that I can't seem to remove.
This is my current coding:
.site-info { display: none; }
header.entry-header {
display: none;
}
.page .post-header {
display: none;
}
On Inspect it states
<div id="content" class="site-content" style="padding-top: 2.5em;
Can anyone help me please?
The padding is being inherited from somewhere else. Either default browser settings, or one of your other divs/elements. You can use the id of the div, or the class, in CSS to manually change it like so:
#content, .site-content {
padding-top: 0px;
}
You can try just using the id tag or the class tag to see which one specifically is causing the padding inheritance. Would have to see more code/the site to be sure.
The padding is being set somewhere else content is a common id tag in a stylesheet- you can override it.
<style>
body #content{
padding:0px;
}
</style>
if that doesn't work, this will
<style>
body #content{
padding:0px !important;
}
</style>
<div id="content" class="site-content" style="padding-top: 2.5em;
Aren't you getting paddimg from here? The inline style. Inline elements have higher order than internal or external css
On this site https://www.nycofficesuites.com/new/, I want to change the color of the top bar on the homepage only. I have tried this code:
.home .page .page-id-94 .page-template .page-template-template-home .page-template-template-home-php .wood .top-bar {
background:blue;
}
as well as this code:
.page-id-94 .top-bar {
background:blue;
}
Neither work. Thanks for your help.
I checked your website, and there're a huge hoard of classnames on one body element.
Problem: There're spaces in all your selectors.
.class1 .class2 selects an element with a classname of class2 that's the child of an element with the classname class1.
.class1.class2 has no spaces in the selector, so it selects one element with both classnames of .class1 and .class2.
Correction:
.home.page.page-id-94.page-template.page-template-template-home.page-template-template-home-php.wood .top-bar {
background:blue;
}
OR:
.page-id-94 .top-bar {
background:blue;
}
There's a space before the last selector because .top-bar is a child of the body element.
Hope that helps!
Give this a try:
.home header.style-4 .top-bar {
background: #YOURCOLOUR;
}
If it's a single page you could just set the style with !important
<div style="background:red!important;">
<p>Example</p>
</div>
I am fairly comfortable with html5/css3 now, so I am trying to make a site using same and make it responsive.
So far things are going smoothly except for these two problems:
the use of em i dont understand the calculations at all, especially why i have to put this font: .81em/150% i am following a guide from a tutorial online.
i am having some imaginary padding on my div, you can see it here http://jsfiddle.net/NhZ2A/
e.g. I have on the body:
body{padding:0px; margin:0px;}
Then I have a div with an image like this:
<div id="slider">
<img src="images/slider.jpg"/>
</div>
Then in my css I have:
#slider{
width:100%;
height:auto;
}
#slider img{
width:60%;
height:auto;
}
With the above css I still have padding on the slider div below or maybe it's a margin on the image below.
I don't understand why and its killing me.
For the second issue :
The space is not padding, it is created because the <img> tag is an inline element and therefore has a whitespace use display:block; on the <img> tag to remove it.
Use css resets , To get consistent cross-browser experience,it should be included,any one among these.
Eric Meyer’s Reset CSS
HTML5 Doctor CSS Reset
Yahoo! (YUI 3) Reset CSS
Normalize.css
Get it from here --> http://www.cssreset.com/
Yes, CSS reset is important to set default initial value for each element.
reset.css Source - Reset5
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video
{
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
margin:0;
padding:0
}
body
{
line-height:1
}
article,aside,dialog,figure,footer,header,hgroup,nav,section,blockquote
{
display:block
}
nav ul
{
list-style:none
}
ol
{
list-style:decimal
}
ul
{
list-style:disc
}
ul ul
{
list-style:circle
}
blockquote,q
{
quotes:none
}
blockquote:before,blockquote:after,q:before,q:after
{
content:none
}
ins
{
text-decoration:underline
}
del
{
text-decoration:line-through
}
mark
{
background:none
}
abbr[title],dfn[title]
{
border-bottom:1px dotted #000;
cursor:help
}
table
{
border-collapse:collapse;
border-spacing:0
}
hr
{
display:block;
height:1px;
border:0;
border-top:1px solid #ccc;
margin:1em 0;
padding:0
}
input[type=submit],input[type=button],button
{
margin:0!important;
padding:0!important
}
input,select,a img
{
vertical-align:middle
}
em - Unit measurement values (1em is equal to the current font-size,same as 2em = 2*font-size)
Font Syntax:
font: font-style font-variant font-weight font-size/line-height font-family;
In your question value .81em/150%
.81em/150% - font-size/line-height
Every browser has a default behaviour and configuration
If you want a clean start from all of them, you must set it with a "reset.css" style sheet, to avoid undesirable behaviours and have all homogeneous.
Check this SO answer to get a proper reset CSS stylesheet:
https://stackoverflow.com/questions/167531/best-practice-for-css-reset-style-sheet
The first choice will be
Css Resets
Most Used Css Reset
JUSR USE CSS RESET
* {
margin:0;
padding:0;
box-sizing:border-box;
}
I want the div with the id tagline to appear in such a way that there's no gap between the same and the image. How is it made possible?
Here's the fiddle...
http://jsfiddle.net/hxsPz/
This didnt work
#tagline {
margin-top:0;
height: 50px;
background-color: aqua;
}
Image needs to be display:block; and no margin on the p
img {display:block;}
p {margin:0;}
Example fixed fiddle
You have to remove the margin from the p also :
#tagline p { margin-top:0; }
Either use Moob's answer which is block or use this css3 flex. Beware: this is not supported in Safari and IE :
img{display:flex;}
p { margin-top:0; }
fiddle here
I recommend you to use a css reset, many elements has a defult padding and margin. In your case it was the p tag inside of the #tagline div that had padding and margin
#tagline p {
margin: 0;
padding: 0;
}
Working demo (it does not have a css reset, also added a clearfix for your menu)
Always use reset styles
* {
margin: 0;
padding: 0;
}
and the img padding is because of the img display attribute set to inline (by default),and the code below will fix this.
img {
display: block;
}
http://jsfiddle.net/hxsPz/20/
This should be a simple solution, but I can't seem to figure it out. Take a look at the fiddle. Why can't I override the font-size of the second span? Here is the code:
html:
<h1>
<span>hello </span>
<span id="span2">world</span>
</h1>
css:
h1
{
font-size:2em;
}
h1 #span2
{
font-size:1em !important;
}
Because you set the font-size of <h1> to 2em. the span inside of your <h1> is 1 em that means something like 100% of the inherited font-size. see what happens if you set the font-size of span2 to 0.5em
and btw, your first span is missing a proper ending tag.
add
#span2 {
font-size:1em !important;
}
Try This
h1 span
{
font-size:2em;
}
h1 span#span2
{
font-size:1em !important;
}
em's are relative units of measurement. You could almost substitute "%" instead of "em". So, when your span rule has "1em", it's interpreted as "make me 100% the size of my parent", thus, no effect.
If you want it to be half the h1 size, you need:
#span2 {
font-size: .5em;
}
See this updated fiddle.