So, after a few bootstrap tuts, decided to try mixing it up with wordpress. A whole bunch of questions there, but my main concern right now is, why isn't angies list image moving to the right? I did float:right in css, i did pull-right class, i even did margin-left:99%... it's still there. WHY?
Any other notes are appreciated as well :)
you can see the whole thing here
http://soloveich.com/
<body>
<div class="container-fluid>
<div class="row-fluid" id="heady">
<div class="span4"><div id="sign"></div></div>
<div class="span4" id="menubg">
<nav class="navbar">
<div class="navbar-inner">
<?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
</div>
</nav>
</div>
<div class="span4" class="pull-right"><div id="angies"><img src="http://www.soloveich.com/wp-content/themes/Yellow-sign/images/angies.png"></div>
<div id="lic">
<ul id="licen">
<li>Phone# (555)555-5555</li>
<li>Lic# 7778899</li>
<li>Bond# 111223344</li>
</ul>
</div>
</div>
</div>
and the css
#heady {
background-color: #727272;
Height:370px;
}
#sign{
background-image: url(images/sign.png);
height: 334px;
width: 334px;
margin-left: 15px;
margin-top: 10px;
}
#menubg {
font-family: 'Contrail One', cursive;
font-weight: 200;
font-size: 25px;
text-decoration: none;
margin-top:130px;
}
#angies {
margin-top: 20px;
float: right;
margin-left: 99%;
}
If you want it to have your #angies to the very right of your page do the following:
#angies{
position:absolute;
margin-top:20px;
right:0px;
}
Long story short: you will force your element to break out of the flow in an absolute position at 0px from your right.
Also as I was browsing to the source of the page using developer tools in Chrome I realized that you are not embedding correctly the bootstrap javascript. See the last script tag before your ending </body> tag. You forgot to include the path to the template which is mandatory in Wordpress when you are including javascript files. That line of code should look like this:
<script src="<?php bloginfo('template_url');?>/js/bootstrap.min.js"></script>
instead of just this:
<script src="js/bootstrap.min.js"></script>
Related
I am working on a react project, and I list some operations ( objects ) in a Table, everything looks fine but the client for something I found very weird and hard, here is how it looks :
But that is not how he wanted the datatable dates looks, he wants something like this :
Is there a CSS property that can make that possible ?
Any help would be much appreciated.
there is too much code to write, but those parts are enough :
HTML :
<div class="co-operations-contrat__date">
<span class="co-operations-contrat__date-text">04/07/2018</span>
</div>
SASS :
.co-operations-contrat {
&__date {
a {
margin-right: 5px;
display: inline-block;
cursor: pointer;
+.co-operations-contrat__date-text {
margin-left: 0;
}
}
&-text {
margin-left: 25px;
font-family: "Poppins", monospace;
}
}
}
Like others have said monospace for the dates would be best. If you can't change the font are you able to wrap each part of the date?
If so what you could do is something like this;
https://jsfiddle.net/8mLwot25/3/
Basically, I've set a width on each span and aligned them with flex on the parent container. (You could also float each span). But by doing this would align the items in a better way.
It's not perfect but its a solution.
.container {
display: flex;
}
.container span {
text-align: center;
width: 20px;
}
.container span:last-child {
width: auto;
}
<div class="container">
<span>01</span>/
<span>04</span>/
<span>2019</span>
</div>
<div class="container">
<span>01</span>/
<span>05</span>/
<span>2018</span>
</div>
<div class="container">
<span>13</span>/
<span>04</span>/
<span>2019</span>
</div>
Maybe letter-spacing can help you with that. I'm not sure if you can achieve a pixel perfect result with that but this property may be usefull.
The issue is related to the Poppins font you are using for these dates. The font is not monospaced (it is sans-serif only).
If using a regular monospace font, the issue no longer appears
See demo below
.co-operations-contrat__date a {
margin-right: 5px;
display: inline-block;
cursor: pointer;
}
.co-operations-contrat__date .co-operations-contrat__date-text {
margin-left: 0;
}
.co-operations-contrat__date-text {
margin-left: 25px;
font-family: "Poppins", monospace;
}
#no-poppins .co-operations-contrat__date-text {
margin-left: 25px;
font-family: monospace;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<h2>Poppins In</h2>
<div class="co-operations-contrat__date">
<span class="co-operations-contrat__date-text">30/06/2018</span><br/>
<span class="co-operations-contrat__date-text">31/03/2018</span><br/>
<span class="co-operations-contrat__date-text">04/07/2018</span><br/>
<span class="co-operations-contrat__date-text">31/01/2011</span><br/>
</div>
<h2>Poppins Out</h2>
<div id="no-poppins" class="co-operations-contrat__date">
<span class="co-operations-contrat__date-text">30/06/2018</span><br/>
<span class="co-operations-contrat__date-text">31/03/2018</span><br/>
<span class="co-operations-contrat__date-text">04/07/2018</span><br/>
<span class="co-operations-contrat__date-text">31/01/2011</span><br/>
</div>
<h1>Other workarounds include </h1>
<h2>Usign <TT></h2>
<div class="co-operations-contrat__date">
<tt>30/06/2018</tt><br/>
<tt>31/03/2018</tt><br/>
<tt>04/07/2018</tt><br/>
<tt>31/01/2011</tt><br/>
</div>
<h2>Using <PRE></h2>
<div class="co-operations-contrat__date">
<span>30/06/2018</pre>
<pre>31/03/2018</pre>
<pre>04/07/2018</pre>
<pre>31/01/2011</pre>
</div>
Of course, you can choose any monospaced font of your choosing, I just went the browser's defaults for the demo.
I'm generating a PDF with the Flying Saucer 9.1.16 XML/CSS renderer, in a Spring Boot app. All the CSS properties are working fine, except text-align at the page margins. This is an extract of my CSS:
#page {
size: landscape;
margin-top: 100px;
border-bottom: solid gray;
#top-right{
content: element(header-top);
padding-top: 15px;
text-align-last: end !important;
};
#bottom-right{
content: element(pagination);
vertical-align: top;
text-align: right !important;
};
}
That's the HTML:
<div class="header-center text-primary">
<h3 th:text="${ownerProperty}"></h3>
<h4 th:text="${owner.ownerName}"></h4>
</div>
<div class="pagination text-muted">
<small>
<span th:text="#{page} + ' '"></span>
<span id="pagenumber"></span>
<span th:text="#{of} + ' '"></span>
<span id="pagecount"></span>
</small>
</div>
I have tried those two approaches, without success:
text-align-last: end !important; and text-align: right !important;
I'm using Thymeleaf as template engine, and apart from my CSS, the PDF has this other one bootstrap.min.css linked .
When converting HTML with css to pdf people often encounter to a problems.
Here's how you should use the align attribute to fix the problem.
<div align="right">
Any text
</div>
<div align="center">
Any text
</div>
I would like to remove gap between navbar and carousel in materialize design. I used vue component for each div and laravel as backend.
I use Sass for precompiler css. I had try to setting the margin body, margin for navbar, and margin for carousel through sass. Also I want to try to setting the margin through style scoped in vue component. But it didn't change , the gap still appears.
This is my code :
Navbar.vue
<template>
<nav class="white z-depth-1">
<img :src="'img/logo.png'" width="50px" height="50px" alt="Logo" style="margin-left:50px; margin-top:5px;">
<ul id="nav-mobile" class="right">
<li>
<div class="center row">
<div class="col s12">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input type="text" class="center" />
</div>
</div>
</div>
</li>
<li>artist</li>
<li>merchandise</li>
<li>about</li>
<li>login</li>
<li>register</li>
</ul>
</nav>
</template>
<script>
export default{}
</script>
carousel.vue
<template>
<div class="carousel carousel-slider">
<a class="carousel-item" href="#one!"><img src="/img/carone.jpg"></a>
<a class="carousel-item" href="#two!"><img src="/img/cartwo.jpeg"></a>
<a class="carousel-item" href="#three!"><img src="/img/carthree.jpeg"></a>
<a class="carousel-item" href="#four!"><img src="/img/carfour.jpeg"></a>
</div>
</template>
<style lang="scss" scoped>
.carousel{
margin-top: -20px;
}
</style>
<script>
$(function(){
setInterval(function() {
$('.carousel').carousel('next');
}, 2000);
$('.carousel.carousel-slider').carousel({
fullWidth: true,
indicators: true
});
});
</script>
App.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('navbar', require('./components/Navbar.vue'));
Vue.component('carousel-component', require('./components/Navbar.vue'));
const app = new Vue({
el: '#app'
});
App.Scss
#import "~materialize-css/sass/components/color-variables";
#import "~materialize-css/sass/components/variables";
#import '~materialize-css/sass/materialize';
#font-face {
font-family: 'VojoCustomize'; /*a name to be used later*/
src: url('/fonts/GeosansLight.ttf');
}
nav ul li a{
color: $primary-color;
border-bottom-color: rgba(0,0,0,0);
font-family: VojoCustomize, sans-serif;
font-style: normal;
font-weight: bold;
}
.carousel{
max-height: 400px;
margin: 0 !important;
}
nav .input-field input[type='text'] {
height: 50px;
background-color: $primary-color;
margin-right: 30px;
border-radius: 10px;
margin-top: 5px;
width: 600px;
}
.yellow-primary-color{
color : $primary-color-dark;
}
.custom-textfield{
border-radius: 20px;
width: 100vw;
height : 50vh;
background-color: $primary-color;
}
Appear in browser
Sorry for my bad English. But, I'm really stuck. Please give me advise for this problem. Thank You.
To fix you should remove the bottom margin (added by Materialize-CSS) of the row class and the input element inside your nav.
The following css snippet should fix your problem:
/* remove input bottom margin */
nav .input-field input[type='text'] {
margin-bottom: 0;
}
/* remove .row bottom margin */
nav .row {
margin-bottom:0;
}
I am trying to make a player-card type page showing various attributes about the players in a meteor app. What I am struggling with is to find the web components and css that will enable me to build something like this?
I am using the Materialize.css framework, but thought just to the preloader class to create the ratings bars (strength etc)
<div class="progress">
<div class="determinate" style="width: 70%"></div>
</div>
Any help with this will be appreciated!
Assuming your main problem is with the progress bar, this should get you started:
https://jsfiddle.net/L23kwohq/
You could put that into a table for the view you proposed.
CSS
.progress {
height: 2.6em;
background-color: white;
}
.progress .determinate {
background-color: lightblue;
}
.amount {
font-size: 2em;
padding-left: 80px;
// Whatever other styles...
}
HTML
<div class="progress">
<div class="determinate" style="width: 70%">
<span class="amount">7</span>
</div>
</div>
I have created a top bar and a bottom bar for my website's index. I have isolated both of them in two files, the header.php, which controls the top bar and the footer.php, which controls the bottom bar.
In the index there is no problem, but if I create a new page like about.php, and I include the two php files, the top and bottom bar are moved to the right by 10px (or something like that).
In this case the page is larger, because there is this tiny blank space to the left, before the beginning of the two bars.
Here are the two files:
Header.php
<style>
.blue { background-color: #039; width: 100%; height: 15%; position: absolute; top: 0px; }
html, body { width: 650px; background-color:#F5F5F5;}
</style>
<div class="blue">
<h1 style="text-align: center; color:#FFFFCC ;font-family:"Times New Roman",Times,serif;">My Website</h1>
</div>
Footer.php
<ul id="figo">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<style>
#figo {background-color: #039; position:absolute; bottom:0px; width:100%;}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:right;
}
a{
display:block;
width:90px;
color:#FFFFCC;
}
</style>
INDEX.PHP
Here I post the index.php
-
<html>
<head> <title> About </title> </head>
<body>
<? include 'header.php'; ?>
<?include 'footer.php'; ?>
</body>
</html>
The <style></style> tags should only go into the <head></head> portion of a document. You want to avoid having any inline styles as well. Better than using <style></style>, you should put all the styles that are to be used by all of your pages into a single stylesheet.
I would implement a wrapper (container) and give that your page width and position relative, this will align your footer menu to the bottom of that block (assuming that's what you're trying to achieve). If not, drop the position from the container.
With all of these changes, the structure would look something like this. Keep in mind this is a very archaic design, but it should help get you started.
header.php:
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title; ?></title>
...
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
...
</head>
<body>
<div id="container">
<div class="blue" id="header">
<h1>Header Content</h1>
</div>
index.php/about.php/whatever.php...
<?php
$title = 'My About Page';
include('header.php');
?>
<div>Your page contents</div>
<?php include('footer.php'); ?>
footer.php:
<div id="footer">
<ul id="figo">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div><!-- end "container" -->
</body>
</html>
/css/stylesheet.css:
body {
background-color: #F5F5F5;
margin: 0;
padding: 0;
}
#container {
position: relative;
width: 650px;
}
.blue {
background-color: #039;
height: 15%;
}
#figo {
background-color: #039;
position: absolute;
bottom: 0px;
margin: 0;
padding: 0;
width: 100%;
}
#figo ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#figo li {
float: right;
}
#figo a {
display: block;
width: 90px;
color: #FFFFCC;
}
Kill the position: absolute on your .blue top bar. You don't need it; since it's at the top of your HTML, it'll be at the top of the page. [The space is probably the result of the default padding on the body.] Try CSS like this:
html, body { background-color:#F5F5F5; margin: 0; padding: 0; }
.blue { background-color: #039; height: 15%; }
To be sure, though, we'd need to see index.php and footer.php.
Why are you setting a width on the html and body elements? That's a little funky. If you want a 600px-wide content area with a gray background, create a wrapper div and apply the background to that:
#wrap { background: #f5f5f5; width: 600px; }
<body>
<div id="wrap">
<?php require "header.php"; ?>
content here
<?php require "footer.php"; ?>
</div>
</body>
Also, style elements should be placed as children of the head element. Or, better yet, in an external stylesheet, so you separate presentation from content.
The reason your getting the padding on the left is because you have <html> on both your header.php as well as the page you are loading the header file on.
Additionally, it would be a better practice to put header and footer into a higher level folder within your server. Then reference that file with
Include("../../header.php");
The styles being within one or two style sheets is the best way to accomplish styling as well. You would need to refer to nodes in you document by parent class and class or IDs. That would allow you to get different styles on different pages but have one style sheet.
<div class='parent'>
<div class='child'>
//do stuff
</div>
</div>
Then style with
<style type='text/css'>
.parent .child{
cool:stuff;
}
</style>
And finally, make sure the style only shows up within the <head> of the page:-)