I have 9 boxes in my Wordpress website and I built them with svg images (Link). Even texts are not actual texts. I want to rebuild the boxes and use actual texts in each box. Obviously, I want to place the text in a way that doesn't change in any screen size, Using custom CSS.
I only could build the blue rectangular button with actual text and couldn't build the text part and discount label with actual texts (see the link above).
Generally speaking, I want to know how can I position something depend on another element. In this case the texts' positions would be depended on other parts of the box. The texts should preserve their position and shape in every screen size.
First add these styles to your div.ServicesPageBox
display: flex;
justify-content: center;
Then wrap the svg inside that div.ServicesPageBox with another div and set these styles to that div
position: relative;
Next put your text inside that div and make them
position: absolute;
Then control the position of text with top and left. The position of text is now relative to the svg.
You can also add z-index: 10; to your text to make sure that's on top of svg
Seeing your code would help diagnose the issue... one thought I have is using z-indices (give the text a z-index of 10 and the images a z-index of 0, then % or em or fr spacing options to align them accordingly.
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.
I am using an XML editor called Madcap Flare that allows me to create image maps using a GUI. Since that makes the maps easily editable, I would rather use that technique. Unfortunately, the code it renders is not a CSS image map, but an HTML one (map, area, etc.). I do not want to switch to a CSS image map, because I want to do easy editing in the GUI.
I want my image map to align right with text to the left of it. I have tried the following techniques with the indicated results:
Technique 1: I floated the div containing the image right with CSS.
Result: The image map no longer works, but the image floats right and the text wraps.
Technique 2: I floated the image right with CSS.
Result: The image floats right, but the div remains on the left. The text does not wrap and the image map no longer works.
Technique 3: I set the div align="right" and removed the CSS completely.
Result: The image floats right and the image map works, but the text no longer wraps.
I've noticed the image map only breaks when I float the image or its container; I even floated left to experiment and saw the same results. Is there no way to float an image map? I wondered if the issue were an image resizing issue, but I inspected the code and the image map is no inheriting any image size styles. I also set the image to max-width and max-height 100% in my tests to make sure it wasn't shrinking at all, but I saw the same results again. I also think that the HTML align=right experiment indicated that the problem was not an inherited style.
Any tips/tricks? Or any confirmation that you cannot float an image map? Thanks.
If the div containing the image map has a fixed size and is at the upper border of its parent DIV, you could do the following:
Create an empty DIV with the same size as the one containing the image map and make that float right (at the top). No border, no background, no contents. The text will float around that one.
Apply position: relative to the parent DIV and position: absolute to the div containing the image map. Apply top: 0;, right: 0 and the width and height as the empty floated DIV.
This places the image map above the empty floated DIV and the text floats around it.
Simple question: I need an image to appear in the middle of a paragraph of text, however, the image is slightly larger than the height of each line of the font, so it pushes open a horizontal "gap" in the text to make room for itself. To fix this, I could:
1) Shrink the image, so that it is not larger than the font.
2) Use Position:Absolute
But I don't want to shrink it any further, it is small enough already to "technically fit" between each line of text, except that it would need to use up a few pixels of the white area above and below the line of text it is in.
And I can't use position:absolute, because then the image's position would be in the top left corner of the window, instead of in the paragraph where I want it.
I thought perhaps I could put a dummy "placeholder" image of size 1 pixels into the paragraph. Then, use Position:Absolute on my real image, and continually set my real image to be at the same location where the dummy image is. I haven't researched to see if that is possible, but it seems a bit excessive for such a simple thing. Is there an easier way?
EDIT: I found that adding: margin:-20px; to the image's style works!!!
margin:-20px;
JSFiddle example: http://jsfiddle.net/j7tLX/3/
Images are block level elements if you want them to appear inline with the paragraphs. Do this.
img {
display: inline;
}
You can use vertical-align: top
http://jsfiddle.net/j7tLX/4/
See http://css-tricks.com/what-is-vertical-align/
I want to achieve the effect described in the following question, but using CSS.
I remember seeing somewhere that this now can be done with HTML5, but now can't find the property name.
Stretching an UIImage while preserving the corners
You'll have to use 3 different images.
First, go into photoshop or Gimp or something and break the arrow image you have into 3 parts. The left side with the curve, and the right side with the arrow part. Save them as 3 different images.
Once you've got your images. Create one HTML image element:
<img src="img-middle.jpg" />
In your CSS, apply styling to the before and after pseudo-elements and add the two image bits that you don't want stretched.
img:before {
contents: '';
background: url('img-left.jpg');
height: 50px;
width: 20px;
position: absolute;
left: -20px;
}
img:after {
content: '';
background: url('img-right.jpg');
height: 50px;
width: 40px;
position: absolute;
right: -40px;
}
Make sure you change the width, height, left and right values to match the width and height of your two image files. This CSS allows these bits of the image to be added on to the left and right sides, no matter how wide the element is stretched. It's also cool since it's only one element, so the CSS stays pretty clean except for the requirement of the empty content:''; property.
So then you can stretch your middle image element dynamically. Lets say you want he arrow to stretch, have some jQuery that animates the width of the element, then the middle part will stretch and the corners will stay intact since they're technically not part of the original element, they're just appended.
ETA: As for the method described in the objective-C related post, there's no CSS property that breaks apart images like that unless it's in some obscure webkit nightly build that I've never heard of. Your option here is to break apart the other two sides. You could also combine the left and right portions of your image into a sprite and use the background-position:; CSS property to select bits of the image so that way you'd only have two image file requests, as you want to keep those low to speed up page load time.
you can create an element, assign pseudo elements to it for the left and right side caps, and use a CSS3 transition applied to the width property in order to achieve this effect.
i've set up a working demo on jsFiddle to illustrate how it's done. this demo uses background colors, but one could use images as well (repeating along the X axis for the center element).
check out the HTML5 rocks playground, you'll find some fascinating snippets demonstrating the power of CSS3 and HTML5 (naturally) and can use it as a quick reference as well.
Did you mean CSS3?
I think border-image is pretty much what you're looking for. It lets you take a single image and transform it into the border of an element.
It's kinda hard to work with, so Mozilla made a wonderful WYSIWYG editor:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator
I want to achieve something like this:
A) Is an square image, say 65x65.
B) This icon is another image which
need to be floated inside A.
C) The minimum length of the row is
the height of A. The maximum depends
of the length of the text
description.
Usually when I have floating images like A and B, I would put my container position as relative, and obsolute for the floating image, and that will do it, but I'm a little lost with the text here.
This is just going to be used on webkit browsers, if that is of any use.
If the image size is fixed and unlikely to change in the future, then I'd recommend applying position absolute to the image (what you're saying). I'm guessing your problem is that if the text is too short, the height of the image would exceed the height of the container. This is easily fixable with min-height:
.module {
min-height: 65px; /*your image height*/
}
You can view a demo here:
http://jsfiddle.net/RkeJJ/
This should work all the way down to IE7.
If your image size is variable, then I'd recommend display: table/table-row/table-cell, but this will work only on IE8+ and the rest of the modern browsers.
Me debes una caña! ;)
You know the width of image A (the large image). The title goes in a h1 for example, and the text in a p (or div), so set these two elements to have a left margin greater than the width of image A.
You can then float image A to the left and position the icon B over the image using absolute positioning.
Finally, I would have a wrapper div with overflow: auto to have a border (if needed) and to allow for a bottom margin to provide white space between the following element.
Partial answer: see my code snippet at http://jsfiddle.net/audetwebdesign/Nam52/
You just need to add the date element after the title.