I can't get my footer to show below all my content. The content currently overlays anything right at the bottom and I can't fix it.
Footer code:
</div> <!-- end #content -->
</div> <!-- end #container -->
<?php wp_footer(); ?>
<div id="footer" width:100%; >
<div id="column" style="width: 100%; height:200px; background-color:none;">
<div style="width:100%; height:100px; background-color:#cdbfc9; ">
<div style="width:80%; height:80px; background-color:#fefefe; margin-top: 10px; margin-left:5px;">
<!--Information for left column content starts here-->
<h6>LATEST NEWS</h6>
</div><!--Information for left column content ends here -->
</div>
</div>
</body>
</html>
If anyone could help I would really appreciate it. The URL is:
Related
https://imgur.com/a/IhONUvY
here is a screenshot of my problem, there's 2 pie charts above each other, how do i make them go next to each other? I am using the google api for charts
Would this be a html or css edit? if so how would I go about changing where it is?
Im using SB admin 2 as a template, ive tried using tabs but im either not using them correctly or they're just not having it
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4">
<div id="top5os" style="width: 700px; height: 300px; background:red;"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div id="top5country" style="width: 700px; height: 300px; background:blue;"></div>
</div>
</div>
</div>
use css like
div.container{
align: right;
or
float: right;
}
if neither of those work you can say
div.container{
position: fixed;
and
left: 900px;
}
I am trying to create a layout similar to this one where the different sections span the entire width of the screen. I was looking at the html/css for the layout and couldn't figure out why my view was not doing the same. (I am relatively new to creating pages).
I am using php to make creating the pages easier so I have a few files.
.jumbotron{
background: gray;
height: 50%;
margin-top: 10px;
}
.jumbotron p, h1 {
text-align: center;
}
.nav {
text-align: center;
padding: 0;
margin: 0;
background-color: red;
height: 10%;
}
.nav li {
display: inline-block;
margin-right: 5%;
margin-left: 5%;
}
.container #about {
background: blue;
height: 50%;
}
.container #me {
background: blue;
height: 50%;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul class="nav">
<li><a href="index.php">Home</li>
<li><a href="about.php">About</li>
<li><a href="contact.php">Contact</li>
</ul><!--END .nav-->
</div><!--END .wrapper-->
</div><!--END .header-->
<div class="container">
<div class="jumbotron">
<div class="container">
<h1>Example</h1>
<p>Example paragraph </p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="about">
<span class="name">ABOUT</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="more">
<span class="name">MORE</span>
</div>
</div>
</div>
</div>
</div> <!--END MAIN CONTAINER-->
</body>
</html>
The rows don't extend to the edge of the screen. The views are also not aligned. I know it is a lot to look at, but I could not find any resource online with an example, or a simple template for me to take a look at.
In Bootstrap you can put the 12 column grid in a .container or a .container-fluid. The first is used if you want to grid to span a maximum of 1170 pixels, the latter if you want it to span the entire screen. Both have a horizontal padding of 15 pixels on each side to keep its content have some distance from the edge of the screen. For text this is a good thing to have, however as you note it's nice if a background color or image does span the entire width.
If you take a look at the theme you linked (see http://ironsummitmedia.github.io/startbootstrap-freelancer/) you might notice that the .container and .container-fluid classes they use also don't span the entire width of the screen. They surround them with other elements, e.g. <section class="success" id="about">, on which they put a background color.
See this example where i've put a <section> with a .pink or .green background color around the containers:
.pink {
background-color: #f99;
}
.green {
background-color: #9f9;
}
section {
padding-bottom: 20px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="pink">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h3>.container-fluid</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
<section class="green">
<div class="container">
<div class="row">
<div class="col-xs-12"><h3>.container</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
P.S. in your example the <a> tags aren't closed with a </a> tag, plus the .container after the .jumbotron isn't closed.
The problem with extending rows is simple, add the following rule:
body {
margin: 0;
}
I am trying to implement the sticky footer for bootstrap but it is not working for me. I have a header.php and a footer.php which I include in every page of my website. I saw a various posts here for the sticky footer but it doesn't seem to work for me. I saw an example to add a and a to the body of my page and modify the css accordingly but it doesnt seem to work. Please find my code below:
webpage.php
<?php
require_once "../includes/essentials.php";
include "../includes/header.php";
?>
<div id="wrap">
<div id="main" class="container">
Content
<?php include "../includes/footer.php"; ?>
</div>
</div>
Footer.php
<html>
<body>
<div class="footer">
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
Content
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
Content
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
Compatible with Firefox and Chrome.
</div>
</div>
</div>
</div>
</body>
</html>
style.css
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
.wrap {
min-height: 100%;
margin: 0 auto;
min-width: 1000px;
}
.main {
overflow:auto;
padding-bottom:200px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
bottom:0;
}
How do i fix this? I want the footer to stick at the bottom of the page even if content gets over before half of the webpage.
In the CSS you select .main as a class but in the html you've put is as an ID <div id="main">.
Secondly the <div class="footer"> should be outside of #wrap, as a sibling and not a child.
<div id="wrap">
<div id="main">
// <div id="contnainer"...
</div>
</div>
<div class="footer">
// <div id="contnainer"...
</div>
A quick fix to your problem is to use a NavBar as a footer, and simply fill it with the content you'd like in it.
Bootstrap Components provides the JS for the NavBar to stick to the top or bottom of the screen.
You can read about it here
I have a button that I want to open a panel. Unfortunately my javascript is getting in the way. It's a notifications center in the panel and in order to retrieve the notifications I have to put javascript in the href of the link....but its not opening the open.
I put tags where the problem is that say THIS IS WHERE THE PROBLEM LIES.
If I change the href to #myContent then it will open, but in order for the script to work I need to to be javascript in the href.
Here's my code:
<? //PHP for getting username and database here ?>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function toggleDiv(divId) {
$("#"+divId).toggle();
$(document).ready(function(){
$("#myContent").load("getnotes.php?name=<? echo $username; ?>");
});
}
</script>
<!-- BEGIN PAGE 1 -->
<div data-role="page" id="feed" data-add-back-btn="true">
<div data-role="panel" id="settingspanel" data-position="left" data-display="overlay">
<!--THIS IS THE LEFT PANEL-->
</div>
<div data-role="header" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="padding-top: 5px; border-bottom: 1px solid #eccfb3; padding-bottom: 5px;">
<center><img src="images/logo_app_white.png" height="25px"></center>
<!--THIS IS WHERE THE PROBLEM LIES-->
<? echo $number; ?>
</div>
<div data-role="content">
<!--This is where the content of the page goes-->
</div>
<div data-role="footer" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="border-top: 1px solid #eccfb3; padding-top: 5px;">
<div data-role="navbar" style="background: #ce8339;">
<ul>
<li>My Feed</li>
<li>Submit</li>
<li>Browse</li>
<li>Projects</li>
</ul>
</div>
<!-- /navbar -->
</div>
<div data-role="panel" id="myContent" data-position="right" data-display="overlay">
<!--THIS IS THE PANEL-->
</div>
</div>
<!-- END PAGE 1 -->
Why isn't the panel opening and how can I fix the issue.
Why put javascript in the 'href' tag and not in 'onclick'?
My guess is
<a href="javascript:void(0);" onclick="toggleDiv('myContent');">
will fix the issue.
Here is a brain-teaser for the brave. I've been at it for days and just can't come with the solution.
I wanted to come out with something like this:
Using html, CSS and PHP only.
I got near, but not quite what I expected. Here is the code in PHP and here is the output.
<table border="0">
<thead>
<tr>
<th>Cientoveintiochavos</th>
<th>Seseintaicuatravos</th>
<th>Treintaidosavos</th>
<th>Dieciseisavos</th>
<th>Octavos</th>
<th>Cuartos</th>
<th>Semifinales</th>
<th>Final</th>
</tr>
</thead>
<tbody>
<?php for($i=0;$i<256;$i++): ?>
<tr>
<?php for($n=0,$c=2;$n<8;$n++,$c*=2): ?>
<?php
/*
if(false){//$i == 0) {
$rwspn = $c/2+1;
$iter = 0;
} else {
$rwspn = $c;
$iter = $c;//-$c/2+1;
}
*/
$class = ($i%($c*2))?'par':'impar winner';
if($i%$c==0):?>
<td rowspan="<?=$c;?>" class="<?=$class;?>"><span><?php echo genRandomString();?></span></td>
<?php endif; ?>
<?php endfor; ?>
</tr>
<?php endfor; ?>
</tbody>
</table>
If someone knows how to represent a binary tree or a dendrogram or comes up with a smarter code please let me know!
I've done something like this, using divs kinda like #HugoDelsing. The way I handled the lines was to divide each pair into 4 vertically-stacked divs:
The first player (border-bottom)
A spacer between 1st and 2nd players (border-right)
The second player (border-bottom and border-right)
A spacer before the next pair (no borders)
Each of these gets 1/4 the height of the pair*, and the total height of a pair gets doubled as you move to the right. If you don't have a power of two, fill slots with placeholders to push everything down the right amount.
*The bottom borders will throw the heights off by 1, so take that into account when styling your rows.
Other Notes
The spacer divs may not be necessary, but for me they easily handled the spacing and getting the different columns to line up correctly.
I used inline styles filled-in by PHP for the heights, so I didn't have an arbitrary depth limit or calculations hard-coded into CSS.
Here's an example.
EDIT
OK, here is teh codez:
<style type="text/css">
.round{
float:left;
width:200px;
}
.firstTeam, .secondTeam{
border-bottom:1px solid #ccc;
position:relative;
}
.firstSpacer, .secondTeam{
border-right:1px solid #ccc;
}
.team{
position:absolute;
bottom: 4px;
left: 8px;
}
</style>
<div class="round">
<div class="matchup">
<div class="firstTeam" style="height:29px;"><div class="team">Team One</div></div>
<div class="firstSpacer" style="height:30px;"> </div>
<div class="secondTeam" style="height:29px;"><div class="team">Team Two</div></div>
<div class="secondSpacer" style="height:30px;"> </div>
</div>
<div class="matchup">
<div class="firstTeam" style="height:29px;"><div class="team">Team Three</div></div>
<div class="firstSpacer" style="height:30px;"> </div>
<div class="secondTeam" style="height:29px;"><div class="team">Team Four</div></div>
<div class="secondSpacer" style="height:30px;"> </div>
</div>
<div class="matchup">
<div class="firstTeam" style="height:29px;"><div class="team">Team Five</div></div>
<div class="firstSpacer" style="height:30px;"> </div>
<div class="secondTeam" style="height:29px;"><div class="team">Team Six</div></div>
<div class="secondSpacer" style="height:30px;"> </div>
</div>
<div class="matchup">
<div class="firstTeam" style="height:29px;"><div class="team">Team Seven</div></div>
<div class="firstSpacer" style="height:30px;"> </div>
<div class="secondTeam" style="height:29px;"><div class="team">Team Eight</div></div>
<div class="secondSpacer" style="height:30px;"> </div>
</div>
</div>
<div class="round">
<div class="matchup">
<div class="firstTeam" style="height:59px;"><div class="team">Team One</div></div>
<div class="firstSpacer" style="height:60px;"> </div>
<div class="secondTeam" style="height:59px;"><div class="team">Team Three</div></div>
<div class="secondSpacer" style="height:60px;"> </div>
</div>
<div class="matchup">
<div class="firstTeam" style="height:59px;"><div class="team">Team Five</div></div>
<div class="firstSpacer" style="height:60px;"> </div>
<div class="secondTeam" style="height:59px;"><div class="team">Team Eight</div></div>
<div class="secondSpacer" style="height:60px;"> </div>
</div>
</div>
<div class="round">
<div class="matchup">
<div class="firstTeam" style="height:119px;"> </div>
<div class="firstSpacer" style="height:120px;"> </div>
<div class="secondTeam" style="height:119px;"> </div>
<div class="secondSpacer" style="height:120px;"> </div>
</div>
</div>
<div class="round">
<div class="matchup">
<div class="firstTeam" style="height:239px;"> </div>
</div>
</div>
I wouldnt use a table but divs.
create a column container div with relative/absolute position with a fixed width (eg: 200px) for each col.
Each column container has inner divs with a height and lineheight of double the previous column container
create a long black vertical line image (length atleast the half the size of the largest height of inner divs in any column. Start the line with a horizontal line of 200px wide to the left (so rotate an L with 180degrees). Leave about half the text height of free space above the horizontal line in the image, so the line will be under the text.
set this image as background to the inner div of each column container and position it at left center; repeat = none;
Some sample code (without images)
<style type="text/css">
div.col { position:absolute;border:1px solid #f00;width:200px;top:0px; }
div.col1 { left:0px; }
div.col1 div { height:20px; line-height:20px; }
div.col2 { left:200px; }
div.col2 div { height:40px; line-height:40px; }
div.col3 { left:400px; }
div.col3 div { height:80px; line-height:80px; }
div.col4 { left:600px; }
div.col4 div { height:160px; line-height:160px; }
div.col5 { left:800px; }
div.col5 div { height:320px; line-height:320px; }
</style>
<div class='col1 col'>
<div>player1</div>
<div>player2</div>
<div>player3</div>
<div>player4</div>
<div>player5</div>
<div>player6</div>
<div>player7</div>
<div>player8</div>
<div>player9</div>
<div>player10</div>
<div>player11</div>
<div>player12</div>
<div>player13</div>
<div>player14</div>
<div>player15</div>
<div>player16</div>
</div>
<div class='col2 col'>
<div>player1</div>
<div>player3</div>
<div>player5</div>
<div>player7</div>
<div>player9</div>
<div>player11</div>
<div>player13</div>
<div>player15</div>
</div>
<div class='col3 col'>
<div>player1</div>
<div>player5</div>
<div>player9</div>
<div>player13</div>
</div>
<div class='col4 col'>
<div>player1</div>
<div>player9</div>
</div>
<div class='col5 col'>
<div>player1</div>
</div>
Looks like you're almost there. Nice work! I think the center alignment you want is in CSS
td {
vertical-align: middle;
}
I don't think you can get the lines to work using borders. You might try a background image for them instead.