I am having a problem with one of my web pages that I can't seem to fix, a light grey color appears before the header picture as you can see here: https://victory3d.teachable.com/p/japanese-alley-3d-game-environment-creation:
I need to have a white space before the hero header content and so I added this code:
How can I modify it so that grey color doesn't show?
in the html there is a div:
<div class="course-block block liquid_html odd-stripe" id="block-8017829">
it's css is:
.course-block.odd-stripe, .block.odd-stripe {
background-color: #f7f7f7;
}
you will want to change it to:
.course-block.odd-stripe, .block.odd-stripe {
background-color: transparent;
}
For the white space, you don't have to add a p tag.
Just remove the paragraph tag you added. Then add some top padding, like 75px to the hero course block.
.course-block.even-stripe{ padding-top: 75px; }
Adjust the padding accordingly.
Related
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;
}
I have this page here:
http://www.cooperstandardperformance.com/content/test-blank-page
and I can't seem to get rid of the giant footer - there's no footer div or styling that I can see with Firebug that would indicate a giant footer.
I want the page to be white all down to the bottom - where am I going wrong? The only thing I can see that might be the cause is this:
background: none repeat scroll 0 0 #2B296A;
Is that right? Should I change that to #FFF; and be done with it? Or is there something else I am not noticing.
Remove the background style from your body tag.
According to firebug, you have a background-color on the body tag in the stylesheet¹, on line 122 :
body {
background: none repeat scroll 0 0 #001F3C;
...
}
¹ http://www.cooperstandardperformance.com/sites/all/themes/cooperstd/css/style.css?mr8j5a
Removing the background-color via firebug works.
Give your html tag a background-color or remove the blue from the body tag.
Don't provide any styling to body tag either through id or through class.
For eg.
<body>
//content goes here...
</body>
In your css:
body {
background: #fff;
...
}
The problem is your div content_column does not stretch to the bottom of the page and its background color is a different color than you have set to your body background color. The "footer" you describe is not really a footer, it's just the rest of the page.
There are several ways to fix this. You can define the height of the content_column div to stretch to the bottom of the page, which becomes quite complicated due to compatibility issues. Or you can just set the body background color to the same as the content_column div or vise versa.
Go to
http://www.cooperstandardperformance.com/sites/all/themes/cooperstd/css/style.css?mr8j5a
and here you will see..
`body {
background: none repeat scroll 0 0 #001F3C;
font-size: 1.4rem;
line-height: 2rem;
}`
here #001F3C is causing that the body to turn blue..
change #001F3C to #FFFFFF
I have CSS with an image
.backgroundImg {
background: url('./path/file.gif');
background-repeat: no repeat;
width: 24px;
height: 24px;
}
.ui-highlight {
border: 2px solid green;
color: #363636;
padding: 0.7em;
}
I have div tag which imports this class
<div class="ui-highlight ui-corner-all">
<div class="backgroundImg" style="float:left;">
some text.........
</div>
</div>
EDIT
I am trying to achieve a bordered box with image on the left and text on the right of the image. I inspected the element and the image shows up when I hover over the ui-highlight class
I know css and honestly I am not a pro at it. Can someone help me why the image doesn't show up
UPDATE
After adding width and height to the backgroundImg class the image is visible.
The first thing I would do is use Firebug for Firefox or the Developer Tools in a Webkit browser to inspect your situation.
Right-click on "some text...." and choose Inspect Element.
In the HTML inspector click on the div with the class "backgroundImg"
On the right hand side you should see the CSS inspector for this element. Hover your mouse over ('./path/file.gif') and see if the image thumbnail loads. If it doesn't you may have the path set-up incorrectly.
Hover over the div in the HTML inspector and see how it highlights on the page. It may be that your div isn't taking up enough space to reveal the image. If this is the case you'll need to set a width/height or put more content in the div to fill it out.
The jQuery UI classes on your parent div (ui-highlight ui-corner-all) might be setting some styles that obscure the image in the child div. Make sure to inspect this with the HTML/CSS inspector as well.
What you're trying to do from your code is give the text with the background of the image. It works, but not in the way you're intending. Replace the backgroundImg div with an tag in the HTML, with the "align='top'" element. The code I've got is:
<html>
<head>
<style type="text/css">
.ui-highlight {
border: 2px solid green;
color: #363636;
padding: 0.7em;
}
</style>
</head>
<body>
<div class="ui-highlight">
<img src="path/img.gif" style="padding:0px;" align="top">
some text.........
</br>
</div>
</body>
</html>
Try using an absolute path:
background: url('/path/from/root/file.gif')
Or:
background: url('http://example.com/path/from/root/file.gif')
This ensures that there is no ambiguity as to where the image is coming from.
First of all i would advise you to apply some sort of clearfix. The easy way would be to add overflow:hidden; to your .ui-highlight. This is required to give the wrapper some height. DDo some searching on clearfix for the how and why.
Second a would check if the image is actually getting loaded, your path might be wrong. Checking it in the code inspector from Chrome would be the way for me.
There's nothing syntactically with your CSS which leads me to believe that the image is not where you specify in your CSS. Try an absolute URL or a path relative to the CSS file itself.
However: I'm not sure you're going to get the results you're looking for with this CSS, though. If you try changing
background: url('./path/file.gif');
to
background: #f00;
you can preview what you're going to get when you get the image url worked out.
Since you say that you're trying to get "a bordered box with image on the left and text on the right of the image" you might try something like this:
CSS:
.ui-highlight {
background: url('http://www.site.com/file.gif') top left no-repeat;
border: 2px solid green;
color: #363636;
padding: 0.7em;
padding-left: 90px; /* This should be the width of the background image */
}
HTML:
<div class="ui-highlight">
some text.........
</div>
That would draw a border around the div, add a background image to the top left of the div, then write the text to the right of that image.
I've had a similiar issue like this before and trying to finally get it corrected. If you notice in the js fiddle there seems to be a thicker border above the actions div and I'm trying to find out why there is and there isn't in the template that I purchased.
http://jsfiddle.net/pGFfa/
Template:http://kansasoutlawwrestling.com/files/templates/admin/peachv1.2/Template/forms.html
EDIT:
I updated my page with the real intended page but look at the actions area and there still is a border on the left and right. Not sure why.
The double border is because of the bottom border of the content div. The div in the template has rule ".box .content.with-actions" applied which says "border-bottom: 0 none;". The content div in your fiddle doesn't have that rule so it has a bottom border and also the actions div has a top border hence the thicker line appearance.
The difference is that the content div in the template also has the "with-actions" class while the one in your fiddle doesn't. Just add that class and the problem disappears.
Updated fiddle http://jsfiddle.net/7jrEp/2/
As a note, when your css is linked externally any changes you make to the actual css changes every fiddle we post. It's better to paste the css into fiddle so it doesn't break.
And the problem as noted above was a double border plus the radius being applied to the bottom and not the top of the form container.
In content.css, try changing:
.box .content-form { border: 1px solid #C8C8C8; }
to:
.box .content-form { border: 1px solid #C8C8C8; border-bottom: none; }
I am trying to set the background color of the page at yumdom.com to yellow.
I have tried the following and it fails:
body{ background-color: yellow;} /*only a sliver under the header turns yellow.*/
#doc3{ background-color: yellow;} /*result same as above*/
#bd { background-color: yellow;} /*result same as above*/
#yui-main { background-color: yellow;} /*a rectangle turns yellow ending at where the content ends. I want this rectangle to extend all the way to the footer.*/
Also note that if in the developer tools in Chrome I highlight either one of the html elements above, I get only a certain portion of the page highlighted. A footer and the section below the content remain un-highlighted.
I want the yellow to fill the entire space between the header and the footer and leave no white space out.
Note that we are using YUI Reset, Fonts, and Grids CSS templates V 2.8.0r4
Many thanks!
The body's size is dynamic, it is only as large as the size of its contents.
In the css file you could use:
* {background-color: black} // All elements now have a black background.
or
html {background-color: black} // The page now have a black background, all elements remain the same.
<html>
<head>
<title>
webpage
</title>
</head>
<body style="background-color:blue;text-align:center">
welcome to my page
</body>
</html>
I already wrote up the answer to this but it seems to have been deleted. The issue was that YUI added background-color:white to the HTML element. I overwrote that and everything was easy to handle from there.
The problem is that the body of the page isn't actually visible. The DIVs under have width of 100% and have background colors themselves that override the body CSS.
To Fix the no-man's land, this might work. It's not elegant, but works.
#doc3 {
margin: auto 10px;
width: auto;
height: 2000px;
background-color: yellow;
}
I've checked your source code and find to change to yellow you need to adds the yellow background color to : #left-padding, #right-padding, html, #hd, #main and #yui-main.
Hope it's what you wanted.
See ya
You have to apply it to body tag.
Shorthand:
body {
background: black;
}
Single property:
body {
background-color: black;
}
Here's a html: how to change background color tutorial on YouTube.
What other answers don't mention is that there are four ways to actually specify/change CSS:
External CSS (using <link> tag to add your CSS)
Internal CSS (type CSS between <style> tags)
Inline CSS (type style attribute directly inside HTML element.
With JavaScript: use document.querySelector("#id").style.backgroundColor = 'black' just make sure to type this code between <script> tags
Looks to me like you need to set the yellow on #doc3 and then get rid of the white that is called out on the #yui-main (which is covering up the color of the #doc3). This gets you yellow between header and footer.
You are using selector in CSS, I guess you only select a component of the body. So if you want to whold background to be one color, you must select the right component.
In HTML, there is head body, head tag define the content shown on the tag.
Body define the whole body of your HTML. The highlight part is head and body of your HTML.