I have a navbar, but I don't know where the white space can display above and below my navbar, but when I try without using Laravel, the white space is gone.
I have try use css
* { margin: 0px; padding: 0px; }
but the result is same
here my Navbar paste.ofcode.org/xWBgAJUmWt5h7dYdALNnjC
and my css paste.ofcode.org/nNwTafvyzECeRgWSjUhrT9
With Laravel
without Laravel
Two causes:
The browser has a native 8px margin on the body, so start with:
html, body{ margin: 0; }
header .top-bar .social is poking out. Make it:
header .top-bar .social { margin: 0; }
And the problems are gone.
You can then delete the
* {
margin: 0px;
padding: 0px;
}
Try with Height:
.navbar {
height : 20px ; //required height
}
Related
I made a comment section for my website and I have a button that allows you to edit your comment which reroutes you to another page. I have a margin set up so content doesn't get hidden behind my header or footer but now I can't seem to find a way to get the background color to stretch across to the very bottom of the page.
I messed around with the position in css and the background color did stretch to the bottom of the page, but then my header disappeared.
My CSS...
#headerContainer {
margin: -60px 0px 0px 0px;
background-color:#333;
height: 60px;
width: 100%;
position: fixed;
}
.editCommentBody {
margin: 60px 0px 40px 0px;
height: 100%;
text-align: center;
background-color: #ddd;
}
The editCommentBody class is everything from the header to the edit button.
you have not set a value for the fixed position in your headerContainer style .
try giving left:value and top:value for it and also , when you use positions , margins wont work sometimes , if your margin even works , it has a top:-60px which cause your header to be out of screen , try this :
#headerContainer {
margin:0px;
background-color:#333;
height: 60px;
width: 100%;
position: fixed;
left:0px;
top:0px;
}
Try adding the desired background color to the body instead, like this:
body { color: #ddd; }
Try using:
box-sizing: border-box;
I have a webpage written in PHP that displays a table, and I use nvd3 to also show a graph based on the table, however according to this tutorial: http://lsxliron.github.io/nvd3Tutorial/ I should use several css stylesheets, inlcuding
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" />
in my head for the page. I also use my own external stylesheet. However the linked one has the code
td,th {
padding: 15px 5px;
display: table-cell;
text-align: left;
vertical-align: middle;
border-radius: 2px
}
td,th {
padding: 0
}
table {
border-collapse: collapse;
border-spacing: 0
}
table {
width: 100%;
display: table
}
,th,td {
border: none
}
*,*:before,*:after {
box-sizing: inherit
}
in it which messes up my table, short of either not including this stylesheet, explicitly overriding it with my own local css, or making the graph show in a new webpage is there anything I can do? And if those are my only options, how could I override the *,*:before,*:after section? It is making my headers off center
Thanks in advance
Edit:
The code being affected by
*,*:before,*:after {
box-sizing: inherit
}
is a div inside of a td used to space out my headings and subheadings, I added box-sizing: initial to the div, and it works fine now (everything was shifted to the left before). The box-sizing inherit was shrinking the content and increasing the margin.
materialize is not required for NVD3. I would ignore that part of the tutorial unless you want to use Material Design. If you do want to use materialize, then just make your selectors more specific.
e.g.
.my-table-wrapper td, .my-table-wrapper th {
padding: 15px 5px;
/* etc. */
}
put your CSS after all others
add !important to every rule you want to override
check with inspector in your favorite browser which rules you have to override additionally and do it also with !important
remember that the more specific your rule is the higher its priority: ul li a.menu-link will override a.menu-link for all anchors in ul>li
Example
td,th {
padding: 15px 5px !important;
display: table-cell !important;
text-align: left !important;
vertical-align: middle !important;
border-radius: 2px !important;
}
You only need to import the materialize fiel in your new css3 file, how you know css work over waterfall, that mean that whe your use import in css on the top of the page, that style will charge in the same css, and beacuse css work over waterfall all the last style overwrite the first style (As long as styles repeat themselves). Go:
#import url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css");
td,th {
padding: 15px 5px;
display: table-cell;
text-align: left;
vertical-align: middle;
border-radius: 2px
padding: 0
border: none;
}
table {
border-collapse: collapse;
border-spacing: 0
width: 100%;
}
*,*:before,*:after {
box-sizing: inherit
}
Screenshot of my product page which showing SSSSS in place of stars. I just upgraded my theme and woocommerce with the latest version and started facing this issue. Before that everything was working good.
I have searched for that issue but couldn't get any solution. What can be the issue? I am little bit new to woocommerce
I have checked css file and I show '\53\53' & \73\73 symbols Do I need to replace it with \e021?
UPDATE:
This code is already there in my woocommerce.scss
/**
* Star ratings
*/
.star-rating {
float: right;
overflow: hidden;
position: relative;
height: 1em;
line-height: 1;
font-size: 1em;
width: 5.4em;
font-family: 'star';
&::before {
content: '\73\73\73\73\73';
color: darken( $secondary, 10% );
float: left;
top: 0;
left: 0;
position: absolute;
}
span {
overflow: hidden;
float: left;
top: 0;
left: 0;
position: absolute;
padding-top: 1.5em;
}
span::before {
content: '\53\53\53\53\53';
top: 0;
position: absolute;
left: 0;
}
}
.woocommerce-product-rating {
#include clearfix();
line-height: 2;
display: block;
.star-rating {
margin: 0.5em 4px 0 0;
float: left;
}
}
I think in your case font-family is missing or replaced for .star-rating class in css. If so, then add.star-rating{font-family: star} in your css and must checked its not overridden by others.
While I don't have any information about what theme you do use, I assume you are missing font which has all weird characters called glyphs.
Please take a look inside of your wp-header.php, functions.php for additional information about font(s), plus check if you have needed fonts inside wp-content/themes/your_theme/some_folder_with_fonts.
Additionally please clear your cache. It is likely to have the same CSS filename while content of the css is different and the 'places' (urls) of the fonts are different right now.
To do so, please push CTLR+SHIFT+R on the page you are visiting. Simplest things. Great problems. Been there many times.
EDIT: Added missing CSS part with font declaration found in original theme
So this is the code you are missing in your CSS file:
#font-face {
font-family: star;
src: url(/electro/wp-content/plugins/woocommerce/assets/fonts/star.eot);
src: url(/electro/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix) format('embedded-opentype'),url(/electro/wp-content/plugins/woocommerce/assets/fonts/star.woff) format('woff'),url(/electro/wp-content/plugins/woocommerce/assets/fonts/star.ttf) format('truetype'),url(/electro/wp-content/plugins/woocommerce/assets/fonts/star.svg#star) format('svg');
font-weight: 400;
font-style: normal
}
This comes from original theme.
Please let me know if this works.
I've built my current site into a mashup of HTML & PHP. I originally embedded CSS to each individual page. I'm using a PHP include for the separate header & footer PHP files. I've linked the footer.php & header.php to their respective .css files, and it works to a degree, but it seems that CSS is "bleeding through" to both the header and footer PHP files.
For instance, I'll apply a dark gray to my body text & links to my footer.css file:
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #808080;
}
a:link {
color: #808080 ;
}
a:visited {
color: #808080 ;
}
body {
background-image: url();
background-repeat:repeat-x;
background-color: #000000;
}
.style4 {font-size: 13px}
-->
#footer { width: 100%; height: 20%; background: #181818 ; }
//footer-nav style
#footer-nav {
list-style-type: none;
padding: 0;
float: center;
}
#footer-nav li {
display: inline;
}
#footer-nav li a {
float: center;
text-align: center;
background: none;
margin-left: 15px;
margin-right: 15px;
text-decoration: none;
height: 23px;
line-height: 23px;
}
</style>
`
This is then transferring over to my header.php file and changing the links to a dark gray (which shouldn't be happening as I'm linking header.php to it's own header.css file).
What I'm essentially trying to achieve is a dynamic header & footer linking system on my website so that I can easily update all headers & footers site-wide by replacing just one file in case of an added link, service, etc.
If there is a more efficient way of doing this please let me know!
Technically, should only belong in the of your page, not in inline blocks (though it does work).
You would need to change your CSS to select just the region you want to apply the styles to in each case. For example all the CSS for your header should be prefixed with your top level header element, #header.
Right now you are just styling top-level elements and the last to load is taking effect.
You could try putting something like this on the background of the particular css.
Ex.
background: #181818 !important;
I wonder whether someone may be able to help me please.
I'm using Aurigma Image Uploader and FancyBox to produce this gallery page. The problem I'm having is that the images are positioned to go vertically down the page, whereas I would prefer them to go horizontally across the page, creating separate rows of images, one underneath the other.
I appreciate that some may not know anything about the Aurigma package, but I think I'm right in saying that 'Fancybox' is a little more widely used.
I just wondered whether someone could perhaps provide somne guidance please on the settings I would need to change within the Fancybox script so that the images are positioned horizontally rather than vertically.
Many thanks
.ccs file extract
.gallery-image-list { padding: 0; list-style-type: none; }
.gallery-image-list .item { display: inline-block; vertical-align: top; margin: 5px; padding: 15px; white-space: nowrap; width: 150px; float:left; }
.gallery-image-list .wide-item { width: 250px; }
.gallery-image-list .item .preview { display: inline-block; vertical-align: top; }
.gallery-image-list .item .data { margin: 5px; padding: 5px; list-style-type: none; display: inline-block; vertical-align: top; font-size: 95%; }
.gallery-image-list .item .data li { margin-bottom: 5px; }
I think what you want is to add float:left; to your item class in css.