Trying to create a Mailchimp template I am struggling with vertically centering the next inside a predefined layout element.
Screenshot here
Using a table it is possible to center the text in a way that I want but only given the height of the image in pixels which define the height of that row. Setting the table height to 100% has no effect.
Is there any way to - using HTML inside the editor - center this text without requiring any hard coded height?
I am hoping to find a solution without coding the entire element because I doubt I would end up with the same amount of responsivity.
Related
I would like to have a <div> located in the middle of its parent element, and have the text flow around it (similar to "wrap text" mode in Microsoft Word).
The following image shows what I am trying to achieve:
The image is placed somewhere in the middle of a paragraph and the text flows around it.
How can this be achieved with HTML/CSS?
Would any of the CSS properties display:flex, display:grid or clip-path: circle(),shape-outside: circle() solve this?
To formulate the question another way. It is possible to reposition an element in a way that affects the layout boxing (beside using margin)?
Because using position:relative just moves the visual rendering and doesn't affect the layout of another element and its content.
Hey I think what you need is shape-outside: circle();
This will make the text go around your shape.
Trying to build a reponsive header for my website.
I have 3 inline div (inside a parent div), first & last one have fixed width, & I want the middle one to horizontally fill the empty space. What is the best method to do that in CSS ? Should I use display: table ? I Hate table & I know they are not supposed to be used to create the layout of a website.
Should look like that : <-LEFTDIV-> <-----MIDDLEDIV---this one stretch to fill empty space> <-RIGHTDIV->
Any help would be appreciated !!
I'm trying to create a list of products using a <table> since it's basically a table with rows and columns.
I want to have one of the columns list whether the item status is available or unavailable, and I'd like to represent this with a little green icon if available, red if otherwise. I also want that icon to be clickable to change it.
So I Googled and found I might be able to position it if it's a background image, but I want it clickable, so that's no good.
I've tried all the vertical aligns and centers etc.. that I've read and tried margins and padding and all sorts but I can't get my little icon image to be in the middle (horiz and vert) of my little <td>.
To clear something up:
I just want to know how to align the image within the <td>. The image itself is the anchor, when its clicked, the page reloads and the icon chanages. I've tried positioning this image within the <td> but can't. That's my question: How to position it?
Not sure why you are having difficulty aligning your image within the table cell. Tables contain many helpful properties that help with alignment. Here's an example table with images aligned to the center of the table cell.
http://jsfiddle.net/Puppies4Life/zka5Q/
First of tables should only be used for data and a list of products isn't data. I'd recommend using either plain old divs or a UL with lots of floated LI elements.
For your icon it would probably be best to make it an 'A' tag and either have the icon sitting as an image in the 'A' tag or have it as a background to the 'A' tag.
To align it horizontally make it's parent container text-align:center.
I'll assume that each product is going to be an image and be a set height? If so then to align it vertically simply make the padding-top of the container the correct height to set it in the center.
Hopefully the above will work for you :)
jsfiddle link: http://jsfiddle.net/djDWF/84/
The problem is, the inner container (text-padding) margin/width for the text/images is affecting the center background image. The repeated image that touches the footer does not extend to full height, and cuts off so the center and footer images do not match up (it is kind of hard to tell, but if you add or remove text in my jfiddle example you can see the center image change where it meets the footer.).
This is for a school project, and though I did not need to actually do this type of image background, I got this far so might as well continue. I don't want to use javaScript if possible because that is not part of the course yet.
I tried removing the text wrapper and styling each p tag individually but the same effect occurs.
I also tried mathematical combinations using line-height and margins. If I set the line-height to equal the right and bottom margins, and the left margin to equal the height of the footer then the effect works, but because my footer image is so large this is not a workable solution.
Mathematically I tried to keep the same ratios with the footer height but this did not work either (or else I did this wrong. I tried dividing each by the same amount.)
Is there any way to do this using only CSS and and not having to resort to tables?
So in short the problem is: You can see a line showing up at the footer separation because the repeated centre background isn't fully showing it's last repeat as the container isn't big enough.
The solution: If it doesn't need to be variable and you know how much content you will be putting in you can just set a height: Live example - http://jsfiddle.net/djDWF/85.
div#background-center{
background:url(http://i.imgur.com/gsNFa.png) repeat-y;
float:left;
width:700px;
height: 1604px; /* add this */
}
Obviously, pick whatever height is right to fit your final text.
With your current images there is no way to do this automatically without using JavaScript.
I have a html layout done using absolutely positioned div elements and a backgroung image. I want to keep the layout the same vertically (each individual part/page representing a data set). I do not wan't to change the div positioning from absolute as this messes up things and I am running out of time for this.
I realize I can have multiple body tags each for every data set and as this html will finally be generated from xml using xslt this is not a problem.
The issue is that as the div elements are absolute they do not appear in the subsequent body tag (only background image appears). I tried changing to relative and the div actually moves to 'next page' (body element), but as there are several divs, when all are laid out they get misaligned.
I will be grateful for some advice on how to tackle this either by fixing my html in some way that will not be too time consuming or by using a tool that can combine several html content in to one flowing page. Any other piece of advice is also very welcome.
From what you've posted, which could really use some of your HTML as an example of what you're trying to do exactly, you should be able to simply wrap each of your "pages" in a div with the position: relative CSS style.
The inner content will then be positioned absolutely from the boundaries of its parent wrap. You would then want to move most of the styles you currently have applied to your body element (like a background image) to the wrapper divs.
Basic example: http://jsfiddle.net/AsWCN/2/