I am displaying some icons and a short descriptor for each. I am using a list item to display the descriptions because I have a custom icon I am using to accompany the descriptor.
The icons display as expected, but as you can see the second row of descriptions is shifted right, not aligned with the row above (sorry the icons are so dark), I can't seem to debug why. All the properties seem to be the same.
<?php if( have_rows('section') ): ?>
<?php while( have_rows('section') ): the_row();
$image = get_sub_field('image');
?>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="mx-auto text-center">
<img src="<?php echo $image['url'] ?>">
<ul>
<li><?php the_sub_field('content'); ?></li>
</ul>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
And how I'm styling the list
ul {
padding-left: 2rem;
list-style-type: none;
list-style-position: outside;
}
ul li {
padding-left: 2rem;
background-image: URL("../../images/star.svg");
background-position: 0 0;
background-size: 1.6rem 1.6rem;
background-repeat: no-repeat;
margin-top: 1rem;
margin-bottom: 50px;
display: inline-block;
text-align:left;
}
Related
This question already has answers here:
How can one create an overlay in css?
(9 answers)
Closed 4 years ago.
I'm trying to move the title upper inside of the pic.I'm created an div but it doesn't appear correctly.Then I remove.I changed to code of the existing div.
but show . I tried margin-top but not work.
CSS
.lazy-enabled #main-content .first-news img {
height: 310px;
}
.lazy-enabled #main-content .first-news .tie-appear.post-thumbnail a{
background-color: red !important;
display: table-cell;
font-size: 25px;
color: white;
}
Div PHP
<div id="baslist">
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>" rel="bookmark">
<?php the_post_thumbnail( 'tie-medium' ); ?>
<span class="fa overlay-icon"></span>
</a>
<h2 class="post-box-title"><?php the_title(); ?></h2>
</div><!-- post-thumbnail /-->
<?php endif; ?>
</div>
.lazy-enabled #main-content .first-news .tie-appear.post-thumbnail a{
background-color: red !important;
display: table-cell;
}
You need the thumbnail wrapper to be position: relative, and the title to be position: absolute. Then you can put it on the bottom of the wrapper and add whatever margins you require.
.post-thumbnail {
position: relative;
}
.post-thumbnail .post-box-title {
position: absolute;
bottom: 0;
margin: 20px;
}
.post-thumbnail .post-box-title a {
background-color: red !important;
display: table-cell;
font-size: 25px;
color: white;
}
<div id="baslist">
<div class="post-thumbnail">
<a href="#" rel="bookmark">
<span class="fa overlay-icon"></span>
<img src="https://www.w3schools.com/howto/img_fjords.jpg">
</a>
<h2 class="post-box-title">Post Title</h2>
</div>
</div>
Use position: absolute to position it at the top of relatively positioned div
I want to unpack the question so that it is clear and you will see the code below. I turned my HTML Bootstrap page into a WordPress dynamic site. The images are no longer under the img tag. So if you look below, I am not sure if I need to be tweaking the col-xl-2 class or creating a has_post_thumbnail selector in CSS. I need for my images to go from vertically aligned to horizontally aligned. If you look at the The col-centered keeps it centered, but I need it to be horizontally aligned. I have tried following the guidance in the WordPress Codex regarding styling the_post_thumbnail and it has not helped.
This is my index.php file:
<?php
// Advanced Custom Fields
// this is a bunch of variables with our fields to echo out in PHP
$images_feature_title = get_field('images_feature_title');
$images_feature_body = get_field('images_feature_body');
$indianapolis_feature_title = get_field('indianapolis_feature_title');
$indianapolis_feature_body = get_field('indianapolis_feature_body');
$social_media_image = get_field('social_media_image');
$social_media_title = get_field('social_media_title');
$social_media_feature_body = get_field('social_media_feature_body');
?>
<?php get_header(); ?>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php
$notun = new WP_Query(array(
'post_type' => 'bcarousel'
));
$indicator = -1;
while($notun->have_posts()) : $notun->the_post(); $indicator++ ?>
<li data-target="#myCarousel" data-slide-to="<?php echo $indicator; ?>"<?php if($indicator == 0) : ?> class="active" <?php endif; ?>></li>
<?php endwhile; ?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php
$carousel = new WP_Query(array(
'post_type' => 'bcarousel',
));
$korim = 0;
while($carousel ->have_posts()) : $carousel ->the_post(); $korim ++ ?>
<?php if($korim == 1) : ?>
<div class="item active">
<?php else : ?>
<div class="item">
<?php endif; ?>
<div class="carousel-image">
<?php the_post_thumbnail(); ?>
<div class="carousel-caption">
<h1><?php the_title(); ?></h1>
<h2><?php the_content(); ?></h2>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<!-- Left and right Carousel Arrows -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<!-- Images Feature Section
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<!-- <div class="container marketing"> -->
<!-- Three columns of text below the carousel -->
<section class="row content-region-1 pt40 pb40">
<div class="container">
<?php $loop = new WP_Query(array('post_type' => 'images_feature','orderby' => 'post_id', 'order' => 'ASC')); ?>
<?php while($loop->have_posts()) : $loop->the_post(); ?>
<div class="col-xl-2 col-centered">
<?php
if (has_post_thumbnail()) {
the_post_thumbnail();
}
?>
<p><?php the_title(); ?> »</p>
<?php endwhile; ?>
</div><!-- /.col-lg-2 -->
</div>
</section><!-- /.row -->
<!-- Indianapolis Feature Section
================================================== -->
<section class="row" id="indy-glass">
<div class="container">
<div class="col-md-12">
<h2><?php echo $indianapolis_feature_title; ?></h2>
<hr />
<p class="lead"><?php echo $indianapolis_feature_body; ?></p>
</div>
<div class="col-md-12 text-center">
<p><a class="btn btn-danger" href="#" role="button">Learn More »</a></p>
</div>
</div>
</section>
<section class="row content-region-2 pt40 pb40" id="customer-testimonial">
<div class="container">
<div class="col-md-12">
<h1>What Our Customers Are Saying...</h1>
<p class="lead">We love Mirror Concepts! The team is professional and courteous and the new weightroom
mirrors look awesome!</p>
<cite>~ Jeff and Cindy Kivett</cite>
<p>Read More »</p>
</div>
</div>
</section>
<!-- Social Media Section
================================================== -->
<section class="row content-region-3 pt40 pb40" id="indy-glass">
<div class="container">
<div class="col-md-12 facebook-page">
<!-- If user uploaded an image -->
<?php if(!empty($social_media_image)) : ?>
<img src="<?php echo $social_media_image['url']; ?>" alt="<?php echo $social_media_image['alt']; ?>">
<?php endif; ?>
</div>
<h2><?php echo $social_media_title; ?></h2>
<hr />
<?php $loop = new WP_Query(array('post_type' => 'social_media_feature','orderby' => 'post_id', 'order' => 'ASC')); ?>
<?php while($loop->have_posts()) : $loop->the_post(); ?>
<div class="col-lg-2 col-centered">
<?php
if (has_post_thumbnail()) {
the_post_thumbnail();
}
?>
<?php endwhile; ?>
</div><!-- /.col-lg-2 -->
<p>See more on Facebook »</p>
</div>
</section>
<?php get_footer(); ?>
In the style.css file you will see some selectors commented out because after turning this into WordPress dynamic they seem to be ineffectual.
Style.css file:
/*
Theme Name: Mirror and Glass Theme
Author: Daniel Cortes
Author URI: http://dancortes.com
Description: Theme developed for MediaFuel
Version: 1.0
*/
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
background: url('/wp-content/themes/mirror_glass/assets/img/tile.jpg') top left repeat;
}
h1,h2,h3,h4,h5,h6 {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-weight: bold;
font-family: "Comic Sans MS", cursive, sans-serif;
text-align: center;
}
a {
color: #000000;
}
a#gallery {
color: white;
font-size: 24px;
}
/*Non-Bootstrap CSS*/
.content-region-1, .content-region-2, .content-region-3 {
/*text-align: center;*/
/*float: right;*/
}
#customer-testimonial {
background: #3e4249;
color: white;
}
#showroom {
text-align: center;
}
.btn-danger {
padding: 10px 20px;
margin-bottom: 10px;
font-size: 20px;
border-radius: 10px;
}
.btn-default {
border: none;
background-color: transparent;
font-size: 24px;
}
/*.col-centered {
display: inline-block;
float: none;
}*/
.container {
max-width: 1020px;
}
.navbar-default {
background-color: white;
margin-bottom: 0;
}
.header {
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
.header h3 {
margin-top: 40px;
margin-bottom: 10px;
line-height: 40px;
}
.carousel-image {
margin: 0 auto;
}
p {
margin-top: 4px;
}
a.link {
font-size: 20px;
}
a:hover {
text-decoration: none;
}
a.btn-default:hover {
text-decoration: none;
}
.fa {
font-size: 98px;
margin-top: 10px;
margin-bottom: -10px;
opacity: 0.1;
}
.facebook-page {
position: relative;
line-height: -0.8;
}
/*.col-xl-2 {
margin: auto;
text-align: center;
width: 100%;
display: block;
}*/
#indy-glass {
background: white;
}
.footer {
padding-top: 19px;
text-align: center;
color: #777;
border-top: 1px solid #e5e5e5;
}
.content-region-4 {
background: #000000;
color: #ffffff;
}
.side-widget {
margin-bottom: 40px;
}
.side-widget h3 {
border-left: 5px;
padding-left: 10px;
margin-bottom: 15px;
}
/*==== MEDIA QUERIES ====*/
#media screen and (max-width: 991px) {
.img-rounded {
margin: 12px;
}
}
i'm new with jQuery !
i have a CSS file named "Slider.css" that contains the following code :
.banner1 {
/*background: url(../images/bnr1.jpg) no-repeat 0px 0px;*/
background-size: cover;
min-height: 650px;
}
.banner2 {
/* background: url(../images/bnr2.jpg) no-repeat 0px 0px;*/
background-size: cover;
min-height: 650px;
}
.banner3 {
/* background: url(../images/bnr3.jpg) no-repeat 0px 0px;*/
background-size: cover;
min-height: 650px;
}
what i want is to change the url of the background in page called home.ctp according to data that i get from database so i tried this :
<?php $i=1; ?>
<?php foreach ($query as $slider): ?> // query contain 3 items
<div class="slid banner<?= $i; ?>">
<div class="caption">
<h3><?= $slider->titre; ?></h3>
<p><?= $slider->contenue; ?></p>
know more
</div>
</div>
<script>
// alert(".banner<?= $i; ?>");
$(".banner<?= $i; ?>").css({"background": "url(../images/<?= $slider->url ?>) no-repeat 0px 0px;"})
</script>
<?php $i++; ?>;
<?php endforeach; ?>
So i tried $(".banner<?= $i; ?>").css({"background": "url(../images/<?= $slider->url ?>) no-repeat 0px 0px;"}) but it doesn't change anythnig..
How can i change the css of Slider.css from php Loop using jQuery !
Thanks for help
Basically, you're doing it wrong. You don't need and shouldn't be using jQuery for this.
This is what you want:
.banner {
background-size: cover;
min-height: 650px;
}
<?php foreach ($query as $slider): ?>// query contain 3 items
<div class="slid banner" style="background: url(../images/<?= $slider->url ?>) no-repeat 0px 0px;">
<div class="caption">
<h3><?= $slider->titre; ?></h3>
<p>
<?=$ slider->contenue; ?></p>
know more
</div>
</div>
<?php endforeach; ?>
You don't need jQuery to achieve this. If $slider->url contains the URL of your background image, just do:
<?php $i = 1; foreach ($query as $slider): ?>
<div class="slid banner<?php echo $i; ?>" style="background-image: url(<?php echo $slider->url; ?>)">
// ...
</div>
<?php $i++; endforeach; ?>
Indeed, your CSS already defines the background image, you shouldn't even need this. Just the <div class="slid banner<?echo $i; ?>"> does the trick.
I'm trying to get these three images on this page to load in one after each other. When I set it to "Inline-Block" in css, it works, but the images get really small.
https://www.palmersdeliandmarket.com/holiday/
Here's my CSS:
.categories ul li a.current { font-weight: bold; }
#shopp .category { position: relative; display: inline-block;}
#shopp .views { display: inline; position: absolute; right: 0; top: 0; }
#shopp .views button { border: 1px solid transparent; background: none; cursor: pointer; padding: 2px; margin-bottom: -3px; }
#shopp .views button.hover { background-color: #ebebeb; border: 1px solid #777; }
#shopp .views li { display: inline; }
#shopp .orderby { float: right; }
and my HTML:
<?php if(shopp('category','hasproducts','load=coverimages')): ?>
<div class="alignright"><?php shopp('category','pagination','show=10'); ?></div>
<ul class="products">
<li class="row"><ul>
<?php while(shopp('category','products')): ?>
<?php if(shopp('category','row')): ?></ul></li><li class="row"><ul><?php endif; ?>
<li class="product">
<div class="frame">
<?php shopp('product','coverimage','setting=gallery-previews'); ?>
<div class="details">
<h4 class="name"><?php shopp('product','name'); ?></h4>
<p class="price"><?php shopp('product','saleprice','starting=from'); ?> </p>
<?php if (shopp('product','has-savings')): ?>
<p class="savings">Save <?php shopp('product','savings','show=percent'); ?></p>
<?php endif; ?>
<div class="listview">
<p><?php shopp('product','summary'); ?></p>
<form action="<?php shopp('cart','url'); ?>" method="post" class="shopp product">
<?php shopp('product','addtocart'); ?>
</form>
</div>
</div>
</div>
</li>
<?php endwhile; ?>
</ul></li>
</ul>
<div class="alignright"><?php shopp('category','pagination','show=10'); ?></div>
</div>
<?php else: ?>
<?php if (!shopp('catalog','is-landing')): ?>
<?php shopp('catalog','breadcrumb'); ?>
<h3><?php shopp('category','name'); ?></h3>
<p>No products were found.</p>
<?php endif; ?>
<?php endif; ?>
Thanks, any help is appreciated.
display: inline-block + width: auto gives a width only large enough to fit the contents. Add width: 100%.
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