Screenshot of network tab My external css isn't displaying the styles. I have a link in my html but I think the CSS may not be working. Do I need to add additional elements to my style sheet to get the displays to work properly?
.responsive {
width: 40%;
height: auto;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
.simple-subscription-form {
background: #000000;
color: #94C60D;
padding: 2rem;
border-radius: 0;
align-content: center
}
.simple-subscription-form.button {
margin-bottom: 0;
border-radius: 0 0 0 0;
}
#dialog-message {
display: none;
padding: 5px;
height: auto;
width: auto
}
div.hidden {
display: none;
}
You can not access the file system. Use your project resource folder.
Use <link rel="stylesheet" href="~/Resources/PATH + FILENAME">
Related
I'm making a site using the Divi theme (elegant themes) in Wordpress. I've been trying to get rid of the white space under the footer but have been unsuccessful. I've tried applying the Sticky Footer CSS and trying different padding/margins in the footer id, html and body. The site is thedaltondaleygroup.org.
I've created a page with divi builder and then copied the shortcode from revisions into footer area #1.
Here's the css code I've tried, this is attempting to apply the sticky footer css:
html, body {
height:100%;
}
#main-content {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
#main-content:after {
content: "";
display: block;
}
#main-footer, #main-content:after {
height: 142px;
}
.et_pb_gutters3 .footer-widget {
margin: 0 .5% 3% 0; */
}
Here's the rest of the code I have for the footer if there's anything conflicting:
#main-footer {
box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,0.3);
padding-bottom:1%;
}
.et_pb_row .et_pb_row_3 .et_pb_gutters2 .et_pb_row_fullwidth et_pb_row_1-2_1-4_1-4 {
width:100%;
max-width:100%;
}
#footer-bottom .container, #main-footer .container{
margin-right: 2.773%;
margin-left: 2.773%;
width:94.454%!important;
max-width: 94.454%;
}
#main-footer .fwidget.et_pb_widget {
width: 100%!important;
max-width: 100%!important;
}
#footer-widgets .footer-widget li:before {
display: none;
}
html #footer-widgets .footer-widget .et_pb_widget:not(.woocommerce) ul li {
line-height: 26px;
padding-left: 0px;
}
#footer-widgets {
text-align: center;
color: #ffffff;
padding-top: 2%;
width: 100%;
height: auto;
}
:not(.et_pb_fullwidth_section).et_pb_section {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
#footer-bottom {
padding: 0;
}
#main-footer {
width: 100%;
height:auto;
}
/* Footer Columns - Centered */
.footer-widget { margin-right: 0; text-align:center;}
.footer-widget:nth-child(1) { width: 32%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 32%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 32%; margin-right:0;}
.footer-widget+.last{display:none;}
#media only screen and (max-width: 980px){
.footer-widget:nth-child(1) { width: 30%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 30%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 30%; margin-right:0;}}
#media only screen and ( max-width: 767px ) {
.footer-widget:nth-child(1) { width: 100%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 100%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 100%; margin-right:0;}}
Before I write any css code I usually type out html,body,p,h1,h2 { margin:0; padding:0;} etcc...This usually fixes it for me,
Or you can google a css reset page and they have most of that pre-written...
hope this helps.
If you have a menu in the bottom/footer with dropdown menus, make sure in the design>Layout to set "Dropdown Menu" to "Upwards". If not it will cause white space.
I have a css and i want to put all the rules in css relative to an id.
For Example:
I have
.clearfix {
clear: both;
display: block;
font-size: 1px;
height: 0;
line-height: 1px;
margin: 0;
padding: 0;
}
And I have to make it like
#vn_space .clearfix {
clear: both;
display: block;
font-size: 1px;
height: 0;
line-height: 1px;
margin: 0;
padding: 0;
}
Is there any simple method to put all css rules relative to one id instead of editing each rule
You can use inheritance for second rule.
E.g. clear: both in .clearfix will apply to rule #vn_space .clearfix. So in #vn_space .clearfix you can omit anything that is same in rule .clearfix.
.clearfix {
background-color: red;
width: 20px;
height: 20px;
}
#vm_space {
padding: 5px;
background-color: green;
}
#vm_space .clearfix {
border: 1px solid black;
}
<div class="clearfix"></div>
<div id="vm_space">
<div class="clearfix"></div>
</div>
if you want to do this any how then you can use it like
$('div').css(["#vn_space", ".clearfix"]);
but i would not suggest it to prefer you can do this css with other way
here is ref link where i found
Is it possible to reference one CSS rule within another?
I've added a negative margin to the logo of my site and it appears fine in all browsers I've tested to this point. See here:
The problem is it's not displaying right in Safari desktop. See here:
The HTML is as follows:
<hgroup id="logo_container">
<div id="logo_inside_container">
<h1 id="site-title"><img src="/wp-content/uploads/logo.png" alt="612 Vineyard - Berryville, VA"/></h1>
</div>
</hgroup>
The CSS is as follows:
#site-title {
margin-top: -30px;
display: block;
padding: 0;
width: 190px;
height: 143px;
float: left;
}
#site-title img {
width: 190px;
height: 143px;
}
#logo_container {
display: block;
width: 100%;
height: 100%;
margin: -29px 0 0 !important;
background: url('/wp-content/uploads/logo_stripe_bg.png') 0 41px repeat-x;
}
#logo_inside_container {
display: block;
width: 860px;
height: 143px;
margin: 0 auto;
background: url('/wp-content/uploads/logo_stripe.png') 0 41px no-repeat;
}
I found a way to add browser specific classes to my body class here: http://codebyte.dev7studios.com/post/4180628671/add-browser-to-body-class-in-wordpress
Simply changed #site-title { margin-top: -30px; } to .safari #site-title { margin-top: 0; }
Hope this helps someone!
I've been doing a site for tafe and I've gone over different ways to do this and none of them have worked so far. I am trying to add a button image to a list menu using div id but it just seems not to be working. This demo page is a online version of my page, Image menu is suppose to be on the left hand side with the text over it.
I am trying to put a image in a unordered list as a background image and it doesn't appear to be working.
I am trying to put it in this part of the css at the very ened
#navcontainer ul {
padding: 0px;
margin-left: 0px;
list-style-type: none;
width: 200px;
display: block;
line-height: 34px;
background-image: url(images/pg_menu_bg.png);
}
Here is my html and my css:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation"><ul><li>HOME</li><li>NEWS</li>
<li>
CONTACT</li><li>ABOUT</li></ul></div>
<div id="leftcolumn">
<div id="navcontainer">
<ul>
<li>Upcoming Events</li>
<li>Members</li>
<li>Specials</li>
<li>Who is Snap Nature</li>
</ul>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
CSS:
#charset "utf-8";
* {
background-color: #6FF;
margin: 0px;
padding: 0px;
}
#wrapper {
background-color: #F90;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
background-color: #6F0;
height: 124px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#navigation {
background-color: #F3F;
float: left;
height: 25px;
width: 960px;
}
#leftcolumn {
background-color: #009;
float: left;
height: 350px;
width: 250px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#content {
background-color: #69F;
width: 710px;
float: left;
height: 350px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#footer {
background-color: #F00;
clear: both;
height: 25px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#navigation ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 960px;
height: 0px;
}
#navigation li {
float: left;
background-color: #F3F;
}
#navigation a {
line-height: 25px;
text-decoration: none;
color: #000;
background-color: #F3F;
display: block;
text-align: center;
vertical-align: middle;
width: auto;
padding-right: 10px;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 0px;
height: 25px;
}
#navigation a:hover {
color: #999;
text-decoration: none;
}
#navcontainer ul {
padding: 0px;
margin-left: 0px;
list-style-type: none;
width: 200px;
display: block;
line-height: 34px;
background-image: url(images/pg_menu_bg.png);
}
Please help TY
Jared
Edit:
Yes, this is exactly the problem. I just checked the link you posted, and the browser is looking for an image located at: http://www.156.onl.checit.info/CSS/images/pg_menu_bg.png - which doesn't exist.
See that "CSS" in there? I'm 99% sure that's unintentional. It's an absolute/relative path issue. Read on...
if your image is not appearing I'm gonna go out on a hunch and say it's because your image paths are messed up.
Solution:
This:
/* ABSOLUTE PATH solution */
background-image: url(/images/pg_menu_bg.png);
or maybe even this (depending on your file structure):
/* RELATIVE PATH solution. This is FROM YOUR CSS FILE.*/
background-image: url(../images/pg_menu_bg.png);
Explanation:
There is a big difference between:
background-image: url(images/pg_menu_bg.png);
and
background-image: url(/images/pg_menu_bg.png); /* note the leading slash */
The leading slash means an absolute path (ie. "path from your root domain url"), whereas no leading slash means a relative path (ie. "relative to the location of this file, in this case, your CSS file").
That means, presuming you have a file structure like this:
root
|
----images
| pg_menu_bg.png
|
----css
| mycss.css
from your css file, calling:
background-image: url(images/pg_menu_bg.png);
actually results in:
http://yourdomain.com/css/images/pg_menu_bg.png /* note the "css" */
whereas calling:
background-image: url(/images/pg_menu_bg.png);
results in:
http://yourdomain.com/images/pg_menu_bg.png
So I think you need to have a look at your directory structure, and work from there. My guess is you need to use absolute paths.
But if you wanted to use relative paths with the dummy file structure above, you can use:
background-image: url(../images/pg_menu_bg.png); /* ".." means "parent directory"
More info:Using relative URL in CSS file, what location is it relative to?
Second problem:
You have another issue, this style:
* {
background-color: #6FF;
margin: 0px;
padding: 0px;
}
This style applies a blue background TO EVERY ELEMENT. So even if your paths to that background image are ok, they're being hidden by foreground elements with blue backgrounds.
Try change * to body:
body {
background-color: #6FF;
margin: 0px;
padding: 0px;
}
Note: if you actually want a margin:0; and padding:0; on every element, leave the above style as you had it (but remove the background-color), and define a new body style and put the background-color in there instead. Like this:
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #6FF;
}
Here's the situation: my WordPress Gallery looks fine in Firefox, Safari, etc. but running on IE (under Windows), the the last image in the gallery wraps to the next line.
So far, I've tried adjusting the gallery width, padding, inline, block, and changing the number of columns to no avail. There is plenty of room on the row to fit the images.
Here's what I think are the pertinent CSS bits:
#gallery-1 {
float: right;
height: 70px;
margin: 1px;
padding-bottom: 20px;
width: 480px;
}
.gallery-icon {
width: 55px;
padding: 3px;
margin: 0;
float: left;
}
.gallery-columns-7 {
padding: 0;
margin: 0;
}
.gallery-item {
float: left;
margin: 3px;
padding: 0 2px 0 0;
width: 55px;
}
Anyone have any ideas?
Fix this
<dl class="gallery-item">
{
margin-right: 3px;
margin-left: 3px;
}
Either change it to 1px or delete them or delete just the right or left margin in the styles.css line 1219
Try setting overflow: hidden; in your .gallery-item class.