When I insert an image in Dreamweaver: how do I align it freely like move and place the image wherever I want istead of using the alignments?
You may want to use a "div" element and put your image inside of it.
Or you can set style of the image as "position absolute".
You can use align attribute in HTML code in the div tag.
<div align="center">
This is some text!
</div>
You should have to use a div with its property of float(either left or right)
You can use in such a way as follows:
<div id="xyz" style="float : left; position:relative">
hello world
</div>
Related
i want to align my text verticaly with tailwind css and im stuck
you see the black line i want all my text to start there
<div class="w-60 bg-red-200 flex items-center flex-col">
<h1 class="">Loremipsm dolor.</h1>
<h1 class="">Lorem, hj dolor.</h1>
<h1 class="">Lom, ipolor.</h1>
<h1 class="">Lorem, ipsumolor.</h1>
</div>
Just wrap all h1 tags inside one div that would work look the example:
https://play.tailwindcss.com/m24PPlLUfH
If you using tailwind & flexboxes probably you should use class
justify-center
documentation about it
I'm using OctoberCMS and my thumbnail gallery is generated this way:
<img src="{{ image.thumb(250, 250, {mode:'crop', offset: [0,100]} ) }}">
The offset value will "overshoot" the picture, if the picture format is 1:1.
I'm looking for a way to get the very top of every image size, like the css property
background-position: 0% 0%;
Do you have any ideas?
Here's a picture, where you can see that twig "overshoots" in the top row:
Example
For this, you can use background-image property of CSS and with background-image property you can use background-position property.
For background-position property, you have more options here.
Note: For using backgrond-image property you have to use auto mode in thumbnail generator function.
If you have defined any link on that image you can use background-image property on the link and give inline CSS on it, like below
<a href="your_url"
style="background-position: center top; background-image: url({{image.getThumb(250, 250, 'auto')}})">
</a>
or Instead of <a> tag, You can use any HTML tags like <div> and give CSS Properties(particular height and width) for that <div> and manage your view.
Try this, and tell me your reviews.
Hi we've recently started making custom elements in Aurelia. One of the rules we have established is that we cannot put class names on custom elements when using them.
This is causing problems for me because the custom element itself doesn't have any properties so it breaks a lot of styling.
In particular it breaks when put inside a flex-container.
I have read on developers.google.com that you can style the custom element using the :host selector, but I can't find any mention of this for Aurelia and I'm struggling to get it to work.
I have a codepen to demonstrate the problem here.
You can style custom elements f.i. by referencing the element itself, like this:
o-custom-element {
color: white;
background: green;
flex-grow: 1;
}
I've forked your codepen to show the change: http://codepen.io/anon/pen/ZeEdLL
Put your custom element in the flex-item div:
<div class="half-container">
<p>Breaking because of custom element (Flex container is yellow)</p>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item green">
<o-custom-element></o-custom-element>
</div>
</div>
</div>
If you want to use :host, you'll have to put it in a <style> element inside the Shadow DOM of your custom element: http://codepen.io/anon/pen/LWYwxK
The problem is that you'll have to duplicate the rules and it's worse than adding classes to custom element...
Is is possible to select part of a text using just CSS selectors?
For example:
<p id="myparagraph">
Your order id is 7654. Thanks for your order.
</p>
I now I can select text from paragraph via $('#myparagraph').html()
But is it possible to select only the numbers 7654 from that text using just CSS selectors?
I'm not in control of the source HTML, so unfortunately I cannot alter the text.
In this case you have use span tag like this
<p id="myparagraph">
Your order id is <span class="number">7654</span>. Thanks for your order.
</p>
After then you can write your css code by calling the selector like this.
span.number {
color: red;
}
I would like to know how Wikipedia does its search field. What I mean by this is two things: Its gradient and its button.
How does it make a gradient in the field? This can be easily done with CSS cross browser at this point, but when you do the IE CSS code, it aliases the text. Wikipedia has a gradient background, but the text is still anti-aliased! How do they do that?
Also, how did they put a clickable search button INSIDE the text field?
Thanks.
It appears that the actual search input has no styling -- meaning no border and a transparent background. The containing div is styled to look like an input field (border and gradient). The clickable button is inside the div but not inside the actual input element.
You could just look at the code. The search box as it appears is only a div element with a border. This div itself has the gradient set via CSS (background-image). As you can see the button element is also not inside the text field.
<div id="simpleSearch">
<input id="searchInput" name="search" type="text" title="Search Wikipedia [f]" accesskey="f" value="" />
<button id="searchButton" type='submit' name='button' title=""><img src="[x]" alt="Filltext" /></button>
</div>