I have a website (http://www.errandly.com) and would like to raise the height of the "Copyright" blurb at the footer. I know little about html and css - and have tried searching for answers online and on your site. I am using weebly (an easy drag-and-drop website making site that allows me to change the html and css), and I have pasted the footer's html code below (but not sure what to do with it - or css - in order to raise the height of the footer:
{<div id="footer">%%WEEBLYFOOTER%%</div><div align=center>© Copyright <a href='http://errandly.com/'> Errandly Errand Services Ltd.</a> 2011 All Rights Reserved</div>}
I would greatly appreciate any help.
Thank you,
Jack
If you're trying to make the element larger, you've a few options:
Increase the font-size of the element: font-size: 2em; for example.
Apply padding: padding: 0.5em; (to apply padding of 0.5em to top, right,bottom and left of the element).
specify the height directly: height: 3em;
I'd also suggest applying an id to the element: <div id="footer">, and using that as a hook for the css:
#footer {
font-size: 2em;
padding-top: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.5em;
padding-right: 0.5em;
height: 3em;
}
As an alternative interpretation of your question, if you want to simply move the element a little higher from the bottom of the page, you can use:
#footer {
margin-bottom: 2em;
}
I think the issue is that you posted your copyright note below <div id="footer"> ... </div>, and your cms created a new element after the footer for it.
Easiest way to fix would be to copy your copyright notice inside the footer-div. Or you could edit your css, find the block that starts with #footer and set the line "padding: 35px 0 20px;" to "padding:0;"
You can use css style attribute to change the size of your div tag
<div style="height:100px" id="footer">%%WEEBLYFOOTER%%</div><div align=center>© Copyright <a href='http://errandly.com/'> Errandly Errand Services Ltd.</a> 2011 All Rights Reserved</div>}
Well first off you want to try add tags in your HTML file between the tags of the Footer. Then if you want to change the position of the text within the div of the Footer, just add this code...
#footer p {
line-height: 25px;
}
Of course 25px is just an option but you'd always want to adding padding at the top and below of the paragraph attribute.
Hope this helps,
Thank you,
Aaron
Related
I'm trying to increase the bottom padding of my headline in my blog and for some reason it is not being possible.
This is the code that I'm writing to increase the padding:
.post .type-post .entry-content h1.entry-title{
padding: 0 0 50px;
}
Entry-title and Entry-content are the classes for H1 element.
Here is the link of the page where this issue exist -> https://www.writtenlyhub.com/writing-product-description/
I think this will help you in understand my problem better.
Please do help me out here.
Thanks
Simplest would be to use padding-bottom: 50px;
While there is nothing wrong in using shorthand, there is a recent video from Kevin Powell explaining some gotchas, I recommend you should watch it and some other videos on his channel.
.post .type-post would select an element with the class type-post, that is a descendant of an element with the class post - but you don't actually have that in your structure.
You have one element that has both classes - so the spacing between the two classes in your selector needs to be removed,
.post.type-post .entry-content h1.entry-title{
padding: 0 0 50px;
}
I am having trouble trying to figure out how to properly use the padding feature in css with the following html where it is only padding the first word on the left-hand side.
the css I am using on that it now that is not working correctly is
mark {
background-color: #89ce40;
color: white;
opacity: 0.89;
padding-right: 5px;
padding-left: 10px;
}
<div class="slide-content">
<h1><strong><span><mark>COMPREHENSIVE IT </mark><mark> SERVICES YOU CAN TRUST</mark><mark></mark></span></strong></h1>
<h2><mark><span>Let us help you develop an IT </span></mark><mark> Optimization Strategy and </mark><mark> Define your technological </mark><mark> priorities</mark></h2>
</div>
I've also tried calling the padding functions through .slide-content{padding-left: 10px;}
Is there any way I can separate through each the padding through each <mark></mark> section?
^ This is what it looks like when mark{padding right: 8px; padding-left 20px}
I am trying to get each line to be padded on the left like the first word of each element
I have been able to fix it for the right hand side padding by playing with mark more but on the left hand side it is still only the first word in each string that is being padded vs the beginning of each <mark>
It has just occured to me that the padding is being applied on the above line, I am sorry for my previously poor explanations of what I am trying to do.
<mark> is an inline Element
inline element dimensions are not faithfully set to intuitive lengths -- they "wrap" around the content. inline-block and block elements will conform to the dimensions given (more or less. )Add display:inline-block or block.
Demo
mark {
display:inline-block;
background-color: #89ce40;
color: white;
opacity: 0.89;
padding-right: 5px;
padding-left: 10px;
}
<div class="slide-content">
<h1><strong><span><mark>COMPREHENSIVE IT </mark><mark> SERVICES YOU CAN TRUST</mark></span></strong></h1>
<h2><mark><span>Let us help you develop an IT </span></mark><mark> Optimization Strategy and </mark><mark> Define your technological </mark><mark> priorities</mark></h2>
</div>
Adding <br> fixed my problem above regarding the padding, thank you #Sabbin for helping out!
<h1 style="text-align: left;"><strong><mark>COMPREHENSIVE I.T. <br></mark><mark> SERVICES YOU CAN TRUST</mark><mark></mark></strong></h1>
<h2 style="text-align: left;"><mark>Let us help you develop an I.T. <br></mark><mark> Optimization Strategy and <br></mark><mark> Define your technological<br></mark><mark> priorities</mark></h2>
mark {
background-color: #89ce40;
color: white;
opacity: 0.89;
padding-right: 5px;
padding-left: 5px;
}
<mark> is by default inline element. So every <mark> block is rendered in one line and thus you don't see the padding in the subsequent rows. It is adding the padding, but at the end of the previous row.
You can address this issue in multiple ways.
One way would be to float:left all <mark> elements and add clear:both so they all go one below another.
mark {
/*your code*/
float:left;
clear:both;
}
Other way would be to make the <mark> elements block elements, but they will take full width. The code would then be:
mark {
/*your code*/
display:block;
}
Using flex, you can achieve the same by using the following code:
mark {
/*your code*/
display: flex;
}
Choose what works best for you.
I'm a bit of a newbie to programming so posting on here to find some help.
Had a quick question which I'm assuming is easily resolved through custom CSS.
If you check out this post on my WP site you will see the content disappearing through the header.
Can someone please advise what piece of CSS has made this happen and what element I need to alter to set a regular margin?
Thank you,
The line that is causing you trouble is this one:
h1.entry-title { /*spacing to position entry title dimensions & font styles*/
margin:-2em 0em 0.5em 1.5em;
text-decoration: none;
font-size:2.8em;
display:block;
position:relative;
color:#474747;
}
It comes from a blog css file as "http://www.beendorsed.com.au/blog?sccss=1&ver=4.3.1".
In that line, when you comment out the line "margin:-2em 0em 0.5em 1.5em;" (like this: "/* margin:-2em 0em 0.5em 1.5em; */"), all will go back to normal.
To add that style to one set of pages only ("blog posts", for instance):
If you need that margin on one page, or one set of pages (like blog posts), add a class to it, like .post, and in the css file add it too, like this:
.post h1.entry-title { /*spacing to position entry title dimensions & font styles*/
margin:-2em 0em 0.5em 1.5em;
text-decoration: none;
font-size:2.8em;
display:block;
position:relative;
color:#474747;
}
When you add posts (instead of pages), you'll see that the articles are classed as ".post" (probably), just like the ones you are currently seeing are ".page". (I'm guessing the class name. Test it, see what the actual class name is, and use that). Here you have the line that states that class:
<article id="post-21" class="post-21 **page** type-page status-publish hentry">
Try to modify margin value in you .post declaration.
.post {
max-width: 640px;
margin: 130px auto 0px auto;
font-size: 16px;
}
Line 1804 in your style.css file
If you want to apply this just to on, specific page then do:
#post-104 .post {
margin-top: 130px;
}
You could change the #primary definition to be
#primary {
float: right;
width: 66.6666%;
margin-top: 100px
}
adding the margin-top there. You should get used to identifying the elements in a debug session in the browser to help you understand which element you are targeting.
Note that as I went through your CSS, I saw that you have some merge artifacts in the CSS, things like
>>>>>>> Another_Merge_test
which are not helping things for you.
I'm designing a website for my company and we're using a wordpress template. We've been able to modify the template to make it full screen (& full width), however, we can't get rid of the blank header that is seen in the screen shot below. We've added custom CSS style into our style sheet, which has helped, but did not eliminate the problem:
CSS Style we added:
.page-template-template-fullsize-php #header { margin-bottom: 0; }
Any other advice would be very helpful as we're looking to clean up this aesthetic flaw on our website.
Screenshot:
Website Address: http://visualicreative.com/products/advertising/web-commercial-html/
This will help your CSS:
#content .entry-header {
display:none;
}
#content {
padding: 0px 30px 30px 30px;
}
/*changed from padding:30px; */
You really need to tweak your theme. You've got a lot of blank code in there that is creating gaps (including the blank header).
You have some inline code that increases top padding:
<div id="main" class="clearfix zIndex" style="padding-top: 108px;">
Then all of this under the entry content:
<p><a name="top"></a></p>
For your article directive/element if you use margin-top: -100px; you can shift it up by 100 pixels. More here.
In one of your template files that has been used on that page, there is a
<header class="entry-header">
<h1 class="entry-title"></h1>
</header>
empty header which causes a little more space. The rest of that additional space is because possibly in the same file just one line up of your header element, you have an <article> element with the id of #content which has padding:30px;
You can change that padding style to
padding: 0px 30px 30px 30px;
just to get rid of the top padding.
Hope this helps.
You have 108px of padding at the top of div#main.clearfix.zIndex. By removing or lessening that padding, you can affect how close to the menu bar your main div is.
Change the padding of .nav-full-width #main and you are good to go. also .entry-header has a margin, change that too.
I visited that web page and I recognized to there is many different type of levels to header.You can fix and delete some of them.However, there is a one way to fix,You should insert #content css veraible to padding-top:0px;.Also, you should delete unnececarry div and p lines from pure html.One of the unneccecary code line is in the following segment;
<header class="entry-header">
<h1 class="entry-title"></h1>
</header>
More over, there 2 empty p tags on the pure html.You should delete them.I tried it on the browser and it displaying,whatever you like.
During the last days I've tried to learn CSS and HTML, in order to make my first own theme for Tumblr (don't judge me, seemed like a good platform for testing things). I've ran into several problems which I was able to fix by myself, yet now I'm at the end of my knowledge, and Google wasn't able to help me. I've also tried to search this site, yet with no success. So if there's already a topic about this, I'm terribly sorry.
Basicly, Tumblr adds an <p>-Tag around every <img> you add, so the padding I applied to p also get's applied to the image, and I'm unable to overwrite this. A dirty fix worked for some time, yet as I'm trying to make the site responsive, I can't find any workaround or fix.
Here's the basic HTML-Structure for an entry:
{block:Text}
<div class="postcard">
{block:Title}
<h2>{Title}</h2>
{/block:Title}
<div class="text">
{Body}
</div>
</div>
{/block:Text}
Which results in this:
<p>Duis autem vel eum iriure dolor.</p>
<p><img src="http://i.minus.com/dbmLqVdFyHN5Tg/16.jpg" alt=""/></p>
I want some padding on both sides of a paragraph and some spacing at the end of one, so I added this CSS:
.postcard p, ul {
padding-right: 50px;
padding-left: 50px;
margin-bottom: 25px;
}
So far, so good. Now, here's the main problem: The image in a post should cover the whole width of .postcard, while also being responsive. Using max-width: 100%; would work, yet because the img is inside a p, a total of 100px padding gets applied to it. The following code is a dirty fix, but is obviously not responsive:
.text img {
width: 700px;
height: auto;
display: block;
margin: 0px -50px;
}
So how can I get rid of the padding for the image? Many thanks in advance!
If you can add some identifier kind to added <p> or around it for image cases, then you can override css for this cases:
myImage.p{
padding:0;
}
or
myImage.div p{
padding:0;
}
If you can't - then only choices you've left with is your fix or javascript fix. Since there is no way to select parent element with css.
since you probably can't add a class to the p tag tumblr adds, you'll have to turn it around and add a class to your own p tags so you can style just those:
.postcard p.padded {
padding-right: 50px;
padding-left: 50px;
margin-bottom: 25px;
}