I have the following view page code (uses codeigniter, bootstrap and PHP). I have given only the code between <body> and </body> as well as the CSS.
<div class="row">
<?php echo $navbar; ?>
</div>
<div class="row">
<div class="jumbotron">
<div class="container">
<div id="tasks" class="col-md-2">
<?php echo $task_set; ?>
</div>
<div id="replaceable" class="col-md-9 col-md-offset-1">
<div id="current_view">
<?php if(isset($current_view)) echo $current_view ;?>
</div>
<div id="pass_chg_form" style="display:none;">
<?php echo $pass_change_form; ?>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<?php echo $footer; ?>
</div>
<script>
CKEDITOR.replace( 'editArea' ); //replace text area with ckeeditor
</script>
My css is:
html,body {
height:100%;
}
.jumbotron {
height:100%;
padding-bottom:0px;
}
#tasks {
margin-top:20px;
padding-top:20px;
}
#replaceable {
padding-top:50px;
padding-bottom:100px
}
The problem is that the jumbotron changes size with changing the amount of content in the page. How do I get a jumbotron that will occupy full height of the containing element no matter how much content is there (i.e Jumbotron height should extend up to navbar and footer no matter what)?
As you mentioned, if the navbar and footer divs are positioned fixed, then you can apply your css like:
<style type="text/css">
.navbar {
color: white;
background: #333;
position: fixed;
top: 0;
right: 0;
bottom: auto;
left: 0;
height: 50px;
}
.footer {
color: white;
background: #333;
position: fixed;
top: auto;
right: 0;
bottom: 0;
left: 0;
height: 50px;
}
.jumbotron {
position: absolute;
top: 50px;
right: 0;
bottom: 50px;
left: 0;
margin: 0;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
</style>
EXAMPLE: See JSFiddle here
Related
link to example
Getting the black portrait box is easy, but how do I create something like the two red boxes right on top of each other? I know one solution is to export the two landscapes with the gap as one image and put it in as a portrait but I'd prefer to not do it like that.
This is a start for you.
.row {
display: flex;
}
.row div {
width: 50%;
}
div {
margin: 20px;
}
img {
width:100%
}
<div class="container">
<div class="row">
<div class="first">
<img src="https://placehold.it/400x800/ccc/666?text=" class="img-responsive" alt="">
</div>
<div class="two">
<img src="https://placehold.it/400x400/ccc/666?text=" class="img-responsive" alt="">
<img src="https://placehold.it/400x400/ccc/666?text=" class="img-responsive" alt="">
</div>
</div>
</div>
<div class="main">
<div class="flexbox">
<div class="row"><img src="https://via.placeholder.com/150"/>
</div>
<div class="row image-wrapper">
<div class="col"><img src="https://via.placeholder.com/150"></div>
<div class="col"><img src="https://via.placeholder.com/150"></div>
</div>
<div>
</div>
.main {
width: 500px;
}
.flexbox {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.col {
width: 100%;
height: 250px;
box-sizing: border-box;
padding: 10px;
}
.col img {
background: red;
width: 100%;
height: 100%;
}
.row {
width: 50%;
height: 500px;
padding: 10px;
box-sizing: border-box;
}
.row img {
background: black;
width: 100%;
height: 100%;
}
.row.image-wrapper {
padding: 0;
}
https://codepen.io/stargroup0075/pen/ExjMPXK
I've tried everything I know to make the height of the black part change according to the "samples" in the picture above. Whenever I add new "sample" that will go down the black part does not follow. Is there something wrong in my code, if there is please let understand how to fix it cause Im new at this.
Here is my code:
body,
html,
.yourteachers,
.fullpage
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.fullpage
{
background-color: black;
}
.leftForm
{
background-color: #2c384a;
width: 204px;
height: 100%;
float: left;
font-family: calibri;
color: white;
text-align: center;
}
.yourteachers
{
text-align: center;
}
.announcementSlider
{
background-color: #323f4f;
color: white;
font-size: 24px;
height: 280px;
width: 200px;
margin: 20px;
display: inline-block;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/teachers.css">
</head>
<body>
<header>
<nav>
<div class="nav-wrapper blue">
<div class="container">
Teachers
<i class="material-icons">menu</i>
<ul class="hide-on-med-and-down right">
<li><a id="dashb">Home</a></li>
<li><a id="logout">Log Out</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="fullpage">
<div class="leftForm hide-on-med-and-down">
<img src="pictures/default-avatar-250x250.png">
<p class="name">
<?php echo $name; ?>
</p>
<p class="section">
<?php echo $grade; ?>-
<?php echo $section; ?>
</p>
</div>
<div class="leftForm sidenav blue center" id="slide_out">
<img src="pictures/default-avatar-250x250.png">
<p class="name">
<?php echo $name; ?>
</p>
<p class="section">
<?php echo $grade; ?>-
<?php echo $section; ?>
</p>
</div>
<div class="yourteachers">
<?php
while ($row = mysqli_fetch_array($query)) {
echo '<a class="announcementSlider" href="teacherinfo.php?id=' . $row['IDNum'] . '">
<img src="pictures/blank photo.png" class="teacherpic"><br>
<span>'.$row['LastName'].'</span><br>
<span>'.$row['Grade'].' - </span>
<span>'.$row['Section'].'</span>
</a>';
}
?>
</div>
</div>
<script type="text/javascript">
var a = document.getElementsByClassName("announcementSlider");
for (i = 0; i < a.length; i++) {
a[i].onclick = function() {
location.href = "teacherinfo.php";
};
}
</script>
<script src="js/teachers.js"></script>
<script src="sameFunctions.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
const slide_menu = document.querySelectorAll(".sidenav");
M.Sidenav.init(slide_menu, {});
</script>
<footer>
<div class="foot">
<div class="socialMed">
</div>
</div>
</footer>
</body>
</html>
It's because your .fullpage needs to follow .yourteachers 's height. And your .leftForm has float: left but it's parent (.fullpage) still doesn't know the exact height of it's children. To fix it, you need to add clear: both by using div with additional .clearboth class or css :before or :after pseudo-selector.
see my fiddle here
In my approach above, I'm using fixed sidebar and add margin-left on .yourteachers to fix sidebar height issue. For better implementation, I recommend you to use flex box so you keep your sidebar not using fixed position.
<!-- language-all: lang-css -->
body, html, .yourteachers, .fullpage {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
background: black;
}
.fullpage {
overflow: hidden
}
.leftForm{
background-color: #2c384a;
width: 204px;
height: 100%;
float: left;
font-family: calibri;
color: white;
text-align: center;
}
.yourteachers{
text-align: center;
}
.announcementSlider{
background-color: #323f4f;
color: white;
font-size: 24px;
height: 280px;
width: 200px;
margin: 20px;
display: inline-block;
}
Have u tried height: 100vh? Height is automatically adjusting, so just height: 100% means 100% height of parent.
I need to add margin to the top of every page except for the first page so that the text does not overlap the logo. Here is an example of the problem (scroll to the second page).
http://fsk.herrmanneasyedit.com/what-we-do/administrativeregulatory/pdf
I have looked at other examples on Stack Overflow, but nothing seems to apply directly.
Any help is greatly appreciated.
#page {
margin: 0.5in 0.5in 0.5in 0.5in;
}
html, body {
font-family: "Poppins", arial, helvetica, sans-serif;
font-size: 10px;
line-height: .8em;
}
.border {
border: 1px solid #d5d5d6;
position: fixed;
top: -0.18in;
left: -0.18in;
bottom: -0.18in;
right: -0.18in;
}
.border-url {
position: absolute;
bottom: 0.50in;
right: 0;
text-align: center;
color: #7D303B;
font-size: 11px;
font-weight: bold;
}
.logo {
padding-left:27px;
padding-top:20px;
width: 245px;
height: 37px;
}
.wrapper {
margin: 0.2in 0.2in 0.2in 0.2in;
page-break-after: always;
}
.wrapper:last-child {
page-break-after: avoid;
}
.text {
margin:0 20px;
}
.text p{
margin: 0.2em 0;
}
.row{
padding-top:62px;
position:relative;
}
.main-content{
}
HTML
<body>
<div class="border">
<img class="logo" src="" width="245" height="37" alt=""/>
<div class="border-url">
www.foulston.com
</div>
</div>
<div class="wrapper">
<div class="row">
<div class="full-photo">
<img src="" width="550" height="100" alt=""/>
<div class="page-title">
<div class="inner">
<h1>Title</h1>
</div><!--end inner -->
</div><!--end page-title -->
</div><!--end full-photo -->
</div><!--end row -->
<div class="main-content">
Main content goes here.
</div>
</div>
</body>
I'm building a website with a CSS popup inside a loop that increments by 1, but the variable $i does not carry on the popup.
CSS
#cover {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 5;
width: 100%;
height: 100%;
display: none;
}
#score {
height: 380px;
min-width: 280px;
max-width: 380px;
margin: 0 auto;
position: relative;
z-index: 10;
display: none;
background: url(login.png) no-repeat;
border: 5px solid #cccccc;
border-radius: 10px;
}
#score:target,
#score:target + #cover {
display: block;
opacity: 2;
}
.cancel {
display: block;
position: absolute;
top: 3px;
right: 2px;
background: rgb(245, 245, 245);
color: black;
height: 30px;
width: 35px;
font-size: 30px;
text-decoration: none;
text-align: center;
font-weight: bold;
}
.popup {
position: fixed;
left: 50%;
top: 20%;
}
.popup .wrapper {
position: relative;
left: -50%;
}
PHP
<?php $loopvalue = 3; $i=1; while ($i <= $loopvalue) {?>
<li>open popup <?php echo $i;?></li>
<div class="popup">
<div class="wrapper">
<div id="score" style="background-color:#FFF;">
popup # <?php echo $i;?>
×
</div>
<div id="cover" >
</div>
</div>
</div>
The popup number $i never changes. It freezes on 1. I'm not sure what's the problem. I don't see any, but I can't make the popup number change.
In your codes you have repeated the score div with same id. it need to have different ids for different divs
(This will only create proper html. for popup effect it needs to use some java script/JQuery codes)
Try this
<?php $loopvalue = 3; $i=1; while ($i <= $loopvalue) {?>
<li>open popup <?php echo $i;?></li>
<div class="popup">
<div class="wrapper">
<div id="score<?php echo $i;?>" style="background-color:#FFF;">
popup # <?php echo $i;?>
×
</div>
<div id="cover" > </div>
</div>
</div>
<?php $i++;}?>
I am having a strange issue with the website I am working on. For some reason, divs are nesting inside of other divs. This messes up my formatting and it driving me nuts. The problem page is here: http://www.thecadencegrp.com/our-books/page/2
If you scroll down to the bottom of the page, you can see the footer is messed up. I cannot seem to fix it!
Here is the code:
<?php
/*
Template Name: Template Page
*/
?>
<?php get_header(); ?>
<style>
.middler_title{
width:1000px;
margin:20px auto 0 auto;
}
#titles-wrapper
{
margin-left: 0;
overflow: hidden;
margin-left: 80px;
}
#footer { width: 960px; margin: 0 auto; display: block; clear: both;}
.middler_title_row {
float:left;
width:780px;
margin-top:20px;
margin-left: 0;
margin-bottom: 40px;
margin-top: 40px;
}
.middler_title_row img{
float:left;
display:inline;
margin-bottom:20px;
margin-right:20px;
padding:0;
margin-left: 0;
}
.middler_title_row h1{
font-size:30px;
}
.middler_title_row h2{
font-size:16px;
margin-top:-38px;
}
.middler_title_row h3{
font-size:20px;
margin-top:0px;
}
.middler_title_row h4{
font-size:20px;
font-weight:normal;
}
.middler_title_row a{
text-decoration:none;
color:#005ECF;
}
h3.author-name
{
padding-top: 0px;
padding-bottom: 20px;
}
#book-navigation
{
width: 240px;
margin: 20px auto;
}
#book-nav-right
{
float: right;
width: 120px;
margin-top:20px;
margin-bottom:20px;
padding:0;
font-size: 20px;
text-align: left;
}
#book-nav-left
{
float: left;
width: 120px;
margin-top:20px;
margin-bottom:20px;
padding:0;
font-size: 20px;
}
</style>
<?php
global $more;
$more=0;
?>
<div id="main-wrap"> <!-- ######################################## -->
<div id="titles-wrapper"> <!-- ######################################## -->
<div class="middler_title">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'cat' => 1,
'paged' => $paged
);
query_posts($args);
query_posts('post_type=books&order=DESC&posts_per_page=10&paged='.$paged);
while (have_posts()) : the_post(); ?>
<div class="middler_title_row">
<?php $bookcover = get_the_post_thumbnail($page->ID, 'bookcover'); ?>
<?php echo $bookcover; ?>
<h1><?php the_title(); ?></h1>
<?php
$meta_values = get_post_meta($post->ID, 'subtitle', true);
?>
<h4><?php echo $meta_values; ?></h4>
<?php
$meta_values2 = get_post_meta($post->ID, 'author', true);
?>
<h3 class="author-name"><?php echo $meta_values2 ; ?></h3>
<?php
$meta_values11 = get_post_meta($post->ID, 'what_cadence_has_done_to_help_this_book', true);
?>
<?php
$meta_values3 = get_post_meta($post->ID, 'overview', true);
?>
<?php
$meta_values4 = get_post_meta($post->ID, 'read-more', true);
if(!$meta_values4){
$strtitle = get_the_title();
$title=explode(' ',$strtitle);
$title=implode('-',$title);
if(count($title)<1){
$title=strtolower($strtitle);
}else{
$title=strtolower($title);
}
$meta_values4 = get_bloginfo('wpurl').'/Books/'.$title;
}
?>
<p><?php echo $meta_values11 ?></p>
<p><?php echo substr($meta_values3,0,340); ?> ...READ MORE</p>
</div>
<?php endwhile; ?>
<div id="book-navigation">
<div id="book-nav-right"><?php next_posts_link('NEXT >>', $the_query->max_num_pages) ?></div>
<div id="book-nav-left"><?php previous_posts_link('<< PREVIOUS') ?></div>
</div>
</div>
</div> <!-- ######################################## -->
</div> <!-- ######################################## -->
<div id="footer">
<?php get_footer(); ?>
</div>
if you watch the source of the html in the page you wrote, you will see that there is a
after you
also each middler_title_row you print has a that is not even open.
just open the page in firefox and press Ctrl+U to see the source and you will see a red line of , this is one of your problems
the other problem is the coming after the
you need to straight up you html to be valid first before you try to solve this in the css
You have 2 divs with the id = footer. I'd say your problem isn't a mysterious div bug or the css. I'd say your mark up needs some review first of all. Try looking into selectors being ok, and then that every div is closed properly. After that, take a look at the footer. If you want the footer to be stuck in place at the bottom of the place, take a look at something called "Sticky footer". You can accomplish this with some css tricks.
<div id="footer">
<div class="clear"></div>
<div id="footer">
<div class="thirdpage">
<br>
<a href="https://www.facebook.com/thecadencegroup">
<img src="http://www.thecadencegrp.com/wp-content/uploads/2013/05/fb1-300x82.png" width="90">
</a>
<br>
<a href="https://twitter.com/thecadencegrp">
<img src="http://www.thecadencegrp.com/wp-content/uploads/2013/05/tw1-300x65.png" width="113">
</a>
<br><br>
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US </script> <span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block;"><span style="padding: 0px !important; margin: 0px !important; text-indent: 0px !important; display: inline-block !important; vertical-align: baseline !important; font-size: 1px !important;"><iframe name="easyXDM_IN_Lib_li_gen_1384155259314_0_provider" id="easyXDM_IN_Lib_li_gen_1384155259314_0_provider" src="http://platform.linkedin.com/js/xdrpc.html?v=0.0.1196-RC1.31125-1408#xdm_e=http%3A%2F%2Fwww.thecadencegrp.com&xdm_c=li_gen_1384155259314_0&xdm_p=1#target=li_gen_1384155259314_0&width=600&height=400&mode=wrapper" frameborder="0" style="width: 106px; height: 20px; display: inline-block;"></iframe></span></span><script type="IN/FollowCompany+init" data-id="3323727" data-counter="right"></script>
<br><br>
<h5>© The Cadence Group. All Rights Reserved.</h5>
</div>
<div class="thirdpage">
</div>
<div class="thirdpage">
<p>The Cadence Group<br>
212 Marengo Avenue<br>
Suite 2S<br>
Forest Park, IL 60130<br>
708.689.0908<br>
services#thecadencegrp.com
</p></div>
</div><!-- /#footer -->
</div>
your footer div is located in titles-wrapper div by this style:
#titles-wrapper
{
margin-left: 0;
overflow: hidden;
margin-left: 80px;
}
you can put out footer from this or set margin-left: 0px; in #titles-wrapper style.
if all the divs are set and tidy, so the </div> that i marked cause all the problems, just find it and eliminate it! :D
usually after the </html> you shouldn't have any other tag
the other things that you have to check is why your footer is in titles-wrapper, it shouldn't be , because as you can see in the picture </div> <!--/wrapper--> is parent of your footer, so consequently your footer will move ahead like titles-wrapper, just bring your footer out of your titles-wrapper and everything should be okey
I think your HTML have a problem, but you can remove margin-left form #titles-wrapper and set margin-left to .middler_title
here is CSS:
#titles-wrapper {
margin-left: 0;
overflow: hidden;
margin-left: 0; /* removed */
}
.middler_title {
width: 1000px;
margin: 20px auto 0 auto;
margin-left: 80px; /* added */
}
the footer section is in the #titles-wrapper so when you set margin to #titles-wrapper it will move footer to the right. there is another ways but this is the simplest.
image is here