When I remove
<div id="footer">
<?php echo date("Y"); echo " "; bloginfo('name'); ?>
</div>
from the footer on this page the webpage starts to display things weird. The background color for example disappears. Why is that?
Set #main is CSS to overflow:hidden or overflow: auto;.
This is because .post has float: left;. Everything that floats isn't in the flow of the document anymore. Hence the #main doesn't know the height of the elements in it.
Related
Hello My question is not how to echo a php variable into a DIV. My question is how to contain it. When I enter text into the DIV it expands and contains text, but the echoed php Variable content from the variable crosses the boundery Vertically at the bottom only. Overflow:hidden works but then it does not expand with the content.
** CSS **
.bottom-menu-body{
padding-left:20px;
padding-right:20px;
padding-bottom:20px;
** DIV **
<div class="card">
<div class="bottom-menu-body">
<?php echo $bidcard; ?> <!-- Bid Card Content from Require: db_ac_bids.php-->
<?php echo $nobids_message; ?> <!-- Bid Card Content from Require: db_ac_bids.php
CSS control via acceptbid css card-->
</div><!-- Bottom Menu body End -->
</div><!-- Card end -->
I am not able to understand the question properly but I guess below css might help you :
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
"text-overflow: ellipsis" this will add "..." ellipsis.
I am trying to create a dynamic website using PHP, but I have encountered a problem - all descendants of <nav>, <footer> and <header> are ignoring their class CSS formatting, but not class-specific CSS is taking effect on them. For example:
This formatting is not affecting elements inside <footer>:
footer section #main-footer-section
{
background-color: #444554;
height: 50px;
width: 100%;
}
<footer>
<section id="main-footer-section">
</section>
<section id="bottom-footer-section">
<p id="copyright-mark"><?php echo date("Y") ?>©</p>
</section>
</footer>
But this is affecting the <footer> contents:
footer section
{
background-color: #444554;
height: 50px;
width: 100%;
}
<footer>
<section id="main-footer-section">
</section>
<section id="bottom-footer-section">
<p id="copyright-mark"><?php echo date("Y") ?>©</p>
</section>
</footer>
Could anyone please advise if I'm doing something wrong?
Your id is attached to the footer so it's
footer section#main-footer-section
{
background-color: #444554;
height: 50px;
width: 100%;
}
Your code snippet is looking for Footer > Section > element with #main-footer-section instead of Footer > Section with #main-footer-section
Using it like that:
footer section #main-footer-section
would require a structure like
<footer>
<section>
<div id="main-footer-section">
</section>
</footer>
Every whitespace in CSS definitions stands for another level down.
Your structure would be matched by this:
footer section#main-footer-section { /* ... */ }
I have made a static blank page that also shows my website's header/sidebar/footer in it. Now what i am trying to do is get rid of the 'style' that my wordpress template css is forcing me to have on the page i am trying to create.
Here is my code:
<?php
/*
* Template Name: My own page!
* Description: I made a page!
*/
require (dirname(dirname( __FILE__ )).'/wp-load.php');
get_header(); ?>
<div id="main-content" class="main-content">
<?php
if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
// Include the featured content template.
get_template_part( 'featured-content' );
}
?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<!-- MY CONTENT!!! -->
Hello2.
<h1> hello.</h1>
<p>hello</p>
<input type="submit" name="connect" value="CONNECT" style="height:52px ; width:136px"/>
<p>hi</p>
<!-- -->
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar( 'content' ); ?>
</div><!-- #main-content -->
<?php
get_sidebar();
get_footer();
Any help appreciated.
You will need to overwrite the styles which are already in the theme. For example, you can give an id to your submit button like <input type="submit" name="connect" value="CONNECT" id="submitbutton"> and then style it according to your needs using CSS, for example:
input#submitbutton {
height: 52px;
width: 136px;
background: blue;
color: white;
}
Same goes for the <h1> tags. Give an <id> to your <h1> tag like <h1 id="hello"> hello.</h1> and then style it according to your needs using CSS, for example:
h1#hello {
color: black;
font-weight: bold;
font-size: 20px;
}
Use of Developer Tools over here will help you quite a lot in order to see how an element would look with your desired styles before actually making any changes to its CSS.
you will need to use something like
get_header('custom-header');
And use a custom header file to only load the stuff you want. You may need to create a custom function to override the scripts included by the theme...
I have text that I put into a div, which is generated automatically by php..(taken from the database).
But the text stretches over the div.
here is an example of what I want to do:
<div>
<?php
Generate_All_Text_Content_Here();
?>
</div>
I want the div to limit to where the text stretches..say no more than 300px.
I tried to give it width measurement..but it has no influence over the div element
add to your style
div{
max-width:300px;
word-wrap:break-word;
text-overflow:<clip> or <ellipsis>;
overflow:<hidden> or <scroll>;
}
this should really cover everything >.<
Why not do something like this then?
<div style="<?php echo get_text_width(); ?>">
<?php Generate_All_Text_Content_Here(); ?>
</div>
Just set the div width with CSS and text won't be bigger:
div {
max-width: 300px; /*Or simply width: 300px; if you want the div always to be that width*/
}
Really struggling to understand this problem, any ideas are welcome
I have a carousel of images and all have rollovers that appear in every browser but IE, (testing in IE8 at the mo)
Live site
http://www.warface.co.uk/clients/warface.co.uk/testv2
click top red box to reveal
To add to the confusion rollover appears when an image isnt present
HTML
<div class="anyClass">
<ul><?php query_posts('category_name=project'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li><div class="project-thumb caption">
<div class="cover boxcaption">
<div class="content">
<h2><?php the_title() ?></h2>
<a class="view-project" href="<?php the_permalink() ?>">View Project</a>
</div><!--content END -->
</div><!-- cover boxcaption END -->
</div><!-- project-thumb caption END -->
<?php $description = get_post_meta($post->ID, "project-thumb", $single = true);
if($description !== '') { echo $description; } ?></li>
<?php endwhile; endif;
wp_reset_query(); ?>
</ul></div><!-- anyClass END -->
CSS
.project-thumb { /* -- This is the hit area -- */
overflow: hidden;
width:499px;
height:337px;
display:block;
top:0px;
right:0px;
position: absolute;
}
.project-thumb .boxcaption { /* -- This is the sliding area -- */
background: #f7c923;
position: absolute;
width:499px;
opacity: .9; /* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); /* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
.caption .boxcaption {
height:100%;
left: 100%;
}
.project-thumb .content {
width:400px;
display:block;
margin:0 auto;
top:34%;
position: relative;
display:block;
}
** -- EDIT -- **
JS
$('.project-thumb.caption').hover(function(){
$(".cover", this).stop().animate({left:'0%'},{queue:false,duration:0}); //Position on rollover
},function() {
$(".cover", this).stop().animate({left:'100%'},{queue:false,duration:0}); //Position on rollout
});
The problem is that in IE you cannot hover over an empty div and have the mouseover event fire. You'll notice in developer tools that if you select the div element it just selects the image and completely bypasses the overlayed div.
There are two ways around this: you can set the "project-thumb" div to have a transparent background (using css3 or a transparent image) or give it a border. I was able to test this in your page in IE and it works just fine now. Look here for more info on being able to hover over an empty div in IE.