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.
Related
I'm not new to HTML or CSS, but I really don't know why this is happening. I could just be dumb and this is an easy question something is really wrong. I'm really having trouble with this. I have a very simple web page with a div element. Not matter what I do I still have space at the top, side, and bottom of it. Here's a picture.
And Here's my HTML and CSS code.
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<style>
.SideBar {
background: #4c4c4c;
float: left;
height: 100%;
margin-left: 0px;
padding-right: 25px;
}
</style>
</head>
<body style="background-color: #05bcff">
<div class="SideBar">
<p style="margin: 0px; padding: 0px">
asd
</p>
</div>
</body>
</html>
You should assign margin 0 and padding 0 to body element in your styling.
As Frontend employee said just add
.body{
margin: 0;
padding: 0;
}
a lot of people employee CSS reset codes at the top of their stylesheets which includes this. Its basically a list of default overrides that clears any styling on elements allowing you to begin with a clean slate
See (http://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/)
This happens because the <body> element has margin by default in some browsers. Different browsers can choose to apply some basic default styling to elements. Chrome, for example, adds 8px margin to by default. If you set
body {
margin: 0px;
}
This will dissappear.
A better way to go about it is to include Reset.css or Normalize.css in your code. Reset.css will unstyle absolutely everything, so that what you write is exactly what is displayed. This gives you greatest control but for most cases it's too much. For example, <h1> , <h2> , <h3>.. tags will all look the same after applying Reset.css .
Normalize.css on another hand preserves useful styling but will make sure that your elements are rendered consistently across all browsers. This is preferred in most cases.
In Codepen you can even try these out. If you click 'Settings' you can choose to include 'Normalize' or 'Reset' in your CSS. You can play around with these to see how your elements are displayed under each.
So I signed up here because I have something that drives me crazy. I am sure the answer is pretty straight and simple, but I just can see it...
I want to make a small gallery for an article, showing screenshots from different video games. The problem: The list wont align correctly with the text within the content div. No matter what I do. text-align: left just gets it to exactly this position, center and right work. It is like it is aligning on the edge of a div, but there is none. Putting it within the needed <p> tags destroys the text like seen in the picture. Keeping it out of the <p> tags keeps the text like it should be, but the list is exactly at the same place. I tried inline-block, inline, position: absolute etc, but nothing seems to work. I already tried searching the other divs for problems, but I just can't find anything. Here is a picture.
This is the css:
.gallerie {
text-align: left;
width: 100%;
}
.gallerie ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.gallerie li {
display: inline;
margin: 0px;
padding: 0px;
}
Can't somehow show the HTML part here, but it's just a simple ul li list with images. The whole thing is simple, but something just doesn't.
Thanks in advance!
Edit:
So as I can't get the thing with the code right, here is the direct linkt to the page with that problem: Link to the Problem
I hope this is allowed here. Thank you to the admin for editing, I am new here, and really not used to it. Thank you very much.
So guys, in short:
wanted to add the pictures here, can't post more than two links
Edit:
Funny thing, it works when I put the ul li outside of the article tag. So I would have a workaround.
Edit: The problem seems to be within the article tag. I have both, right and left margin in there. But when I make it to margin 0px, the whole text moves left (thats why I have a margin of 20px there). I guess the problem will be a second unneeded margin.
Edit: I fixed this by taking away the margin-left: 20px; out of the article tag, and added the value to the p tag for that class instead. Works. I don't really know what the error was, but it seems fine now. Thank you all for your help.
Last Edit: You can see the working example when you refresh the link to the site. Thanks for your help.
Your problem is css padding
<ul> tags have default padding. If you set padding: 0; then the spacing should disappear.
I would say set text-align: center; and padding: 0; for the .gallerie class
Is this what you want?
Corresponding css for .gallerie
Padding Example:
.padded {
padding: 10px;
background: red;
}
p {
background: yellow;
}
<div class="padded">
<p>This is some text</p>
</div>
Try adding padding-left: 20px to the <ul> and wrap the text underneath in a <p>
Looking at the link to the page where the issue lies. Just give the .gallerie class padding:0; and a margin-left:15px; (to achieve uniform indentation).
It appears from the page that you may be attempting to wrap the <ul> in a <p>, which is not valid HTML.
I have a Wordpress child theme and I'm a bit frustrated at the excess white space between my image slider and footer. I've tried editing the style sheet in a few different ways
footer {
margin-top:-10px;
padding-top:-100px;
}
I've also tried:
.vc_row.wpb_row.vc_row-fluid {
margin-bottom: 0 !important;
margin-top: 0 !important;
}
I see in the inspect element that it's this <section class="wpb_row vc_row-fluid block">. I'm confused about how to eliminate this white space.
Here's an image of what it looks like (my site isn't live yet) http://imgur.com/4vdRWBj
Thanks!
It's hard to tell without seeing your source. Have you tried adjusting bottom padding like so?
.vc_row.wpb_row.vc_row-fluid {
padding-bottom: 0 !important;
}
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;
}
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