I can't best describe this in words, so I'll show you with pictures.
Here's how my designer intends the Gravatar images to look in the sidebar of our site:
Here's the overlay image I made (screenshotted from Photoshop):
Here's how it looks right now...
Not quite ideal, I think you'll agree. This is the CSS code I am using:
.gravatarsidebar {
float:left;
padding:0px;
width:70px;
}
.gravataroverlay {
width:68px;
height:68px;
background-image: url('http://localhost:8888/images/gravataroverlay.png');
}
And here's the XHTML (and a sprinkle of PHP to fetch the Gravatar based on the user's email address, which is fetched from our database):
<div class="gravataroverlay"></div>
<div class="gravatarsidebar">
<?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?>
</div>
So what can I do? I can't use relative positioning as it makes the word 'Search' in the div below stay moved to the right.
Thanks for your help!
Jack
Have you tried using z-index to force the two images to overlay? Maybe something like this? Here is a pseudo example.
<div class="gravatar-sidebar">
<img class="overlay-image" src="images/gravataroverlay.png" />
<?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
echo '<img src="' . $gravatar_link . '" alt="Gravatar" class="gravatar-image"/>'; ?>
</div>
/*CSS*/
.gravatar-sidebar {float:left;padding:0px;width:70px;position:relative;}
img.overlay-image{position:absolute;left:0px;top:0px;z-index:10;}
img.gravatar-image{position:absolute;left:0px;top:0px;z-index:1;}
You can't use relative positioning where? On the gravatar image?
I have to wonder why you have your overlay div outside the container of the image itself. At the very least they should be siblings. Make a container that only holds the image and the overlay, then make the overlay positioned absolute at 0,0 to be on top of the image.
<div class="gravatarsidebar">
<?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68';
echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?>
<div class="gravataroverlay" style="position:absolute; top:0; left:0;"></div>
</div>
Related
I'm using Bootstrap 4.
My question is quite simple: how to put an image side by side with a text using bootstrap ?
This is my code:
<div class="card-content">
<div class="portfolio-desc">
<h3><?php echo $galleryTitle; ?></h3>
<img id="authorImg" style="border-radius: 50%; height: 36px;" src="<?php echo $author_photo; ?>" />
<span id=authorSpan"><?php echo $galleryAuthor; ?></span>
<span>Gallery: <?php echo $galleryName; ?></span>
</div>
</div>
How can I put "authorImg" side by Side with authorSpan ?
Now, each img, span etc are on new line .
Thanks
Images do not cause a line break by default, so it must be some additional css or other formatting. try removing some classes and see if that fixes the problem. If you find a class that causes the line break then add whitespace: nowrap; to that class; I tried this myself and the image was on the same line as the text so it may be some additional css you wrote.
Side note: your id does not have the first quote mark.
I'm using Bootstrap to create a image gallery
'<a href="../'.$img.'" class="col-sm-4 image-col" data-gallery>';
'<img src="../'.$img.'" class="img-responsive">';
'<figcaption>';
$desc;
'</figcaption>';
'</a>';
For some reason there are gaps when the gallery is processed.
I'm grabbing the data from a for loop and there should be no gaps.
All the images are the same height.
See below for better view
I have a shortcode/multiple feature image problem I'm hoping for a bit of help on.
My custom post type called rubow_medarbejder is displayed on a page with a shortcode. This works fine.
I need to add a second feature image. I've used the Multiple Featured Images plugin to do this. Problem is I can't get the image to display through my shortcode.
kd_mfi_get_featured_image_id() shows the id perfectly but when I type kd_mfi_get_featured_image() it brings this error message
Fatal error: Call to undefined function kd_mfi_get_featured_image() in /var/www/www.rubowarkitekter.dk/www/wp-content/plugins/Medarbejdere/medarbejdere_post_type_shortcode.php on line 22
The output part of my shortcode that provokes this error looks like this
$output .= '
<div id="medarbejder">
<div id="medarbejder-page-content-gray">' . kd_mfi_get_featured_image( 'hover-medarbejder-image-grayscale', 'rubow_medarbejder') . '</div>
<div id="medarbejder-page-content-img">' . get_the_post_thumbnail() . '</div>
<div id="medarbejder-page-content-navn">' . $meta['rubow_medarbejder_navn'][0] . '</div>
<div id="medarbejder-page-content-titel">' . $meta['rubow_medarbejder_titel'][0] . '</div>
<div id="medarbejder-page-content-telefon">' . $meta['rubow_medarbejder_telefon'][0] . '</div>
<div id="medarbejder-page-content-mail">' . get_the_content() . '</div>
</div>
';
Any hints to get this solved would be highly appreciated. Thanks!
Use Advanced Custom Fields plugin. Then add as much custom fields as you need. and use
echo get_field('my-other-featured-image');
To output.
You need to select image url and size in plugin to output like that.
I have a small issue. I searched for relative issues but couldnt find anything.
I would like to fix this issue without Scripting if possible, and without adapting body width.
So here we go. I would like the Logo to display INSIDE the box area as it appears on Maximized Window.
Also i would not like to put relative position to the element since it puts a large margin between header and Navigation Bar.
I've tried playing with body width and setting it in other container. No Luck.
You can see what i mean in here:http://imageshack.us/g/43/q3qr.jpg/.
And here is the code:
http://jsfiddle.net/NCZg8/4/`
>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<img class="Logo_wrapper" src="http://pizza-bar.gr/wordpress/wp-content/uploads/2013/09/PB_Logo.png"/>
</a>
</body>`
Note: try to stretch the "Result" Window and u will see what i mean.
Ty in advance.
In order to keep the element from going out of boundaries on the right side, you should be setting the right property instead of the left.
.Logo_wrapper{
position:absolute;
top:40%;
right:5%;
z-index:10;
}
Updated fiddle: http://jsfiddle.net/NCZg8/6/
Also i would not like to put relative position to the element since it puts a large margin between header and Navigation Bar.
In order for the logo to appear inside the header, it's important to set position:relative on the header element. To see a more detailed explanation of relative and absolute positioning, see here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Your problem of margin can probably be fixed with css.
I'm currently editing my premade layout downloaded in the internet and i would like to edit the "Read More" link to an image.
The best example that i want to achieve is like in the website of
www.hongkiat.com. When you hover Continue Reading, the background changes.
my code in the template is this:
<div class="entry">
<p><?php the_content('Read More...'); ?></p>
</div><!--entry-->
Thank you very much in advance!
You can add an HTML <img> tag as a parameter:
<?php the_content('Read more...<img src="' . get_bloginfo('template_directory'). '/images/leaf.gif" alt="read more" title="Read more..." />'); ?>
Assuming you have
<div class="entry">
<p><?php the_content('<span class="readmore">Read More...</span>'); ?></p>
</div><!--entry-->
You can add a behavior in CSS like so:
span.readmore{background-color:red}