Hello everyBody
I've created a slideShow (with left and right arrows) , displaying images in three set, images are aligned horizontally, and every image is contained in a li element with a link (headline) as follows:
<li><image src="image_n.jpg"></image>Google search engine</li>
ok my question is , how can I put the headerline ("a" tag) so it covers the bottom of the image using css.
thank you
I'd use a combination of display: block and either a negative top margin or position: relative and a negative top.
li a /* or a unique identifier if it's just this instance */
{
display: block;
margin-top: -1.1 em;
}
or
li a
{
display: block;
position: relative;
top: -1.1em;
}
I'm using em as a unit because 1em is equal to the font size. This means that margin-top: -1.1em will be (approximately) a little bit more than the height of one line of text.
Instead of using an image tag, I would suggest using the background-image CSS property on the list. That way, the text will just flow over the image naturally.
You have one of two options:
Wrap the Image tag with the anchor tag like so:
<li><image src="image_n.jpg"></image><psan class="caption">Google search engine</span></li>
Remove the image tag and define the image in the background:
<li><image src=""></image>Google search engine</li>
I prefer the latter of the two.
Related
How can I center my image in white space?
I am using HTML, PHP or CSS. I am not sure of the best approach, but that is what I have involved so far.
I only saw how to align an image within text on w3schools.com. My other attempts, such as:
#image {
margin-left: auto;
margin-right: auto;
}
only make the image disappear.
<img> is not block level tag (its inline level tag ) . So you have two choices in css . one is Using : display:inline-block and then giving margin : 0 auto , which is used when you are adding more than one image in a line .
second is do the same about margin but this time , use display:block; ;
I wish this could help .
The standard way to horizontally center an image (or any element) in CSS is:
img {margin:0 auto;)
This is the short version of:
img (margin:0 auto 0 auto;}
which, in turn, is shorthand for:
img {margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;}
=====
If the standard method above does not work (perhaps because of conflicting CSS elsewhere in the stylesheet?), there is an alternative way to horizontally center an image (or any element) in CSS IF you know the width of the element.
Assuming the width of the <img> is 100px:
img {position:relative; left:50%; margin-left:-50px;}
It works because:
1) with margin-left:-50px; you are telling the browser to consider the left-hand margin of the element as being exactly in the middle of the 100px-width element
2) with left:50%; you are telling the browser to position the left-hand margin of the element exactly in the middle of the element's parent
And so, of course, when you place the middle of the element in the middle of the element's parent, you have succeeded in horizontally centering the element.
=====
If you are styling for contemporary browsers, you can use the Flexible Box Layout module from CSS3:
img {display:flex; justify-content:center;}
first way
set margins to 50% on both sites
#image {
margin-left: 50%;
margin-right: 50%;
}
this should center your html-object.
second way
sometimes this doesn't work for me, so i use the deprecated tag <center>.
<center>
<img src="/img.png" alt="blubb">
</center>
< div style="margin:0 auto" >
....image...
< /div >
If you want it center of the page add width:100%
I've been trying to figure this problem out, but no luck. There's probably a simple solution that I'm missing. I'm working on a Home Page template that has 4 featured products. The featured products end up showing diagonally and the images also overlap the title, price, and add to cart buttons. If anyone can help, that would be great!
Here's a link to the page that the template is on: http://playground.krisyoungboss.com/home/
(Going to change the front page displays later)
And also here is the shop page link if anyone needs to compare: http://playground.krisyoungboss.com/shop/
Thanks❤️
You've got a collection of things going on.
First, the reason the things are showing diagonal is because you have a <pre> element in your code. I suspect you may have copy-pasted a shortcode, and in doing so picked up the <pre> they had wrapped the shortcode with.
So, first things first, edit that page in the WP dashboard, and change to the text view (tab in the top-right corner of the editor area). Look for this:
<pre class="brush: php; gutter: false">
Find it, and remove it (don't forget to remove the closing </pre> tag also).
Then, the reason your images are covering up the content below is because of this declaration in your stylesheet (on line 228 of your stylesheet):
img.wp-post-image {
border: 5px solid #000000;
border-radius: 5px;
float: left;
height: 300px;
margin-bottom: 15px;
margin-right: 10px;
width: 300px;
}
The float:left is applying to the images in your featured section, which is causing the problem. Additionally, the height / width are not good (although they are being overridden by other styles).
Remove float:left, or else add a style like so (after the above styles in your stylesheet):
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
float: none;
}
Finally, your add-to-cart button is too wide. You need to address the styles for it, also - it's spilling out of the parent li elements.
Hi There is problem that i am facing in only in one post of the wordpress.The image that is inside a tag in tag is coming bigger than the actual size of the div. because of this user is not able to differentiate between to different post.please check the image
here is the link where you can check.
Link
The image is floating left so it's parent DIV ".entry-summary" needs to expand to accomodate the floating element.
To do this you need to add "overflow: hidden" to ".entry-summary".
.entry-summary {
overflow: hidden;
}
you could try:
#div img{min-width:100%;height:auto}
This will keep the aspect ratio, unless ofcourse you want to cut if off with the overflow
You can add a float: left to the content, like below:
.entry-content, .entry-summary {
margin: 1.5em 0 0 0;
text-align: justify;
width: 735px;
float: left;
}
This will cause the div to stretch around all of its contents :)
I have designed an html iframe where I want to use the word-wrap property, i.e., it should break long words onto the next line. But what happens instead is that for long words, it adds a horizontal scroll-bar rather than breaking the word onto the next line.
I tried hiding the scroll bar by using "overflow:hidden" property , but nothing happens.
I could use some help here.
Here's the html code for iframe:
<div id="main_frame" >
<iframe id="main_frame" src="homedept.php" name="iframe_a"></iframe>
</div>
The CSS is:
div#main_frame
{
float: left;
margin-top:198px;
margin-left:5px;
float:left;
position:relative;
width:100%;
height:900px;
z-index: 0;
word-wrap:break-word;
}
iframe#main_frame
{
float:left;
margin-left: 30px;
margin-right: 300px;
float:left;
border:none;
word-wrap:break-word;
width: 78%;
height:70%;
z-index: 1;
}
Thanks for the reply #tyriar, I have set the word-wrap property to the original page now. Still nothing happens.
<div id="display_posts">
<?php //php echoes some text here ?>
</div>
The CSS code is:
#display_posts
{
word-wrap:break-word;
}
You defined same ID 2 times , but ID must be unique , you can not declare it twice.
So use class instead of using ID
Also iframe call other page and you defined word-wrap in original page so its not apply.
Try
word-break:break-word
or
word-break:break-all
And try using class instead of ID because ID should be unique.
You can't apply word-wrap to an iframe, it's a completely separate page and styles from your original page won't apply. You would need to change the styles on the page where the iframe points.
Also id attributes must be unique, you have set id="main_frame" on both an iframe and a div.
Update
If word-wrap:break-all is on the iframe then maybe the width of the page is introducing the scroll bar. Make sure that your elements scale down correctly with the page. If you load up the page in your iframe in your browser you should be able to reduce the window size without a horizontal scroll bar appearing. If one does then it's an issue with the minimum width of that page.
let's say that i have an image
It's size is
height : 150px width : 100px.
I want to get a part of it, let's say the full height, but with width between 30-80px. so it will be
height : 150px width : 100px.
I don't want to scale it. I want to cut a part from it. (thanks for editing, it's called cropping).
How to do it?
There is the (somewhat little-known) clip css property, although it does require that the element being clipped is position: absolute; (which is a shame):
img {
position: absolute;
clip: rect(0 100px 200px 0);
/* clip: shape(top right bottom left); NB 'rect' is the only available option */
}
Reference
jQuery cannot modify image elements like that. Your best option would be to position it within a parent element that has overflow:hidden to give the impression it is cut. Or you can use the clip CSS rule. If you actually wanted to make a new image you could use jQuery to gather coords on the image and patch those back to a server-side script to actually do the heavy-lifting and feed the new image down asynchronously.
Image editing is beyond the scope of JavaScript. You can display only a certain part of an image, but you can't actually change the image file:
<div id="imgwrapper"><img src="blah.jpg" width="100" height="150"></div>
#imgwrapper {
width: 100px;
height: 50px;
overflow: hidden;
position: relative;
}
#imgwrapper img {
position: absolute;
top: -30px;
left: 0;
}
Note that with this solution, the inner image is absolutely positioned but the outer div is relatively positioned, which may suit your page layout better than an absolutely-positioned and clipped image.
I think your best bet is to try and use a html canvas.
http://www.w3schools.com/html5/canvas_drawimage.asp
http://www.w3schools.com/html5/canvas_getimagedata.asp
Both allow for rendering parts of a source image, the getImageData() function also allows to read back the image data and manipulate it (for the whole image or parts of it).