When I float images on my WordPress site, the text is not aligned vertically with the image, but appears a bit lower on the page. I suspect this is to do with line-height of the text, but I'm not sure how to fix it.
Here's the example. Scroll to the bottom of the page under Recommended by:
http://www.myfiveacres.com/hidden-gems/saison-market-vineyard-duncan-bc-canada/
You should post your code, but one thing you could try is adding a negative top margin to your text.
margin-top:-*px;
And of course, replace the * with however many pixels are needed.
Related
For the needs of an internship project in WordPress, I decided to slightly superimpose a white block containing text, on the left of a photo.
These two elements are in a container.
This is my-figma-example.
I already tried to play with the z-index and the position, only it works on the text contained in the block and not on the block itself...
I also failed to paste the image on the right edge of the screen without the white block being stuck to the left edge.
Do you know how I can do this?
I have done the same with negative padding and z-index, remember to apply a lower z-index to the second column and not to the general horizontal block.
I'm working on a new site. I have a layout question. We are using bootstrap 5.
Here's the layout I need:
I'm having trouble with 2 things:
1 - the burgundy testimonial box on the right. It needs to overlap the orangeish image above it. I did this by add negative top padding to the div that contains the box. This moves the box up and causes it to overlay the orangeish image. This box will contain varying text and text this is browser drawn. So I can't use an image for the tesimonial. I'm wondering if there is a better way to do this - instead of using negative padding?
2 - The "Employment" text. It is browser drawn and is in it's own div above the page content div. Again I set a negative top padding to move the Employment text up and place it over the orangeish image. I could add the text to the image but that adds an extra layer of work for any new pages that might get created. Again I'm wondering if there is a better way to do this other than negative top padding.
Grateful for any suggestions!
I have a layering issue with a site that I can't seem to figure out how to get around.
Essentially, I have a float:right div that contains some linked images and a bunch of block divs on the same page (in the same wrapper). The text (content) all wraps as expected, but the block elements overlap the floated elements making the image links non-clickable. It becomes quite obvious when viewed using chrome/firebug/whatever that the blocks are getting in the way of the floats but nothing I have tried as yet has floated them to the top.
example from: http://wanganuilibrary.recollect.co.nz/nodes/view/280
What I need is a way of allowing the links on the images in the float to be clickable. The float can have a set width but not height, and the rest of the content needs to be free flowing and wrap under the float if/when required, so no forced padding or margins, e.g.: http://wanganuilibrary.recollect.co.nz/nodes/view/1519
Any ideas on how this could be achieved would be appreciated.
Usually columns like this are built using floats.
The left content column would be float: left with a set width.
The right content would be float: right with a smaller width.
Otherwise you can set the z-index of the anchors around the images to higher than the other content,
In this page I'm trying to vertically center the text "Details..." with "XYZ" using margin-top and margin-bottom, but to no avail. I also want to decrease the space between title and table.
Strange thing: when I put the red border around the title to see what I did wrong, the centered text dropped below the left and right floats (see bottom image). I just added a border, nothing else was changed.
Can someone please have a look at my code and suggest how to vertically align the title, and decrease the space below it?
give float to your div. without float property these all problems are occurring.
.class{
float:left;
width:100%;
}
Check this Link
In the normal prestashop theme, there is a box at the top of the category pages for a description of the category as a whole. The box has an outline and contains a picture and some text.
The text is normally below the image, so the block takes up a lot of room. I would like to float the image to the left, and wrap the text around it, so it's smaller.
I suspected this would be easy, because the image and text are in divs, and both of them are in another div for the outline. So I simply added float:left to the image's DIV.
The image moved to the right OK, and the text flowed too. However, the surrounding DIV did not resize properly, so the image now runs right out of the box.
How do I get the enclosing DIV to resize properly?
You need to force the containing div to wrap the floated contents. You can do this a few ways, one being to add overflow:hidden.
.content_scene_cat {overflow:hidden;}