I should round the image in pdf. I generate a pdf with PHP that shows also an image inside. Everything works correctly. When I add "width" and "hight" to the image it works, but when I try to round the corners of the image it does not work. When I envelop image with div and add to div border-radius and overflow: hidden; -> overflow: hidden; does not work.
Here is part of my code:
<style>
.visuel-carte{
text-align: center;
margin-top: 25px;
margin-bottom: 40px;
position: relative;
border-radius: 20px;
background-color: green;
}
.visuel-carte img {
height: 270px;
width: 420px;
border-radius: 20px
}
</style>
<page>
<div class="visuel-carte">
<img src="<?php echo $eboutique['visuel_carte']; ?>"/>
</div>
</page>
maybe you have some idea?
I tried also
<div style="background-image: url('<?php echo $eboutique['visuel_carte'];?>')">
but it shows me an error
I found an error in my code:
does not work:
<div style="background-image: url('<?php echo $eboutique['visuel_carte'];?>')">
work (without a little quotes ;) ):
<div style="background-image: url(<?php echo $eboutique['visuel_carte'];?>)">
Related
I'm building site a with store images, although some stores don't have an available image. The best I can do is use its placeholder text to display the store title. However, by default the placeholder text is located at the top left of the div and is unstyled.
How can I target the placeholder text to style it??
UPDATE
Ok, maybe I should mention that I'm using WordPress. Perhaps using a simple PHP if else statement would suffice?? Show img if it exists, else show h4 element that I can add in.
Put the text into a and style it as you would for any other html element.
<div class="store-title">
This is where the store name goes.
</div>
If the text is already into an HTML element you can not modify you will have to use existing class or id to hook up to it and style it.
Of you can style the <img> element as well.
You can use line-height to vertically center:
HTML
<img title="Test Text" src="http://example.com/i-dont-exist.png" width="200" height="200" onerror="this.classList.add('no-image')" />
CSS
img.no-image {
color: red;
font-size: 20px;
line-height: 200px;
text-align: center;
}
JSFiddle demo: https://jsfiddle.net/ugr6gp8n/2/
Here's another way to style alt text but it only works in Chrome so it's not recommended:
HTML
<img title="Test Text" src="http://example.com/i-dont-exist.png" width="200" height="200" onerror="this.classList.add('no-image')" />
CSS
img[title] {
position: relative;
}
img[title]:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
color: red;
line-height: 200px;
text-align: center;
content: attr(title);
}
JSFiddle Demo: https://jsfiddle.net/cxa37mLd/1/
Sources:
Can I style an image's ALT text with CSS?
Positioning image alt text
CSS :after not adding content to certain elements
Why doesn't line-height work on img elements?
You can style some properties directly on img:
img {
color:red;
font-size:20px;
text-align:center;
line-height:200px;
}
<img title="Test Text" src="http://exmaple.com/123.jpg" width="200" height="200"/>
UPDATE 2
Ok this is resolved
HTML/PHP:
<?php if(have_posts() ) : while (have_posts() ) :the_post(); ?>
<div class="col-xs-12 col-sm-6 col-md-4">
<a class="store-item-link" href="<?php the_permalink(); ?>">
<div class="store-item" style="border-bottom: 10px solid <?php the_field('color'); ?>">
/* Starting here */
<?php if(wp_get_attachment_url(get_post_thumbnail_id()) == ''):?>
<h3><?php the_title(); ?></h3>
<?php else: ?>
<img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>">
<?php endif; ?>
/* Ending here */
</div>
</a>
</div>
<?php endwhile; endif; ?>
CSS
h3{
margin: 0;
font-weight: bold;
font-size: 3rem;
line-height: 175px;
text-align: center;
}
This worked great and thanks everyone for your ideas.
I have the following code in my html markup :
<div class="profile-img">
<img src="<?php echo $user_meta['profilepicture'][0]; ?>" />
</div>
This code generates a profile image or avatar.
I'd like to use it into CSS as a background image.
So this is what I am trying to use :
<div class="profile-img">
<style type="text/css">
.profile-img img { background-image: url('<?php echo $user_meta['profilepicture'][0]; ?>'); }
</style>
</div>
My CSS then looks like this :
.profile-img {
width: 90px;
height: 90px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 15px;
}
.profile-img img {
width: 80px;
height: 80px;
padding: 5px !important;
background: #fff !important;
border: none !important;
border-radius:500px;
-moz-border-radius:500px;
-webkit-border-radius:500px;
background-position: center center;
}
What I am trying to achieve is a round image thumbnail - avatar with proportionally cropped image.
But it seems that the code I am trying to use to call the image into CSS doesn't do the trick.
Where am I going wrong here ?
You have to add this rule removing background-image property that will be parsed via php.
.profile-img {
background-image: url('https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1');
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
width: 100px;
height: 100px;
}
<div class="profile-img"></div>
So your final html addition will be:
<div class="profile-img" style="background-image: url('<?php echo $user_meta['profilepicture'][0]; ?>');"></div>
If you want the image to be a background-image and not part of an IMG tag, and you need it to be dynamic, then you'll need something more like this:
<div class="profile-img" style="background:url('<?php echo $user_meta['profilepicture'][0]; ?>') no-repeat center center #ffffff"></div>
This will place the image as a background within the .profile-img DIV. Then you'd style just your DIV:
.profile-img {
width: 90px;
height: 90px;
margin: 0 auto;
text-align: center;
padding: 5px !important;
border: none !important;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%; }
To be honest, I haven't checked your CSS as I'm not sure what you are trying to accomplish beyond the circle shape. I changed your border-radius to 50% as that's what'll create a circle.
Im not sure, but a while back I used some css to have round corners for an webapp. Perhaps this will help you:
.myImg img{
-webkit-border-radius: 30px 30px 30px 30px;
-moz-border-radius: 30px 30px 30px 30px;
border-radius: 30px 30px 30px 30px;
}
Hope this helps
<script>
var imageSrc = "<?php echo $user_meta['profilepicture'][0]; ?>";
$('.profile-img').css('background-image',imageSrc);
</script>
I am by far not an expert with PHP, and could really use some help creating my logo below into a H1. This is in my body section of the site:
<!--logo-->
<div class="logo" style="float:left;">
<?php echo $html->link($html->image('rental_logo.png'),array('controller'=>'homes','action'=>'index'),array('escape'=>false)); ?>
</div>
<div class="logo" style="float: right; margin-right: 470px; padding-top: 40px;">
Here is what I tried to create the above logo into a H1 tag:
<h1>
<a href="<?php echo $html->link($html->image('rental_logonew.png')?>" title="http://example.net/img/rental_logo.png"><br/>
<img src="<?php (http://example.net/img/rental_logonew.png);>/images/rental_logo.png" alt="vacation rentals" title="logo"
</h1>
I am very inexperienced writing code. So, I know the above that I tried to enter is wrong. Should I also be altering my look.css file?
/* css */
#logo {
background: transparent url("http://example.net/img/rental_logo.png") no-repeat scroll 0% 0%;
float: left;
/*width: 200px;*/
padding-bottom:10px;
text-indent: -3333px;
border: 0;
margin: 0;
}
#logo a {
display: block;
width: 280px; /* larger than actual image? */
height: 120px;
text-decoration: none;
border: 0;
}
I am attempting to add "rendered html" as requested. This may be incorrect, because I am unfamiliar with rendered html. I obtained the above codes from my header.ctp and look.css files.
($html->image('rental_logonew.png'),array('controller'=>'homes','action'=>'index'),array('escape'=>false)); ?>
Thanks for looking, and helping if you can.
In the php code i dont see where you close the "a" tag, just follow the structure bellow. I hope it will work.
CSS:
#logo {
width: 344px;
height: 82px;
margin-top: 10px;
/*float: left;*/
background: url(../images/logo.png) no-repeat;
}
h1.logo {
width:344px;
height:82px;
margin:0;
padding:0;
}
h1.logo a {
display: block;
height: 82px;
text-indent: -3000em;
overflow: hidden;
}
HTML:
<div id="logo"><h1 class="logo" title="logo"><a title="logo" href="/">Logo</a></h1></div>
Demo here..
I have a problem with some HTML elements. I have an image and a title in a <header> tag - they should both move independently to each other, however when I move the img element down 40px with the margin-top attribute - the title seems to move down 40px with it. So I add margin-top: -20px; to move it back up and it seems to stay put.
Here's my code:
The header file:
<div class="page">
<header>
<div class="titlesec">
<img class="circular" src="themes/default/image.jpg" />
<a class="logo" href="<?php echo base_url(); ?>">
<?php echo site_name(); ?>
</a>
</div>
<div class="split"></div>
</header>
The footer file:
<footer>
<p>© Copyright <?php date("Y"); ?> Duncan Hill</p>
</footer>
</div>
</body>
</html>
and my css:
.page {
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
.logo {
font-family: 'Helvetica Neue';
font-weight: 100;
font-size: 56px;
text-decoration: none;
color: #555555;
margin-top: -20px;
}
.split {
height: 1px;
background-color: #CCCCCC;
}
.circular {
margin-top: 40px;
width: 80px;
height: 80px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
.titlesec {
height: 150px;
}
Any help is appreciated immensely!
img and a are inline tags. Which means they are in the same line. Adding margin-top manipulates this line, and affects therefore both of them.
Depending on what you want to do, you could solve this with surounding both elements with their own div. Then you can style the divs independently. Maybe a float on those divs comes in handy, too.
Close your "page" DIV. It seems that your not properly closing your html tags.
I want to know how to show a zoom button over an image in html when mouse hovers over it.
till now i have tried this
<img src="images/zoom.jpg" width="40" height="40" border="0" style="background:URL(http://news_image/<?php echo $getrs['image']; ?>) ;" />
But here the main problem is that how to set size of the background image and how to show the zoom.jpg when only mouse hovers it otherwise not. Also how to place the zoom.jpg in the lower right hand side of the background image when mouse hovers the background image.
I had asked this question before but i was not specific at that time but now i had tried to be specific.
Please help me in this matter.
Thanks
Somdeb
Consider this simple, clean and elegant example using minimal markup:
HTML:
<a href="#" class="zoom">
<span></span>
<img src="/path/to/image.jpg" />
</a>
CSS:
.zoom {
border: 5px solid #000;
display: inline-block;
position: relative;
}
.zoom span {
background: url(http://i.imgur.com/T7yFo.png) no-repeat;
bottom: 0;
display: block;
height: 20px;
position: absolute;
right: 0;
width: 20px;
}
img {
height: auto;
max-width: 100%;
}
If you'd rather only show the magnifying glass on :hover, change the CSS to reflect:
.zoom span {
...
display: none;
...
}
.zoom:hover span {
display: block;
right: center;
top: center;
}
This will place the zoom image in the middle of the image on :hover.
As an added bonus, you can change the mouse cursor to a custom image (e.g. a magnifying glass), further suggesting to the user that the image can be enlarged.
.zoom img:hover {
cursor: url(http://i.imgur.com/T7yFo.png), -moz-zoom-in;
}
This should do the trick:
<style>
a.image {
display: block; /* So that you can set a size. */
width: 100px;
height: 100px;
} a.image div.zoom {
display: none;
width: 100px;
height: 100px;
background-image: url(URL_TO_ZOOM_PICTURE);
background-repeat: no-repeat;
background-position: center center;
} a.image:hover div.zoom {
display: block;
}
</style>
<a class="image" href="<?php echo $getrs['image']; ?>"
style="background:URL(http://news_image/<?php echo $getrs['image']; ?>);">
<div class=".zoom"><!-- --></div>
</a>
The a tag holds the URL and the image. The zoom button is placed within the tag, and I have left it as a simple empty div tag which holds the image. Once the a tag gets hovered over, the tag will appear showing the image. The best about using this is that the zoom button can be transparent, and be placed simply in the middle of the image, and you don't have to worry about any JavaScript.
CSS:
img {
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
}
img:active {
-webkit-transform: scale(2);
transform: scale(2);
}
This is correct in CSS http://jsfiddle.net/8c7Vn/301/ || UP
also this CSS Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.pic{
width:50px;
height:50px;
}
.picbig{
position: absolute;
width:0px;
-webkit-transition:width 0.3s linear 0s;
transition:width 0.3s linear 0s;
z-index:10;
}
.pic:hover + .picbig{
width:200px;
}
</style>
</head>
<body>
<img class="pic" src="adam_khoury.jpg" alt="Adam">
<img class="picbig" src="adam_khoury.jpg" alt="Adam">
<img class="pic" src="heart.png" alt="heart">
<img class="picbig" src="heart.png" alt="heart">
<img class="pic" src="hardhat.jpg" alt="hardhat">
<img class="picbig" src="hardhat.jpg" alt="hardhat">
</body>
</html>
Edit: Just realized you don't want to resize the image on the page.
You will probably want something like:
<a class="ImageZoom" href="news_image/<?php echo $getrs['image']; ?>">
<img src="yourimage.ext" height="40" width="40" />
<div class="Zoom"><img src="images/zoom.jpg" /></div>
</a>
<style>
.ImageZoom{
display:block;
position:relative;
}
.ImageZoom:hover .Zoom {
display:block;
}
.Zoom {
display:none;
position:absolute
bottom:0;
right:0;
}
</style>